Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve contrast for Buttons with counters #641

Merged
merged 7 commits into from
May 9, 2023
Merged

Improve contrast for Buttons with counters #641

merged 7 commits into from
May 9, 2023

Conversation

langermank
Copy link
Contributor

@langermank langermank commented May 3, 2023 •
edited
Loading

Button variants danger, outline, and primary are failing contrast checks when they have a counter label. This PR includes slight changes to the counter backgrounds, and adds new tokens for the counter label text color to achieve sufficient contrast.

Additions

Legacy

  • btn.outline.hoverCounterFg
  • btn.outline.disabledCounterFg
  • btn.outline.counterFg
  • btn.danger.hoverCounterFg
  • btn.danger.disabledCounterFg
  • btn.danger.counterFg

v8

  • --button-invisible-fgColor-hover (another contrast issue)
  • --buttonCounter-outline-fgColor-rest
  • --buttonCounter-outline-fgColor-hover
  • --buttonCounter-outline-fgColor-disabled
  • --buttonCounter-danger-fgColor-rest
  • --buttonCounter-danger-fgColor-hover
  • --buttonCounter-danger-fgColor-disabled

Test

Check out the preview Storybook

Screenshots

Light before:
image

Light after:
image

Dark before:
image

Dark after:
image

@changeset-bot
Copy link

changeset-bot bot commented May 3, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: d78bba1

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
Copy link
Contributor

github-actions bot commented May 3, 2023 •
edited
Loading

Variables changed 
--- base/dist/scss/colors/_dark.scss	2023-05-09 00:17:22.491457026 +0000
+++ dist/scss/colors/_dark.scss	2023-05-09 00:17:05.163390644 +0000
@@ -217,4 +217,4 @@
     --color-btn-primary-icon: #ffffff;
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
-    --color-btn-outline-text: #58a6ff;
+    --color-btn-primary-counter-bg: rgba(4,38,15,0.2);
+    --color-btn-outline-text: #388bfd;
     --color-btn-outline-hover-text: #58a6ff;
@@ -224,3 +224,3 @@
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(5,29,77,0.2);
     --color-btn-outline-selected-text: #ffffff;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
-    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-outline-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-hover-counter-fg: #58a6ff;
+    --color-btn-outline-disabled-counter-fg: rgba(47,129,247,0.5);
+    --color-btn-outline-counter-fg: #388bfd;
     --color-btn-danger-text: #f85149;
@@ -248,4 +251,7 @@
     --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05);
-    --color-btn-danger-counter-bg: rgba(218,54,51,0.1);
+    --color-btn-danger-counter-bg: rgba(73,2,2,0.2);
     --color-btn-danger-icon: #f85149;
+    --color-btn-danger-counter-fg: #f85149;
+    --color-btn-danger-disabled-counter-fg: rgba(248,81,73,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_dark_colorblind.scss	2023-05-09 00:17:22.503457071 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-05-09 00:17:05.175390688 +0000
@@ -217,4 +217,4 @@
     --color-btn-primary-icon: #ffffff;
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
-    --color-btn-outline-text: #58a6ff;
+    --color-btn-primary-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-text: #388bfd;
     --color-btn-outline-hover-text: #58a6ff;
@@ -224,3 +224,3 @@
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(5,29,77,0.2);
     --color-btn-outline-selected-text: #ffffff;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
-    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-outline-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-hover-counter-fg: #58a6ff;
+    --color-btn-outline-disabled-counter-fg: rgba(88,166,255,0.5);
+    --color-btn-outline-counter-fg: #388bfd;
     --color-btn-danger-text: #d47616;
@@ -248,4 +251,7 @@
     --color-btn-danger-disabled-counter-bg: rgba(183,97,0,0.05);
-    --color-btn-danger-counter-bg: rgba(183,97,0,0.1);
+    --color-btn-danger-counter-bg: rgba(51,28,4,0.2);
     --color-btn-danger-icon: #d47616;
+    --color-btn-danger-counter-fg: #d47616;
+    --color-btn-danger-disabled-counter-fg: rgba(212,118,22,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_dark_dimmed.scss	2023-05-09 00:17:22.495457041 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-05-09 00:17:05.167390658 +0000
@@ -217,4 +217,4 @@
     --color-btn-primary-icon: #cdd9e5;
-    --color-btn-primary-counter-bg: rgba(205,217,229,0.2);
-    --color-btn-outline-text: #539bf5;
+    --color-btn-primary-counter-bg: rgba(17,52,23,0.2);
+    --color-btn-outline-text: #4184e4;
     --color-btn-outline-hover-text: #539bf5;
@@ -224,3 +224,3 @@
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(205,217,229,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(205,217,229,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(15,45,92,0.2);
     --color-btn-outline-selected-text: #cdd9e5;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(49,109,202,0.05);
-    --color-btn-outline-counter-bg: rgba(49,109,202,0.1);
+    --color-btn-outline-counter-bg: rgba(15,45,92,0.2);
+    --color-btn-outline-hover-counter-fg: #539bf5;
+    --color-btn-outline-disabled-counter-fg: rgba(83,155,245,0.5);
+    --color-btn-outline-counter-fg: #4184e4;
     --color-btn-danger-text: #e5534b;
@@ -248,4 +251,7 @@
     --color-btn-danger-disabled-counter-bg: rgba(201,60,55,0.05);
-    --color-btn-danger-counter-bg: rgba(201,60,55,0.1);
+    --color-btn-danger-counter-bg: rgba(93,15,18,0.2);
     --color-btn-danger-icon: #e5534b;
+    --color-btn-danger-counter-fg: #e5534b;
+    --color-btn-danger-disabled-counter-fg: rgba(229,83,75,0.5);
+    --color-btn-danger-hover-counter-fg: #cdd9e5;
     --color-underlinenav-icon: #636e7b;
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-05-09 00:17:22.499457056 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-05-09 00:17:05.171390673 +0000
@@ -218,3 +218,3 @@
     --color-btn-primary-counter-bg: rgba(1,4,9,0.15);
-    --color-btn-outline-text: #71b7ff;
+    --color-btn-outline-text: #409eff;
     --color-btn-outline-hover-text: #71b7ff;
@@ -224,3 +224,3 @@
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(25,79,177,0.2);
     --color-btn-outline-selected-text: #ffffff;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(64,158,255,0.05);
-    --color-btn-outline-counter-bg: rgba(64,158,255,0.1);
+    --color-btn-outline-counter-bg: rgba(25,79,177,0.2);
+    --color-btn-outline-hover-counter-fg: #71b7ff;
+    --color-btn-outline-disabled-counter-fg: rgba(113,183,255,0.5);
+    --color-btn-outline-counter-fg: #409eff;
     --color-btn-danger-text: #ff6a69;
@@ -250,2 +253,5 @@
     --color-btn-danger-icon: #ff6a69;
+    --color-btn-danger-counter-fg: #ff6a69;
+    --color-btn-danger-disabled-counter-fg: rgba(255,106,105,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #f0f3f6;
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-05-09 00:17:22.507457086 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-05-09 00:17:05.183390717 +0000
@@ -217,4 +217,4 @@
     --color-btn-primary-icon: #ffffff;
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
-    --color-btn-outline-text: #58a6ff;
+    --color-btn-primary-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-text: #388bfd;
     --color-btn-outline-hover-text: #58a6ff;
@@ -224,3 +224,3 @@
     --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
-    --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-outline-hover-counter-bg: rgba(5,29,77,0.2);
     --color-btn-outline-selected-text: #ffffff;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
-    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-outline-counter-bg: rgba(5,29,77,0.2);
+    --color-btn-outline-hover-counter-fg: #58a6ff;
+    --color-btn-outline-disabled-counter-fg: rgba(88,166,255,0.5);
+    --color-btn-outline-counter-fg: #388bfd;
     --color-btn-danger-text: #f85149;
@@ -248,4 +251,7 @@
     --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05);
-    --color-btn-danger-counter-bg: rgba(218,54,51,0.1);
+    --color-btn-danger-counter-bg: rgba(73,2,2,0.2);
     --color-btn-danger-icon: #f85149;
+    --color-btn-danger-counter-fg: #f85149;
+    --color-btn-danger-disabled-counter-fg: rgba(248,81,73,0.5);
+    --color-btn-danger-hover-counter-fg: #ffffff;
     --color-underlinenav-icon: #6e7681;
--- base/dist/scss/colors/_light.scss	2023-05-09 00:17:22.455456890 +0000
+++ dist/scss/colors/_light.scss	2023-05-09 00:17:05.127390511 +0000
@@ -217,3 +217,3 @@
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,45,17,0.2);
     --color-btn-outline-text: #0969da;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #cf222e;
@@ -250,2 +253,5 @@
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
     --color-underlinenav-icon: #6e7781;
--- base/dist/scss/colors/_light_colorblind.scss	2023-05-09 00:17:22.471456950 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-05-09 00:17:05.151390599 +0000
@@ -217,3 +217,3 @@
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,33,85,0.2);
     --color-btn-outline-text: #0969da;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #b35900;
@@ -250,2 +253,5 @@
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(179,89,0,0.5);
     --color-underlinenav-icon: #6e7781;
--- base/dist/scss/colors/_light_high_contrast.scss	2023-05-09 00:17:22.463456920 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-05-09 00:17:05.143390570 +0000
@@ -217,3 +217,3 @@
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,35,11,0.2);
     --color-btn-outline-text: #023b95;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(3,73,180,0.05);
-    --color-btn-outline-counter-bg: rgba(3,73,180,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #023b95;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(3,73,180,0.5);
     --color-btn-danger-text: #86061d;
@@ -250,2 +253,5 @@
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(160,17,31,0.5);
     --color-underlinenav-icon: #66707b;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-05-09 00:17:22.487457011 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-05-09 00:17:05.155390614 +0000
@@ -217,3 +217,3 @@
     --color-btn-primary-icon: rgba(255,255,255,0.8);
-    --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-primary-counter-bg: rgba(0,33,85,0.2);
     --color-btn-outline-text: #0969da;
@@ -232,3 +232,6 @@
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+    --color-btn-outline-counter-bg: #0969da1a;
+    --color-btn-outline-counter-fg: #0550ae;
+    --color-btn-outline-hover-counter-fg: #ffffff;
+    --color-btn-outline-disabled-counter-fg: rgba(9,105,218,0.5);
     --color-btn-danger-text: #cf222e;
@@ -250,2 +253,5 @@
     --color-btn-danger-hover-icon: #ffffff;
+    --color-btn-danger-counter-fg: #c21c2c;
+    --color-btn-danger-hover-counter-fg: #ffffff;
+    --color-btn-danger-disabled-counter-fg: rgba(207,34,46,0.5);
     --color-underlinenav-icon: #6e7781;

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023 •
edited
Loading

Design Token Diff

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-05-09 00:16:59.733864185 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #2a7aef;
 --button-primary-bgColor-active: #3685f3;
 --button-primary-bgColor-disabled: #1158c7;
-  --button-primary-borderColor-rest: #30363dcc;
-  --button-primary-borderColor-hover: #30363dcc;
-  --button-primary-borderColor-disabled: #30363dcc;
+  --button-primary-borderColor-rest: #f0f6fc1a;
+  --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-disabled: #f0f6fc1a;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
+  --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #484f58;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #b1bac41f;
@@ -128,8 +129,8 @@
 --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-outline-fgColor-rest: #2f81f7;
-  --button-outline-fgColor-hover: #2f81f7;
+  --button-outline-fgColor-rest: #388bfd;
+  --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
 --button-outline-fgColor-disabled: #2f81f780;
 --button-outline-bgColor-rest: #f0f6fc;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #b5531d;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
-  --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-  --buttonCounter-outline-bgColor-hover: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #04260f33;
+  --buttonCounter-outline-bgColor-rest: #051d4d33;
+  --buttonCounter-outline-bgColor-hover: #051d4d33;
 --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+  --buttonCounter-outline-fgColor-rest: #388bfd;
+  --buttonCounter-outline-fgColor-hover: #58a6ff;
+  --buttonCounter-outline-fgColor-disabled: #2f81f780;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #bd561d0d;
-  --buttonCounter-danger-bgColor-rest: #bd561d1a;
+  --buttonCounter-danger-bgColor-rest: #49020233;
+  --buttonCounter-danger-fgColor-rest: #db6d28;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #db6d2880;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-disabled: #1158c7;
-    --button-primary-borderColor-rest: #30363dcc;
-    --button-primary-borderColor-hover: #30363dcc;
-    --button-primary-borderColor-disabled: #30363dcc;
+    --button-primary-borderColor-rest: #f0f6fc1a;
+    --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-disabled: #f0f6fc1a;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
+    --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #484f58;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #b1bac41f;
@@ -518,8 +526,8 @@
   --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-outline-fgColor-rest: #2f81f7;
-    --button-outline-fgColor-hover: #2f81f7;
+    --button-outline-fgColor-rest: #388bfd;
+    --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
   --button-outline-fgColor-disabled: #2f81f780;
   --button-outline-bgColor-rest: #f0f6fc;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #b5531d;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
-    --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-    --buttonCounter-outline-bgColor-hover: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #04260f33;
+    --buttonCounter-outline-bgColor-rest: #051d4d33;
+    --buttonCounter-outline-bgColor-hover: #051d4d33;
   --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+    --buttonCounter-outline-fgColor-rest: #388bfd;
+    --buttonCounter-outline-fgColor-hover: #58a6ff;
+    --buttonCounter-outline-fgColor-disabled: #2f81f780;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #bd561d0d;
-    --buttonCounter-danger-bgColor-rest: #bd561d1a;
+    --buttonCounter-danger-bgColor-rest: #49020233;
+    --buttonCounter-danger-fgColor-rest: #db6d28;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #db6d2880;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-05-09 00:16:58.685815512 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #3b8640;
 --button-primary-bgColor-active: #428f46;
 --button-primary-bgColor-disabled: #50a254;
-  --button-primary-borderColor-rest: #444c56cc;
-  --button-primary-borderColor-hover: #444c56cc;
-  --button-primary-borderColor-disabled: #444c56cc;
+  --button-primary-borderColor-rest: #cdd9e51a;
+  --button-primary-borderColor-hover: #cdd9e51a;
+  --button-primary-borderColor-disabled: #cdd9e51a;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #3b7cdb;
+  --button-invisible-fgColor-hover: #539bf5;
 --button-invisible-fgColor-disabled: #545d68;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #909dab1f;
@@ -128,8 +129,8 @@
 --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-outline-fgColor-rest: #3b7cdb;
-  --button-outline-fgColor-hover: #3b7cdb;
+  --button-outline-fgColor-rest: #4184e4;
+  --button-outline-fgColor-hover: #539bf5;
 --button-outline-fgColor-active: #cdd9e5;
 --button-outline-fgColor-disabled: #3b7cdb80;
 --button-outline-bgColor-rest: #cdd9e5;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #c33d38;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #444c56;
-  --buttonCounter-primary-bgColor-rest: #cdd9e533;
-  --buttonCounter-outline-bgColor-rest: #316dca1a;
-  --buttonCounter-outline-bgColor-hover: #cdd9e533;
+  --buttonCounter-primary-bgColor-rest: #11341733;
+  --buttonCounter-outline-bgColor-rest: #0f2d5c33;
+  --buttonCounter-outline-bgColor-hover: #0f2d5c33;
 --buttonCounter-outline-bgColor-disabled: #316dca0d;
+  --buttonCounter-outline-fgColor-rest: #4184e4;
+  --buttonCounter-outline-fgColor-hover: #539bf5;
+  --buttonCounter-outline-fgColor-disabled: #3b7cdb80;
 --buttonCounter-danger-bgColor-hover: #cdd9e533;
 --buttonCounter-danger-bgColor-disabled: #c93c370d;
-  --buttonCounter-danger-bgColor-rest: #c93c371a;
+  --buttonCounter-danger-bgColor-rest: #5d0f1233;
+  --buttonCounter-danger-fgColor-rest: #e5534b;
+  --buttonCounter-danger-fgColor-hover: #cdd9e5;
+  --buttonCounter-danger-fgColor-disabled: #e5534b80;
 --focus-outlineColor: #316dca;
 --menu-bgColor-active: #2d333b;
 --overlay-bgColor: #2d333b;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #3b8640;
   --button-primary-bgColor-active: #428f46;
   --button-primary-bgColor-disabled: #50a254;
-    --button-primary-borderColor-rest: #444c56cc;
-    --button-primary-borderColor-hover: #444c56cc;
-    --button-primary-borderColor-disabled: #444c56cc;
+    --button-primary-borderColor-rest: #cdd9e51a;
+    --button-primary-borderColor-hover: #cdd9e51a;
+    --button-primary-borderColor-disabled: #cdd9e51a;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #3b7cdb;
+    --button-invisible-fgColor-hover: #539bf5;
   --button-invisible-fgColor-disabled: #545d68;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #909dab1f;
@@ -518,8 +526,8 @@
   --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-outline-fgColor-rest: #3b7cdb;
-    --button-outline-fgColor-hover: #3b7cdb;
+    --button-outline-fgColor-rest: #4184e4;
+    --button-outline-fgColor-hover: #539bf5;
   --button-outline-fgColor-active: #cdd9e5;
   --button-outline-fgColor-disabled: #3b7cdb80;
   --button-outline-bgColor-rest: #cdd9e5;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #c33d38;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #444c56;
-    --buttonCounter-primary-bgColor-rest: #cdd9e533;
-    --buttonCounter-outline-bgColor-rest: #316dca1a;
-    --buttonCounter-outline-bgColor-hover: #cdd9e533;
+    --buttonCounter-primary-bgColor-rest: #11341733;
+    --buttonCounter-outline-bgColor-rest: #0f2d5c33;
+    --buttonCounter-outline-bgColor-hover: #0f2d5c33;
   --buttonCounter-outline-bgColor-disabled: #316dca0d;
+    --buttonCounter-outline-fgColor-rest: #4184e4;
+    --buttonCounter-outline-fgColor-hover: #539bf5;
+    --buttonCounter-outline-fgColor-disabled: #3b7cdb80;
   --buttonCounter-danger-bgColor-hover: #cdd9e533;
   --buttonCounter-danger-bgColor-disabled: #c93c370d;
-    --buttonCounter-danger-bgColor-rest: #c93c371a;
+    --buttonCounter-danger-bgColor-rest: #5d0f1233;
+    --buttonCounter-danger-fgColor-rest: #e5534b;
+    --buttonCounter-danger-fgColor-hover: #cdd9e5;
+    --buttonCounter-danger-fgColor-disabled: #e5534b80;
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-05-09 00:17:00.249888150 +0000
@@ -121,6 +121,7 @@
 --button-primary-borderColor-disabled: #4ae16866;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #409eff;
+  --button-invisible-fgColor-hover: #71b7ff;
 --button-invisible-fgColor-disabled: #7a828e;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #272b33;
@@ -129,7 +130,7 @@
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #7a828e;
 --button-outline-fgColor-rest: #409eff;
-  --button-outline-fgColor-hover: #409eff;
+  --button-outline-fgColor-hover: #71b7ff;
 --button-outline-fgColor-active: #ffffff;
 --button-outline-fgColor-disabled: #409eff80;
 --button-outline-bgColor-rest: #ffffff;
@@ -155,12 +156,18 @@
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #525964;
 --buttonCounter-primary-bgColor-rest: #01040926;
-  --buttonCounter-outline-bgColor-rest: #409eff1a;
-  --buttonCounter-outline-bgColor-hover: #ffffff33;
+  --buttonCounter-outline-bgColor-rest: #194fb133;
+  --buttonCounter-outline-bgColor-hover: #194fb133;
 --buttonCounter-outline-bgColor-disabled: #409eff0d;
+  --buttonCounter-outline-fgColor-rest: #409eff;
+  --buttonCounter-outline-fgColor-hover: #71b7ff;
+  --buttonCounter-outline-fgColor-disabled: #409eff80;
 --buttonCounter-danger-bgColor-hover: #01040926;
 --buttonCounter-danger-bgColor-disabled: #ff6a690d;
 --buttonCounter-danger-bgColor-rest: #01040926;
+  --buttonCounter-danger-fgColor-rest: #ff6a69;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #ff6a6980;
 --focus-outlineColor: #409eff;
 --menu-bgColor-active: #272b33;
 --overlay-bgColor: #272b33;
@@ -511,6 +518,7 @@
   --button-primary-borderColor-disabled: #4ae16866;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #409eff;
+    --button-invisible-fgColor-hover: #71b7ff;
   --button-invisible-fgColor-disabled: #7a828e;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #272b33;
@@ -519,7 +527,7 @@
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #7a828e;
   --button-outline-fgColor-rest: #409eff;
-    --button-outline-fgColor-hover: #409eff;
+    --button-outline-fgColor-hover: #71b7ff;
   --button-outline-fgColor-active: #ffffff;
   --button-outline-fgColor-disabled: #409eff80;
   --button-outline-bgColor-rest: #ffffff;
@@ -545,12 +553,18 @@
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #525964;
   --buttonCounter-primary-bgColor-rest: #01040926;
-    --buttonCounter-outline-bgColor-rest: #409eff1a;
-    --buttonCounter-outline-bgColor-hover: #ffffff33;
+    --buttonCounter-outline-bgColor-rest: #194fb133;
+    --buttonCounter-outline-bgColor-hover: #194fb133;
   --buttonCounter-outline-bgColor-disabled: #409eff0d;
+    --buttonCounter-outline-fgColor-rest: #409eff;
+    --buttonCounter-outline-fgColor-hover: #71b7ff;
+    --buttonCounter-outline-fgColor-disabled: #409eff80;
   --buttonCounter-danger-bgColor-hover: #01040926;
   --buttonCounter-danger-bgColor-disabled: #ff6a690d;
   --buttonCounter-danger-bgColor-rest: #01040926;
+    --buttonCounter-danger-fgColor-rest: #ff6a69;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #ff6a6980;
   --focus-outlineColor: #409eff;
   --menu-bgColor-active: #272b33;
   --overlay-bgColor: #272b33;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-05-09 00:16:59.205839663 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #2a7aef;
 --button-primary-bgColor-active: #3685f3;
 --button-primary-bgColor-disabled: #5fabfe;
-  --button-primary-borderColor-rest: #30363dcc;
-  --button-primary-borderColor-hover: #30363dcc;
-  --button-primary-borderColor-disabled: #30363dcc;
+  --button-primary-borderColor-rest: #f0f6fc1a;
+  --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-disabled: #f0f6fc1a;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
+  --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #484f58;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #b1bac41f;
@@ -128,8 +129,8 @@
 --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-outline-fgColor-rest: #2f81f7;
-  --button-outline-fgColor-hover: #2f81f7;
+  --button-outline-fgColor-rest: #388bfd;
+  --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
 --button-outline-fgColor-disabled: #2f81f780;
 --button-outline-bgColor-rest: #f0f6fc;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #d03533;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
-  --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-  --buttonCounter-outline-bgColor-hover: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #04260f33;
+  --buttonCounter-outline-bgColor-rest: #051d4d33;
+  --buttonCounter-outline-bgColor-hover: #051d4d33;
 --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+  --buttonCounter-outline-fgColor-rest: #388bfd;
+  --buttonCounter-outline-fgColor-hover: #58a6ff;
+  --buttonCounter-outline-fgColor-disabled: #2f81f780;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #da36330d;
-  --buttonCounter-danger-bgColor-rest: #da36331a;
+  --buttonCounter-danger-bgColor-rest: #49020233;
+  --buttonCounter-danger-fgColor-rest: #f85149;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #f8514980;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-disabled: #5fabfe;
-    --button-primary-borderColor-rest: #30363dcc;
-    --button-primary-borderColor-hover: #30363dcc;
-    --button-primary-borderColor-disabled: #30363dcc;
+    --button-primary-borderColor-rest: #f0f6fc1a;
+    --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-disabled: #f0f6fc1a;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
+    --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #484f58;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #b1bac41f;
@@ -518,8 +526,8 @@
   --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-outline-fgColor-rest: #2f81f7;
-    --button-outline-fgColor-hover: #2f81f7;
+    --button-outline-fgColor-rest: #388bfd;
+    --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
   --button-outline-fgColor-disabled: #2f81f780;
   --button-outline-bgColor-rest: #f0f6fc;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #d03533;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
-    --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-    --buttonCounter-outline-bgColor-hover: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #04260f33;
+    --buttonCounter-outline-bgColor-rest: #051d4d33;
+    --buttonCounter-outline-bgColor-hover: #051d4d33;
   --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+    --buttonCounter-outline-fgColor-rest: #388bfd;
+    --buttonCounter-outline-fgColor-hover: #58a6ff;
+    --buttonCounter-outline-fgColor-disabled: #2f81f780;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #da36330d;
-    --buttonCounter-danger-bgColor-rest: #da36331a;
+    --buttonCounter-danger-bgColor-rest: #49020233;
+    --buttonCounter-danger-fgColor-rest: #f85149;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #f8514980;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-05-09 00:16:58.129789689 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #29903b;
 --button-primary-bgColor-active: #2e9a40;
 --button-primary-bgColor-disabled: #46bf57;
-  --button-primary-borderColor-rest: #30363dcc;
-  --button-primary-borderColor-hover: #30363dcc;
-  --button-primary-borderColor-disabled: #30363dcc;
+  --button-primary-borderColor-rest: #f0f6fc1a;
+  --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-disabled: #f0f6fc1a;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
+  --button-invisible-fgColor-hover: #58a6ff;
 --button-invisible-fgColor-disabled: #484f58;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #b1bac41f;
@@ -128,8 +129,8 @@
 --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-outline-fgColor-rest: #2f81f7;
-  --button-outline-fgColor-hover: #2f81f7;
+  --button-outline-fgColor-rest: #388bfd;
+  --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
 --button-outline-fgColor-disabled: #2f81f780;
 --button-outline-bgColor-rest: #f0f6fc;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #d03533;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
-  --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-  --buttonCounter-outline-bgColor-hover: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #04260f33;
+  --buttonCounter-outline-bgColor-rest: #051d4d33;
+  --buttonCounter-outline-bgColor-hover: #051d4d33;
 --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+  --buttonCounter-outline-fgColor-rest: #388bfd;
+  --buttonCounter-outline-fgColor-hover: #58a6ff;
+  --buttonCounter-outline-fgColor-disabled: #2f81f780;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #da36330d;
-  --buttonCounter-danger-bgColor-rest: #da36331a;
+  --buttonCounter-danger-bgColor-rest: #49020233;
+  --buttonCounter-danger-fgColor-rest: #f85149;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #f8514980;
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #29903b;
   --button-primary-bgColor-active: #2e9a40;
   --button-primary-bgColor-disabled: #46bf57;
-    --button-primary-borderColor-rest: #30363dcc;
-    --button-primary-borderColor-hover: #30363dcc;
-    --button-primary-borderColor-disabled: #30363dcc;
+    --button-primary-borderColor-rest: #f0f6fc1a;
+    --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-disabled: #f0f6fc1a;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
+    --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #484f58;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #b1bac41f;
@@ -518,8 +526,8 @@
   --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-outline-fgColor-rest: #2f81f7;
-    --button-outline-fgColor-hover: #2f81f7;
+    --button-outline-fgColor-rest: #388bfd;
+    --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
   --button-outline-fgColor-disabled: #2f81f780;
   --button-outline-bgColor-rest: #f0f6fc;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #d03533;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
-    --buttonCounter-outline-bgColor-rest: #1f6feb1a;
-    --buttonCounter-outline-bgColor-hover: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #04260f33;
+    --buttonCounter-outline-bgColor-rest: #051d4d33;
+    --buttonCounter-outline-bgColor-hover: #051d4d33;
   --buttonCounter-outline-bgColor-disabled: #1f6feb0d;
+    --buttonCounter-outline-fgColor-rest: #388bfd;
+    --buttonCounter-outline-fgColor-hover: #58a6ff;
+    --buttonCounter-outline-fgColor-disabled: #2f81f780;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #da36330d;
-    --buttonCounter-danger-bgColor-rest: #da36331a;
+    --buttonCounter-danger-bgColor-rest: #49020233;
+    --buttonCounter-danger-fgColor-rest: #f85149;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #f8514980;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-05-09 00:16:56.753725783 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #0d6bd8;
 --button-primary-bgColor-active: #0b64ce;
 --button-primary-bgColor-disabled: #92caff;
-  --button-primary-borderColor-rest: #d0d7decc;
-  --button-primary-borderColor-hover: #d0d7decc;
-  --button-primary-borderColor-disabled: #d0d7decc;
+  --button-primary-borderColor-rest: #1f232826;
+  --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-disabled: #1f232826;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
 --button-invisible-fgColor-rest: #0969da;
+  --button-invisible-fgColor-hover: #0969da;
 --button-invisible-fgColor-disabled: #8c959f;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #d0d7de33;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #d0d7de;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
 --buttonCounter-default-bgColor-rest: #eaeef280;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #002d1133;
 --buttonCounter-outline-bgColor-rest: #0969da1a;
 --buttonCounter-outline-bgColor-hover: #ffffff33;
 --buttonCounter-outline-bgColor-disabled: #0969da0d;
+  --buttonCounter-outline-fgColor-rest: #0550ae;
+  --buttonCounter-outline-fgColor-hover: #ffffff;
+  --buttonCounter-outline-fgColor-disabled: #0969da80;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #bc4c000d;
 --buttonCounter-danger-bgColor-rest: #bc4c001a;
+  --buttonCounter-danger-fgColor-rest: #c21c2c;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #be4e0280;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #0d6bd8;
   --button-primary-bgColor-active: #0b64ce;
   --button-primary-bgColor-disabled: #92caff;
-    --button-primary-borderColor-rest: #d0d7decc;
-    --button-primary-borderColor-hover: #d0d7decc;
-    --button-primary-borderColor-disabled: #d0d7decc;
+    --button-primary-borderColor-rest: #1f232826;
+    --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-disabled: #1f232826;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
   --button-invisible-fgColor-rest: #0969da;
+    --button-invisible-fgColor-hover: #0969da;
   --button-invisible-fgColor-disabled: #8c959f;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #d0d7de33;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #d0d7de;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
   --buttonCounter-default-bgColor-rest: #eaeef280;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #002d1133;
   --buttonCounter-outline-bgColor-rest: #0969da1a;
   --buttonCounter-outline-bgColor-hover: #ffffff33;
   --buttonCounter-outline-bgColor-disabled: #0969da0d;
+    --buttonCounter-outline-fgColor-rest: #0550ae;
+    --buttonCounter-outline-fgColor-hover: #ffffff;
+    --buttonCounter-outline-fgColor-disabled: #0969da80;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #bc4c000d;
   --buttonCounter-danger-bgColor-rest: #bc4c001a;
+    --buttonCounter-danger-fgColor-rest: #c21c2c;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #be4e0280;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-05-09 00:16:57.421756807 +0000
@@ -118,9 +118,10 @@
 --button-primary-bgColor-disabled: #85cb97;
 --button-primary-borderColor-rest: #013d14;
 --button-primary-borderColor-hover: #013d14;
-  --button-primary-borderColor-disabled: #88929dcc;
+  --button-primary-borderColor-disabled: #013d14;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
 --button-invisible-fgColor-rest: #023b95;
+  --button-invisible-fgColor-hover: #023b95;
 --button-invisible-fgColor-disabled: #88929d;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #e7ecf0;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #20252c;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
 --buttonCounter-default-bgColor-rest: #e7ecf0;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #00230b33;
 --buttonCounter-outline-bgColor-rest: #0349b41a;
 --buttonCounter-outline-bgColor-hover: #ffffff33;
 --buttonCounter-outline-bgColor-disabled: #0349b40d;
+  --buttonCounter-outline-fgColor-rest: #023b95;
+  --buttonCounter-outline-fgColor-hover: #ffffff;
+  --buttonCounter-outline-fgColor-disabled: #023b9580;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #a0111f0d;
 --buttonCounter-danger-bgColor-rest: #a0111f1a;
+  --buttonCounter-danger-fgColor-rest: #980e1e;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #8a071e80;
 --focus-outlineColor: #0349b4;
 --focus-outline: #0349b4 solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -508,9 +515,10 @@
   --button-primary-bgColor-disabled: #85cb97;
   --button-primary-borderColor-rest: #013d14;
   --button-primary-borderColor-hover: #013d14;
-    --button-primary-borderColor-disabled: #88929dcc;
+    --button-primary-borderColor-disabled: #013d14;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
   --button-invisible-fgColor-rest: #023b95;
+    --button-invisible-fgColor-hover: #023b95;
   --button-invisible-fgColor-disabled: #88929d;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #e7ecf0;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #20252c;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
   --buttonCounter-default-bgColor-rest: #e7ecf0;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #00230b33;
   --buttonCounter-outline-bgColor-rest: #0349b41a;
   --buttonCounter-outline-bgColor-hover: #ffffff33;
   --buttonCounter-outline-bgColor-disabled: #0349b40d;
+    --buttonCounter-outline-fgColor-rest: #023b95;
+    --buttonCounter-outline-fgColor-hover: #ffffff;
+    --buttonCounter-outline-fgColor-disabled: #023b9580;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #a0111f0d;
   --buttonCounter-danger-bgColor-rest: #a0111f1a;
+    --buttonCounter-danger-fgColor-rest: #980e1e;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #8a071e80;
   --focus-outlineColor: #0349b4;
   --focus-outline: #0349b4 solid 2px;
   --menu-bgColor-active: #ffffff00;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-05-09 00:16:55.669675438 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #0d6bd8;
 --button-primary-bgColor-active: #0b64ce;
 --button-primary-bgColor-disabled: #92caff;
-  --button-primary-borderColor-rest: #d0d7decc;
-  --button-primary-borderColor-hover: #d0d7decc;
-  --button-primary-borderColor-disabled: #d0d7decc;
+  --button-primary-borderColor-rest: #1f232826;
+  --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-disabled: #1f232826;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
 --button-invisible-fgColor-rest: #0969da;
+  --button-invisible-fgColor-hover: #0969da;
 --button-invisible-fgColor-disabled: #8c959f;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #d0d7de33;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #d0d7de;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
 --buttonCounter-default-bgColor-rest: #eaeef280;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #002d1133;
 --buttonCounter-outline-bgColor-rest: #0969da1a;
 --buttonCounter-outline-bgColor-hover: #ffffff33;
 --buttonCounter-outline-bgColor-disabled: #0969da0d;
+  --buttonCounter-outline-fgColor-rest: #0550ae;
+  --buttonCounter-outline-fgColor-hover: #ffffff;
+  --buttonCounter-outline-fgColor-disabled: #0969da80;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #cf222e0d;
 --buttonCounter-danger-bgColor-rest: #cf222e1a;
+  --buttonCounter-danger-fgColor-rest: #c21c2c;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #d1242f80;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #0d6bd8;
   --button-primary-bgColor-active: #0b64ce;
   --button-primary-bgColor-disabled: #92caff;
-    --button-primary-borderColor-rest: #d0d7decc;
-    --button-primary-borderColor-hover: #d0d7decc;
-    --button-primary-borderColor-disabled: #d0d7decc;
+    --button-primary-borderColor-rest: #1f232826;
+    --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-disabled: #1f232826;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
   --button-invisible-fgColor-rest: #0969da;
+    --button-invisible-fgColor-hover: #0969da;
   --button-invisible-fgColor-disabled: #8c959f;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #d0d7de33;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #d0d7de;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
   --buttonCounter-default-bgColor-rest: #eaeef280;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #002d1133;
   --buttonCounter-outline-bgColor-rest: #0969da1a;
   --buttonCounter-outline-bgColor-hover: #ffffff33;
   --buttonCounter-outline-bgColor-disabled: #0969da0d;
+    --buttonCounter-outline-fgColor-rest: #0550ae;
+    --buttonCounter-outline-fgColor-hover: #ffffff;
+    --buttonCounter-outline-fgColor-disabled: #0969da80;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #cf222e0d;
   --buttonCounter-danger-bgColor-rest: #cf222e1a;
+    --buttonCounter-danger-fgColor-rest: #c21c2c;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #d1242f80;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-05-09 00:16:53.837590796 +0000
@@ -116,11 +116,12 @@
 --button-primary-bgColor-hover: #1c8139;
 --button-primary-bgColor-active: #197935;
 --button-primary-bgColor-disabled: #95d8a6;
-  --button-primary-borderColor-rest: #d0d7decc;
-  --button-primary-borderColor-hover: #d0d7decc;
-  --button-primary-borderColor-disabled: #d0d7decc;
+  --button-primary-borderColor-rest: #1f232826;
+  --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-disabled: #1f232826;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
 --button-invisible-fgColor-rest: #0969da;
+  --button-invisible-fgColor-hover: #0969da;
 --button-invisible-fgColor-disabled: #8c959f;
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #d0d7de33;
@@ -154,13 +155,19 @@
 --button-danger-borderColor-active: #d0d7de;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
 --buttonCounter-default-bgColor-rest: #eaeef280;
-  --buttonCounter-primary-bgColor-rest: #ffffff33;
+  --buttonCounter-primary-bgColor-rest: #002d1133;
 --buttonCounter-outline-bgColor-rest: #0969da1a;
 --buttonCounter-outline-bgColor-hover: #ffffff33;
 --buttonCounter-outline-bgColor-disabled: #0969da0d;
+  --buttonCounter-outline-fgColor-rest: #0550ae;
+  --buttonCounter-outline-fgColor-hover: #ffffff;
+  --buttonCounter-outline-fgColor-disabled: #0969da80;
 --buttonCounter-danger-bgColor-hover: #ffffff33;
 --buttonCounter-danger-bgColor-disabled: #cf222e0d;
 --buttonCounter-danger-bgColor-rest: #cf222e1a;
+  --buttonCounter-danger-fgColor-rest: #c21c2c;
+  --buttonCounter-danger-fgColor-hover: #ffffff;
+  --buttonCounter-danger-fgColor-disabled: #d1242f80;
 --focus-outlineColor: #0969da;
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
@@ -506,11 +513,12 @@
   --button-primary-bgColor-hover: #1c8139;
   --button-primary-bgColor-active: #197935;
   --button-primary-bgColor-disabled: #95d8a6;
-    --button-primary-borderColor-rest: #d0d7decc;
-    --button-primary-borderColor-hover: #d0d7decc;
-    --button-primary-borderColor-disabled: #d0d7decc;
+    --button-primary-borderColor-rest: #1f232826;
+    --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-disabled: #1f232826;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
   --button-invisible-fgColor-rest: #0969da;
+    --button-invisible-fgColor-hover: #0969da;
   --button-invisible-fgColor-disabled: #8c959f;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #d0d7de33;
@@ -544,13 +552,19 @@
   --button-danger-borderColor-active: #d0d7de;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
   --buttonCounter-default-bgColor-rest: #eaeef280;
-    --buttonCounter-primary-bgColor-rest: #ffffff33;
+    --buttonCounter-primary-bgColor-rest: #002d1133;
   --buttonCounter-outline-bgColor-rest: #0969da1a;
   --buttonCounter-outline-bgColor-hover: #ffffff33;
   --buttonCounter-outline-bgColor-disabled: #0969da0d;
+    --buttonCounter-outline-fgColor-rest: #0550ae;
+    --buttonCounter-outline-fgColor-hover: #ffffff;
+    --buttonCounter-outline-fgColor-disabled: #0969da80;
   --buttonCounter-danger-bgColor-hover: #ffffff33;
   --buttonCounter-danger-bgColor-disabled: #cf222e0d;
   --buttonCounter-danger-bgColor-rest: #cf222e1a;
+    --buttonCounter-danger-fgColor-rest: #c21c2c;
+    --buttonCounter-danger-fgColor-hover: #ffffff;
+    --buttonCounter-danger-fgColor-disabled: #d1242f80;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;

@langermank langermank temporarily deployed to github-pages May 3, 2023 19:12 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview May 3, 2023 19:12 Inactive
@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023 •
edited
Loading

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

@langermank langermank temporarily deployed to github-pages May 3, 2023 19:56 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview May 3, 2023 19:56 Inactive
@langermank langermank marked this pull request as ready for review May 3, 2023 20:56
@langermank langermank requested a review from a team as a code owner May 3, 2023 20:56
@langermank langermank requested review from a team, jonrohan and mperrotti May 3, 2023 20:56
jonrohan
jonrohan approved these changes May 3, 2023
View reviewed changes
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Nice updates

@langermank langermank temporarily deployed to github-pages May 3, 2023 21:00 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview May 3, 2023 21:01 Inactive
@lukasoppermann
Copy link
Contributor

@langermank I believe there is an issue with the outline of the primary button. It should be dark, not light.

jonrohan
jonrohan approved these changes May 5, 2023
View reviewed changes
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Looks good 👍🏻

@github-actions github-actions bot temporarily deployed to storybook-preview May 9, 2023 00:22 Inactive
@langermank langermank merged commit 8c77bbb into main May 9, 2023
@langermank langermank deleted the button-state-colors-a11y branch May 9, 2023 00:23
@primer-css primer-css mentioned this pull request May 9, 2023
Merged
langermank added a commit that referenced this pull request Jun 1, 2023
@langermank
Improve contrast for Buttons with counters (#641)
002617c 
* button counters

* hover states

* add to old tokens

* use scale colors

* test disabled state

* Create weak-wasps-drop.md

* fix button border colors
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jonrohan jonrohan jonrohan approved these changes

@mperrotti mperrotti Awaiting requested review from mperrotti

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@langermank @lukasoppermann @jonrohan