Update inactive button text color to meet contrast on inactive button bg color by mperrotti · Pull Request #778 · primer/primitives

mperrotti · 2023-11-17T16:11:47Z

Summary

Update inactive button text color in light and dark mode to ensure we're meeting the contrast ratio minimum against the inactive button's background color.

List of notable changes:

Updates inactive button colors in legacy and v8 token data

What should reviewers focus on?

Steps to test:

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

The former fg.muted value just barely fails the contrast ratio check when used on gray.1: https://github.com/primer/react/actions/runs/6893293489/job/18752536079?pr=3812

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

changeset-bot · 2023-11-17T16:11:50Z

🦋 Changeset detected

Latest commit: 8eb9fb8

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

github-actions · 2023-11-17T16:12:07Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2023-11-21 16:57:26.858330129 +0000
+++ dist/scss/colors/_dark.scss	2023-11-21 16:57:13.838306441 +0000
@@ -258,3 +258,3 @@
     --color-btn-inactive-bg: #21262d;
-    --color-btn-inactive-text: #7d8590;
+    --color-btn-inactive-text: #8b949e;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-11-21 16:57:26.870330181 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-11-21 16:57:13.846306445 +0000
@@ -258,3 +258,3 @@
     --color-btn-inactive-bg: #272b33;
-    --color-btn-inactive-text: #f0f3f6;
+    --color-btn-inactive-text: #bdc4cc;
     --color-underlinenav-icon: #f0f3f6;
--- base/dist/scss/colors/_light.scss	2023-11-21 16:57:26.838330040 +0000
+++ dist/scss/colors/_light.scss	2023-11-21 16:57:13.814306430 +0000
@@ -258,3 +258,3 @@
     --color-btn-inactive-bg: #eaeef2;
-    --color-btn-inactive-text: #656d76;
+    --color-btn-inactive-text: #57606a;
     --color-underlinenav-icon: #6e7781;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-11-21 16:57:26.846330076 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-11-21 16:57:13.822306434 +0000
@@ -258,3 +258,3 @@
     --color-btn-inactive-bg: #e7ecf0;
-    --color-btn-inactive-text: #0e1116;
+    --color-btn-inactive-text: #4b535d;
     --color-underlinenav-icon: #66707b;

github-actions · 2023-11-17T16:12:46Z

Design Token Contrast Check

`light`: ✅ all checks passed

Show results table for theme: light

contrastPair	pass	contrastRatio	minimumContrastRatio
fg.default vs. canvas.default	✅	15.79:1	4.5:1
fg.muted vs. canvas.default	✅	5.24:1	4.5:1
fg.subtle vs. canvas.default	✅	4.54:1	4.5:1
fg.default vs. canvas.subtle	✅	14.83:1	4.5:1
fg.muted vs. canvas.subtle	✅	4.92:1	4.5:1
fg.default vs. canvas.inset	✅	14.83:1	4.5:1
fg.muted vs. canvas.inset	✅	4.92:1	4.5:1
fg.default vs. accent.fg	✅	3.04:1	3:1
fg.default vs. fg.muted	✅	3.01:1	3:1
fg.default vs. accent.subtle	✅	13.88:1	4.5:1
fg.default vs. success.subtle	✅	14.19:1	4.5:1
fg.default vs. open.subtle	✅	14.19:1	4.5:1
fg.default vs. danger.subtle	✅	13.77:1	4.5:1
fg.default vs. closed.subtle	✅	13.77:1	4.5:1
fg.default vs. attention.subtle	✅	14.65:1	4.5:1
fg.default vs. severe.subtle	✅	14.26:1	4.5:1
fg.default vs. done.subtle	✅	14.21:1	4.5:1
fg.default vs. sponsors.subtle	✅	14.24:1	4.5:1
accent.fg vs. canvas.default	✅	5.19:1	4.5:1
accent.fg vs. canvas.subtle	✅	4.87:1	4.5:1
accent.fg vs. canvas.inset	✅	4.87:1	4.5:1
success.fg vs. canvas.default	✅	5.07:1	4.5:1
success.fg vs. canvas.subtle	✅	4.77:1	4.5:1
success.fg vs. canvas.inset	✅	4.77:1	4.5:1
open.fg vs. canvas.default	✅	5.07:1	4.5:1
open.fg vs. canvas.subtle	✅	4.77:1	4.5:1
open.fg vs. canvas.inset	✅	4.77:1	4.5:1
danger.fg vs. canvas.default	✅	5.24:1	4.5:1
danger.fg vs. canvas.subtle	✅	4.92:1	4.5:1
danger.fg vs. canvas.inset	✅	4.92:1	4.5:1
closed.fg vs. canvas.default	✅	5.24:1	4.5:1
closed.fg vs. canvas.subtle	✅	4.92:1	4.5:1
closed.fg vs. canvas.inset	✅	4.92:1	4.5:1
attention.fg vs. canvas.default	✅	4.86:1	4.5:1
attention.fg vs. canvas.subtle	✅	4.57:1	4.5:1
attention.fg vs. canvas.inset	✅	4.57:1	4.5:1
severe.fg vs. canvas.default	✅	5.03:1	4.5:1
severe.fg vs. canvas.subtle	✅	4.72:1	4.5:1
severe.fg vs. canvas.inset	✅	4.72:1	4.5:1
done.fg vs. canvas.default	✅	5.04:1	4.5:1
done.fg vs. canvas.subtle	✅	4.73:1	4.5:1
done.fg vs. canvas.inset	✅	4.73:1	4.5:1
sponsors.fg vs. canvas.default	✅	5.04:1	4.5:1
sponsors.fg vs. canvas.subtle	✅	4.73:1	4.5:1
sponsors.fg vs. canvas.inset	✅	4.73:1	4.5:1
accent.fg vs. accent.subtle	✅	4.56:1	4.5:1
success.fg vs. success.subtle	✅	4.56:1	4.5:1
open.fg vs. open.subtle	✅	4.56:1	4.5:1
danger.fg vs. danger.subtle	✅	4.57:1	4.5:1
closed.fg vs. closed.subtle	✅	4.57:1	4.5:1
attention.fg vs. attention.subtle	✅	4.51:1	4.5:1
severe.fg vs. severe.subtle	✅	4.54:1	4.5:1
done.fg vs. done.subtle	✅	4.53:1	4.5:1
sponsors.fg vs. sponsors.subtle	✅	4.55:1	4.5:1
accent.fg vs. fg.default	✅	3.04:1	3:1
success.fg vs. fg.default	✅	3.11:1	3:1
open.fg vs. fg.default	✅	3.11:1	3:1
danger.fg vs. fg.default	✅	3.01:1	3:1
closed.fg vs. fg.default	✅	3.01:1	3:1
attention.fg vs. fg.default	✅	3.24:1	3:1
severe.fg vs. fg.default	✅	3.13:1	3:1
done.fg vs. fg.default	✅	3.13:1	3:1
sponsors.fg vs. fg.default	✅	3.13:1	3:1
fg.onEmphasis vs. neutral.emphasis	✅	4.54:1	4.5:1
fg.onEmphasis vs. neutral.emphasisPlus	✅	14.65:1	4.5:1
fg.onEmphasis vs. accent.emphasis	✅	5.19:1	4.5:1
fg.onEmphasis vs. success.emphasis	✅	4.51:1	4.5:1
fg.onEmphasis vs. open.emphasis	✅	4.51:1	4.5:1
fg.onEmphasis vs. danger.emphasis	✅	5.35:1	4.5:1
fg.onEmphasis vs. closed.emphasis	✅	5.35:1	4.5:1
fg.onEmphasis vs. attention.emphasis	✅	4.86:1	4.5:1
fg.onEmphasis vs. severe.emphasis	✅	5.03:1	4.5:1
fg.onEmphasis vs. done.emphasis	✅	5.04:1	4.5:1
fg.onEmphasis vs. sponsors.emphasis	✅	5.04:1	4.5:1
control.borderColor.emphasis vs. canvas.default	✅	3.28:1	3:1
control.borderColor.emphasis vs. canvas.subtle	✅	3.08:1	3:1

`dark`: ❌ 9 checks failed

Show results table for theme: dark

contrastPair	pass	contrastRatio	minimumContrastRatio
fg.default vs. canvas.default	✅	16.01:1	4.5:1
fg.muted vs. canvas.default	✅	5.07:1	4.5:1
fg.subtle vs. canvas.default	❌	4.11:1	4.5:1
fg.default vs. canvas.subtle	✅	14.63:1	4.5:1
fg.muted vs. canvas.subtle	✅	4.63:1	4.5:1
fg.default vs. canvas.inset	✅	17.37:1	4.5:1
fg.muted vs. canvas.inset	✅	5.5:1	4.5:1
fg.default vs. accent.fg	✅	3.17:1	3:1
fg.default vs. fg.muted	✅	3.15:1	3:1
fg.default vs. accent.subtle on canvas.default	✅	14.34:1	4.5:1
fg.default vs. accent.subtle on canvas.subtle	✅	12.91:1	4.5:1
fg.default vs. success.subtle on canvas.default	✅	13.44:1	4.5:1
fg.default vs. success.subtle on canvas.subtle	✅	12:1	4.5:1
fg.default vs. open.subtle on canvas.default	✅	13.44:1	4.5:1
fg.default vs. open.subtle on canvas.subtle	✅	12:1	4.5:1
fg.default vs. danger.subtle on canvas.default	✅	14.59:1	4.5:1
fg.default vs. danger.subtle on canvas.subtle	✅	13.2:1	4.5:1
fg.default vs. closed.subtle on canvas.default	✅	13.64:1	4.5:1
fg.default vs. closed.subtle on canvas.subtle	✅	12.34:1	4.5:1
fg.default vs. attention.subtle on canvas.default	✅	13.4:1	4.5:1
fg.default vs. attention.subtle on canvas.subtle	✅	12.08:1	4.5:1
fg.default vs. severe.subtle on canvas.default	✅	14.45:1	4.5:1
fg.default vs. severe.subtle on canvas.subtle	✅	13.03:1	4.5:1
fg.default vs. done.subtle on canvas.default	✅	14.28:1	4.5:1
fg.default vs. done.subtle on canvas.subtle	✅	12.85:1	4.5:1
fg.default vs. sponsors.subtle on canvas.default	✅	14.4:1	4.5:1
fg.default vs. sponsors.subtle on canvas.subtle	✅	12.98:1	4.5:1
accent.fg vs. canvas.default	✅	5.05:1	4.5:1
accent.fg vs. canvas.subtle	✅	4.61:1	4.5:1
accent.fg vs. canvas.inset	✅	5.48:1	4.5:1
success.fg vs. canvas.default	✅	7.44:1	4.5:1
success.fg vs. canvas.subtle	✅	6.8:1	4.5:1
success.fg vs. canvas.inset	✅	8.08:1	4.5:1
open.fg vs. canvas.default	✅	7.44:1	4.5:1
open.fg vs. canvas.subtle	✅	6.8:1	4.5:1
open.fg vs. canvas.inset	✅	8.08:1	4.5:1
danger.fg vs. canvas.default	✅	5.64:1	4.5:1
danger.fg vs. canvas.subtle	✅	5.16:1	4.5:1
danger.fg vs. canvas.inset	✅	6.12:1	4.5:1
closed.fg vs. canvas.default	✅	5.64:1	4.5:1
closed.fg vs. canvas.subtle	✅	5.16:1	4.5:1
closed.fg vs. canvas.inset	✅	6.12:1	4.5:1
attention.fg vs. canvas.default	✅	7.49:1	4.5:1
attention.fg vs. canvas.subtle	✅	6.85:1	4.5:1
attention.fg vs. canvas.inset	✅	8.13:1	4.5:1
severe.fg vs. canvas.default	✅	5.61:1	4.5:1
severe.fg vs. canvas.subtle	✅	5.13:1	4.5:1
severe.fg vs. canvas.inset	✅	6.09:1	4.5:1
done.fg vs. canvas.default	✅	5.64:1	4.5:1
done.fg vs. canvas.subtle	✅	5.15:1	4.5:1
done.fg vs. canvas.inset	✅	6.12:1	4.5:1
sponsors.fg vs. canvas.default	✅	5.62:1	4.5:1
sponsors.fg vs. canvas.subtle	✅	5.14:1	4.5:1
sponsors.fg vs. canvas.inset	✅	6.1:1	4.5:1
accent.fg vs. accent.subtle on canvas.default	✅	4.52:1	4.5:1
success.fg vs. success.subtle on canvas.default	✅	6.25:1	4.5:1
success.fg vs. success.subtle on canvas.subtle	✅	5.58:1	4.5:1
open.fg vs. open.subtle on canvas.default	✅	6.25:1	4.5:1
open.fg vs. open.subtle on canvas.subtle	✅	5.58:1	4.5:1
danger.fg vs. danger.subtle on canvas.default	✅	5.14:1	4.5:1
danger.fg vs. danger.subtle on canvas.subtle	✅	4.65:1	4.5:1
closed.fg vs. closed.subtle on canvas.default	✅	4.81:1	4.5:1
attention.fg vs. attention.subtle on canvas.default	✅	6.27:1	4.5:1
attention.fg vs. attention.subtle on canvas.subtle	✅	5.65:1	4.5:1
severe.fg vs. severe.subtle on canvas.default	✅	5.06:1	4.5:1
severe.fg vs. severe.subtle on canvas.subtle	✅	4.57:1	4.5:1
done.fg vs. done.subtle on canvas.default	✅	5.03:1	4.5:1
done.fg vs. done.subtle on canvas.subtle	✅	4.52:1	4.5:1
sponsors.fg vs. sponsors.subtle on canvas.default	✅	5.06:1	4.5:1
sponsors.fg vs. sponsors.subtle on canvas.subtle	✅	4.56:1	4.5:1
accent.fg vs. fg.default	✅	3.17:1	3:1
success.fg vs. fg.default	❌	2.14:1	3:1
open.fg vs. fg.default	❌	2.14:1	3:1
danger.fg vs. fg.default	❌	2.83:1	3:1
closed.fg vs. fg.default	❌	2.83:1	3:1
attention.fg vs. fg.default	❌	2.13:1	3:1
severe.fg vs. fg.default	❌	2.85:1	3:1
done.fg vs. fg.default	❌	2.83:1	3:1
sponsors.fg vs. fg.default	❌	2.84:1	3:1
fg.onEmphasis vs. neutral.emphasis	✅	4.59:1	4.5:1
fg.onEmphasis vs. neutral.emphasisPlus	✅	4.59:1	4.5:1
fg.onEmphasis vs. accent.emphasis	✅	4.63:1	4.5:1
fg.onEmphasis vs. success.emphasis	✅	4.63:1	4.5:1
fg.onEmphasis vs. open.emphasis	✅	4.63:1	4.5:1
fg.onEmphasis vs. danger.emphasis	✅	4.6:1	4.5:1
fg.onEmphasis vs. closed.emphasis	✅	4.6:1	4.5:1
fg.onEmphasis vs. attention.emphasis	✅	4.64:1	4.5:1
fg.onEmphasis vs. severe.emphasis	✅	4.65:1	4.5:1
fg.onEmphasis vs. done.emphasis	✅	4.6:1	4.5:1
fg.onEmphasis vs. sponsors.emphasis	✅	4.57:1	4.5:1
control.borderColor.emphasis vs. canvas.default	✅	3.31:1	3:1
control.borderColor.emphasis vs. canvas.subtle	✅	3.02:1	3:1

mperrotti · 2023-11-17T16:14:34Z

It looks like we might need to update fg.default as well. There isn't enough contrast between muted and default right now.

mperrotti · 2023-11-17T16:21:40Z

Unless we don't care about fgColor-default and fgColor-muted not meeting a 3:1 contrast ratio, I don't think this is the right approach for getting inactive buttons to have sufficient contrast. We'd have to significantly darken fgColor-default or black to have 3:1 contrast between.

Current fgColor-default/black: #1f2328
Darkened fgColor-default/black to have 3:1 contrast with fgColor-muted/gray.6: #0d0f11

I think instead we should just use a custom color for the inactive button text tokens. What do you think?

lukasoppermann · 2023-11-21T13:06:26Z

I think instead we should just use a custom color for the inactive button text tokens. What do you think?

yes, you are right. I missed the 3:1 contrast between default and muted, sorry.

In this case we should go ahead and just create custom component token here.

github-actions · 2023-11-21T16:57:32Z

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-11-21 16:57:11.608061344 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #f0f6fc1a;
 --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #7d8590;
+  --button-inactive-fgColor-rest: #8b949e;
 --button-inactive-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #7d8590;
+    --button-inactive-fgColor-rest: #8b949e;
   --button-inactive-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-11-21 16:57:10.984060500 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #cdd9e51a;
 --button-danger-borderColor-active: #cdd9e51a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #6d7986;
+  --button-inactive-fgColor-rest: #768390;
 --button-inactive-bgColor-rest: #373e47;
 --buttonCounter-default-bgColor-rest: #444c56;
 --buttonCounter-invisible-bgColor-rest: #444c56;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #cdd9e51a;
   --button-danger-borderColor-active: #cdd9e51a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #6d7986;
+    --button-inactive-fgColor-rest: #768390;
   --button-inactive-bgColor-rest: #373e47;
   --buttonCounter-default-bgColor-rest: #444c56;
   --buttonCounter-invisible-bgColor-rest: #444c56;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-11-21 16:57:11.924061771 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #ffffff1a;
 --button-danger-borderColor-active: #ffffff1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #f0f3f6;
+  --button-inactive-fgColor-rest: #bdc4cc;
 --button-inactive-bgColor-rest: #272b33;
 --buttonCounter-default-bgColor-rest: #525964;
 --buttonCounter-invisible-bgColor-rest: #525964;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #ffffff1a;
   --button-danger-borderColor-active: #ffffff1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #f0f3f6;
+    --button-inactive-fgColor-rest: #bdc4cc;
   --button-inactive-bgColor-rest: #272b33;
   --buttonCounter-default-bgColor-rest: #525964;
   --buttonCounter-invisible-bgColor-rest: #525964;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-11-21 16:57:11.300060928 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #f0f6fc1a;
 --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #7d8590;
+  --button-inactive-fgColor-rest: #8b949e;
 --button-inactive-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #7d8590;
+    --button-inactive-fgColor-rest: #8b949e;
   --button-inactive-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-11-21 16:57:10.652060051 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #f0f6fc1a;
 --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #7d8590;
+  --button-inactive-fgColor-rest: #8b949e;
 --button-inactive-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #7d8590;
+    --button-inactive-fgColor-rest: #8b949e;
   --button-inactive-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-11-21 16:57:09.936059082 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #1f232826;
 --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
-  --button-inactive-fgColor-rest: #636c76;
+  --button-inactive-fgColor-rest: #57606a;
 --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
-    --button-inactive-fgColor-rest: #636c76;
+    --button-inactive-fgColor-rest: #57606a;
   --button-inactive-bgColor-rest: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-11-21 16:57:10.260059521 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #01040926;
 --button-danger-borderColor-active: #01040926;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
-  --button-inactive-fgColor-rest: #0e1116;
+  --button-inactive-fgColor-rest: #4b535d;
 --button-inactive-bgColor-rest: #e7ecf0;
 --buttonCounter-default-bgColor-rest: #66707b33;
 --buttonCounter-invisible-bgColor-rest: #66707b33;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #01040926;
   --button-danger-borderColor-active: #01040926;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
-    --button-inactive-fgColor-rest: #0e1116;
+    --button-inactive-fgColor-rest: #4b535d;
   --button-inactive-bgColor-rest: #e7ecf0;
   --buttonCounter-default-bgColor-rest: #66707b33;
   --buttonCounter-invisible-bgColor-rest: #66707b33;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-11-21 16:57:09.560058574 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #1f232826;
 --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-  --button-inactive-fgColor-rest: #636c76;
+  --button-inactive-fgColor-rest: #57606a;
 --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-    --button-inactive-fgColor-rest: #636c76;
+    --button-inactive-fgColor-rest: #57606a;
   --button-inactive-bgColor-rest: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-11-21 16:57:09.088057936 +0000
@@ -159,7 +159,7 @@
 --button-danger-borderColor-hover: #1f232826;
 --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-  --button-inactive-fgColor-rest: #636c76;
+  --button-inactive-fgColor-rest: #57606a;
 --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
@@ -579,7 +579,7 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-    --button-inactive-fgColor-rest: #636c76;
+    --button-inactive-fgColor-rest: #57606a;
   --button-inactive-bgColor-rest: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;

mperrotti · 2023-11-21T17:32:52Z

This appears to be stuck on the "check for changeset" check. Merging because I can manually confirm that there is a changeset: https://github.com/primer/primitives/pull/778/files#diff-747c9a1a38a77edc5f5c05e85a844a1257bdb73d6d184dd21d97136a3b1e9a51

matches legacy fgColor-muted with the v8 value

de71228

mperrotti requested a review from a team as a code owner November 17, 2023 16:11

mperrotti requested review from a team, broccolinisoup and tobiasahlin November 17, 2023 16:11

mperrotti requested review from langermank and lukasoppermann November 17, 2023 16:12

mperrotti changed the title ~~Match legacy fgColor-muted with the v8 value~~ Match legacy fg.muted with the v8 value for fgColor-muted Nov 17, 2023

mperrotti temporarily deployed to github-pages November 17, 2023 16:13 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 17, 2023 16:13 Inactive

langermank approved these changes Nov 21, 2023

View reviewed changes

mperrotti added 2 commits November 21, 2023 11:53

reverts updated to fgColor.muted, updates inactive btn text color

5a29319

adds changeset

3d7f94c

mperrotti changed the title ~~Match legacy fg.muted with the v8 value for fgColor-muted~~ Update inactive button text color to meet contrast on inactive button bg color Nov 21, 2023

mperrotti temporarily deployed to github-pages November 21, 2023 16:58 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 21, 2023 16:58 Inactive

mperrotti added the update snapshots Update visual regression test snapshots label Nov 21, 2023

github-actions[bot] Regenerated snapshots

8eb9fb8

github-actions Bot removed the update snapshots Update visual regression test snapshots label Nov 21, 2023

mperrotti merged commit f546c45 into main Nov 21, 2023

mperrotti deleted the mp/fgColor-muted-sync-legacy branch November 21, 2023 17:33

primer Bot mentioned this pull request Nov 21, 2023

Release Tracking #780

Merged

Navigation Menu

Repository navigation

Update inactive button text color to meet contrast on inactive button bg color - #778

Update inactive button text color to meet contrast on inactive button bg color#778
mperrotti merged 4 commits into
mainfrom
mp/fgColor-muted-sync-legacy

mperrotti commented Nov 17, 2023 •

edited

Loading

Uh oh!

changeset-bot Bot commented Nov 17, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 17, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 17, 2023 •

edited

Loading

Uh oh!

mperrotti commented Nov 17, 2023

Uh oh!

mperrotti commented Nov 17, 2023 •

edited

Loading

Uh oh!

lukasoppermann commented Nov 21, 2023

Uh oh!

github-actions Bot commented Nov 21, 2023

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

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

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

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

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

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

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

mperrotti commented Nov 21, 2023

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mperrotti commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

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

Contributor checklist:

Reviewer checklist:

Uh oh!

changeset-bot Bot commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Contrast Check

light: ✅ all checks passed

dark: ❌ 9 checks failed

Uh oh!

mperrotti commented Nov 17, 2023

Uh oh!

mperrotti commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lukasoppermann commented Nov 21, 2023

Uh oh!

github-actions Bot commented Nov 21, 2023

Design Token Diff

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

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

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

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

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

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

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

mperrotti commented Nov 21, 2023

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mperrotti commented Nov 17, 2023 •

edited

Loading

changeset-bot Bot commented Nov 17, 2023 •

edited

Loading

github-actions Bot commented Nov 17, 2023 •

edited

Loading

github-actions Bot commented Nov 17, 2023 •

edited

Loading

`light`: ✅ all checks passed

`dark`: ❌ 9 checks failed

mperrotti commented Nov 17, 2023 •

edited

Loading