add high contrast (#1138)

primer · Dec 18, 2024 · 0be97d5 · 0be97d5
1 parent 086fd63
commit 0be97d5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 99 deletions.
diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5
@@ -10,6 +10,9 @@
             group: 'component',
             scopes: ['fgColor'],
           },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{fgColor.onEmphasis}',
+          },
         },
       },
       bgColor: {
@@ -25,6 +28,10 @@
             dark: {
               alpha: 0.15,
             },
+            'dark-high-contrast': {
+              $value: '{bgColor.success.muted}',
+              alpha: 0.2,
+            },
           },
         },
       },
@@ -39,6 +46,9 @@
             group: 'component',
             scopes: ['fgColor'],
           },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.onEmphasis}',
+          },
         },
       },
       bgColor: {
@@ -60,6 +70,8 @@
               $value: '{base.color.blue.4}',
               alpha: 0.4,
             },
+            'light-high-contrast': '{base.color.green.5}',
+            'dark-high-contrast': '{bgColor.success.emphasis}',
           },
         },
       },
@@ -109,6 +121,9 @@
             group: 'component',
             scopes: ['fgColor'],
           },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{fgColor.onEmphasis}',
+          },
         },
       },
       bgColor: {
@@ -125,6 +140,10 @@
               $value: '{base.color.orange.4}',
               alpha: 0.15,
             },
+            'dark-high-contrast': {
+              $value: '{bgColor.danger.muted}',
+              alpha: 0.2,
+            },
           },
         },
       },
@@ -139,6 +158,9 @@
             group: 'component',
             scopes: ['fgColor'],
           },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.onEmphasis}',
+          },
         },
       },
       bgColor: {
@@ -160,6 +182,8 @@
               $value: '{base.color.orange.4}',
               alpha: 0.4,
             },
+            'light-high-contrast': '{base.color.red.5}',
+            'dark-high-contrast': '{bgColor.danger.emphasis}',
           },
         },
       },
@@ -212,6 +236,10 @@
           'org.primer.overrides': {
             'light-protanopia-deuteranopia': '{base.color.neutral.1}',
             'dark-protanopia-deuteranopia': '{base.color.neutral.3}',
+            'dark-high-contrast': {
+              $value: '{bgColor.accent.muted}',
+              alpha: 0.2,
+            },
           },
         },
       },
@@ -269,6 +297,10 @@
               dark: '{base.color.blue.8}',
               'light-protanopia-deuteranopia': '{base.color.neutral.3}',
               'dark-protanopia-deuteranopia': '{base.color.neutral.6}',
+              'dark-high-contrast': {
+                $value: '{base.color.blue.4}',
+                alpha: 0.4,
+              },
             },
           },
         },
@@ -325,6 +357,10 @@
             group: 'component',
             scopes: ['fgColor'],
           },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.default}',
+            'dark-high-contrast': '{fgColor.default}',
+          },
         },
       },
     },

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -508,66 +508,6 @@
       },
     },
   },
-  diffBlob: {
-    additionLine: {
-      fgColor: {
-        $value: '{fgColor.onEmphasis}',
-        $type: 'color',
-      },
-      bgColor: {
-        $value: '{bgColor.success.muted}',
-        $type: 'color',
-        alpha: 0.2,
-      },
-    },
-    additionWord: {
-      bgColor: {
-        $value: '{bgColor.success.emphasis}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    deletionLine: {
-      fgColor: {
-        $value: '{fgColor.onEmphasis}',
-        $type: 'color',
-      },
-      bgColor: {
-        $value: '{bgColor.danger.muted}',
-        $type: 'color',
-        alpha: 0.2,
-      },
-    },
-    deletionWord: {
-      bgColor: {
-        $value: '{bgColor.danger.emphasis}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    hunkNum: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.blue.4}',
-          $type: 'color',
-          alpha: 0.4,
-        },
-      },
-    },
-    hunkLine: {
-      bgColor: {
-        $value: '{bgColor.accent.muted}',
-        $type: 'color',
-        alpha: 0.2,
-      },
-    },
-    expander: {
-      iconColor: {
-        $value: '{fgColor.default}',
-        $type: 'color',
-      },
-    },
-  },
   codeMirror: {
     selection: {
       bgColor: {

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -440,45 +440,6 @@
       },
     },
   },
-  diffBlob: {
-    additionWord: {
-      fgColor: {
-        $value: '{fgColor.onEmphasis}',
-        $type: 'color',
-      },
-      bgColor: {
-        $value: '{base.color.green.5}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    deletionWord: {
-      fgColor: {
-        $value: '{fgColor.onEmphasis}',
-        $type: 'color',
-      },
-      bgColor: {
-        $value: '{base.color.red.5}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
-    hunkNum: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.blue.1}',
-          $type: 'color',
-          alpha: 1,
-        },
-      },
-    },
-    expander: {
-      iconColor: {
-        $value: '{fgColor.default}',
-        $type: 'color',
-      },
-    },
-  },
   header: {
     borderColor: {
       divider: {