Fix/new colours (#105)

* fix: bg colors

* feat: dark bg colors

* feat: apply dark bg colors

* feat: dark foreground

* feat: separate dark and light

* fix: colors dark + light seperation

* fix: cleanup colors

* feat: change button color names

* fix: button colors

* fix: checkbox colors

* fix: radio colors

* fix: steps

* fix: colors doc

* fix: address some comments

* fix: color inversion + remove DEFAULT

* fix: remove inverted pink from colors

* fix: show default / dark on separate horizontal banners

* fix: clean up

* fix: reference darkmode

* fix: remove inverted colors

src/colors/accent.ts

@@ -0,0 +1,18 @@
+import { colors } from './base'
+
+export const accent = {
+  DEFAULT: colors.blue['700'],
+  dark: '#FFF',
+  alt: {
+    DEFAULT: colors.grey['300'],
+    dark: colors.grey['600']
+  },
+  hover: {
+    DEFAULT: colors.grey['900'],
+    dark: colors.grey['300']
+  },
+  focus: {
+    DEFAULT: '#000',
+    dark: colors.grey['100']
+  }
+}

src/colors/background.ts

@@ -0,0 +1,18 @@
+import { colors } from './base'
+
+export const background = {
+  DEFAULT: '#FFF',
+  dark: '#000',
+  alt: {
+    DEFAULT: colors.grey['50'],
+    dark: colors.grey['700']
+  },
+  subtle: {
+    DEFAULT: colors.purple['50'],
+    dark: colors.grey['800']
+  },
+  inverse: {
+    DEFAULT: colors.grey['900'],
+    dark: '#FFF'
+  }
+}

src/colors.ts → src/colors/base.ts

@@ -120,47 +120,3 @@ export const colors = {
     900: '#731837'
   }
 }
-
-export default {
-  transparent: 'transparent',
-  current: 'currentColor',
-  primary: colors.blue,
-  secondary: colors.pink,
-  foreground: {
-    DEFAULT: colors.grey['900'],
-    muted: colors.grey['500'],
-    subtle: colors.grey['400'],
-    inverse: '#FFF'
-  },
-  accent: {
-    DEFAULT: colors.blue['700'],
-    hover: colors.grey['900'],
-    focus: '#000',
-    alt: colors.grey['300'],
-    'alt-dark': colors.grey['600']
-  },
-  border: {
-    DEFAULT: colors.grey['300'],
-    hover: colors.grey['400'],
-    subtle: colors.grey['200']
-  },
-  feedback: {
-    green: colors.green['400'],
-    yellow: colors.yellow['300'],
-    orange: colors.orange['400'],
-    red: colors.red['600']
-  },
-  button: {
-    active: colors.blue['700'],
-    hover: colors.grey['900'],
-    focus: '#000',
-    disabled: colors.purple['50']
-  },
-  white: {
-    DEFAULT: '#fff'
-  },
-  black: {
-    DEFAULT: '#000'
-  },
-  ...colors
-}

src/colors/border.ts

@@ -0,0 +1,18 @@
+import { colors } from './base'
+
+export const border = {
+  DEFAULT: colors.grey['300'],
+  dark: colors.grey['500'],
+  hover: {
+    DEFAULT: colors.grey['400'],
+    dark: colors.grey['300']
+  },
+  focus: {
+    DEFAULT: colors.grey['500'],
+    dark: colors.grey['400']
+  },
+  subtle: {
+    DEFAULT: colors.grey['200'],
+    dark: colors.grey['700']
+  }
+}

src/colors/button.ts

@@ -0,0 +1,87 @@
+import { colors } from './base'
+import { accent } from './accent'
+import { background } from './background'
+import { border } from './border'
+import { feedback } from './feedback'
+
+export const button = {
+  primary: {
+    DEFAULT: colors.blue['700'],
+    dark: '#FFF',
+    hover: {
+      DEFAULT: accent.hover.DEFAULT,
+      dark: accent.hover.dark
+    },
+    focus: {
+      DEFAULT: accent.focus.DEFAULT,
+      dark: accent.focus.dark
+    },
+    disabled: {
+      DEFAULT: background.subtle.DEFAULT,
+      dark: background.subtle.dark
+    }
+  },
+  secondary: {
+    DEFAULT: '#FFF',
+    dark: '#000',
+    hover: {
+      DEFAULT: background.subtle.DEFAULT,
+      dark: background.subtle.dark
+    },
+
+    focus: {
+      DEFAULT: colors.blue['50'],
+      dark: colors.blue['900']
+    },
+
+    disabled: {
+      DEFAULT: background.subtle.DEFAULT,
+      dark: background.subtle.dark
+    },
+
+    border: {
+      DEFAULT: border.DEFAULT,
+      dark: border.dark,
+      hover: {
+        DEFAULT: background.subtle.DEFAULT,
+        dark: background.subtle.dark
+      },
+      focus: {
+        DEFAULT: border.focus.DEFAULT,
+        dark: border.focus.dark
+      },
+      disabled: {
+        DEFAULT: border.subtle.DEFAULT,
+        dark: border.subtle.dark
+      }
+    }
+  },
+  tertiary: {
+    hover: {
+      DEFAULT: background.subtle.DEFAULT,
+      dark: background.subtle.dark
+    },
+    focus: {
+      DEFAULT: colors.blue['50'],
+      dark: colors.blue['900']
+    }
+  },
+  success: {
+    DEFAULT: feedback.green,
+    hover: {
+      DEFAULT: colors.green['500']
+    },
+    focus: {
+      DEFAULT: colors.green['600']
+    }
+  },
+  danger: {
+    DEFAULT: feedback.red,
+    hover: {
+      DEFAULT: colors.red['700']
+    },
+    focus: {
+      DEFAULT: colors.red['800']
+    }
+  }
+}

src/colors/feedback.ts

@@ -0,0 +1,8 @@
+import { colors } from './base'
+
+export const feedback = {
+  green: colors.green['400'],
+  yellow: colors.yellow['300'],
+  orange: colors.orange['400'],
+  red: colors.red['600']
+}

src/colors/foreground.ts

@@ -0,0 +1,18 @@
+import { colors } from './base'
+
+export const foreground = {
+  DEFAULT: colors.grey['900'],
+  dark: '#FFF',
+  muted: {
+    DEFAULT: colors.grey['500'],
+    dark: colors.grey['300']
+  },
+  subtle: {
+    DEFAULT: colors.grey['400'],
+    dark: colors.grey['500']
+  },
+  inverse: {
+    DEFAULT: '#FFF',
+    dark: colors.grey['900']
+  }
+}

src/colors/index.ts

@@ -0,0 +1,27 @@
+import { colors } from './base'
+import { foreground } from './foreground'
+import { background } from './background'
+import { button } from './button'
+import { accent } from './accent'
+import { border } from './border'
+import { feedback } from './feedback'
+
+export default {
+  transparent: 'transparent',
+  current: 'currentColor',
+  primary: colors.blue,
+  secondary: colors.pink,
+  foreground: foreground,
+  background: background,
+  accent: accent,
+  border: border,
+  feedback: feedback,
+  button: button,
+  white: {
+    DEFAULT: '#fff'
+  },
+  black: {
+    DEFAULT: '#000'
+  },
+  ...colors
+}

src/components/Button/index.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-button-active border-button-active text-white ' +
+          'bg-button-primary border-button-active text-white ' +
           'hover:bg-button-hover hover:border-button-hover ' +
           'focus:bg-button-focus focus:border-button-focus ' +
           'disabled:bg-button-disabled disabled:text-foreground-subtle disabled:border-button-disabled',
@@ -33,13 +33,13 @@ const buttonVariants = cva(
           'bg-red-600 border-red-600 text-white ' +
           'hover:bg-red-700 hover:border-red-700 ' +
           'focus:bg-red-800 focus:border-red-800 ' +
-          'disabled:bg-button-disabled disabled:border-button-disabled disabled:text-foreground-subtle',
+          'disabled:bg-button-disabled disabled:border-button-disabled disabled:text-foreground-subtle'
       },
       size: {
         lg: 'px-4 py-3 text-base',
         md: 'p-2.5 text-sm',
         sm: 'px-2.5 py-2 text-sm',
-        xs: 'px-2 py-2.5 text-xs',
+        xs: 'px-2 py-2.5 text-xs'
       }
     },
     defaultVariants: {
@@ -51,7 +51,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 

src/components/Checkbox/index.tsx

@@ -15,16 +15,16 @@ const checkboxVariants = cva([
     'border-border'
   ],
   [
-    'data-[state=checked]:border-blue-600',
-    'data-[state=checked]:bg-blue-600',
+    'data-[state=checked]:border-primary-600',
+    'data-[state=checked]:bg-primary-600',
     'data-[state=checked]:text-foreground-inverse',
-    'data-[state=indeterminate]:border-blue-600',
-    'data-[state=indeterminate]:bg-blue-600',
+    'data-[state=indeterminate]:border-primary-600',
+    'data-[state=indeterminate]:bg-primary-600',
     'data-[state=indeterminate]:text-foreground-inverse'
   ],
   [
-    'dark:data-[state=unchecked]:bg-grey-700',
-    'dark:data-[state=unchecked]:border-grey-500'
+    'dark:data-[state=unchecked]:bg-background-alt-dark',
+    'dark:data-[state=unchecked]:border-border-dark'
   ]
 ])
 

src/components/Radio/RadioGroupItem.tsx

@@ -14,7 +14,7 @@ const radioVariant = cva([
     'rounded-full',
     'border-[0.533px]',
     'border-border',
-    'bg-grey-50',
+    'bg-background-alt',
     'disabled:opacity-50',
     'text-foreground-inverse'
   ],
@@ -23,7 +23,7 @@ const radioVariant = cva([
     'data-[state=checked]:bg-primary-600',
     'data-[state=checked]:bg-primary-600'
   ],
-  ['dark:bg-grey-700', 'dark:border-grey-500']
+  ['dark:bg-background-alt-dark', 'dark:border-border-dark']
 ])
 
 const RadioGroupItem = React.forwardRef<

stories/Checkbox/Docs.mdx

@@ -60,7 +60,7 @@ A checkbox is a small box that users can click or tap to select or deselect an o
 You can control the styling by using the Data-attributes in the className. For example, if you wanted to change the colour of the tick to red, then you can write:
 
 ```ts
-<Checkbox checked=true className = "data-[state=checked]:text-yellow-200 data-[state=checked]:bg-grey-900 data-[state=checked]:border-grey-900">
+<Checkbox checked=true className="data-[state=checked]:text-yellow-200 data-[state=checked]:bg-background-inverse data-[state=checked]:border-grey-900">
 ```
 
 And you can see the change:
@@ -98,7 +98,7 @@ const checkboxVariants = cva([
     'data-[state=indeterminate]:text-foreground-inverse'
   ],
   [
-    'dark:data-[state=unchecked]:bg-grey-700',
+    'dark:data-[state=unchecked]:bg-alt-dark',
     'dark:data-[state=unchecked]:border-grey-500'
   ]
 ])