Light protanopia deutranopia (#599)

* replace light colorblind mode scales with overrides
primer · Jun 1, 2023 · 7c90c35 · 7c90c35
1 parent 089d28e
commit 7c90c35
Show file tree

Hide file tree

Showing 3 changed files with 268 additions and 8 deletions.
diff --git a/.changeset/healthy-cats-warn.md b/.changeset/healthy-cats-warn.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Replace light-colorblind scale with overrides
diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts
@@ -30,13 +30,13 @@ export const themes: TokenBuildInput[] = [
     source: [
       `src/tokens/functional/color/light/*.json5`,
       `src/tokens/functional/color/scales.json5`,
-      `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
       `src/tokens/functional/shadow/light.json5`,
       `src/tokens/functional/border/light.json5`,
+      `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
     ],
     include: [
       `src/tokens/base/color/light/light.json5`,
-      `src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
+      // `src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
     ],
   },
   {

diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5
@@ -5,6 +5,10 @@
  */
 {
   fgColor: {
+    success: {
+      $value: '{base.color.blue.5}',
+      $type: 'color',
+    },
     open: {
       $value: '{base.color.orange.5}',
       $type: 'color',
@@ -13,8 +17,30 @@
       $value: '{base.color.gray.5}',
       $type: 'color',
     },
+    danger: {
+      $value: '{base.color.orange.5}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.orange.4}',
+        weight: 0.05,
+      },
+    },
   },
   bgColor: {
+    success: {
+      muted: {
+        $value: '{base.color.blue.0}',
+        $type: 'color',
+      },
+      emphasis: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.blue.5}',
+          weight: 0.75,
+        },
+      },
+    },
     open: {
       muted: {
         $value: '{base.color.orange.3}',
@@ -26,6 +52,16 @@
         $type: 'color',
       },
     },
+    danger: {
+      muted: {
+        $value: '{base.color.orange.0}',
+        $type: 'color',
+      },
+      emphasis: {
+        $value: '{base.color.orange.5}',
+        $type: 'color',
+      },
+    },
     closed: {
       muted: {
         $value: '{base.color.gray.3}',
@@ -61,23 +97,45 @@
         $type: 'color',
       },
     },
+    success: {
+      muted: {
+        $value: '{base.color.blue.3}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+      emphasis: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+      },
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.orange.3}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+      emphasis: {
+        $value: '{base.color.orange.5}',
+        $type: 'color',
+      },
+    },
   },
   diffBlob: {
     addition: {
       bgColor: {
         num: {
-          $value: '{base.color.green.3}',
+          $value: '{base.color.blue.3}',
           $type: 'color',
           mix: null,
           alpha: 0.4,
         },
         line: {
-          $value: '{base.color.green.0}',
+          $value: '{base.color.blue.0}',
           $type: 'color',
           alpha: 0.5,
         },
         word: {
-          $value: '{base.color.green.3}',
+          $value: '{base.color.blue.3}',
           $type: 'color',
           alpha: 0.4,
         },
@@ -86,21 +144,218 @@
     deletion: {
       bgColor: {
         num: {
-          $value: '{base.color.red.3}',
+          $value: '{base.color.orange.3}',
           $type: 'color',
           alpha: 0.4,
         },
         line: {
-          $value: '{base.color.red.0}',
+          $value: '{base.color.orange.0}',
           $type: 'color',
           alpha: 0.5,
         },
         word: {
-          $value: '{base.color.red.2}',
+          $value: '{base.color.orange.2}',
           $type: 'color',
           alpha: 0.5,
         },
       },
     },
   },
+  codeMirror: {
+    syntax: {
+      fgColor: {
+        keyword: {
+          $value: '{base.color.orange.5}',
+          $type: 'color',
+        },
+        storage: {
+          $value: '{base.color.orange.5}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  button: {
+    primary: {
+      bgColor: {
+        hover: {
+          $value: '{bgColor.success.emphasis}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.blue.6}',
+            weight: 0.2,
+          },
+        },
+        active: {
+          $value: '{bgColor.success.emphasis}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.blue.6}',
+            weight: 0.4,
+          },
+        },
+        disabled: {
+          $value: '{base.color.blue.4}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.blue.0}',
+            weight: 0.6,
+          },
+        },
+      },
+      shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.blue.9}',
+              alpha: 0.3,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.orange.6}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{base.color.orange.6}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.orange.8}',
+            weight: 0.4,
+          },
+        },
+      },
+      shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.orange.9}',
+              alpha: 0.2,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+        },
+      },
+    },
+  },
+  color: {
+    ansi: {
+      green: {
+        $value: '{base.color.blue.6}',
+        $type: 'color',
+      },
+      'green-bright': {
+        $value: '{base.color.blue.5}',
+        $type: 'color',
+      },
+      red: {
+        $value: '{base.color.orange.5}',
+        $type: 'color',
+      },
+      'red-bright': {
+        $value: '{base.color.orange.6}',
+        $type: 'color',
+      },
+    },
+    prettylights: {
+      syntax: {
+        keyword: {
+          $value: '{base.color.orange.5}',
+          $type: 'color',
+        },
+        invalid: {
+          illegal: {
+            bg: {
+              $value: '{base.color.orange.7}',
+              $type: 'color',
+            },
+          },
+        },
+        carriage: {
+          return: {
+            bg: {
+              $value: '{base.color.orange.5}',
+              $type: 'color',
+            },
+          },
+        },
+        'string-regexp': {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+        },
+        brackethighlighter: {
+          unmatched: {
+            $value: '{base.color.orange.7}',
+            $type: 'color',
+          },
+        },
+        markup: {
+          deleted: {
+            text: {
+              $value: '{base.color.orange.7}',
+              $type: 'color',
+            },
+            bg: {
+              $value: '{base.color.orange.0}',
+              $type: 'color',
+            },
+          },
+          inserted: {
+            text: {
+              $value: '{base.color.blue.6}',
+              $type: 'color',
+            },
+            bg: {
+              $value: '{base.color.blue.0}',
+              $type: 'color',
+            },
+          },
+        },
+      },
+    },
+    /**
+     * @description All overwrites for color scales
+     */
+    scale: {
+      green: {
+        '0': {$value: '{base.color.blue.0}'},
+        '1': {$value: '{base.color.blue.1}'},
+        '2': {$value: '{base.color.blue.2}'},
+        '3': {$value: '{base.color.blue.3}'},
+        '4': {$value: '{base.color.blue.4}'},
+        '5': {$value: '{base.color.blue.5}'},
+        '6': {$value: '{base.color.blue.6}'},
+        '7': {$value: '{base.color.blue.7}'},
+        '8': {$value: '{base.color.blue.8}'},
+        '9': {$value: '{base.color.blue.9}'},
+      },
+      red: {
+        '0': {$value: '{base.color.orange.0}'},
+        '1': {$value: '{base.color.orange.1}'},
+        '2': {$value: '{base.color.orange.2}'},
+        '3': {$value: '{base.color.orange.3}'},
+        '4': {$value: '{base.color.orange.4}'},
+        '5': {$value: '{base.color.orange.5}'},
+        '6': {$value: '{base.color.orange.6}'},
+        '7': {$value: '{base.color.orange.7}'},
+        '8': {$value: '{base.color.orange.8}'},
+        '9': {$value: '{base.color.orange.9}'},
+      },
+    },
+  },
 }