Adding Color palettes (#90)

0xsequence · Sep 26, 2024 · 37789c5 · 37789c5
1 parent 98408da
commit 37789c5
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 3 deletions.
diff --git a/src/css/vars.css.ts b/src/css/vars.css.ts
@@ -13,6 +13,15 @@ export const baseVars = createGlobalThemeContract(baseTokens, mapVarName)
 
 createGlobalTheme(':root', baseVars, baseTokens)
 
+// Color Palettes
+export const colorPaletteVars = createGlobalThemeContract(
+  colors.palettes,
+  mapVarName
+)
+
+createGlobalTheme(':root', colorPaletteVars, colors.palettes)
+
+// Color Schemes (light | dark)
 const makeColorScheme = (mode: ColorScheme = 'dark') => {
   return {
     colors: { ...colors[mode] },

diff --git a/src/docs/design-system/Colors.stories.mdx b/src/docs/design-system/Colors.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-
+import { tokens } from '../../tokens'
+import { capitalize } from '../../utils/string'
 import { vars } from '../../css'
 
 <Meta title="Design System/Colors" />
@@ -8,8 +9,48 @@ import { vars } from '../../css'
 
 Color schemes, scales, accents, and gradients.
 
+### Base Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Base"
+    subtitle="--seq-color-[name]"
+    colors={{
+      black: '#000000',
+      white: '#ffffff',
+      transparent: 'transparent',
+    }}
+  />
+</ColorPalette>
+
+### Palettes
+
+All colors are defined in palettes. Each palette has a name and a scale. The scale is a number that represents the intensity of the color. For example, `--seq-red-100` is a light shade of the red color, while `--seq-red-900` is a dark shade of the brand color.
+
+<ColorPalette>
+  {Object.entries(tokens.colors.palettes).map(([key, value]) => (
+    <ColorItem
+      key={key}
+      title={capitalize(key)}
+      subtitle={`--seq-${key}-[scale]`}
+      colors={value}
+    />
+  ))}
+</ColorPalette>
+
+### Gradients
+
+### Semantic Colors
+
+Semantic colors point to color palettes and are used to give a name to a color that is used in a specific context. For example, `primary` is a semantic color that points to a color in the `brand` palette. This way, if the brand color changes, the `primary` color will change as well.
+
 <ColorPalette>
   {Object.entries(vars.colors).map(([key, value]) => (
-    <ColorItem key={key} title={key} colors={{ [key]: value }} />
+    <ColorItem
+      key={key}
+      title={key}
+      subtitle={`--seq-colors-${key}`}
+      colors={{ [key]: value }}
+    />
   ))}
 </ColorPalette>
diff --git a/src/tokens/color.ts b/src/tokens/color.ts
@@ -146,7 +146,125 @@ const light: ColorTokens = {
   borderFocus: 'rgba(0, 0, 0, 0.5)',
 }
 
-export const colors: ColorSchemes = {
+type ColorPaletteKey =
+  | 'grey'
+  | 'red'
+  | 'green'
+  | 'yellow'
+  | 'blue'
+  | 'indigo'
+  | 'violet'
+
+interface ColorPalette {
+  '50': string
+  '100': string
+  '200': string
+  '300': string
+  '400': string
+  '500': string
+  '600': string
+  '700': string
+  '800': string
+  '900': string
+  '950': string
+}
+
+export const palettes = {
+  grey: {
+    50: '#D1D1D1',
+    100: '#B0B0B0',
+    200: '#888888',
+    300: '#6D6D6D',
+    400: '#5D5D5D',
+    500: '#4F4F4F',
+    600: '#454545',
+    700: '#3D3D3D',
+    800: '#262626',
+    900: '#1B1B1B',
+    950: '#101010',
+  },
+  red: {
+    50: '#FDF7EF',
+    100: '#FBECD9',
+    200: '#F6D7B2',
+    300: '#F1BB80',
+    400: '#EA954D',
+    500: '#E5792A',
+    600: '#D66020',
+    700: '#C2501F',
+    800: '#8E3B1E',
+    900: '#72331C',
+    950: '#3E170C',
+  },
+  green: {
+    50: '#F0FDF5',
+    100: '#DCFCE9',
+    200: '#BAF8D4',
+    300: '#85F0B3',
+    400: '#48E089',
+    500: '#1FC266',
+    600: '#14A554',
+    700: '#148144',
+    800: '#156639',
+    900: '#135431',
+    950: '#042F19',
+  },
+  yellow: {
+    50: '#FBFAEB',
+    100: '#F6F2CB',
+    200: '#EFE499',
+    300: '#E5CE5F',
+    400: '#DDB938',
+    500: '#CDA125',
+    600: '#B07E1E',
+    700: '#8D5C1B',
+    800: '#754A1E',
+    900: '#653F1E',
+    950: '#3A200E',
+  },
+  blue: {
+    50: '#F0F8FF',
+    100: '#E0F0FE',
+    200: '#B9E0FE',
+    300: '#7CC8FD',
+    400: '#36AEFA',
+    500: '#0C94EB',
+    600: '#0076CC',
+    700: '#015CA3',
+    800: '#064F86',
+    900: '#0B426F',
+    950: '#072A4A',
+  },
+  indigo: {
+    50: '#F2F2FF',
+    100: '#E9E7FF',
+    200: '#D3D1FF',
+    300: '#B3ADFF',
+    400: '#8E7EFF',
+    500: '#6A4AFF',
+    600: '#5826FF',
+    700: '#4411E1',
+    800: '#3D10C7',
+    900: '#340FA3',
+    950: '#1C066F',
+  },
+  violet: {
+    50: '#F3F2FF',
+    100: '#EBE8FF',
+    200: '#D9D3FF',
+    300: '#BDB0FF',
+    400: '#9D84FF',
+    500: '#7F52FF',
+    600: '#7537F9',
+    700: '#601CE5',
+    800: '#5117C0',
+    900: '#43159D',
+    950: '#270A6B',
+  },
+} satisfies { [key in ColorPaletteKey]: ColorPalette }
+
+export const colors: ColorSchemes & { palettes: typeof palettes } = {
   dark,
   light,
+  palettes,
 }