Adds tokens for inactive button state by mperrotti · Pull Request #774 · primer/primitives

mperrotti · 2023-11-09T19:46:32Z

Summary

Adds color tokens to support Inactive button state styles

(From this Figma)

List of notable changes:

added inactive button text colors:
- New build: button-inactive-fgColor-rest
- Legacy build: btn.inactive.text
added inactive button text colors:
- New build: button-inactive-bgColor-rest
- Legacy build: btn.inactive.bg

What should reviewers focus on?

Did I add these correctly?

Steps to test:

Upgrade your app to use the Canary build version
Try using these tokens to style inactive buttons
Confirm the correct colors are rendered correctly in all color modes

You can use this @primer/react PR to test.

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

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-09T19:46:35Z

🦋 Changeset detected

Latest commit: a4aac10

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

mperrotti · 2023-11-09T19:46:39Z

I think these tokens will work in high-contrast modes as well, but I'll confirm by testing it in Storybook

github-actions · 2023-11-09T19:46:52Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2023-11-13 19:33:29.394315541 +0000
+++ dist/scss/colors/_dark.scss	2023-11-13 19:33:15.958272579 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-inactive-bg: #21262d;
+    --color-btn-inactive-text: #7d8590;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_dark_colorblind.scss	2023-11-13 19:33:29.406315577 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-11-13 19:33:15.966272640 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-inactive-bg: #21262d;
+    --color-btn-inactive-text: #8b949e;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_dark_dimmed.scss	2023-11-13 19:33:29.402315565 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-11-13 19:33:15.962272609 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-hover-counter-fg: #cdd9e5;
+    --color-btn-inactive-bg: #373e47;
+    --color-btn-inactive-text: #768390;
     --color-underlinenav-icon: #636e7b;
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-11-13 19:33:29.402315565 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-11-13 19:33:15.966272640 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-inactive-bg: #272b33;
+    --color-btn-inactive-text: #f0f3f6;
     --color-underlinenav-icon: #f0f3f6;
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-11-13 19:33:29.410315589 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-11-13 19:33:15.970272670 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-inactive-bg: #21262d;
+    --color-btn-inactive-text: #8b949e;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_light.scss	2023-11-13 19:33:29.370315469 +0000
+++ dist/scss/colors/_light.scss	2023-11-13 19:33:15.938272425 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
+    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-text: #656d76;
     --color-underlinenav-icon: #6e7781;
--- base/dist/scss/colors/_light_colorblind.scss	2023-11-13 19:33:29.390315530 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-11-13 19:33:15.950272518 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-disabled-counter-fg: rgba(179,89,0,0.5);
+    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-text: #57606a;
     --color-underlinenav-icon: #6e7781;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-11-13 19:33:29.382315506 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-11-13 19:33:15.946272487 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-disabled-counter-fg: rgba(160,17,31,0.5);
+    --color-btn-inactive-bg: #ced5dc;
+    --color-btn-inactive-text: #0e1116;
     --color-underlinenav-icon: #66707b;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-11-13 19:33:29.394315541 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-11-13 19:33:15.954272548 +0000
@@ -257,2 +257,4 @@
     --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
+    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-text: #57606a;
     --color-underlinenav-icon: #6e7781;

github-actions · 2023-11-09T19:47:33Z

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

github-actions · 2023-11-09T19:47:48Z

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-13 19:33:29.219184932 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
 --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-11-13 19:33:28.547184102 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #373e47;
 --buttonCounter-default-bgColor-rest: #444c56;
 --buttonCounter-invisible-bgColor-rest: #444c56;
 --buttonCounter-primary-bgColor-rest: #11341733;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #373e47;
   --buttonCounter-default-bgColor-rest: #444c56;
   --buttonCounter-invisible-bgColor-rest: #444c56;
   --buttonCounter-primary-bgColor-rest: #11341733;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-11-13 19:33:29.543185473 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #272b33;
 --buttonCounter-default-bgColor-rest: #525964;
 --buttonCounter-invisible-bgColor-rest: #525964;
 --buttonCounter-primary-bgColor-rest: #01040926;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #272b33;
   --buttonCounter-default-bgColor-rest: #525964;
   --buttonCounter-invisible-bgColor-rest: #525964;
   --buttonCounter-primary-bgColor-rest: #01040926;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-11-13 19:33:28.875184496 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
 --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-11-13 19:33:28.023183473 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #21262d;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
 --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-11-13 19:33:27.235182527 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #d0d7de;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #d0d7de;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-11-13 19:33:27.627182997 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #ced5dc;
 --buttonCounter-default-bgColor-rest: #66707b33;
 --buttonCounter-invisible-bgColor-rest: #66707b33;
 --buttonCounter-primary-bgColor-rest: #00230b33;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #ced5dc;
   --buttonCounter-default-bgColor-rest: #66707b33;
   --buttonCounter-invisible-bgColor-rest: #66707b33;
   --buttonCounter-primary-bgColor-rest: #00230b33;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-11-13 19:33:26.739181930 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #d0d7de;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #d0d7de;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-11-13 19:33:26.295181397 +0000
@@ -159,6 +159,8 @@
 --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-bgColor-rest: #d0d7de;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -577,6 +579,8 @@
   --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-bgColor-rest: #d0d7de;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;

langermank · 2023-11-09T20:02:44Z

        },
      },
    },
+    inactive: {


Will we need this design for anything other than a button? Like an action list item or toggle switch, etc etc.

In CSS, would you just use the rest token for hover/active state?

Will we need this design for anything other than a button? Like an action list item or toggle switch, etc etc.

Yes, we will also have "inactive" states for ActionList items. We haven't identified any other controls that need to support this state.

Here's the ActionList.Item @primer/react PR: primer/react#3913

I was able to just use fgColor.muted, but we should probably add component tokens. What do you think?

In CSS, would you just use the rest token for hover/active state?

Yup, inactive buttons won't have hover and active states.

Just thinking we might want to move these tokens you added into the control pattern instead of button if we're able to reuse them elsewhere. But if they need to be custom for each type of control, then leaving them here in button makes sense.

I think they'll need to be different for each type of control.

mperrotti · 2023-11-09T20:11:43Z

I tested this in Storybook, and it's working well in all color modes 🙂

adds tokens for inactive button state

98bd6f3

mperrotti requested a review from a team as a code owner November 9, 2023 19:46

mperrotti requested review from a team and langermank November 9, 2023 19:46

mperrotti temporarily deployed to github-pages November 9, 2023 19:48 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 9, 2023 19:48 Inactive

Create wicked-wombats-search.md

cc10c9c

mperrotti temporarily deployed to github-pages November 9, 2023 19:52 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 9, 2023 19:52 Inactive

langermank reviewed Nov 9, 2023

View reviewed changes

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

mperrotti mentioned this pull request Nov 9, 2023

Adds 'inactive' state to buttons primer/react#3812

Merged

6 of 11 tasks

github-actions[bot] Regenerated snapshots

6a7158b

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

Update wicked-wombats-search.md

5db5a44

langermank temporarily deployed to github-pages November 9, 2023 21:31 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview November 9, 2023 21:32 Inactive

langermank approved these changes Nov 9, 2023

View reviewed changes

Merge branch 'main' into mp/inactive-btn-tokens

f511c34

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

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

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

github-actions[bot] Regenerated snapshots

7e5a215

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

garbage commit to rerun actions

a4aac10

mperrotti enabled auto-merge (squash) November 13, 2023 19:32

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

github-actions Bot temporarily deployed to storybook-preview November 13, 2023 19:34 Inactive

langermank disabled auto-merge November 13, 2023 20:03

langermank merged commit 3a6d736 into main Nov 13, 2023

langermank deleted the mp/inactive-btn-tokens branch November 13, 2023 20:03

primer Bot mentioned this pull request Nov 13, 2023

Release Tracking #775

Merged

mperrotti mentioned this pull request Nov 15, 2023

Corrects light theme inactive button bg color #776

Merged

Conversation

mperrotti commented Nov 9, 2023

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 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

mperrotti commented Nov 9, 2023

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Nov 9, 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!

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

Uh oh!

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!

langermank Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

mperrotti Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

langermank Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

mperrotti Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

mperrotti commented Nov 9, 2023

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Nov 9, 2023 •

edited

Loading

github-actions Bot commented Nov 9, 2023 •

edited

Loading

github-actions Bot commented Nov 9, 2023 •

edited

Loading

`light`: ✅ all checks passed

`dark`: ❌ 9 checks failed

github-actions Bot commented Nov 9, 2023 •

edited

Loading