diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js index dd55ea4b2..260b78a8e 100644 --- a/libs/tailwindcss-config/src/theme.js +++ b/libs/tailwindcss-config/src/theme.js @@ -10,33 +10,6 @@ module.exports = { current: 'currentColor', white: '#FFF', black: '#000', - neutral: { - // 250 - 23 = 227; (900-50) / 227 = 850 / 227 = 3.74449339207 - 50: '#fafafa', // FA = 250 - 100: '#ebebeb', - 150: '#dcdcdc', - 200: '#cdcdcd', - 250: '#bebebe', - 300: '#afafaf', - 350: '#a1a1a1', - 400: '#939393', - 450: '#858585', - 500: '#787878', - 550: '#6a6a6a', - 593: '#696969', // dark muted - 600: '#5d5d5d', - 650: '#515151', - 700: '#444444', - 753: '#3E3E3E', // dark -> 3F is muted - 750: '#383838', - 800: '#2d2d2d', // breakdown-background was 2C - 850: '#222222', - 900: '#171717', // 17 = 23 - }, - - 'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors - 'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors - disabled: '#8598A6', // 'fill-disabled': 'rgba(133, 152, 166, 0.25)' coral: '#FF6057', vega: { yellow: '#EDFF22', @@ -47,14 +20,12 @@ module.exports = { danger: '#FF261A', warning: '#FF7A1A', prompt: '#EDFF22', - progress: '#FFF', success: '#26FF8A', help: '#494949', }, 'intent-background': { danger: '#9E0025', // for white text }, - /*, data: { red: { @@ -155,7 +126,8 @@ module.exports = { extend: { boxShadow: { callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)', - focus: '0px 0px 0px 1px #000000, 0px 0px 3px 2px #FFE600', + focus: '0px 0px 0px 1px #FFFFFF, 0px 0px 3px 2px #FFE600', + 'focus-dark': '0px 0px 0px 1px #000000, 0px 0px 3px 2px #FFE600', }, }, }; diff --git a/libs/ui-toolkit/.storybook/preview.js b/libs/ui-toolkit/.storybook/preview.js index 259a4a7d6..a1851a064 100644 --- a/libs/ui-toolkit/.storybook/preview.js +++ b/libs/ui-toolkit/.storybook/preview.js @@ -1,19 +1,24 @@ import '../src/styles.scss'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, - themes: { + /*themes: { default: 'dark', list: [ { name: 'dark', class: ['dark', 'bg-black'], color: '#000' }, { name: 'light', class: '', color: '#FFF' }, ], - }, + },*/ }; export const decorators = [ (Story) => ( -
- +
+
+ +
+
+ +
), ]; diff --git a/libs/ui-toolkit/src/components/button/Button.tsx b/libs/ui-toolkit/src/components/button/Button.tsx index 5315a8170..d21426271 100644 --- a/libs/ui-toolkit/src/components/button/Button.tsx +++ b/libs/ui-toolkit/src/components/button/Button.tsx @@ -28,16 +28,15 @@ export function Button({ 'inline-flex', 'items-center', 'justify-center', + 'bg-clip-padding', 'box-border', 'h-28', 'border', 'text-ui', 'no-underline', 'hover:underline', - 'hover:border-white', - 'active:border-white', 'disabled:no-underline', - 'disabled:bg-disabled/25', + 'transition-all', ], { 'pl-28': !( @@ -47,30 +46,33 @@ export function Button({ className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline' ), - 'bg-white': variant === 'primary', - 'border-light-gray-50': variant === 'primary' || variant === 'secondary', - 'text-black': variant === 'primary', - 'hover:bg-white/70': variant === 'primary', - 'active:bg-black': variant === 'primary' || variant === 'accent', - 'active:text-white': variant === 'primary', - 'disabled:text-gray-50': variant === 'primary' || variant === 'secondary', - 'disabled:border-neutral-593': variant === 'primary', + 'hover:border-black dark:hover:border-white': variant !== 'inline', + 'active:border-black dark:active:border-white': true, - 'bg-black': variant === 'secondary', - 'text-light-gray-50': variant === 'secondary' || variant === 'inline', - 'hover:bg-white/30': variant === 'secondary', - 'hover:text-white': variant === 'secondary' || variant === 'accent', - 'active:bg-white': variant === 'secondary', - 'active:text-black': variant === 'secondary', - 'disabled:text-disabled': variant === 'secondary' || variant === 'accent', - 'disabled:border-disabled': + 'bg-black dark:bg-white': variant === 'primary', + 'border-black/60 dark:border-white/60': + variant === 'primary' || variant === 'secondary', + 'text-white dark:text-black': variant === 'primary', + 'hover:bg-black/70 dark:hover:bg-white/70': variant === 'primary', + 'active:bg-white dark:active:bg-black': + variant === 'primary' || variant === 'accent', + 'active:text-black dark:active:text-white': + variant === 'primary' || variant === 'accent', + + 'bg-white dark:bg-black': variant === 'secondary', + 'text-black dark:text-white': variant === 'secondary', + 'hover:bg-black/25 dark:hover:bg-white/25': variant === 'secondary', + 'hover:text-black dark:hover:text-white': variant === 'secondary' || variant === 'accent', + 'active:bg-black dark:active:bg-white': variant === 'secondary', + 'active:text-white dark:active:text-black': variant === 'secondary', uppercase: variant === 'accent', - 'bg-vega-yellow': variant === 'accent', - 'border-transparent': variant === 'accent' || variant === 'inline', - 'hover:bg-vega-yellow/30': variant === 'accent', - 'active:text-light-gray-50': variant === 'accent', + 'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent', + 'border-transparent dark:border-transparent': + variant === 'accent' || variant === 'inline', + 'hover:bg-vega-yellow/30 dark:hover:bg-vega-yellow/30': + variant === 'accent', 'pl-4': variant === 'inline', 'pr-4': variant === 'inline', @@ -79,7 +81,16 @@ export function Button({ 'hover:no-underline': variant === 'inline', 'hover:border-transparent': variant === 'inline', 'active:border-transparent': variant === 'inline', - 'active:text-vega-yellow': variant === 'inline', + 'active:text-vega-yellow dark:active:text-vega-yellow': + variant === 'inline', + 'text-black/95 dark:text-white/95': variant === 'inline', + 'hover:text-black hover:dark:text-white': variant === 'inline', + + 'disabled:bg-black/10 dark:disabled:bg-white/10': variant !== 'inline', + 'disabled:text-black/60 dark:disabled:text-white/60': + variant !== 'inline', + 'disabled:border-black/25 dark:disabled:border-white/25': + variant !== 'inline', }, className ); diff --git a/libs/ui-toolkit/src/components/callout/callout.test.tsx b/libs/ui-toolkit/src/components/callout/callout.test.tsx index 9b52570a4..561052ee1 100644 --- a/libs/ui-toolkit/src/components/callout/callout.test.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.test.tsx @@ -35,7 +35,7 @@ intents.map((intent) => test(`Applies class for progress`, () => { render(); expect(screen.getByTestId('callout')).toHaveClass( - 'shadow-intent-black', - 'dark:shadow-intent-progress' + 'shadow-black', + 'dark:shadow-white' ); }); diff --git a/libs/ui-toolkit/src/components/callout/callout.tsx b/libs/ui-toolkit/src/components/callout/callout.tsx index 0fb032a30..815e44e45 100644 --- a/libs/ui-toolkit/src/components/callout/callout.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.tsx @@ -28,7 +28,7 @@ export function Callout({ 'shadow-intent-danger': intent === 'danger', 'shadow-intent-warning': intent === 'warning', 'shadow-intent-prompt': intent === 'prompt', - 'shadow-intent-black dark:shadow-intent-progress': intent === 'progress', + 'shadow-black dark:shadow-white': intent === 'progress', 'shadow-intent-success': intent === 'success', 'shadow-intent-help': intent === 'help', flex: !!iconName, diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx index fa9209ab5..69b25aac8 100644 --- a/libs/ui-toolkit/src/components/input/input.tsx +++ b/libs/ui-toolkit/src/components/input/input.tsx @@ -25,19 +25,19 @@ export const inputClassNames = ({ 'box-border', 'h-28', 'border', - 'border-light-gray-50', - 'bg-neutral-753', - 'text-light-gray-50', + 'bg-clip-padding', + 'border-black/60 dark:border-white/60', + 'bg-black/25 dark:bg-white/25', + 'text-black/60 dark:text-white/60', 'text-ui', - 'focus-visible:shadow-focus', + 'focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark', 'focus-visible:outline-0', + 'disabled:bg-black/10 disabled:dark:bg-white/10', ], { 'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/), 'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/), 'border-vega-pink': hasError, - 'text-disabled': disabled, - 'bg-transparent': disabled, }, className ); @@ -71,13 +71,13 @@ export const Input = forwardRef( {...props} ref={ref} className={classNames(inputClassNames({ className, ...props }))} - style={inputStyle(props)} + style={{} /*inputStyle(props)*/} /> ); const iconName = prependIconName || appendIconName; if (iconName !== undefined) { const iconClassName = classNames( - ['fill-light-gray-50', 'absolute', 'z-10'], + ['fill-black/60 dark:fill-white/60', 'absolute', 'z-10'], { 'left-8': prependIconName, 'right-8': appendIconName, diff --git a/libs/ui-toolkit/src/components/inputError/inputError.tsx b/libs/ui-toolkit/src/components/inputError/inputError.tsx index 14145fa38..975184b9d 100644 --- a/libs/ui-toolkit/src/components/inputError/inputError.tsx +++ b/libs/ui-toolkit/src/components/inputError/inputError.tsx @@ -19,7 +19,7 @@ export const InputError = ({ 'box-border', 'h-28', 'border-l-4', - 'text-light-gray-50', + 'text-black/95 dark:text-white/95', 'text-ui', ], {