Skip to content

Corrects light theme inactive button bg color - #776

Merged
mperrotti merged 3 commits into
mainfrom
mp/inactive-button-typo-fix
Nov 16, 2023
Merged

mperrotti merged 3 commits into
mainfrom
mp/inactive-button-typo-fix

Conversation

@mperrotti

Copy link
Copy Markdown
Contributor

This just fixes a typo I made in #774

@mperrotti
mperrotti requested a review from a team as a code owner November 15, 2023 16:20
@mperrotti
mperrotti requested review from a team, siddharthkp and tobiasahlin November 15, 2023 16:20
@changeset-bot

changeset-bot Bot commented Nov 15, 2023 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 538f777

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

github-actions Bot commented Nov 15, 2023 •

Copy link
Copy Markdown
Contributor
Variables changed
--- base/dist/scss/colors/_light.scss	2023-11-15 16:21:53.279413160 +0000
+++ dist/scss/colors/_light.scss	2023-11-15 16:21:39.759399570 +0000
@@ -257,3 +257,3 @@
     --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
-    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-bg: #eaeef2;
     --color-btn-inactive-text: #656d76;
--- base/dist/scss/colors/_light_colorblind.scss	2023-11-15 16:21:53.295413175 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-11-15 16:21:39.775399577 +0000
@@ -257,3 +257,3 @@
     --color-btn-danger-disabled-counter-fg: rgba(179,89,0,0.5);
-    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-bg: #eaeef2;
     --color-btn-inactive-text: #57606a;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-11-15 16:21:53.291413171 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-11-15 16:21:39.767399574 +0000
@@ -257,3 +257,3 @@
     --color-btn-danger-disabled-counter-fg: rgba(160,17,31,0.5);
-    --color-btn-inactive-bg: #ced5dc;
+    --color-btn-inactive-bg: #e7ecf0;
     --color-btn-inactive-text: #0e1116;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-11-15 16:21:53.299413178 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-11-15 16:21:39.779399578 +0000
@@ -257,3 +257,3 @@
     --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
-    --color-btn-inactive-bg: #d0d7de;
+    --color-btn-inactive-bg: #eaeef2;
     --color-btn-inactive-text: #57606a;

@github-actions

github-actions Bot commented Nov 15, 2023 •

Copy link
Copy Markdown
Contributor

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

github-actions Bot commented Nov 15, 2023 •

Copy link
Copy Markdown
Contributor

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-11-15 16:21:42.245633718 +0000
@@ -160,7 +160,7 @@
 --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;
+  --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -580,7 +580,7 @@
   --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;
+    --button-inactive-bgColor-rest: #eaeef2;
   --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-15 16:21:42.749641062 +0000
@@ -160,7 +160,7 @@
 --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;
+  --button-inactive-bgColor-rest: #e7ecf0;
 --buttonCounter-default-bgColor-rest: #66707b33;
 --buttonCounter-invisible-bgColor-rest: #66707b33;
 --buttonCounter-primary-bgColor-rest: #00230b33;
@@ -580,7 +580,7 @@
   --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;
+    --button-inactive-bgColor-rest: #e7ecf0;
   --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-15 16:21:41.685625558 +0000
@@ -160,7 +160,7 @@
 --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;
+  --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -580,7 +580,7 @@
   --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;
+    --button-inactive-bgColor-rest: #eaeef2;
   --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-15 16:21:40.985615359 +0000
@@ -160,7 +160,7 @@
 --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;
+  --button-inactive-bgColor-rest: #eaeef2;
 --buttonCounter-default-bgColor-rest: #afb8c133;
 --buttonCounter-invisible-bgColor-rest: #afb8c133;
 --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -580,7 +580,7 @@
   --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;
+    --button-inactive-bgColor-rest: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;

@github-actions
github-actions Bot temporarily deployed to storybook-preview November 15, 2023 16:22 Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview November 15, 2023 16:22 Inactive
@mperrotti mperrotti added the update snapshots Update visual regression test snapshots label Nov 15, 2023
@github-actions github-actions Bot removed the update snapshots Update visual regression test snapshots label Nov 15, 2023

@siddharthkp siddharthkp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@mperrotti
mperrotti enabled auto-merge (squash) November 16, 2023 14:37
@mperrotti

Copy link
Copy Markdown
Contributor Author

"Check for changeset" appears to be stuck. I'm just gonna merge it.

@mperrotti
mperrotti disabled auto-merge November 16, 2023 15:18
@mperrotti
mperrotti merged commit cc36ab9 into main Nov 16, 2023
@mperrotti
mperrotti deleted the mp/inactive-button-typo-fix branch November 16, 2023 15:18
@primer primer Bot mentioned this pull request Nov 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants