Skip to content

test contrast #1208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 2 commits into from
Closed

test contrast #1208

wants to merge 2 commits into from

Conversation

langermank
Copy link
Contributor

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Apr 3, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 175802f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 3, 2025 •
edited
Loading

Design Token Diff (CSS)

/css/functional/themes/dark-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-04-03 00:07:30.227106635 +0000
@@ -26,7 +26,7 @@
 --bgColor-danger-emphasis: #ad0116;
 --bgColor-danger-muted: #ff80801a;
 --bgColor-disabled: #262c36;
-  --bgColor-done-emphasis: #6921d7;
+  --bgColor-done-emphasis: #e6ccff;
 --bgColor-done-muted: #bf8fff26;
 --bgColor-emphasis: #3d444d;
 --bgColor-muted: #151b23;
@@ -308,6 +308,7 @@
 --display-yellow-fgColor: #edb431;
 --fgColor-attention: #f0b72f;
 --fgColor-danger: #ff9492;
+  --fgColor-default: #3d444d;
 --fgColor-disabled: #656c76;
 --fgColor-link: var(--fgColor-accent);
 --fgColor-muted: #b7bdc8;
@@ -511,8 +512,11 @@
 --buttonCounter-primary-bgColor-rest: #01040926;
 --card-bgColor: var(--bgColor-muted);
 --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
+  --codeMirror-cursor-fgColor: var(--fgColor-default);
+  --codeMirror-fgColor: var(--fgColor-default);
 --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
 --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
+  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
 --color-ansi-white-bright: #ffffff;
 --control-bgColor-disabled: var(--bgColor-disabled);
 --control-bgColor-selected: var(--control-bgColor-rest);
@@ -527,6 +531,7 @@
 --control-danger-bgColor-hover: var(--bgColor-danger-emphasis);
 --control-danger-fgColor-rest: var(--fgColor-danger);
 --control-fgColor-disabled: var(--fgColor-disabled);
+  --control-fgColor-rest: var(--fgColor-default);
 --control-iconColor-rest: var(--fgColor-muted);
 --control-transparent-bgColor-disabled: var(--bgColor-disabled);
 --control-transparent-borderColor-active: var(--borderColor-default);
@@ -534,21 +539,27 @@
 --controlKnob-bgColor-checked: #ffffff;
 --controlTrack-bgColor-disabled: var(--fgColor-disabled);
 --controlTrack-borderColor-disabled: var(--fgColor-disabled);
+  --controlTrack-fgColor-rest: var(--fgColor-default);
 --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
 --counter-bgColor-muted: var(--bgColor-neutral-muted);
 --counter-borderColor: var(--borderColor-default);
 --diffBlob-additionLine-bgColor: #0ac74033;
+  --diffBlob-additionNum-fgColor: var(--fgColor-default);
 --diffBlob-additionWord-bgColor: var(--bgColor-success-emphasis);
+  --diffBlob-additionWord-fgColor: var(--fgColor-default);
 --diffBlob-deletionLine-bgColor: #ff808033;
+  --diffBlob-deletionNum-fgColor: var(--fgColor-default);
 --diffBlob-deletionWord-bgColor: var(--bgColor-danger-emphasis);
+  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
 --diffBlob-emptyLine-bgColor: var(--bgColor-muted);
 --diffBlob-emptyNum-bgColor: var(--bgColor-muted);
+  --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkLine-bgColor: #5cacff33;
 --diffBlob-hunkLine-fgColor: var(--fgColor-muted);
 --diffBlob-hunkNum-bgColor-hover: var(--bgColor-accent-emphasis);
+  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --fgColor-black: #010409;
 --fgColor-closed: var(--fgColor-danger);
-  --fgColor-default: #ffffff;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
@@ -582,40 +593,33 @@
 --button-default-bgColor-disabled: var(--control-bgColor-disabled);
 --button-default-borderColor-disabled: var(--control-borderColor-disabled);
 --button-default-borderColor-rest: var(--control-borderColor-rest);
+  --button-default-fgColor-rest: var(--control-fgColor-rest);
 --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
+  --button-invisible-fgColor-active: var(--control-fgColor-rest);
 --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+  --button-invisible-fgColor-hover: var(--control-fgColor-rest);
+  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
 --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
 --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
 --button-primary-fgColor-rest: var(--fgColor-white);
 --button-primary-iconColor-rest: var(--fgColor-white);
 --codeMirror-bgColor: var(--bgColor-default);
-  --codeMirror-cursor-fgColor: var(--fgColor-default);
-  --codeMirror-fgColor: var(--fgColor-default);
 --codeMirror-gutterMarker-fgColor-default: var(--bgColor-default);
 --codeMirror-gutters-bgColor: var(--bgColor-default);
 --codeMirror-lines-bgColor: var(--bgColor-default);
-  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
 --control-borderColor-emphasis: var(--borderColor-emphasis);
 --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
 --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
 --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
-  --control-fgColor-rest: var(--fgColor-default);
 --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
 --controlKnob-bgColor-rest: var(--bgColor-inset);
 --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
 --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
 --controlTrack-borderColor-rest: var(--borderColor-emphasis);
 --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
-  --controlTrack-fgColor-rest: var(--fgColor-default);
 --diffBlob-additionLine-fgColor: var(--fgColor-onEmphasis);
-  --diffBlob-additionNum-fgColor: var(--fgColor-default);
-  --diffBlob-additionWord-fgColor: var(--fgColor-default);
 --diffBlob-deletionLine-fgColor: var(--fgColor-onEmphasis);
-  --diffBlob-deletionNum-fgColor: var(--fgColor-default);
-  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
-  --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #409eff;
 --page-header-bgColor: var(--bgColor-default);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
@@ -628,10 +632,6 @@
 --border-neutral-muted: 0.0625rem solid #b7bdc8;
 --button-default-borderColor-active: var(--button-default-borderColor-rest);
 --button-default-borderColor-hover: var(--button-default-borderColor-rest);
-  --button-default-fgColor-rest: var(--control-fgColor-rest);
-  --button-invisible-fgColor-active: var(--control-fgColor-rest);
-  --button-invisible-fgColor-hover: var(--control-fgColor-rest);
-  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -664,7 +664,7 @@
   --bgColor-danger-emphasis: #ad0116;
   --bgColor-danger-muted: #ff80801a;
   --bgColor-disabled: #262c36;
-    --bgColor-done-emphasis: #6921d7;
+    --bgColor-done-emphasis: #e6ccff;
   --bgColor-done-muted: #bf8fff26;
   --bgColor-emphasis: #3d444d;
   --bgColor-muted: #151b23;
@@ -946,6 +946,7 @@
   --display-yellow-fgColor: #edb431;
   --fgColor-attention: #f0b72f;
   --fgColor-danger: #ff9492;
+    --fgColor-default: #3d444d;
   --fgColor-disabled: #656c76;
   --fgColor-link: var(--fgColor-accent);
   --fgColor-muted: #b7bdc8;
@@ -1149,8 +1150,11 @@
   --buttonCounter-primary-bgColor-rest: #01040926;
   --card-bgColor: var(--bgColor-muted);
   --codeMirror-activeline-bgColor: var(--bgColor-neutral-muted);
+    --codeMirror-cursor-fgColor: var(--fgColor-default);
+    --codeMirror-fgColor: var(--fgColor-default);
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
+    --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --color-ansi-white-bright: #ffffff;
   --control-bgColor-disabled: var(--bgColor-disabled);
   --control-bgColor-selected: var(--control-bgColor-rest);
@@ -1165,6 +1169,7 @@
   --control-danger-bgColor-hover: var(--bgColor-danger-emphasis);
   --control-danger-fgColor-rest: var(--fgColor-danger);
   --control-fgColor-disabled: var(--fgColor-disabled);
+    --control-fgColor-rest: var(--fgColor-default);
   --control-iconColor-rest: var(--fgColor-muted);
   --control-transparent-bgColor-disabled: var(--bgColor-disabled);
   --control-transparent-borderColor-active: var(--borderColor-default);
@@ -1172,21 +1177,27 @@
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
+    --controlTrack-fgColor-rest: var(--fgColor-default);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
   --counter-borderColor: var(--borderColor-default);
   --diffBlob-additionLine-bgColor: #0ac74033;
+    --diffBlob-additionNum-fgColor: var(--fgColor-default);
   --diffBlob-additionWord-bgColor: var(--bgColor-success-emphasis);
+    --diffBlob-additionWord-fgColor: var(--fgColor-default);
   --diffBlob-deletionLine-bgColor: #ff808033;
+    --diffBlob-deletionNum-fgColor: var(--fgColor-default);
   --diffBlob-deletionWord-bgColor: var(--bgColor-danger-emphasis);
+    --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-emptyLine-bgColor: var(--bgColor-muted);
   --diffBlob-emptyNum-bgColor: var(--bgColor-muted);
+    --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkLine-bgColor: #5cacff33;
   --diffBlob-hunkLine-fgColor: var(--fgColor-muted);
   --diffBlob-hunkNum-bgColor-hover: var(--bgColor-accent-emphasis);
+    --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
-    --fgColor-default: #ffffff;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
@@ -1220,40 +1231,33 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
+    --button-default-fgColor-rest: var(--control-fgColor-rest);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
+    --button-invisible-fgColor-active: var(--control-fgColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
+    --button-invisible-fgColor-hover: var(--control-fgColor-rest);
+    --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
   --button-primary-iconColor-rest: var(--fgColor-white);
   --codeMirror-bgColor: var(--bgColor-default);
-    --codeMirror-cursor-fgColor: var(--fgColor-default);
-    --codeMirror-fgColor: var(--fgColor-default);
   --codeMirror-gutterMarker-fgColor-default: var(--bgColor-default);
   --codeMirror-gutters-bgColor: var(--bgColor-default);
   --codeMirror-lines-bgColor: var(--bgColor-default);
-    --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --control-borderColor-emphasis: var(--borderColor-emphasis);
   --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
   --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
-    --control-fgColor-rest: var(--fgColor-default);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
-    --controlTrack-fgColor-rest: var(--fgColor-default);
   --diffBlob-additionLine-fgColor: var(--fgColor-onEmphasis);
-    --diffBlob-additionNum-fgColor: var(--fgColor-default);
-    --diffBlob-additionWord-fgColor: var(--fgColor-default);
   --diffBlob-deletionLine-fgColor: var(--fgColor-onEmphasis);
-    --diffBlob-deletionNum-fgColor: var(--fgColor-default);
-    --diffBlob-deletionWord-fgColor: var(--fgColor-default);
-    --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
@@ -1266,10 +1270,6 @@
   --border-neutral-muted: 0.0625rem solid #b7bdc8;
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
-    --button-default-fgColor-rest: var(--control-fgColor-rest);
-    --button-invisible-fgColor-active: var(--control-fgColor-rest);
-    --button-invisible-fgColor-hover: var(--control-fgColor-rest);
-    --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 3, 2025 •
edited
Loading

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2025-04-03 00:07:28.644099148 +0000
@@ -785,7 +785,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#271052"
+        "dark-high-contrast": "#e2c5ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -803,7 +803,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22042,7 +22042,7 @@
     },
     "org.primer.overrides": {
       "dark": "#f0f6fc",
-        "dark-high-contrast": "#ffffff",
+        "dark-high-contrast": "#3d444d",
       "dark-dimmed": "#d1d7e0"
     }
   },
@@ -22062,7 +22062,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2025-04-03 00:07:25.485084207 +0000
@@ -783,7 +783,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#352160"
+        "dark-high-contrast": "#dcbdfb"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -801,7 +801,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22036,7 +22036,7 @@
     },
     "org.primer.overrides": {
       "dark": "#f0f6fc",
-        "dark-high-contrast": "#cdd9e5",
+        "dark-high-contrast": "#3d444d",
       "dark-dimmed": "#d1d7e0"
     }
   },
@@ -22056,7 +22056,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2025-04-03 00:07:30.228106640 +0000
@@ -773,7 +773,7 @@
   "key": "{bgColor.disabled}"
 },
 "bgColor-done-emphasis": {
-    "$value": "#6921d7",
+    "$value": "#e6ccff",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -785,13 +785,13 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#6921d7"
+        "dark-high-contrast": "#e6ccff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
   "isSource": true,
   "original": {
-      "$value": "{base.color.purple.9}",
+      "$value": "{base.color.purple.1}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -803,7 +803,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -1645,7 +1645,7 @@
   "key": "{bgColor.transparent}"
 },
 "bgColor-upsell-emphasis": {
-    "$value": "#6921d7",
+    "$value": "#e6ccff",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5019,7 +5019,7 @@
   "key": "{button.default.borderColor.rest}"
 },
 "button-default-fgColor-rest": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5029,7 +5029,7 @@
     },
     "org.primer.overrides": {
       "dark": {
-          "$value": "#ffffff",
+          "$value": "#3d444d",
         "filePath": "src/tokens/component/button.json5",
         "isSource": true,
         "$type": "color"
@@ -5635,7 +5635,7 @@
   "key": "{button.invisible.borderColor.rest}"
 },
 "button-invisible-fgColor-active": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5645,7 +5645,7 @@
     },
     "org.primer.overrides": {
       "dark": {
-          "$value": "#ffffff",
+          "$value": "#3d444d",
         "filePath": "src/tokens/component/button.json5",
         "isSource": true,
         "$type": "color"
@@ -5723,7 +5723,7 @@
   "key": "{button.invisible.fgColor.disabled}"
 },
 "button-invisible-fgColor-hover": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5733,7 +5733,7 @@
     },
     "org.primer.overrides": {
       "dark": {
-          "$value": "#ffffff",
+          "$value": "#3d444d",
         "filePath": "src/tokens/component/button.json5",
         "isSource": true,
         "$type": "color"
@@ -5779,7 +5779,7 @@
   "key": "{button.invisible.fgColor.hover}"
 },
 "button-invisible-fgColor-rest": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5789,7 +5789,7 @@
     },
     "org.primer.overrides": {
       "dark": {
-          "$value": "#ffffff",
+          "$value": "#3d444d",
         "filePath": "src/tokens/component/button.json5",
         "isSource": true,
         "$type": "color"
@@ -8555,7 +8555,7 @@
   "key": "{codeMirror.bgColor}"
 },
 "codeMirror-cursor-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -8564,7 +8564,7 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#ffffff"
+        "dark": "#3d444d"
     }
   },
   "filePath": "src/tokens/component/codeMirror.json5",
@@ -8589,7 +8589,7 @@
   "key": "{codeMirror.cursor.fgColor}"
 },
 "codeMirror-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -8598,7 +8598,7 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#ffffff"
+        "dark": "#3d444d"
     }
   },
   "filePath": "src/tokens/component/codeMirror.json5",
@@ -8793,7 +8793,7 @@
   "key": "{codeMirror.lines.bgColor}"
 },
 "codeMirror-matchingBracket-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -8802,7 +8802,7 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#ffffff"
+        "dark": "#3d444d"
     }
   },
   "filePath": "src/tokens/component/codeMirror.json5",
@@ -12883,7 +12883,7 @@
   "key": "{control.fgColor.placeholder}"
 },
 "control-fgColor-rest": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -12892,7 +12892,7 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "dark": "#ffffff"
+        "dark": "#3d444d"
     }
   },
   "filePath": "src/tokens/functional/color/control.json5",
@@ -14037,7 +14037,7 @@
   "key": "{controlTrack.fgColor.disabled}"
 },
 "controlTrack-fgColor-rest": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -14048,7 +14048,7 @@
     "org.primer.overrides": {
       "dark": "#b7bdc8",
       "dark-high-contrast": {
-          "$value": "#ffffff",
+          "$value": "#3d444d",
         "filePath": "src/tokens/functional/color/control.json5",
         "isSource": true,
         "$type": "color"
@@ -15499,7 +15499,7 @@
   "key": "{diffBlob.additionNum.bgColor}"
 },
 "diffBlob-additionNum-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -15609,7 +15609,7 @@
   "key": "{diffBlob.additionWord.bgColor}"
 },
 "diffBlob-additionWord-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -15805,7 +15805,7 @@
   "key": "{diffBlob.deletionNum.bgColor}"
 },
 "diffBlob-deletionNum-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -15901,7 +15901,7 @@
   "key": "{diffBlob.deletionWord.bgColor}"
 },
 "diffBlob-deletionWord-fgColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -15991,7 +15991,7 @@
   "key": "{diffBlob.emptyNum.bgColor}"
 },
 "diffBlob-expander-iconColor": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -16000,8 +16000,8 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "light-high-contrast": "#ffffff",
-        "dark-high-contrast": "#ffffff"
+        "light-high-contrast": "#3d444d",
+        "dark-high-contrast": "#3d444d"
     }
   },
   "filePath": "src/tokens/component/diffBlob.json5",
@@ -16218,8 +16218,8 @@
       "scopes": ["fgColor"]
     },
     "org.primer.overrides": {
-        "light-protanopia-deuteranopia": "#ffffff",
-        "light-tritanopia": "#ffffff"
+        "light-protanopia-deuteranopia": "#3d444d",
+        "light-tritanopia": "#3d444d"
     }
   },
   "filePath": "src/tokens/component/diffBlob.json5",
@@ -16245,7 +16245,7 @@
   "key": "{diffBlob.hunkNum.fgColor.hover}"
 },
 "diffBlob-hunkNum-fgColor-rest": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -22037,7 +22037,7 @@
   "key": "{fgColor.danger}"
 },
 "fgColor-default": {
-    "$value": "#ffffff",
+    "$value": "#3d444d",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -22050,14 +22050,14 @@
     },
     "org.primer.overrides": {
       "dark": "#f0f6fc",
-        "dark-high-contrast": "#ffffff",
+        "dark-high-contrast": "#3d444d",
       "dark-dimmed": "#d1d7e0"
     }
   },
   "filePath": "src/tokens/functional/color/fgColor.json5",
   "isSource": true,
   "original": {
-      "$value": "{base.color.neutral.13}",
+      "$value": "{base.color.neutral.7}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -22070,7 +22070,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/dark-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2025-04-03 00:07:27.016091448 +0000
@@ -785,7 +785,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#271052"
+        "dark-high-contrast": "#e2c5ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -803,7 +803,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22040,7 +22040,7 @@
     },
     "org.primer.overrides": {
       "dark": "#f0f6fc",
-        "dark-high-contrast": "#ffffff",
+        "dark-high-contrast": "#3d444d",
       "dark-dimmed": "#d1d7e0"
     }
   },
@@ -22060,7 +22060,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2025-04-03 00:07:23.949076942 +0000
@@ -783,7 +783,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#271052"
+        "dark-high-contrast": "#e2c5ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -801,7 +801,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22032,7 +22032,7 @@
     },
     "org.primer.overrides": {
       "dark": "#f0f6fc",
-        "dark-high-contrast": "#ffffff",
+        "dark-high-contrast": "#3d444d",
       "dark-dimmed": "#d1d7e0"
     }
   },
@@ -22052,7 +22052,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/light-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2025-04-03 00:07:20.975063608 +0000
@@ -775,7 +775,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#2e1461"
+        "dark-high-contrast": "#ecd8ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -793,7 +793,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22012,7 +22012,7 @@
     },
     "org.primer.overrides": {
       "dark": "#25292e",
-        "dark-high-contrast": "#1f2328",
+        "dark-high-contrast": "#c8d1da",
       "dark-dimmed": "#393f46"
     }
   },
@@ -22032,7 +22032,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/light-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2025-04-03 00:07:22.455069876 +0000
@@ -777,7 +777,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#260f49"
+        "dark-high-contrast": "#e0c5ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -795,7 +795,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22014,7 +22014,7 @@
     },
     "org.primer.overrides": {
       "dark": "#25292e",
-        "dark-high-contrast": "#010409",
+        "dark-high-contrast": "#c8d1da",
       "dark-dimmed": "#393f46"
     }
   },
@@ -22034,7 +22034,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/light-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2025-04-03 00:07:19.508057426 +0000
@@ -775,7 +775,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#2e1461"
+        "dark-high-contrast": "#ecd8ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -793,7 +793,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22012,7 +22012,7 @@
     },
     "org.primer.overrides": {
       "dark": "#25292e",
-        "dark-high-contrast": "#1f2328",
+        "dark-high-contrast": "#c8d1da",
       "dark-dimmed": "#393f46"
     }
   },
@@ -22032,7 +22032,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

/styleLint/functional/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2025-04-03 00:07:17.973050537 +0000
@@ -775,7 +775,7 @@
       }
     },
     "org.primer.overrides": {
-        "dark-high-contrast": "#2e1461"
+        "dark-high-contrast": "#ecd8ff"
     }
   },
   "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -793,7 +793,7 @@
         }
       },
       "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.purple.9}"
+          "dark-high-contrast": "{base.color.purple.1}"
       }
     }
   },
@@ -22008,7 +22008,7 @@
     },
     "org.primer.overrides": {
       "dark": "#25292e",
-        "dark-high-contrast": "#1f2328",
+        "dark-high-contrast": "#c8d1da",
       "dark-dimmed": "#393f46"
     }
   },
@@ -22028,7 +22028,7 @@
       },
       "org.primer.overrides": {
         "dark": "{base.color.neutral.12}",
-          "dark-high-contrast": "{base.color.neutral.13}",
+          "dark-high-contrast": "{base.color.neutral.7}",
         "dark-dimmed": "{base.color.neutral.11}"
       }
     }

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 3, 2025 •
edited
Loading

Design Token Diff (Figma)

/figma/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2025-04-03 00:07:37.815142445 +0000
@@ -1034,9 +1034,9 @@
 {
   "name": "button/default/fgColor/rest",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -1456,9 +1456,9 @@
 {
   "name": "button/invisible/fgColor/rest",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -1472,9 +1472,9 @@
 {
   "name": "button/invisible/fgColor/hover",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -1488,9 +1488,9 @@
 {
   "name": "button/invisible/fgColor/active",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -2466,9 +2466,9 @@
 {
   "name": "codeMirror/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -2562,9 +2562,9 @@
 {
   "name": "codeMirror/cursor/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -2611,9 +2611,9 @@
 {
   "name": "codeMirror/matchingBracket/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3145,9 +3145,9 @@
 {
   "name": "diffBlob/additionWord/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3177,9 +3177,9 @@
 {
   "name": "diffBlob/additionNum/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3243,9 +3243,9 @@
 {
   "name": "diffBlob/deletionWord/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3275,9 +3275,9 @@
 {
   "name": "diffBlob/deletionNum/fgColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3341,9 +3341,9 @@
 {
   "name": "diffBlob/hunkNum/fgColor/rest",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -3438,9 +3438,9 @@
 {
   "name": "diffBlob/expander/iconColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -6215,14 +6215,14 @@
 {
   "name": "bgColor/done-emphasis",
   "value": {
-      "r": 0.4117647058823529,
-      "g": 0.12941176470588237,
-      "b": 0.8431372549019608,
+      "r": 0.9019607843137255,
+      "g": 0.8,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/bgColor/done-emphasis",
-    "reference": "base/color/dark-high-contrast/base/color/purple/9",
+    "reference": "base/color/dark-high-contrast/base/color/purple/1",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
@@ -6253,9 +6253,9 @@
 {
   "name": "bgColor/upsell-emphasis",
   "value": {
-      "r": 0.4117647058823529,
-      "g": 0.12941176470588237,
-      "b": 0.8431372549019608,
+      "r": 0.9019607843137255,
+      "g": 0.8,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
@@ -6915,9 +6915,9 @@
 {
   "name": "control/fgColor/rest",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -7508,9 +7508,9 @@
 {
   "name": "controlTrack/fgColor/rest",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
@@ -9732,14 +9732,14 @@
 {
   "name": "fgColor/default",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/fgColor/default",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "base/color/dark/base/color/neutral/7",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",

@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 3, 2025 00:05 Inactive
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 3, 2025

❌ dark_high_contrast: 33 checks failed

contrastPair pass contrastRatio minimumContrastRatio
fgColor-default (#3d444d) vs. bgColor-default (#010409) ❌ 2.08:1 7:1
fgColor-muted vs. bgColor-default ✅ 10.88:1 7:1
fgColor-default (#3d444d) vs. bgColor-muted (#151b23) ❌ 1.75:1 7:1
fgColor-muted vs. bgColor-muted ✅ 9.17:1 7:1
fgColor-default (#3d444d) vs. bgColor-inset (#010409) ❌ 2.08:1 7:1
fgColor-muted vs. bgColor-inset ✅ 10.88:1 7:1
control-fgColor-rest (#3d444d) vs. bgColor-default (#010409) ❌ 2.08:1 7:1
control-fgColor-rest (#3d444d) vs. bgColor-muted (#151b23) ❌ 1.75:1 7:1
control-fgColor-rest (#3d444d) vs. bgColor-inset (#010409) ❌ 2.08:1 7:1
control-fgColor-rest (#3d444d) vs. control-bgColor-rest (#262c36) ❌ 1.42:1 7:1
control-fgColor-placeholder vs. bgColor-default ✅ 10.88:1 7:1
control-fgColor-rest (#3d444d) vs. control-bgColor-active (#2f3742) ❌ 1.22:1 7:1
control-fgColor-rest (#3d444d) vs. control-bgColor-hover (#2a313c) ❌ 1.33:1 7:1
control-fgColor-rest (#3d444d) vs. control-bgColor-selected (#262c36) ❌ 1.42:1 7:1
button-invisible-fgColor-rest (#3d444d) vs. bgColor-muted (#151b23) ❌ 1.75:1 7:1
button-invisible-fgColor-hover (#3d444d) vs. button-invisible-bgColor-hover (#151b23) ❌ 1.75:1 7:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 11.96:1 7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover ✅ 11.96:1 7:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 7.51:1 7:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 7.58:1 7:1
fgColor-default (#3d444d) vs. bgColor-neutral-muted (#212830) ❌ 1.51:1 7:1
fgColor-default (#3d444d) vs. bgColor-accent-muted (#5cacff1a) on bgColor-default ❌ 1.86:1 7:1
fgColor-default (#3d444d) vs. bgColor-accent-muted (#5cacff1a) on bgColor-muted ❌ 1.48:1 7:1
fgColor-default (#3d444d) vs. bgColor-success-muted (#0ac74026) on bgColor-default ❌ 1.73:1 7:1
fgColor-default (#3d444d) vs. bgColor-success-muted (#0ac74026) on bgColor-muted ❌ 1.36:1 7:1
fgColor-default (#3d444d) vs. bgColor-open-muted (#0ac74026) on bgColor-default ❌ 1.73:1 7:1
fgColor-default (#3d444d) vs. bgColor-open-muted (#0ac74026) on bgColor-muted ❌ 1.36:1 7:1
fgColor-default (#3d444d) vs. bgColor-danger-muted (#ff80801a) on bgColor-default ❌ 1.87:1 7:1
fgColor-default (#3d444d) vs. bgColor-danger-muted (#ff80801a) on bgColor-muted ❌ 1.5:1 7:1
fgColor-default (#3d444d) vs. bgColor-closed-muted (#ff80801a) on bgColor-default ❌ 1.87:1 7:1
fgColor-default (#3d444d) vs. bgColor-closed-muted (#ff80801a) on bgColor-muted ❌ 1.5:1 7:1
fgColor-default (#3d444d) vs. bgColor-attention-muted (#edaa2726) on bgColor-default ❌ 1.69:1 7:1
fgColor-default (#3d444d) vs. bgColor-attention-muted (#edaa2726) on bgColor-muted ❌ 1.33:1 7:1
fgColor-default (#3d444d) vs. bgColor-severe-muted (#f48b251a) on bgColor-default ❌ 1.87:1 7:1
fgColor-default (#3d444d) vs. bgColor-severe-muted (#f48b251a) on bgColor-muted ❌ 1.51:1 7:1
fgColor-default (#3d444d) vs. bgColor-done-muted (#bf8fff26) on bgColor-default ❌ 1.73:1 7:1
fgColor-default (#3d444d) vs. bgColor-done-muted (#bf8fff26) on bgColor-muted ❌ 1.36:1 7:1
fgColor-default (#3d444d) vs. bgColor-sponsors-muted (#f87cbd1a) on bgColor-default ❌ 1.88:1 7:1
fgColor-default (#3d444d) vs. bgColor-sponsors-muted (#f87cbd1a) on bgColor-muted ❌ 1.5:1 7:1
fgColor-neutral vs. bgColor-default ✅ 14.18:1 7:1
fgColor-neutral vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-neutral vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-accent vs. bgColor-default ✅ 9.9:1 7:1
fgColor-accent vs. bgColor-muted ✅ 8.34:1 7:1
fgColor-accent vs. bgColor-inset ✅ 9.9:1 7:1
fgColor-success vs. bgColor-default ✅ 10.8:1 7:1
fgColor-success vs. bgColor-muted ✅ 9.11:1 7:1
fgColor-success vs. bgColor-inset ✅ 10.8:1 7:1
fgColor-open vs. bgColor-default ✅ 10.8:1 7:1
fgColor-open vs. bgColor-muted ✅ 9.11:1 7:1
fgColor-open vs. bgColor-inset ✅ 10.8:1 7:1
fgColor-danger vs. bgColor-default ✅ 9.68:1 7:1
fgColor-danger vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-danger vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-default ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-closed vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-attention vs. bgColor-default ✅ 11.26:1 7:1
fgColor-attention vs. bgColor-muted ✅ 9.49:1 7:1
fgColor-attention vs. bgColor-inset ✅ 11.26:1 7:1
fgColor-severe vs. bgColor-default ✅ 9.65:1 7:1
fgColor-severe vs. bgColor-muted ✅ 8.14:1 7:1
fgColor-severe vs. bgColor-inset ✅ 9.65:1 7:1
fgColor-done vs. bgColor-default ✅ 10.79:1 7:1
fgColor-done vs. bgColor-muted ✅ 9.1:1 7:1
fgColor-done vs. bgColor-inset ✅ 10.79:1 7:1
fgColor-upsell vs. bgColor-default ✅ 10.79:1 7:1
fgColor-upsell vs. bgColor-muted ✅ 9.1:1 7:1
fgColor-upsell vs. bgColor-inset ✅ 10.79:1 7:1
fgColor-sponsors vs. bgColor-default ✅ 9.85:1 7:1
fgColor-sponsors vs. bgColor-muted ✅ 8.3:1 7:1
fgColor-sponsors vs. bgColor-inset ✅ 9.85:1 7:1
fgColor-neutral vs. bgColor-neutral-muted ✅ 10.28:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 8.85:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 7.03:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 8.99:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 7.05:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 8.99:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 7.05:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 9.16:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 7.2:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 8.69:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 7:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-default ✅ 8.96:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-muted ✅ 7.07:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default ✅ 8.96:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted ✅ 7.07:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 8.88:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 7.09:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 7.58:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 7.58:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 7.46:1 7:1
fgColor-onEmphasis (#ffffff) vs. bgColor-done-emphasis (#e6ccff) ❌ 1.45:1 7:1
fgColor-onEmphasis (#ffffff) vs. bgColor-upsell-emphasis (#e6ccff) ❌ 1.45:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 7.5:1 7:1
control-borderColor-emphasis vs. bgColor-default ✅ 10.88:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted ✅ 9.17:1 4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 9.23:1 7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 9.1:1 7:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 9:1 7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 9.07:1 7:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 9.35:1 7:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 9.17:1 7:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 9:1 7:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 9.07:1 7:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 9.05:1 7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 8.74:1 7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 8.84:1 7:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 9.02:1 7:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 9.37:1 7:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 9.17:1 7:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 9.16:1 7:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 9:1 7:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 9.18:1 7:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 8.91:1 7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 9.14:1 7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 8.59:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 8.6:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 8.21:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 8.3:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 8.56:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 8.25:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 8.47:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 8.57:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 8.32:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 8.51:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 8.43:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 8.3:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 7.81:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 7.92:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 7.67:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 7.66:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 7.84:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 7.7:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 7.63:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 7.83:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 7.62:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 7.75:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 6.68:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 6.61:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 6.41:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 6.49:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 6.43:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 6.6:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 6.53:1 4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 6.34:1 4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1

→ Details

@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 3, 2025 00:08 Inactive
@langermank langermank closed this Apr 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@langermank