Merge 0e5395b into afce711

primer · Apr 2, 2024 · 24af056 · 24af056
2 parents afce711 + 0e5395b
commit 24af056
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 729 deletions.
diff --git a/.changeset/honest-geckos-unite.md b/.changeset/honest-geckos-unite.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+remove color-scale colors from output
diff --git a/docs/storybook/stories/Color/Base/Scales.stories.tsx b/docs/storybook/stories/Color/Base/Scales.stories.tsx
@@ -9,98 +9,98 @@ export default {
 }
 
 const bgColors = [
-  'color-scale-black',
-  'color-scale-white',
-  'color-scale-gray-0',
-  'color-scale-gray-1',
-  'color-scale-gray-2',
-  'color-scale-gray-3',
-  'color-scale-gray-4',
-  'color-scale-gray-5',
-  'color-scale-gray-6',
-  'color-scale-gray-7',
-  'color-scale-gray-8',
-  'color-scale-gray-9',
-  'color-scale-blue-0',
-  'color-scale-blue-1',
-  'color-scale-blue-2',
-  'color-scale-blue-3',
-  'color-scale-blue-4',
-  'color-scale-blue-5',
-  'color-scale-blue-6',
-  'color-scale-blue-7',
-  'color-scale-blue-8',
-  'color-scale-blue-9',
-  'color-scale-green-0',
-  'color-scale-green-1',
-  'color-scale-green-2',
-  'color-scale-green-3',
-  'color-scale-green-4',
-  'color-scale-green-5',
-  'color-scale-green-6',
-  'color-scale-green-7',
-  'color-scale-green-8',
-  'color-scale-green-9',
-  'color-scale-yellow-0',
-  'color-scale-yellow-1',
-  'color-scale-yellow-2',
-  'color-scale-yellow-3',
-  'color-scale-yellow-4',
-  'color-scale-yellow-5',
-  'color-scale-yellow-6',
-  'color-scale-yellow-7',
-  'color-scale-yellow-8',
-  'color-scale-yellow-9',
-  'color-scale-orange-0',
-  'color-scale-orange-1',
-  'color-scale-orange-2',
-  'color-scale-orange-3',
-  'color-scale-orange-4',
-  'color-scale-orange-5',
-  'color-scale-orange-6',
-  'color-scale-orange-7',
-  'color-scale-orange-8',
-  'color-scale-orange-9',
-  'color-scale-red-0',
-  'color-scale-red-1',
-  'color-scale-red-2',
-  'color-scale-red-3',
-  'color-scale-red-4',
-  'color-scale-red-5',
-  'color-scale-red-6',
-  'color-scale-red-7',
-  'color-scale-red-8',
-  'color-scale-red-9',
-  'color-scale-purple-0',
-  'color-scale-purple-1',
-  'color-scale-purple-2',
-  'color-scale-purple-3',
-  'color-scale-purple-4',
-  'color-scale-purple-5',
-  'color-scale-purple-6',
-  'color-scale-purple-7',
-  'color-scale-purple-8',
-  'color-scale-purple-9',
-  'color-scale-pink-0',
-  'color-scale-pink-1',
-  'color-scale-pink-2',
-  'color-scale-pink-3',
-  'color-scale-pink-4',
-  'color-scale-pink-5',
-  'color-scale-pink-6',
-  'color-scale-pink-7',
-  'color-scale-pink-8',
-  'color-scale-pink-9',
-  'color-scale-coral-0',
-  'color-scale-coral-1',
-  'color-scale-coral-2',
-  'color-scale-coral-3',
-  'color-scale-coral-4',
-  'color-scale-coral-5',
-  'color-scale-coral-6',
-  'color-scale-coral-7',
-  'color-scale-coral-8',
-  'color-scale-coral-9',
+  'base-color-black',
+  'base-color-white',
+  'base-color-gray-0',
+  'base-color-gray-1',
+  'base-color-gray-2',
+  'base-color-gray-3',
+  'base-color-gray-4',
+  'base-color-gray-5',
+  'base-color-gray-6',
+  'base-color-gray-7',
+  'base-color-gray-8',
+  'base-color-gray-9',
+  'base-color-blue-0',
+  'base-color-blue-1',
+  'base-color-blue-2',
+  'base-color-blue-3',
+  'base-color-blue-4',
+  'base-color-blue-5',
+  'base-color-blue-6',
+  'base-color-blue-7',
+  'base-color-blue-8',
+  'base-color-blue-9',
+  'base-color-green-0',
+  'base-color-green-1',
+  'base-color-green-2',
+  'base-color-green-3',
+  'base-color-green-4',
+  'base-color-green-5',
+  'base-color-green-6',
+  'base-color-green-7',
+  'base-color-green-8',
+  'base-color-green-9',
+  'base-color-yellow-0',
+  'base-color-yellow-1',
+  'base-color-yellow-2',
+  'base-color-yellow-3',
+  'base-color-yellow-4',
+  'base-color-yellow-5',
+  'base-color-yellow-6',
+  'base-color-yellow-7',
+  'base-color-yellow-8',
+  'base-color-yellow-9',
+  'base-color-orange-0',
+  'base-color-orange-1',
+  'base-color-orange-2',
+  'base-color-orange-3',
+  'base-color-orange-4',
+  'base-color-orange-5',
+  'base-color-orange-6',
+  'base-color-orange-7',
+  'base-color-orange-8',
+  'base-color-orange-9',
+  'base-color-red-0',
+  'base-color-red-1',
+  'base-color-red-2',
+  'base-color-red-3',
+  'base-color-red-4',
+  'base-color-red-5',
+  'base-color-red-6',
+  'base-color-red-7',
+  'base-color-red-8',
+  'base-color-red-9',
+  'base-color-purple-0',
+  'base-color-purple-1',
+  'base-color-purple-2',
+  'base-color-purple-3',
+  'base-color-purple-4',
+  'base-color-purple-5',
+  'base-color-purple-6',
+  'base-color-purple-7',
+  'base-color-purple-8',
+  'base-color-purple-9',
+  'base-color-pink-0',
+  'base-color-pink-1',
+  'base-color-pink-2',
+  'base-color-pink-3',
+  'base-color-pink-4',
+  'base-color-pink-5',
+  'base-color-pink-6',
+  'base-color-pink-7',
+  'base-color-pink-8',
+  'base-color-pink-9',
+  'base-color-coral-0',
+  'base-color-coral-1',
+  'base-color-coral-2',
+  'base-color-coral-3',
+  'base-color-coral-4',
+  'base-color-coral-5',
+  'base-color-coral-6',
+  'base-color-coral-7',
+  'base-color-coral-8',
+  'base-color-coral-9',
 ]
 
 export const AllScales = () => {

diff --git a/docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx b/docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx
@@ -12,16 +12,19 @@ export const ColorScale = ({color, border}: ColorScaleProps) => {
   const {resolvedColorScheme: theme} = useTheme()
   const ref = React.useRef<HTMLDivElement | null>(null)
   const [hex, setHex] = React.useState<string | null>(null)
-  const textColor = hex ? readableColor(hex) : 'currentColor'
+  const [textColor, setTextColor] = React.useState<string>('currentColor')
 
   React.useEffect(() => {
-    if (ref.current === null) {
-      return
-    }
-
-    const style = getComputedStyle(ref.current)
-    const rgb = style.getPropertyValue('background-color')
-    setHex(toHex(rgb))
+    setTimeout(() => {
+      if (ref.current === null) {
+        return
+      }
+      const style = getComputedStyle(ref.current)
+      const rgb = style.getPropertyValue('background-color')
+      const asHex = toHex(rgb)
+      setHex(asHex)
+      setTextColor(asHex ? readableColor(asHex) : 'currentColor')
+    }, 0)
   }, [color, theme])
 
   return (

diff --git a/scripts/diffTokenProps.ts b/scripts/diffTokenProps.ts
@@ -67,21 +67,13 @@ const diff = diffProps([
   {
     mainThemeName: 'light',
     mainThemeDir: './src/tokens/functional/color/light',
-    mainFiles: [
-      './src/tokens/functional/color/scales.json5',
-      './src/tokens/functional/shadow/light.json5',
-      './src/tokens/functional/border/light.json5',
-    ],
+    mainFiles: ['./src/tokens/functional/shadow/light.json5', './src/tokens/functional/border/light.json5'],
     overridesDir: './src/tokens/functional/color/light/overrides',
   },
   {
     mainThemeName: 'dark',
     mainThemeDir: './src/tokens/functional/color/dark',
-    mainFiles: [
-      './src/tokens/functional/color/scales.json5',
-      './src/tokens/functional/shadow/dark.json5',
-      './src/tokens/functional/border/dark.json5',
-    ],
+    mainFiles: ['./src/tokens/functional/shadow/dark.json5', './src/tokens/functional/border/dark.json5'],
     overridesDir: './src/tokens/functional/color/dark/overrides',
   },
 ])

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -5,7 +5,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'light',
     source: [
       `src/tokens/functional/color/light/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
     ],
@@ -15,7 +14,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'light-tritanopia',
     source: [
       `src/tokens/functional/color/light/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
       `src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
@@ -26,7 +24,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'light-colorblind',
     source: [
       `src/tokens/functional/color/light/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
       `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
@@ -37,7 +34,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'light-high-contrast',
     source: [
       `src/tokens/functional/color/light/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
@@ -52,7 +48,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'dark',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
     ],
@@ -62,7 +57,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'dark-dimmed',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
@@ -77,7 +71,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'dark-tritanopia',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
       `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
@@ -88,7 +81,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'dark-colorblind',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,
       `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
@@ -99,7 +91,6 @@ export const themes: TokenBuildInput[] = [
     filename: 'dark-high-contrast',
     source: [
       `src/tokens/functional/color/dark/*.json5`,
-      `src/tokens/functional/color/scales.json5`,
       `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/dark.json5`,

diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5
@@ -310,34 +310,5 @@
         },
       },
     },
-    /**
-     * @description All overwrites for color scales
-     */
-    scale: {
-      green: {
-        '0': {$value: '{base.color.blue.0}', $type: 'color'},
-        '1': {$value: '{base.color.blue.1}', $type: 'color'},
-        '2': {$value: '{base.color.blue.2}', $type: 'color'},
-        '3': {$value: '{base.color.blue.3}', $type: 'color'},
-        '4': {$value: '{base.color.blue.4}', $type: 'color'},
-        '5': {$value: '{base.color.blue.5}', $type: 'color'},
-        '6': {$value: '{base.color.blue.6}', $type: 'color'},
-        '7': {$value: '{base.color.blue.7}', $type: 'color'},
-        '8': {$value: '{base.color.blue.8}', $type: 'color'},
-        '9': {$value: '{base.color.blue.9}', $type: 'color'},
-      },
-      red: {
-        '0': {$value: '{base.color.orange.0}', $type: 'color'},
-        '1': {$value: '{base.color.orange.1}', $type: 'color'},
-        '2': {$value: '{base.color.orange.2}', $type: 'color'},
-        '3': {$value: '{base.color.orange.3}', $type: 'color'},
-        '4': {$value: '{base.color.orange.4}', $type: 'color'},
-        '5': {$value: '{base.color.orange.5}', $type: 'color'},
-        '6': {$value: '{base.color.orange.6}', $type: 'color'},
-        '7': {$value: '{base.color.orange.7}', $type: 'color'},
-        '8': {$value: '{base.color.orange.8}', $type: 'color'},
-        '9': {$value: '{base.color.orange.9}', $type: 'color'},
-      },
-    },
   },
 }
diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5
@@ -224,35 +224,6 @@
           },
         },
       },
-    },
-    /**
-     * @description All overwrites for color scales
-     */
-    scale: {
-      green: {
-        '0': {$value: '{base.color.blue.0}', $type: 'color'},
-        '1': {$value: '{base.color.blue.1}', $type: 'color'},
-        '2': {$value: '{base.color.blue.2}', $type: 'color'},
-        '3': {$value: '{base.color.blue.3}', $type: 'color'},
-        '4': {$value: '{base.color.blue.4}', $type: 'color'},
-        '5': {$value: '{base.color.blue.5}', $type: 'color'},
-        '6': {$value: '{base.color.blue.6}', $type: 'color'},
-        '7': {$value: '{base.color.blue.7}', $type: 'color'},
-        '8': {$value: '{base.color.blue.8}', $type: 'color'},
-        '9': {$value: '{base.color.blue.9}', $type: 'color'},
-      },
-      orange: {
-        '0': {$value: '{base.color.red.0}', $type: 'color'},
-        '1': {$value: '{base.color.red.1}', $type: 'color'},
-        '2': {$value: '{base.color.red.2}', $type: 'color'},
-        '3': {$value: '{base.color.red.3}', $type: 'color'},
-        '4': {$value: '{base.color.red.4}', $type: 'color'},
-        '5': {$value: '{base.color.red.5}', $type: 'color'},
-        '6': {$value: '{base.color.red.6}', $type: 'color'},
-        '7': {$value: '{base.color.red.7}', $type: 'color'},
-        '8': {$value: '{base.color.red.8}', $type: 'color'},
-        '9': {$value: '{base.color.red.9}', $type: 'color'},
-      },
-    },
+    }
   },
 }