Use only black and white rgba colors

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',
     },
   },
 };

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) => (
-    <div className="dark bg-black">
+    <div className="text-body">
-      <Story />
+      <div className="dark bg-black p-16">
+        <Story />
+      </div>
+      <div className="p-16">
+        <Story />
+      </div>
     </div>
   ),
 ];

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',
+      'hover:border-black dark:hover:border-white': variant !== 'inline',
-      'border-light-gray-50': variant === 'primary' || variant === 'secondary',
+      'active:border-black dark:active:border-white': true,
-      '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',
 
-      'bg-black': variant === 'secondary',
+      'bg-black dark:bg-white': variant === 'primary',
-      'text-light-gray-50': variant === 'secondary' || variant === 'inline',
+      'border-black/60 dark:border-white/60':
-      'hover:bg-white/30': variant === 'secondary',
+        variant === 'primary' || variant === 'secondary',
-      'hover:text-white': variant === 'secondary' || variant === 'accent',
+      'text-white dark:text-black': variant === 'primary',
-      'active:bg-white': variant === 'secondary',
+      'hover:bg-black/70 dark:hover:bg-white/70': variant === 'primary',
-      'active:text-black': variant === 'secondary',
+      'active:bg-white dark:active:bg-black':
-      'disabled:text-disabled': variant === 'secondary' || variant === 'accent',
+        variant === 'primary' || variant === 'accent',
-      'disabled:border-disabled':
+      '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',
+      'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
-      'border-transparent': variant === 'accent' || variant === 'inline',
+      'border-transparent dark:border-transparent':
-      'hover:bg-vega-yellow/30': variant === 'accent',
+        variant === 'accent' || variant === 'inline',
-      'active:text-light-gray-50': variant === 'accent',
+      '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
   );

libs/ui-toolkit/src/components/callout/callout.test.tsx

@@ -35,7 +35,7 @@ intents.map((intent) =>
 test(`Applies class for progress`, () => {
   render(<Callout intent="progress" />);
   expect(screen.getByTestId('callout')).toHaveClass(
-    'shadow-intent-black',
+    'shadow-black',
-    'dark:shadow-intent-progress'
+    'dark:shadow-white'
   );
 });

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,

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-clip-padding',
-      'bg-neutral-753',
+      'border-black/60 dark:border-white/60',
-      'text-light-gray-50',
+      '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<HTMLInputElement, InputProps>(
         {...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,

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',
     ],
     {