Adds tokens for inactive button state #774

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

src/tokens/functional/color/dark/patterns-dark.json5

@@ -1531,6 +1531,36 @@
        },
      },
    },
+    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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds tokens for inactive button state #774

Adds tokens for inactive button state #774

mperrotti commented Nov 9, 2023

changeset-bot bot commented Nov 9, 2023 •

edited

Loading

mperrotti commented Nov 9, 2023

github-actions 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

/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

langermank Nov 9, 2023

mperrotti Nov 9, 2023

langermank Nov 9, 2023

mperrotti Nov 9, 2023

mperrotti commented Nov 9, 2023

Adds tokens for inactive button state #774

Adds tokens for inactive button state #774

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:

changeset-bot bot commented Nov 9, 2023 • edited Loading

🦋 Changeset detected

mperrotti commented Nov 9, 2023

github-actions bot commented Nov 9, 2023 • edited Loading

github-actions bot commented Nov 9, 2023 • edited Loading

Design Token Contrast Check

light: ✅ all checks passed

dark: ❌ 9 checks failed

github-actions bot commented Nov 9, 2023 • edited Loading

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

langermank Nov 9, 2023

Choose a reason for hiding this comment

mperrotti Nov 9, 2023

Choose a reason for hiding this comment

langermank Nov 9, 2023

Choose a reason for hiding this comment

mperrotti Nov 9, 2023

Choose a reason for hiding this comment

mperrotti commented Nov 9, 2023

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