make borders same as fill, like it is in normal modes (#1146)

* make borders same as fill, like it is in normal modes * fix borderColor for colorblind mode * add borderColor to separate file
primer · Dec 20, 2024 · a16f30e · a16f30e
1 parent 5100c76
commit a16f30e
Show file tree

Hide file tree

Showing 15 changed files with 653 additions and 1,276 deletions.
diff --git a/.changeset/smooth-tools-carry.md b/.changeset/smooth-tools-carry.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Fix borderColors in colorblind modes
diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts
@@ -121,6 +121,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'light',
@@ -134,6 +135,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'light-high-contrast',
@@ -147,6 +149,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'light-protanopia-deuteranopia',
@@ -160,6 +163,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'light-tritanopia',
@@ -172,6 +176,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'dark',
@@ -185,6 +190,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'dark-high-contrast',
@@ -198,6 +204,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'dark-dimmed',
@@ -211,6 +218,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'dark-protanopia-deuteranopia',
@@ -224,6 +232,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
         `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
+        `src/tokens/functional/color/*.json5`,
         `src/tokens/component/*.json5`,
       ],
       theme: 'dark-tritanopia',

diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts
@@ -201,15 +201,8 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     // color, shadow & borders
     {
       filename: 'theme',
-      source: [
-        `src/tokens/base/color/light/light.json5`,
-        `src/tokens/base/color/light/display-light.json5`,
-        `src/tokens/functional/color/light/*.json5`,
-        `src/tokens/functional/shadow/light.json5`,
-        `src/tokens/functional/border/*.json5`,
-        `src/tokens/component/*.json5`,
-      ],
-      include: [`src/tokens/base/color/light/light.json5`, 'src/tokens/functional/size/border.json5'],
+      source: themes.find(theme => theme.filename === 'light')?.source || [],
+      include: themes.find(theme => theme.filename === 'light')?.include || [],
     },
     // typography
     {

diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -5,10 +5,11 @@ export const themes: TokenBuildInput[] = [
     filename: 'light',
     theme: 'light',
     source: [
-      `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
+      `src/tokens/functional/color/light/*.json5`,
     ],
     include: [
       `src/tokens/functional/size/border.json5`,
@@ -23,6 +24,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
     ],
@@ -39,6 +41,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
     ],
@@ -55,6 +58,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
     ],
@@ -72,6 +76,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/dark/*.json5`,
     ],
     include: [
@@ -87,6 +92,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
     ],
@@ -104,6 +110,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
     ],
@@ -120,6 +127,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
     ],
@@ -136,6 +144,7 @@ export const themes: TokenBuildInput[] = [
       `src/tokens/functional/shadow/dark.json5`,
       `src/tokens/functional/border/*.json5`,
       `src/tokens/component/*.json5`,
+      `src/tokens/functional/color/*.json5`,
       `src/tokens/functional/color/dark/*.json5`,
       `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
     ],

diff --git a/src/schemas/colorToken.ts b/src/schemas/colorToken.ts
@@ -62,7 +62,7 @@ export const colorToken = baseColorToken
               errorMap: e => {
                 if (e.code === 'unrecognized_keys') {
                   return {
-                    message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deutranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deutranopia, dark-high-contrast, dark-dimmed`,
+                    message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`,
                   }
                 }
                 return {message: `Error: ${e.code}`}