fix color system

atelier-saulx · Jul 11, 2024 · 04f74de · 04f74de
1 parent 69dd562
commit 04f74de
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 148 deletions.
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -20,23 +20,32 @@
 
   /* Semantic colors */
   --color-neutral-5: var(--color-black-5);
+  --color-neutral-10-background: var(--color-white-100);
+  --color-neutral-10-adjusted: var(--color-black-5);
   --color-neutral-10: var(--color-black-10);
   --color-neutral-20: var(--color-black-20);
+  --color-neutral-20-adjusted: var(--color-black-10);
   --color-neutral-60: var(--color-black-60);
   --color-neutral-80: var(--color-black-80);
   --color-neutral-100: var(--color-black-100);
-  --color-neutral-inverted-5: var(--color-white-5);
-  --color-neutral-inverted-10: var(--color-white-10);
+  --color-neutral-inverted-5: var(--color-white-10);
+  --color-neutral-inverted-10: var(--color-white-20);
   --color-neutral-inverted-20: var(--color-white-20);
-  --color-neutral-inverted-60: var(--color-white-60);
+  --color-neutral-inverted-60: var(--color-white-40);
   --color-neutral-inverted-80: var(--color-white-80);
   --color-neutral-inverted-100: var(--color-white-100);
-  --color-accent-5: var(--color-indigo-5);
-  --color-accent-10: var(--color-indigo-10);
-  --color-accent-20: var(--color-indigo-20);
-  --color-accent-60: var(--color-indigo-60);
-  --color-accent-80: var(--color-indigo-80);
-  --color-accent-100: var(--color-indigo-100);
+  --color-highlight-5: var(--color-indigo-5);
+  --color-highlight-10: var(--color-indigo-10);
+  --color-highlight-20: var(--color-indigo-20);
+  --color-highlight-60: var(--color-indigo-60);
+  --color-highlight-80: var(--color-indigo-80);
+  --color-highlight-100: var(--color-indigo-100);
+  --color-alert-5: var(--color-amber-5);
+  --color-alert-10: var(--color-amber-10);
+  --color-alert-20: var(--color-amber-20);
+  --color-alert-60: var(--color-amber-60);
+  --color-alert-80: var(--color-amber-80);
+  --color-alert-100: var(--color-amber-100);
   --color-destructive-5: var(--color-red-5);
   --color-destructive-10: var(--color-red-10);
   --color-destructive-20: var(--color-red-20);
@@ -103,10 +112,13 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-neutral-5: var(--color-white-5);
+    --color-neutral-5: var(--color-black-5);
+    --color-neutral-10-background: var(--color-white-10);
+    --color-neutral-10-adjusted: var(--color-white-10);
     --color-neutral-10: var(--color-white-10);
     --color-neutral-20: var(--color-white-20);
-    --color-neutral-60: var(--color-white-60);
+    --color-neutral-20-adjusted: var(--color-white-20);
+    --color-neutral-60: var(--color-white-40);
     --color-neutral-80: var(--color-white-80);
     --color-neutral-100: var(--color-white-100);
     --color-neutral-inverted-5: var(--color-black-5);
@@ -115,18 +127,6 @@
     --color-neutral-inverted-60: var(--color-black-60);
     --color-neutral-inverted-80: var(--color-black-80);
     --color-neutral-inverted-100: var(--color-black-100);
-    --color-accent-5: var(--color-indigo-5);
-    --color-accent-10: var(--color-indigo-10);
-    --color-accent-20: var(--color-indigo-20);
-    --color-accent-60: var(--color-indigo-60);
-    --color-accent-80: var(--color-indigo-80);
-    --color-accent-100: var(--color-indigo-100);
-    --color-destructive-5: var(--color-red-5);
-    --color-destructive-10: var(--color-red-10);
-    --color-destructive-20: var(--color-red-20);
-    --color-destructive-60: var(--color-red-60);
-    --color-destructive-80: var(--color-red-80);
-    --color-destructive-100: var(--color-red-100);
   }
 }
 

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -5,8 +5,22 @@ export default {
   component: Button,
 }
 
-export const Default = {
+export const Primary = {
   args: {
     children: 'Button label',
+    variant: 'primary',
+    color: 'neutral',
+    disabled: false,
+    leadIcon: 'add',
+  },
+}
+
+export const Secondary = {
+  args: {
+    children: 'Button label',
+    variant: 'secondar',
+    color: 'neutral',
+    disabled: false,
+    leadIcon: 'add',
   },
 }
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { borderRadius } from '../../utils/border.js'
-import { color, colorSwatch } from '../../utils/colors.js'
+import { color } from '../../utils/colors.js'
 import { Icon, IconProps } from '../Icon/index.js'
 import { Text } from '../Text/index.js'
 
@@ -56,32 +56,32 @@ function Button({
         outlineStyle: 'none',
         ...(variant === 'primary' &&
           colorProp === 'neutral' && {
-            color: color('neutral-inverted', 100),
-            background: color('neutral', 100),
+            color: color('neutral-inverted-100'),
+            background: color('neutral-100'),
             ...(focus &&
               !disabled && {
                 outlineWidth: 4,
                 outlineStyle: 'solid',
-                outlineColor: color('neutral', 20),
+                outlineColor: color('neutral-20'),
               }),
             ...(disabled && {
-              color: color('neutral-inverted', 60),
-              background: color('neutral', 20),
+              color: color('neutral-inverted-60'),
+              background: color('neutral-20'),
             }),
           }),
         ...(variant === 'primary' &&
           colorProp === 'destructive' && {
-            color: colorSwatch('white', 100),
-            background: color('destructive', 100),
+            color: color('white-100'),
+            background: color('destructive-100'),
             ...(focus &&
               !disabled && {
                 outlineWidth: 4,
                 outlineStyle: 'solid',
-                outlineColor: color('destructive', 60),
+                outlineColor: color('destructive-60'),
               }),
             ...(disabled && {
-              color: colorSwatch('white', 20),
-              background: color('destructive', 20),
+              color: color('white-20'),
+              background: color('destructive-20'),
             }),
           }),
       }}
@@ -95,13 +95,13 @@ function Button({
             colorProp === 'neutral' &&
             (hover || focus) &&
             !disabled && {
-              background: color('neutral-inverted', 20),
+              background: color('neutral-inverted-20'),
             }),
           ...(variant === 'primary' &&
             colorProp === 'destructive' &&
             (hover || focus) &&
             !disabled && {
-              background: color('neutral', 10),
+              background: color('neutral-10'),
             }),
         }}
       />

diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -31,7 +31,7 @@ export const Default = {
               gap: 8,
               padding: 16,
               borderRadius: borderRadius(8),
-              background: color('neutral', 10),
+              background: color('neutral-10'),
               cursor: 'pointer',
             }}
             onClick={() => {

diff --git a/src/components/Text/Text.stories.ts b/src/components/Text/Text.stories.ts
@@ -10,6 +10,6 @@ export const Default = {
     children: 'The quick brown fox jumps over the lazy dog',
     align: 'left',
     variant: 'display-regular',
-    color: 'neutral',
+    color: 'neutral-100',
   },
 }
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -1,10 +1,4 @@
-import {
-  COLORS,
-  Color,
-  ColorSwatch,
-  color,
-  colorSwatch,
-} from '../../utils/colors.js'
+import { Color, color } from '../../utils/colors.js'
 
 type TextProps = {
   children: string
@@ -19,26 +13,21 @@ type TextProps = {
     | 'subtext-medium'
     | 'subtext-bold'
   align?: 'left' | 'center' | 'right'
-  color?: 'inherit' | Color | ColorSwatch
+  color?: 'inherit' | Color
 }
 
 function Text({
   children,
   variant = 'display-regular',
-  color: colorProp = 'neutral',
+  color: colorProp = 'neutral-100',
   align = 'left',
 }: TextProps) {
   return (
     <div
       style={{
         textAlign: align,
         overflowWrap: 'break-word',
-        color:
-          colorProp === 'inherit'
-            ? 'inherit'
-            : COLORS.includes(colorProp as Color)
-              ? color(colorProp as Color)
-              : colorSwatch(colorProp as ColorSwatch),
+        color: colorProp === 'inherit' ? 'inherit' : color(colorProp),
         fontFamily: 'var(--font-sans)',
         lineHeight: 1,
         letterSpacing: 'normal',

diff --git a/src/utils/Border.stories.tsx b/src/utils/Border.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { COLORS, COLOR_ALPHAS, color } from './colors'
+import { color } from './colors'
 import { borderRadius, BORDER_RADII } from './border'
 import { Text } from '../components/Text'
 
@@ -31,9 +31,9 @@ export const Default = {
             style={{
               width: 100,
               height: 100,
-              background: color('neutral', 20),
+              background: color('neutral-20'),
               borderRadius: borderRadius(b),
-              border: `1px solid ${color('neutral', 10)}`,
+              border: `1px solid ${color('neutral-10')}`,
             }}
           />
           <Text variant="subtext-bold">{b as string}</Text>

diff --git a/src/utils/Colors.stories.tsx b/src/utils/Colors.stories.tsx
@@ -1,12 +1,5 @@
 import React from 'react'
-import {
-  COLORS,
-  COLOR_ALPHAS,
-  COLOR_SWATCHES,
-  COLOR_SWATCH_ALPHAS,
-  color,
-  colorSwatch,
-} from './colors'
+import { COLORS, COLOR_SWATCHES, color } from './colors'
 import { borderRadius } from './border'
 import { Text } from '../components/Text'
 
@@ -22,32 +15,28 @@ export const Semantics = {
         display: 'grid',
         gap: 24,
         gridAutoRows: '1fr',
-        gridTemplateColumns: `repeat(${COLOR_ALPHAS.length}, 1fr)`,
+        gridTemplateColumns: `repeat(9, 1fr)`,
       }}
     >
-      {COLORS.map((c) =>
-        [...COLOR_ALPHAS]
-          .sort((a, b) => b - a)
-          .map((alpha) => (
-            <div>
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 8,
-                  height: 64,
-                  background: color(c, alpha),
-                  borderRadius: borderRadius(8),
-                  border: `1px solid ${color('neutral', 10)}`,
-                  marginBottom: 16,
-                }}
-              />
-              <Text variant="subtext-bold">{`${c.charAt(0).toUpperCase() + c.slice(1)} ${alpha}`}</Text>
-            </div>
-          )),
-      )}
+      {[...COLORS].map((c) => (
+        <div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: 8,
+              height: 64,
+              background: color(c),
+              borderRadius: borderRadius(8),
+              border: `1px solid ${color('neutral-10')}`,
+              marginBottom: 16,
+            }}
+          />
+          <Text variant="subtext-bold">{c}</Text>
+        </div>
+      ))}
     </div>
   ),
 }
@@ -59,32 +48,28 @@ export const Swatches = {
         display: 'grid',
         gap: 24,
         gridAutoRows: '1fr',
-        gridTemplateColumns: `repeat(${COLOR_SWATCH_ALPHAS.length}, 1fr)`,
+        gridTemplateColumns: `repeat(9, 1fr)`,
       }}
     >
-      {COLOR_SWATCHES.map((swatch) =>
-        [...COLOR_SWATCH_ALPHAS]
-          .sort((a, b) => b - a)
-          .map((alpha) => (
-            <div>
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 8,
-                  height: 64,
-                  background: colorSwatch(swatch, alpha),
-                  borderRadius: borderRadius(8),
-                  border: `1px solid ${color('neutral', 10)}`,
-                  marginBottom: 16,
-                }}
-              />
-              <Text variant="subtext-bold">{`${swatch.charAt(0).toUpperCase() + swatch.slice(1)} ${alpha}`}</Text>
-            </div>
-          )),
-      )}
+      {[...COLOR_SWATCHES].map((c) => (
+        <div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: 8,
+              height: 64,
+              background: color(c),
+              borderRadius: borderRadius(8),
+              border: `1px solid ${color('neutral-10')}`,
+              marginBottom: 16,
+            }}
+          />
+          <Text variant="subtext-bold">{c}</Text>
+        </div>
+      ))}
     </div>
   ),
 }