Fix open state color for colorblind (#1136)

* fix open state color for colorbling * add changeset * github-actions[bot] Regenerated snapshots --------- Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com>
primer · Dec 18, 2024 · 3e281b1 · 3e281b1
1 parent b995538
commit 3e281b1
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/mean-islands-live.md b/.changeset/mean-islands-live.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Change open role color from red to blue for colorblind themes
diff --git a/...ts/storybook-all-color-swatches-dark-colorblind-bgColor-open-emphasis-linux.png b/...ts/storybook-all-color-swatches-dark-colorblind-bgColor-open-emphasis-linux.png
diff --git a/...torybook-all-color-swatches-dark-colorblind-borderColor-open-emphasis-linux.png b/...torybook-all-color-swatches-dark-colorblind-borderColor-open-emphasis-linux.png
diff --git a/...s/storybook-all-color-swatches-dark-colorblind-borderColor-open-muted-linux.png b/...s/storybook-all-color-swatches-dark-colorblind-borderColor-open-muted-linux.png
diff --git a/...s-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-open-linux.png b/...s-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-open-linux.png
diff --git a/...s/storybook-all-color-swatches-light-colorblind-bgColor-open-emphasis-linux.png b/...s/storybook-all-color-swatches-light-colorblind-bgColor-open-emphasis-linux.png
diff --git a/...orybook-all-color-swatches-light-colorblind-borderColor-open-emphasis-linux.png b/...orybook-all-color-swatches-light-colorblind-borderColor-open-emphasis-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-open-linux.png b/...-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-open-linux.png
diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5
@@ -14,7 +14,7 @@
       $type: 'color',
     },
     open: {
-      $value: '{base.color.orange.3}',
+      $value: '{base.color.blue.3}',
       $type: 'color',
     },
     closed: {
@@ -47,12 +47,12 @@
     },
     open: {
       muted: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
         alpha: 0.2,
       },
       emphasis: {
-        $value: '{base.color.orange.5}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
       },
     },
@@ -71,12 +71,12 @@
   borderColor: {
     open: {
       muted: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
       },
     },

diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5
@@ -10,7 +10,7 @@
       $type: 'color',
     },
     open: {
-      $value: '{base.color.orange.5}',
+      $value: '{base.color.blue.5}',
       $type: 'color',
     },
     closed: {
@@ -35,11 +35,11 @@
     },
     open: {
       muted: {
-        $value: '{base.color.orange.0}',
+        $value: '{base.color.blue.0}',
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.orange.5}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
       },
     },
@@ -67,12 +67,12 @@
   borderColor: {
     open: {
       muted: {
-        $value: '{base.color.orange.3}',
+        $value: '{base.color.blue.3}',
         $type: 'color',
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
       },
     },