enable colorblind mode in contrast check (#1066)

* enable colorblind mode in contrast check * working on fixing colorblind contrast * enable and fix tritanopia
primer · Sep 25, 2024 · 51b0324 · 51b0324
1 parent 8d72963
commit 51b0324
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/.changeset/gentle-toys-cough.md b/.changeset/gentle-toys-cough.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Fixes for colorblind themes
diff --git a/scripts/color-contrast.ts b/scripts/color-contrast.ts
@@ -188,7 +188,16 @@ const getColorsFromFiles = async (filePaths: ThemeName[]): Promise<Theme[]> => {
  * RUN CODE
  */
 const runCheck = async () => {
-  const themesNamesToCheck = ['light', 'dark', 'light_high_contrast', 'dark_high_contrast'] as ThemeName[]
+  const themesNamesToCheck = [
+    'light',
+    'dark',
+    'light_high_contrast',
+    'dark_high_contrast',
+    'light_colorblind',
+    'dark_colorblind',
+    'light_tritanopia',
+    'dark_tritanopia',
+  ] as ThemeName[]
   // get colors from doc json files
   const themes = await getColorsFromFiles(themesNamesToCheck)
   // check contrast for themes

diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5
@@ -10,7 +10,7 @@
       $type: 'color',
     },
     danger: {
-      $value: '{base.color.orange.4}',
+      $value: '{base.color.orange.3}',
       $type: 'color',
     },
     open: {
@@ -49,7 +49,7 @@
       muted: {
         $value: '{base.color.orange.4}',
         $type: 'color',
-        alpha: 0.4,
+        alpha: 0.2,
       },
       emphasis: {
         $value: '{base.color.orange.5}',

diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5
@@ -49,7 +49,7 @@
       muted: {
         $value: '{base.color.red.4}',
         $type: 'color',
-        alpha: 0.15,
+        alpha: 0.1,
       },
       emphasis: {
         $value: '{base.color.red.5}',

diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5
@@ -20,10 +20,6 @@
     danger: {
       $value: '{base.color.orange.5}',
       $type: 'color',
-      mix: {
-        color: '{base.color.orange.4}',
-        weight: 0.05,
-      },
     },
   },
   bgColor: {
@@ -40,12 +36,11 @@
     },
     open: {
       muted: {
-        $value: '{base.color.orange.3}',
+        $value: '{base.color.orange.0}',
         $type: 'color',
-        alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.orange.5}',
         $type: 'color',
       },
     },