Change open colors to blue for tritanopia and colorblind

.changeset/modern-items-notice.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Changes open colors to blue for tritanopia and colorblind

src/tokens/component/button.json5

@@ -1148,17 +1148,17 @@
               'dark-dimmed-high-contrast': {
                 $value: '{base.color.red.1}',
               },
-              'dark-protanopia-deuteranopia': {
-                $value: '{fgColor.danger}',
-              },
               'dark-high-contrast': {
                 $value: '{base.color.red.2}',
               },
+              'dark-protanopia-deuteranopia': {
+                $value: '{base.color.yellow.3}',
+              },
               'dark-tritanopia-high-contrast': {
                 $value: '{base.color.red.2}',
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                $value: '{base.color.orange.2}',
+                $value: '{base.color.yellow.2}',
               },
             },
           },

src/tokens/functional/color/bgColor.json5

@@ -276,26 +276,14 @@
               $value: '{base.color.green.4}',
               alpha: 0.15,
             },
-            'light-tritanopia': '{base.color.blue.0}',
-            'light-tritanopia-high-contrast': '{base.color.blue.0}',
-            'dark-tritanopia': {
-              $value: '{base.color.blue.4}',
-              alpha: 0.15,
-            },
-            'dark-tritanopia-high-contrast': {
-              $value: '{base.color.blue.4}',
-              alpha: 0.15,
-            },
-            'light-protanopia-deuteranopia': '{base.color.blue.0}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.blue.0}',
-            'dark-protanopia-deuteranopia': {
-              $value: '{base.color.blue.4}',
-              alpha: 0.2,
-            },
-            'dark-protanopia-deuteranopia-high-contrast': {
-              $value: '{base.color.blue.4}',
-              alpha: 0.2,
-            },
+            'light-tritanopia': '{bgColor.accent.muted}',
+            'light-tritanopia-high-contrast': '{bgColor.accent.muted}',
+            'dark-tritanopia': '{bgColor.accent.muted}',
+            'dark-tritanopia-high-contrast': '{bgColor.accent.muted}',
+            'light-protanopia-deuteranopia': '{bgColor.accent.muted}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.accent.muted}',
+            'dark-protanopia-deuteranopia': '{bgColor.accent.muted}',
+            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.accent.muted}',
           },
         },
       },
@@ -313,14 +301,14 @@
           },
           'org.primer.overrides': {
             dark: '{base.color.green.5}',
-            'light-tritanopia': '{base.color.blue.5}',
-            'light-tritanopia-high-contrast': '{base.color.blue.5}',
-            'dark-tritanopia': '{base.color.blue.5}',
-            'dark-tritanopia-high-contrast': '{base.color.blue.9}',
-            'light-protanopia-deuteranopia': '{base.color.blue.5}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.blue.5}',
-            'dark-protanopia-deuteranopia': '{base.color.blue.5}',
-            'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.9}',
+            'light-tritanopia': '{bgColor.accent.emphasis}',
+            'light-tritanopia-high-contrast': '{bgColor.accent.emphasis}',
+            'dark-tritanopia': '{bgColor.accent.emphasis}',
+            'dark-tritanopia-high-contrast': '{bgColor.accent.emphasis}',
+            'light-protanopia-deuteranopia': '{bgColor.accent.emphasis}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.accent.emphasis}',
+            'dark-protanopia-deuteranopia': '{bgColor.accent.emphasis}',
+            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.accent.emphasis}',
             'light-high-contrast': '{base.color.green.5}',
             'dark-high-contrast': '{base.color.green.9}',
             'dark-dimmed-high-contrast': '{base.color.green.7}',
@@ -341,28 +329,6 @@
               web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
             },
           },
-          'org.primer.overrides': {
-            'light-tritanopia-high-contrast': '{base.color.red.0}',
-            'light-tritanopia': '{base.color.red.0}',
-            'dark-tritanopia': {
-              $value: '{base.color.red.4}',
-              alpha: 0.1,
-            },
-            'dark-tritanopia-high-contrast': {
-              $value: '{base.color.red.4}',
-              alpha: 0.1,
-            },
-            'light-protanopia-deuteranopia': '{base.color.orange.0}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.0}',
-            'dark-protanopia-deuteranopia': {
-              $value: '{base.color.orange.4}',
-              alpha: 0.1,
-            },
-            'dark-protanopia-deuteranopia-high-contrast': {
-              $value: '{base.color.orange.4}',
-              alpha: 0.1,
-            },
-          },
         },
       },
       emphasis: {
@@ -377,16 +343,6 @@
               web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
             },
           },
-          'org.primer.overrides': {
-            'light-tritanopia': '{base.color.red.5}',
-            'light-tritanopia-high-contrast': '{base.color.red.5}',
-            'dark-tritanopia': '{base.color.red.5}',
-            'dark-tritanopia-high-contrast': '{base.color.red.9}',
-            'light-protanopia-deuteranopia': '{base.color.orange.5}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.5}',
-            'dark-protanopia-deuteranopia': '{base.color.orange.5}',
-            'dark-protanopia-deuteranopia-high-contrast': '{base.color.orange.9}',
-          },
         },
       },
     },
@@ -501,12 +457,20 @@
               $value: '{base.color.red.4}',
               alpha: 0.1,
             },
-            'light-protanopia-deuteranopia': '{base.color.orange.0}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.0}',
             'dark-protanopia-deuteranopia': {
-              $value: '{base.color.orange.4}',
+              $value: '{base.color.yellow.4}',
+              alpha: 0.1,
+            },
+            'light-protanopia-deuteranopia': {
+              $value: '{base.color.yellow.0}',
+            },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.yellow.4}',
               alpha: 0.1,
             },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.yellow.0}',
+            },
           },
         },
       },
@@ -523,10 +487,10 @@
             },
           },
           'org.primer.overrides': {
-            'light-protanopia-deuteranopia': '{base.color.orange.5}',
-            'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.5}',
-            'dark-protanopia-deuteranopia': '{base.color.orange.5}',
-            'dark-protanopia-deuteranopia-high-contrast': '{base.color.orange.9}',
+            'light-protanopia-deuteranopia': '{base.color.yellow.5}',
+            'light-protanopia-deuteranopia-high-contrast': '{base.color.yellow.5}',
+            'dark-protanopia-deuteranopia': '{base.color.yellow.5}',
+            'dark-protanopia-deuteranopia-high-contrast': '{base.color.yellow.9}',
             'dark-high-contrast': '{base.color.red.9}',
             'dark-dimmed-high-contrast': '{base.color.red.7}',
             'dark-tritanopia-high-contrast': '{base.color.red.9}',
@@ -547,24 +511,6 @@
               web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
             },
           },
-          'org.primer.overrides': {
-            'light-tritanopia': '{bgColor.neutral.muted}',
-            'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
-            'dark-tritanopia': {
-              $value: '{bgColor.neutral.muted}',
-              alpha: 0.1,
-            },
-            'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
-            'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
-            'dark-protanopia-deuteranopia': {
-              $value: '{bgColor.neutral.muted}',
-              alpha: 0.1,
-            },
-            'dark-protanopia-deuteranopia-high-contrast': {
-              $value: '{bgColor.neutral.muted}',
-              alpha: 0.1,
-            },
-          },
         },
       },
       emphasis: {
@@ -579,16 +525,6 @@
               web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
             },
           },
-          'org.primer.overrides': {
-            'light-tritanopia': '{bgColor.neutral.emphasis}',
-            'light-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
-            'dark-tritanopia': '{bgColor.neutral.emphasis}',
-            'dark-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
-            'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
-            'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
-            'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
-            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
-          },
         },
       },
     },
@@ -610,6 +546,14 @@
               $value: '{base.color.purple.4}',
               alpha: 0.15,
             },
+            'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
+            'dark-protanopia-deuteranopia': '{bgColor.neutral.muted}',
+            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
+            'dark-tritanopia': '{bgColor.neutral.muted}',
+            'dark-tritanopia-high-contrast': '{bgColor.neutral.muted}',
+            'light-tritanopia': '{bgColor.neutral.muted}',
+            'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
           },
         },
       },
@@ -628,8 +572,14 @@
           'org.primer.overrides': {
             'dark-high-contrast': '{base.color.purple.9}',
             'dark-dimmed-high-contrast': '{base.color.purple.7}',
-            'dark-tritanopia-high-contrast': '{base.color.purple.9}',
-            'dark-protanopia-deuteranopia-high-contrast': '{base.color.purple.9}',
+            'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
+            'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
+            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
+            'dark-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
+            'dark-tritanopia': '{bgColor.neutral.emphasis}',
+            'light-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
+            'light-tritanopia': '{bgColor.neutral.emphasis}',
           },
         },
       },
@@ -647,6 +597,28 @@
               web: 'var(--bgColor-upsell-muted)',
             },
           },
+          'org.primer.overrides': {
+            'light-protanopia-deuteranopia': '{base.color.purple.0}',
+            'light-protanopia-deuteranopia-high-contrast': '{base.color.purple.0}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.purple.4}',
+              alpha: 0.15,
+            },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.purple.4}',
+              alpha: 0.15,
+            },
+            'dark-tritanopia-high-contrast': {
+              $value: '{base.color.purple.4}',
+              alpha: 0.15,
+            },
+            'dark-tritanopia': {
+              $value: '{base.color.purple.4}',
+              alpha: 0.15,
+            },
+            'light-tritanopia': '{base.color.purple.0}',
+            'light-tritanopia-high-contrast': '{base.color.purple.0}',
+          },
         },
       },
       emphasis: {
@@ -661,6 +633,16 @@
               web: 'var(--bgColor-upsell-emphasis)',
             },
           },
+          'org.primer.overrides': {
+            'light-protanopia-deuteranopia': '{base.color.purple.5}',
+            'light-protanopia-deuteranopia-high-contrast': '{base.color.purple.5}',
+            'dark-protanopia-deuteranopia': '{base.color.purple.5}',
+            'dark-protanopia-deuteranopia-high-contrast': '{base.color.purple.9}',
+            'dark-tritanopia': '{base.color.purple.5}',
+            'dark-tritanopia-high-contrast': '{base.color.purple.9}',
+            'light-tritanopia': '{base.color.purple.5}',
+            'light-tritanopia-high-contrast': '{base.color.purple.5}',
+          },
         },
       },
     },