Danger button contrast fix + tests (#1030)

* add tests * fix test * mix * mix hc * 50% * try red 2 * hover * add primary test * 15% * temp till we fix base scales * fix * fix test * test * will address this later * Create thirty-drinks-destroy.md * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Aug 23, 2024 · 9083a0f · 9083a0f
1 parent 95ea948
commit 9083a0f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/.changeset/thirty-drinks-destroy.md b/.changeset/thirty-drinks-destroy.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Danger button contrast fix + tests
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
@@ -51,6 +51,12 @@ const baseRequirements: ContrastRequirementBlueprint[] = [
   ['contrast.text', 'button-invisible-fgColor-hover', 'button-invisible-bgColor-hover'],
   ['contrast.text', 'button-invisible-iconColor-rest', 'bgColor-muted'],
   ['contrast.text', 'button-invisible-iconColor-hover', 'button-invisible-bgColor-hover'],
+  ['contrast.text', 'button-danger-fgColor-rest', 'button-danger-bgColor-rest'],
+  ['contrast.text', 'button-danger-fgColor-hover', 'button-danger-bgColor-hover'],
+  ['contrast.text', 'button-danger-fgColor-active', 'button-danger-bgColor-active'],
+  ['contrast.text', 'button-danger-iconColor-rest', 'button-danger-bgColor-rest'],
+  ['contrast.text', 'button-danger-iconColor-hover', 'button-danger-bgColor-hover'],
+  ['contrast.text', 'button-primary-fgColor-rest', 'button-primary-bgColor-rest'],
   // default text on role bg
   // TODO: contrast does not work with semi-transparent colors
   ['contrast.text', 'fgColor-default', 'bgColor-neutral-muted'],

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -436,7 +436,7 @@
     danger: {
       fgColor: {
         rest: {
-          $value: '{base.color.red.3}',
+          $value: '{base.color.red.2}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -468,11 +468,7 @@
         active: {
           $value: '{bgColor.danger.emphasis}',
           $type: 'color',
-          alpha: 1,
-          mix: {
-            color: '{base.color.red.7}',
-            weight: 0.4,
-          },
+          mix: null
         },
       },
     },

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -1359,7 +1359,7 @@
     danger: {
       fgColor: {
         rest: {
-          $value: '{fgColor.danger}',
+          $value: '{base.color.red.4}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1369,6 +1369,10 @@
               scopes: ['fgColor'],
             },
           },
+          mix: {
+            color: '{base.color.red.3}',
+            weight: 0.3,
+          },
         },
         hover: {
           $value: '{base.color.neutral.13}',
@@ -1410,7 +1414,7 @@
       },
       iconColor: {
         rest: {
-          $value: '{fgColor.danger}',
+          $value: '{button.danger.fgColor.rest}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {