primitives icon indicating copy to clipboard operation
primitives copied to clipboard

Published 20 hours ago • verified publisher icon primer

fix: Increase secondary text contrast

Open smockle opened this issue 1 year ago • 7 comments

Summary

Fixes https://github.com/github/primer/issues/2216

This PR makes the “Dark” theme’s fgColor.muted slightly lighter. This improves secondary text contrast[^1] in hovered ActionMenu items:

Element Before After
Secondary Text #848d97
75% neutral-3[^2] + 25% neutral-4		 #8d96a0
5% neutral-2 + 95% neutral-3
Background (on hover) #292e36 #292e36
Contrast 4.06:1 4.56:1
Screenshots Before screenshot of ActionList, with a menu item hovered. Secondary text—“Due by March 31, 2022”—is slightly darker. After screenshot of ActionList, with a menu item hovered. Secondary text—“Due by March 31, 2022”—is slightly lighter.

What should reviewers focus on?

  • Should we change text or background? — I chose to lighten the secondary text color. Alternatively, to improve contrast, I could have darkened the hover background color. When I explored darkening the hover background color, I felt it became too hard to see which item was hovered.

  • What’s the right new color? — The new color I chose—5% neutral-2 + 95% neutral-3—is arbitrary. There are many other colors that would have sufficient contrast. I picked weight: 0.95 after reviewing the other weights in src/tokens/functional/color/dark/primitives-dark.json5—each other weight in that file uses 0.05-increments (0.25, 0.35, etc.).

  • Will this break something else? — I exclusively tested ActionMenu. I assume we use fgColor.muted in a lot of other places. How can we ensure this change won’t worsen contrast elsewhere?

Steps to test:

  1. Open this PR’s Storybook deployment, and navigate to the ActionMenu > Examples > Groups and Descriptions story.
  2. Open the ActionMenu (if it’s not already opened), then hover one of the items.
  3. Inspect the contrast between secondary text (e.g. “Due by March 31, 2022”) and the hover background color, using a tool like Pika.

Supporting resources (related issues, external links, etc):

  • This was discussed in the April 30th, 2024 Accessibility Design Office Hours: https://github.com/github/accessibility/issues/6005#issuecomment-2088729563 (Hubber access only)
  • https://github.com/github/primer/issues/2216 (Hubber access only)
  • Understanding SC 1.4.3: Contrast (Minimum) (emphasis mine):

    The minimum contrast Success Criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast.

Contributor checklist:

  • [ ] All new and existing CI checks pass
  • [ ] Tests prove that the feature works and covers both happy and unhappy paths
  • [ ] Any drop in coverage, breaking changes or regressions have been documented above
  • [ ] All developer debugging and non-functional logging has been removed
  • [ ] Related issues have been referenced in the PR description

Reviewer checklist:

  • [ ] Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • [ ] Check that tests prove the feature works and covers both happy and unhappy paths
  • [ ] Check that there aren't other open Pull Requests for the same update/change
  • [ ] Verify the design tokens changed in this PR are expected using the diffing results in this PR

[^1]: Specifically, contrast is increased above the 4.5:1 ratio required by WCAG SC 1.4.3: Contrast (Minimum). [^2]: These values are listed in Primer Foundations > Color > Base Scales (ensure “Dark” is selected). A quick way to test this in devtools is to use the CSS color-mix function: css color: color-mix(in srgb, #b1bac4, #8b949e 95%)

smockle avatar May 02 '24 15:05 smockle

🦋 Changeset detected

Latest commit: e5b65c65d7a77d045c0261e2ca59534a7bcd20b5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

Not sure what this means? Click here to learn what changesets are.

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

changeset-bot[bot] avatar May 02 '24 15:05 changeset-bot[bot]

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 15.79:1 4.5:1
fgColor-muted vs. bgColor-default ✅ 5.33:1 4.5:1
fgColor-default vs. bgColor-muted ✅ 14.83:1 4.5:1
fgColor-muted vs. bgColor-muted ✅ 5.01:1 4.5:1
fgColor-default vs. bgColor-inset ✅ 14.83:1 4.5:1
fgColor-muted vs. bgColor-inset ✅ 5.01:1 4.5:1
fgColor-default vs. bgColor-accent-muted ✅ 13.88:1 4.5:1
fgColor-default vs. bgColor-success-muted ✅ 14.19:1 4.5:1
fgColor-default vs. bgColor-open-muted ✅ 14.19:1 4.5:1
fgColor-default vs. bgColor-danger-muted ✅ 13.77:1 4.5:1
fgColor-default vs. bgColor-closed-muted ✅ 13.77:1 4.5:1
fgColor-default vs. bgColor-attention-muted ✅ 14.65:1 4.5:1
fgColor-default vs. bgColor-severe-muted ✅ 14.26:1 4.5:1
fgColor-default vs. bgColor-done-muted ✅ 14.21:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted ✅ 14.24:1 4.5:1
fgColor-accent vs. bgColor-default ✅ 5.19:1 4.5:1
fgColor-accent vs. bgColor-muted ✅ 4.87:1 4.5:1
fgColor-accent vs. bgColor-inset ✅ 4.87:1 4.5:1
fgColor-success vs. bgColor-default ✅ 5.07:1 4.5:1
fgColor-success vs. bgColor-muted ✅ 4.77:1 4.5:1
fgColor-success vs. bgColor-inset ✅ 4.77:1 4.5:1
fgColor-open vs. bgColor-default ✅ 5.07:1 4.5:1
fgColor-open vs. bgColor-muted ✅ 4.77:1 4.5:1
fgColor-open vs. bgColor-inset ✅ 4.77:1 4.5:1
fgColor-danger vs. bgColor-default ✅ 5.24:1 4.5:1
fgColor-danger vs. bgColor-muted ✅ 4.92:1 4.5:1
fgColor-danger vs. bgColor-inset ✅ 4.92:1 4.5:1
fgColor-closed vs. bgColor-default ✅ 5.24:1 4.5:1
fgColor-closed vs. bgColor-muted ✅ 4.92:1 4.5:1
fgColor-closed vs. bgColor-inset ✅ 4.92:1 4.5:1
fgColor-attention vs. bgColor-default ✅ 4.86:1 4.5:1
fgColor-attention vs. bgColor-muted ✅ 4.57:1 4.5:1
fgColor-attention vs. bgColor-inset ✅ 4.57:1 4.5:1
fgColor-severe vs. bgColor-default ✅ 5.03:1 4.5:1
fgColor-severe vs. bgColor-muted ✅ 4.72:1 4.5:1
fgColor-severe vs. bgColor-inset ✅ 4.72:1 4.5:1
fgColor-done vs. bgColor-default ✅ 5.04:1 4.5:1
fgColor-done vs. bgColor-muted ✅ 4.73:1 4.5:1
fgColor-done vs. bgColor-inset ✅ 4.73:1 4.5:1
fgColor-sponsors vs. bgColor-default ✅ 5.04:1 4.5:1
fgColor-sponsors vs. bgColor-muted ✅ 4.73:1 4.5:1
fgColor-sponsors vs. bgColor-inset ✅ 4.73:1 4.5:1
fgColor-accent vs. bgColor-accent-muted ✅ 4.56:1 4.5:1
fgColor-success vs. bgColor-success-muted ✅ 4.56:1 4.5:1
fgColor-open vs. bgColor-open-muted ✅ 4.56:1 4.5:1
fgColor-danger vs. bgColor-danger-muted ✅ 4.57:1 4.5:1
fgColor-closed vs. bgColor-closed-muted ✅ 4.57:1 4.5:1
fgColor-attention vs. bgColor-attention-muted ✅ 4.51:1 4.5:1
fgColor-severe vs. bgColor-severe-muted ✅ 4.54:1 4.5:1
fgColor-done vs. bgColor-done-muted ✅ 4.53:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted ✅ 4.55:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 4.54:1 4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 5.19:1 4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 4.51:1 4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 4.51:1 4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 5.35:1 4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 5.35:1 4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 4.86:1 4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 5.03:1 4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 5.04:1 4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 5.04:1 4.5:1
control-borderColor-emphasis vs. bgColor-default ✅ 3.27:1 3:1
control-borderColor-emphasis vs. bgColor-muted ✅ 3.08:1 3:1

dark: ✅ all checks passed

Show results table for theme: dark
contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 16.01:1 4.5:1
fgColor-muted vs. bgColor-default ✅ 6.31:1 4.5:1
fgColor-default vs. bgColor-muted ✅ 14.63:1 4.5:1
fgColor-muted vs. bgColor-muted ✅ 5.76:1 4.5:1
fgColor-default vs. bgColor-inset ✅ 17.37:1 4.5:1
fgColor-muted vs. bgColor-inset ✅ 6.84:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 14.34:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 12.91:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 13.44:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 12:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 14.28:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 12.85:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 14.49:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 13.09:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 13.65:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 12.34:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 13.4:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 12.08:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 14.45:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 13.03:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-default ✅ 13.11:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-muted ✅ 11.71:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 14.4:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 12.98:1 4.5:1
fgColor-accent vs. bgColor-default ✅ 6.1:1 4.5:1
fgColor-accent vs. bgColor-muted ✅ 5.58:1 4.5:1
fgColor-accent vs. bgColor-inset ✅ 6.62:1 4.5:1
fgColor-success vs. bgColor-default ✅ 7.44:1 4.5:1
fgColor-success vs. bgColor-muted ✅ 6.8:1 4.5:1
fgColor-success vs. bgColor-inset ✅ 8.08:1 4.5:1
fgColor-open vs. bgColor-default ✅ 7.44:1 4.5:1
fgColor-open vs. bgColor-muted ✅ 6.8:1 4.5:1
fgColor-open vs. bgColor-inset ✅ 8.08:1 4.5:1
fgColor-danger vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-danger vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-danger vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-closed vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-closed vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-closed vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-attention vs. bgColor-default ✅ 7.49:1 4.5:1
fgColor-attention vs. bgColor-muted ✅ 6.85:1 4.5:1
fgColor-attention vs. bgColor-inset ✅ 8.13:1 4.5:1
fgColor-severe vs. bgColor-default ✅ 5.61:1 4.5:1
fgColor-severe vs. bgColor-muted ✅ 5.13:1 4.5:1
fgColor-severe vs. bgColor-inset ✅ 6.09:1 4.5:1
fgColor-done vs. bgColor-default ✅ 6.32:1 4.5:1
fgColor-done vs. bgColor-muted ✅ 5.78:1 4.5:1
fgColor-done vs. bgColor-inset ✅ 6.86:1 4.5:1
fgColor-sponsors vs. bgColor-default ✅ 5.62:1 4.5:1
fgColor-sponsors vs. bgColor-muted ✅ 5.14:1 4.5:1
fgColor-sponsors vs. bgColor-inset ✅ 6.1:1 4.5:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 5.46:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 6.25:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 5.58:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 6.64:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 5.97:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 5.1:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 4.61:1 4.5:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 4.81:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 6.27:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 5.65:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 4.57:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-default ✅ 5.18:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-muted ✅ 4.62:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 4.56:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 4.59:1 4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 4.64:1 4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 4.65:1 4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 4.57:1 4.5:1
control-borderColor-emphasis vs. bgColor-default ✅ 3.66:1 3:1
control-borderColor-emphasis vs. bgColor-muted ✅ 3.35:1 3:1

github-actions[bot] avatar May 02 '24 15:05 github-actions[bot]

Design Token Diff

/css/functional/themes/dark-colorblind.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-05-03 07:02:38.349232775 +0000
@@ -16,13 +16,13 @@
 --diffBlob-deletion-bgColor-line: #db6d2826;
 --diffBlob-deletion-bgColor-word: #db6d2866;
 --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #848d97;
+  --diffBlob-expander-iconColor: #8d96a0;
 --codeMirror-fgColor: #e6edf3;
 --codeMirror-bgColor: #0d1117;
 --codeMirror-gutters-bgColor: #0d1117;
 --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #848d97;
-  --codeMirror-lineNumber-fgColor: #848d97;
+  --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+  --codeMirror-lineNumber-fgColor: #8d96a0;
 --codeMirror-cursor-fgColor: #e6edf3;
 --codeMirror-selection-bgColor: #388bfd66;
 --codeMirror-activeline-bgColor: #6e768166;
@@ -167,7 +167,7 @@
 --control-borderColor-success: #1f6feb;
 --control-borderColor-danger: #bd561d;
 --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #848d97;
+  --control-iconColor-rest: #8d96a0;
 --control-transparent-bgColor-rest: #00000000;
 --control-transparent-bgColor-hover: #b1bac41f;
 --control-transparent-bgColor-active: #b1bac433;
@@ -194,7 +194,7 @@
 --controlTrack-bgColor-hover: #292e36;
 --controlTrack-bgColor-active: #31363e;
 --controlTrack-bgColor-disabled: #6e7681;
-  --controlTrack-fgColor-rest: #848d97;
+  --controlTrack-fgColor-rest: #8d96a0;
 --controlTrack-fgColor-disabled: #ffffff;
 --controlTrack-borderColor-rest: #00000000;
 --controlTrack-borderColor-disabled: #6e7681;
@@ -231,7 +231,7 @@
 --button-invisible-fgColor-rest: #4493f8;
 --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #6e7681;
-  --button-invisible-iconColor-rest: #848d97;
+  --button-invisible-iconColor-rest: #8d96a0;
 --button-invisible-iconColor-hover: #e6edf3;
 --button-invisible-iconColor-disabled: #6e7681;
 --button-invisible-bgColor-rest: #00000000;
@@ -298,10 +298,10 @@
 --sideNav-bgColor-selected: #21262d;
 --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+  --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #848d97;
+  --underlineNav-iconColor-rest: #8d96a0;
 --selection-bgColor: #1f6febb3;
 --card-bgColor: #161b22;
 --label-green-bgColor-rest: #122117;
@@ -419,7 +419,7 @@
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
 --fgColor-default: #e6edf3;
-  --fgColor-muted: #848d97;
+  --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
@@ -569,13 +569,13 @@
   --diffBlob-deletion-bgColor-line: #db6d2826;
   --diffBlob-deletion-bgColor-word: #db6d2866;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #848d97;
+    --diffBlob-expander-iconColor: #8d96a0;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #848d97;
-    --codeMirror-lineNumber-fgColor: #848d97;
+    --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+    --codeMirror-lineNumber-fgColor: #8d96a0;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -720,7 +720,7 @@
   --control-borderColor-success: #1f6feb;
   --control-borderColor-danger: #bd561d;
   --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #848d97;
+    --control-iconColor-rest: #8d96a0;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -747,7 +747,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #6e7681;
-    --controlTrack-fgColor-rest: #848d97;
+    --controlTrack-fgColor-rest: #8d96a0;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #6e7681;
@@ -784,7 +784,7 @@
   --button-invisible-fgColor-rest: #4493f8;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #6e7681;
-    --button-invisible-iconColor-rest: #848d97;
+    --button-invisible-iconColor-rest: #8d96a0;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #6e7681;
   --button-invisible-bgColor-rest: #00000000;
@@ -851,10 +851,10 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+    --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #848d97;
+    --underlineNav-iconColor-rest: #8d96a0;
   --selection-bgColor: #1f6febb3;
   --card-bgColor: #161b22;
   --label-green-bgColor-rest: #122117;
@@ -972,7 +972,7 @@
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
   --fgColor-default: #e6edf3;
-    --fgColor-muted: #848d97;
+    --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;

/css/functional/themes/dark-dimmed.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2024-05-03 07:02:37.121229312 +0000
@@ -21,8 +21,8 @@
 --codeMirror-bgColor: #22272e;
 --codeMirror-gutters-bgColor: #22272e;
 --codeMirror-gutterMarker-fgColor-default: #22272e;
-  --codeMirror-gutterMarker-fgColor-muted: #717e8b;
-  --codeMirror-lineNumber-fgColor: #717e8b;
+  --codeMirror-gutterMarker-fgColor-muted: #778491;
+  --codeMirror-lineNumber-fgColor: #778491;
 --codeMirror-cursor-fgColor: #c5d1de;
 --codeMirror-selection-bgColor: #4184e466;
 --codeMirror-activeline-bgColor: #636e7b66;
@@ -167,7 +167,7 @@
 --control-borderColor-success: #347d39;
 --control-borderColor-danger: #c93c37;
 --control-borderColor-warning: #966600;
-  --control-iconColor-rest: #717e8b;
+  --control-iconColor-rest: #778491;
 --control-transparent-bgColor-rest: #00000000;
 --control-transparent-bgColor-hover: #909dab1f;
 --control-transparent-bgColor-active: #909dab33;
@@ -194,7 +194,7 @@
 --controlTrack-bgColor-hover: #3d444e;
 --controlTrack-bgColor-active: #434a54;
 --controlTrack-bgColor-disabled: #636e7b;
-  --controlTrack-fgColor-rest: #717e8b;
+  --controlTrack-fgColor-rest: #778491;
 --controlTrack-fgColor-disabled: #cdd9e5;
 --controlTrack-borderColor-rest: #00000000;
 --controlTrack-borderColor-disabled: #636e7b;
@@ -231,8 +231,8 @@
 --button-invisible-fgColor-rest: #478be6;
 --button-invisible-fgColor-hover: #539bf5;
 --button-invisible-fgColor-disabled: #636e7b;
-  --button-invisible-iconColor-rest: #717e8b;
-  --button-invisible-iconColor-hover: #717e8b;
+  --button-invisible-iconColor-rest: #778491;
+  --button-invisible-iconColor-hover: #778491;
 --button-invisible-iconColor-disabled: #636e7b;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #909dab1f;
@@ -298,10 +298,10 @@
 --sideNav-bgColor-selected: #373e47;
 --skeletonLoader-bgColor: #2d333b;
 --timelineBadge-bgColor: #373e47;
-  --treeViewItem-leadingVisual-iconColor-rest: #717e8b;
+  --treeViewItem-leadingVisual-iconColor-rest: #778491;
 --underlineNav-borderColor-active: #ec775c;
 --underlineNav-borderColor-hover: #636e7b66;
-  --underlineNav-iconColor-rest: #717e8b;
+  --underlineNav-iconColor-rest: #778491;
 --selection-bgColor: #316dcab3;
 --card-bgColor: #2d333b;
 --label-green-bgColor-rest: #122117;
@@ -419,7 +419,7 @@
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
 --fgColor-default: #c5d1de;
-  --fgColor-muted: #717e8b;
+  --fgColor-muted: #778491;
 --fgColor-onEmphasis: #cdd9e5;
 --fgColor-white: #cdd9e5;
 --fgColor-black: #1c2128;
@@ -574,8 +574,8 @@
   --codeMirror-bgColor: #22272e;
   --codeMirror-gutters-bgColor: #22272e;
   --codeMirror-gutterMarker-fgColor-default: #22272e;
-    --codeMirror-gutterMarker-fgColor-muted: #717e8b;
-    --codeMirror-lineNumber-fgColor: #717e8b;
+    --codeMirror-gutterMarker-fgColor-muted: #778491;
+    --codeMirror-lineNumber-fgColor: #778491;
   --codeMirror-cursor-fgColor: #c5d1de;
   --codeMirror-selection-bgColor: #4184e466;
   --codeMirror-activeline-bgColor: #636e7b66;
@@ -720,7 +720,7 @@
   --control-borderColor-success: #347d39;
   --control-borderColor-danger: #c93c37;
   --control-borderColor-warning: #966600;
-    --control-iconColor-rest: #717e8b;
+    --control-iconColor-rest: #778491;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #909dab1f;
   --control-transparent-bgColor-active: #909dab33;
@@ -747,7 +747,7 @@
   --controlTrack-bgColor-hover: #3d444e;
   --controlTrack-bgColor-active: #434a54;
   --controlTrack-bgColor-disabled: #636e7b;
-    --controlTrack-fgColor-rest: #717e8b;
+    --controlTrack-fgColor-rest: #778491;
   --controlTrack-fgColor-disabled: #cdd9e5;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #636e7b;
@@ -784,8 +784,8 @@
   --button-invisible-fgColor-rest: #478be6;
   --button-invisible-fgColor-hover: #539bf5;
   --button-invisible-fgColor-disabled: #636e7b;
-    --button-invisible-iconColor-rest: #717e8b;
-    --button-invisible-iconColor-hover: #717e8b;
+    --button-invisible-iconColor-rest: #778491;
+    --button-invisible-iconColor-hover: #778491;
   --button-invisible-iconColor-disabled: #636e7b;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #909dab1f;
@@ -851,10 +851,10 @@
   --sideNav-bgColor-selected: #373e47;
   --skeletonLoader-bgColor: #2d333b;
   --timelineBadge-bgColor: #373e47;
-    --treeViewItem-leadingVisual-iconColor-rest: #717e8b;
+    --treeViewItem-leadingVisual-iconColor-rest: #778491;
   --underlineNav-borderColor-active: #ec775c;
   --underlineNav-borderColor-hover: #636e7b66;
-    --underlineNav-iconColor-rest: #717e8b;
+    --underlineNav-iconColor-rest: #778491;
   --selection-bgColor: #316dcab3;
   --card-bgColor: #2d333b;
   --label-green-bgColor-rest: #122117;
@@ -972,7 +972,7 @@
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
   --fgColor-default: #c5d1de;
-    --fgColor-muted: #717e8b;
+    --fgColor-muted: #778491;
   --fgColor-onEmphasis: #cdd9e5;
   --fgColor-white: #cdd9e5;
   --fgColor-black: #1c2128;

/css/functional/themes/dark-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2024-05-03 07:02:37.721231004 +0000
@@ -16,13 +16,13 @@
 --diffBlob-deletion-bgColor-line: #f8514926;
 --diffBlob-deletion-bgColor-word: #f8514966;
 --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #848d97;
+  --diffBlob-expander-iconColor: #8d96a0;
 --codeMirror-fgColor: #e6edf3;
 --codeMirror-bgColor: #0d1117;
 --codeMirror-gutters-bgColor: #0d1117;
 --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #848d97;
-  --codeMirror-lineNumber-fgColor: #848d97;
+  --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+  --codeMirror-lineNumber-fgColor: #8d96a0;
 --codeMirror-cursor-fgColor: #e6edf3;
 --codeMirror-selection-bgColor: #388bfd66;
 --codeMirror-activeline-bgColor: #6e768166;
@@ -167,7 +167,7 @@
 --control-borderColor-success: #1f6feb;
 --control-borderColor-danger: #da3633;
 --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #848d97;
+  --control-iconColor-rest: #8d96a0;
 --control-transparent-bgColor-rest: #00000000;
 --control-transparent-bgColor-hover: #b1bac41f;
 --control-transparent-bgColor-active: #b1bac433;
@@ -194,7 +194,7 @@
 --controlTrack-bgColor-hover: #292e36;
 --controlTrack-bgColor-active: #31363e;
 --controlTrack-bgColor-disabled: #6e7681;
-  --controlTrack-fgColor-rest: #848d97;
+  --controlTrack-fgColor-rest: #8d96a0;
 --controlTrack-fgColor-disabled: #ffffff;
 --controlTrack-borderColor-rest: #00000000;
 --controlTrack-borderColor-disabled: #6e7681;
@@ -231,7 +231,7 @@
 --button-invisible-fgColor-rest: #4493f8;
 --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #6e7681;
-  --button-invisible-iconColor-rest: #848d97;
+  --button-invisible-iconColor-rest: #8d96a0;
 --button-invisible-iconColor-hover: #e6edf3;
 --button-invisible-iconColor-disabled: #6e7681;
 --button-invisible-bgColor-rest: #00000000;
@@ -298,10 +298,10 @@
 --sideNav-bgColor-selected: #21262d;
 --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+  --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #848d97;
+  --underlineNav-iconColor-rest: #8d96a0;
 --selection-bgColor: #1f6febb3;
 --card-bgColor: #161b22;
 --label-green-bgColor-rest: #122117;
@@ -419,7 +419,7 @@
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
 --fgColor-default: #e6edf3;
-  --fgColor-muted: #848d97;
+  --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
@@ -569,13 +569,13 @@
   --diffBlob-deletion-bgColor-line: #f8514926;
   --diffBlob-deletion-bgColor-word: #f8514966;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #848d97;
+    --diffBlob-expander-iconColor: #8d96a0;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #848d97;
-    --codeMirror-lineNumber-fgColor: #848d97;
+    --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+    --codeMirror-lineNumber-fgColor: #8d96a0;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -720,7 +720,7 @@
   --control-borderColor-success: #1f6feb;
   --control-borderColor-danger: #da3633;
   --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #848d97;
+    --control-iconColor-rest: #8d96a0;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -747,7 +747,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #6e7681;
-    --controlTrack-fgColor-rest: #848d97;
+    --controlTrack-fgColor-rest: #8d96a0;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #6e7681;
@@ -784,7 +784,7 @@
   --button-invisible-fgColor-rest: #4493f8;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #6e7681;
-    --button-invisible-iconColor-rest: #848d97;
+    --button-invisible-iconColor-rest: #8d96a0;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #6e7681;
   --button-invisible-bgColor-rest: #00000000;
@@ -851,10 +851,10 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+    --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #848d97;
+    --underlineNav-iconColor-rest: #8d96a0;
   --selection-bgColor: #1f6febb3;
   --card-bgColor: #161b22;
   --label-green-bgColor-rest: #122117;
@@ -972,7 +972,7 @@
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
   --fgColor-default: #e6edf3;
-    --fgColor-muted: #848d97;
+    --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2024-05-03 07:02:36.509227586 +0000
@@ -16,13 +16,13 @@
 --diffBlob-deletion-bgColor-line: #f8514926;
 --diffBlob-deletion-bgColor-word: #f8514966;
 --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #848d97;
+  --diffBlob-expander-iconColor: #8d96a0;
 --codeMirror-fgColor: #e6edf3;
 --codeMirror-bgColor: #0d1117;
 --codeMirror-gutters-bgColor: #0d1117;
 --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #848d97;
-  --codeMirror-lineNumber-fgColor: #848d97;
+  --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+  --codeMirror-lineNumber-fgColor: #8d96a0;
 --codeMirror-cursor-fgColor: #e6edf3;
 --codeMirror-selection-bgColor: #388bfd66;
 --codeMirror-activeline-bgColor: #6e768166;
@@ -167,7 +167,7 @@
 --control-borderColor-success: #238636;
 --control-borderColor-danger: #da3633;
 --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #848d97;
+  --control-iconColor-rest: #8d96a0;
 --control-transparent-bgColor-rest: #00000000;
 --control-transparent-bgColor-hover: #b1bac41f;
 --control-transparent-bgColor-active: #b1bac433;
@@ -194,7 +194,7 @@
 --controlTrack-bgColor-hover: #292e36;
 --controlTrack-bgColor-active: #31363e;
 --controlTrack-bgColor-disabled: #6e7681;
-  --controlTrack-fgColor-rest: #848d97;
+  --controlTrack-fgColor-rest: #8d96a0;
 --controlTrack-fgColor-disabled: #ffffff;
 --controlTrack-borderColor-rest: #00000000;
 --controlTrack-borderColor-disabled: #6e7681;
@@ -231,7 +231,7 @@
 --button-invisible-fgColor-rest: #4493f8;
 --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #6e7681;
-  --button-invisible-iconColor-rest: #848d97;
+  --button-invisible-iconColor-rest: #8d96a0;
 --button-invisible-iconColor-hover: #e6edf3;
 --button-invisible-iconColor-disabled: #6e7681;
 --button-invisible-bgColor-rest: #00000000;
@@ -298,10 +298,10 @@
 --sideNav-bgColor-selected: #21262d;
 --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+  --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #848d97;
+  --underlineNav-iconColor-rest: #8d96a0;
 --selection-bgColor: #1f6febb3;
 --card-bgColor: #161b22;
 --label-green-bgColor-rest: #122117;
@@ -419,7 +419,7 @@
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
 --fgColor-default: #e6edf3;
-  --fgColor-muted: #848d97;
+  --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
@@ -569,13 +569,13 @@
   --diffBlob-deletion-bgColor-line: #f8514926;
   --diffBlob-deletion-bgColor-word: #f8514966;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #848d97;
+    --diffBlob-expander-iconColor: #8d96a0;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #848d97;
-    --codeMirror-lineNumber-fgColor: #848d97;
+    --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+    --codeMirror-lineNumber-fgColor: #8d96a0;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -720,7 +720,7 @@
   --control-borderColor-success: #238636;
   --control-borderColor-danger: #da3633;
   --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #848d97;
+    --control-iconColor-rest: #8d96a0;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -747,7 +747,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #6e7681;
-    --controlTrack-fgColor-rest: #848d97;
+    --controlTrack-fgColor-rest: #8d96a0;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #6e7681;
@@ -784,7 +784,7 @@
   --button-invisible-fgColor-rest: #4493f8;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #6e7681;
-    --button-invisible-iconColor-rest: #848d97;
+    --button-invisible-iconColor-rest: #8d96a0;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #6e7681;
   --button-invisible-bgColor-rest: #00000000;
@@ -851,10 +851,10 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+    --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #848d97;
+    --underlineNav-iconColor-rest: #8d96a0;
   --selection-bgColor: #1f6febb3;
   --card-bgColor: #161b22;
   --label-green-bgColor-rest: #122117;
@@ -972,7 +972,7 @@
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
   --fgColor-default: #e6edf3;
-    --fgColor-muted: #848d97;
+    --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;

github-actions[bot] avatar May 02 '24 15:05 github-actions[bot]

Hey, technically, since the contrast checks are passing this should not break anything. There is of course the possibility of tokens we don't have in our test matrix (including this very case with the hover).

We are working on moving away from using mix, however I guess for the time being it is a good change, since we already use mix anyway.

@langermank what do you think, is there something breaking?

lukasoppermann avatar May 02 '24 15:05 lukasoppermann

…since the contrast checks are passing this should not break anything. There is of course the possibility of tokens we don't have in our test matrix (including this very case with the hover).

Should I add a test for this? If so, would that just require adding a line to https://github.com/primer/primitives/blob/44c86c0d327cef5a7180baec9be614222ac8fdc7/scripts/color-contrast.config.ts#L12, like:

[4.5, 'fgColor-muted', 'control-transparent-bgColor-hover'],

smockle avatar May 02 '24 16:05 smockle

…since the contrast checks are passing this should not break anything. There is of course the possibility of tokens we don't have in our test matrix (including this very case with the hover).

Should I add a test for this? If so, would that just require adding a line to

https://github.com/primer/primitives/blob/44c86c0d327cef5a7180baec9be614222ac8fdc7/scripts/color-contrast.config.ts#L12

, like:

[4.5, 'fgColor-muted', 'control-transparent-bgColor-hover'],

Hey, no thank you, I will do this in a new PR and add more missing cases.

But this would be the correct way to implement it. 😉

lukasoppermann avatar May 02 '24 16:05 lukasoppermann

@langermank now thinking about this, shouldn't the ActionMenu use --control-fgColor-rest? However, there is no equivalent to --fgColor-muted. I am just wondering when control-rest vs fgColor-default should be used.

lukasoppermann avatar May 03 '24 10:05 lukasoppermann