Adding missing contrast checks (#949)

* adding missing contrast checks * add testing token * remove unneeded contrast checks * trying to fix contrast * fix for dark mode color * github-actions[bot] Regenerated snapshots --------- Co-authored-by: lukasoppermann <[email protected]>
primer · Jun 14, 2024 · 31e827d · 31e827d
1 parent de47782
commit 31e827d
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 1 deletion.
diff --git a/...rybook-all-color-swatches-dark-colorblind-control-fgColor-placeholder-linux.png b/...rybook-all-color-swatches-dark-colorblind-control-fgColor-placeholder-linux.png
diff --git a/...apshots/storybook-all-color-swatches-dark-control-fgColor-placeholder-linux.png b/...apshots/storybook-all-color-swatches-dark-control-fgColor-placeholder-linux.png
diff --git a/...ook-all-color-swatches-dark-high-contrast-control-fgColor-placeholder-linux.png b/...ook-all-color-swatches-dark-high-contrast-control-fgColor-placeholder-linux.png
diff --git a/...rybook-all-color-swatches-dark-tritanopia-control-fgColor-placeholder-linux.png b/...rybook-all-color-swatches-dark-tritanopia-control-fgColor-placeholder-linux.png
diff --git a/blob-report/report.zip b/blob-report/report.zip
diff --git a/scripts/color-contrast.config.ts b/scripts/color-contrast.config.ts
@@ -17,6 +17,14 @@ const baseRequirements: ContrastRequirement[] = [
   [4.5, 'fgColor-muted', 'bgColor-muted'],
   [4.5, 'fgColor-default', 'bgColor-inset'],
   [4.5, 'fgColor-muted', 'bgColor-inset'],
+  [4.5, 'control-fgColor-rest', 'bgColor-default'],
+  [4.5, 'control-fgColor-rest', 'bgColor-muted'],
+  [4.5, 'control-fgColor-rest', 'bgColor-inset'],
+  // control colors
+  [4.5, 'control-fgColor-rest', 'control-bgColor-rest'],
+  [4.5, 'control-fgColor-placeholder', 'control-bgColor-rest'],
+  [4.5, 'control-fgColor-rest', 'control-bgColor-active'],
+  [4.5, 'control-fgColor-rest', 'control-bgColor-selected'],
   // default text on role bg
   // TODO: contrast does not work with semi-transparent colors
   [4.5, 'fgColor-default', 'bgColor-accent-muted'],
@@ -91,6 +99,26 @@ const highContrast: ContrastRequirement[] = [
   [7, 'fgColor-muted', 'bgColor-muted'],
   [7, 'fgColor-default', 'bgColor-inset'],
   [7, 'fgColor-muted', 'bgColor-inset'],
+  [7, 'control-fgColor-rest', 'bgColor-default'],
+  [7, 'control-fgColor-placeholder', 'bgColor-default'],
+  [7, 'control-fgColor-rest', 'bgColor-muted'],
+  [7, 'control-fgColor-placeholder', 'bgColor-muted'],
+  [7, 'control-fgColor-rest', 'bgColor-inset'],
+  [7, 'control-fgColor-placeholder', 'bgColor-inset'],
+  // control colors
+  [7, 'fgColor-default', 'control-bgColor-rest'],
+  [7, 'fgColor-muted', 'control-bgColor-rest'],
+  [7, 'control-fgColor-rest', 'control-bgColor-rest'],
+  [7, 'control-fgColor-placeholder', 'control-bgColor-rest'],
+  [7, 'fgColor-default', 'control-bgColor-hover'],
+  [7, 'fgColor-muted', 'control-bgColor-hover'],
+  [7, 'control-fgColor-rest', 'control-bgColor-hover'],
+  [7, 'fgColor-default', 'control-bgColor-active'],
+  [7, 'fgColor-muted', 'control-bgColor-active'],
+  [7, 'control-fgColor-rest', 'control-bgColor-active'],
+  [7, 'fgColor-default', 'control-bgColor-selected'],
+  [7, 'fgColor-muted', 'control-bgColor-selected'],
+  [7, 'control-fgColor-rest', 'control-bgColor-selected'],
   // default text on role bg
   // TODO: contrast does not work with semi-transparent colors
   [7, 'fgColor-default', 'bgColor-accent-muted'],

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -142,8 +142,12 @@
         },
       },
       placeholder: {
-        $value: '{base.color.neutral.5}',
+        $value: '{base.color.neutral.3}',
         $type: 'color',
+        mix: {
+          color: '{base.color.neutral.4}',
+          weight: 0.2,
+        },
         $extensions: {
           'org.primer.figma': {
             collection: 'mode',

diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -143,6 +143,10 @@
       placeholder: {
         $value: '{base.color.neutral.5}',
         $type: 'color',
+        mix: {
+          color: '{base.color.neutral.6}',
+          weight: 0.2,
+        },
         $extensions: {
           'org.primer.figma': {
             collection: 'mode',

diff --git a/src/tokens/removed/testing.json5 b/src/tokens/removed/testing.json5
@@ -0,0 +1,4 @@
+/* rename token to trigger actions to run on token change */
+{
+  "testing": null 
+}