Add white anfd black palette

libs/tailwindcss-config/src/theme.js

@@ -8,8 +8,30 @@ module.exports = {
   colors: {
     transparent: 'transparent',
     current: 'currentColor',
-    white: '#FFF',
-    black: '#000',
+    white: {
+      DEFAULT: '#FFF',
+      '02': 'rgba(255, 255, 255, 0.02)',
+      '05': 'rgba(255, 255, 255, 0.05)',
+      10: 'rgba(255, 255, 255, 0.10)',
+      25: 'rgba(255, 255, 255, 0.25)',
+      40: 'rgba(255, 255, 255, 0.40)',
+      60: 'rgba(255, 255, 255, 0.60)',
+      80: 'rgba(255, 255, 255, 0.80)',
+      95: 'rgba(255, 255, 255, 0.95)',
+      100: 'rgba(255, 255, 255, 1.00)',
+    },
+    black: {
+      DEFAULT: '#000',
+      '02': 'rgba(0, 0, 0, 0.02)',
+      '05': 'rgba(0, 0, 0, 0.05)',
+      10: 'rgba(0, 0, 0, 0.10)',
+      25: 'rgba(0, 0, 0, 0.25)',
+      40: 'rgba(0, 0, 0, 0.40)',
+      60: 'rgba(0, 0, 0, 0.60)',
+      80: 'rgba(0, 0, 0, 0.80)',
+      95: 'rgba(0, 0, 0, 0.95)',
+      100: 'rgba(0, 0, 0, 1)',
+    },
     coral: '#FF6057',
     vega: {
       yellow: '#EDFF22',
@@ -151,7 +173,7 @@ module.exports = {
 
   extend: {
     boxShadow: {
-      callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)',
+      callout: '5px 5px 0 1px rgba(255, 255, 255, 0.05)',
       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/src/components/button/button.tsx

@@ -1,9 +1,4 @@
-import {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  InputHTMLAttributes,
-  forwardRef,
-} from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
 import { Icon, IconName } from '../icon';
 
@@ -53,10 +48,10 @@ const getClassName = (
       'active:border-black dark:active:border-white': true,
 
       'bg-black dark:bg-white': variant === 'primary',
-      'border-black/60 dark:border-white/60':
+      'border-black-60 dark:border-white-60':
         variant === 'primary' || variant === 'secondary',
       'text-white dark:text-black': variant === 'primary',
-      'hover:bg-black/80 dark:hover:bg-white/80': variant === 'primary',
+      'hover:bg-black-80 dark:hover:bg-white-80': variant === 'primary',
       'active:bg-white dark:active:bg-black':
         variant === 'primary' || variant === 'accent',
       'active:text-black dark:active:text-white':
@@ -64,7 +59,7 @@ const getClassName = (
 
       '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: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',
@@ -88,13 +83,13 @@ const getClassName = (
       'active:border-transparent dark:active:border-transparent':
         variant === 'inline',
       'active:text-black dark:active:text-vega-yellow': variant === 'inline',
-      'text-black/95 dark:text-white/95': 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':
+      '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':
+      'disabled:border-black-25 dark:disabled:border-white-25':
         variant !== 'inline',
     },
     className

libs/ui-toolkit/src/components/input/input.tsx

@@ -23,13 +23,13 @@ export const inputClassNames = ({
       'box-border',
       'border',
       'bg-clip-padding',
-      'border-black/60 dark:border-white/60',
-      'bg-black/25 dark:bg-white/25',
-      'text-black/60 dark:text-white/60',
+      '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 dark:focus-visible:shadow-focus-dark',
       'focus-visible:outline-0',
-      'disabled:bg-black/10 disabled:dark:bg-white/10',
+      'disabled:bg-black-10 disabled:dark:bg-white-10',
     ],
     {
       'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
@@ -73,7 +73,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const iconName = prependIconName || appendIconName;
     if (iconName !== undefined) {
       const iconClassName = classNames(
-        ['fill-black/60 dark:fill-white/60', '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-black/95 dark:text-white/95',
+      'text-black-95 dark:text-white-95',
       'text-ui',
     ],
     {

libs/ui-toolkit/src/primitives/colors.stories.mdx

@@ -23,12 +23,12 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
   <ColorItem
     title="theme.color.white"
     subtitle="White"
-    colors={[theme.colors.white]}
+    colors={theme.colors.white}
   />
   <ColorItem
     title="theme.color.black"
     subtitle="Black"
-    colors={[theme.colors.black]}
+    colors={theme.colors.black}
   />
   <ColorItem
     title="theme.color.coral"