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

Adjust borders/shadows for Button component #733

Merged
merged 6 commits into from
Sep 19, 2023
Merged

Adjust borders/shadows for Button component #733

merged 6 commits into from
Sep 19, 2023

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Sep 18, 2023 •
edited
Loading

  • Remove the default button inset shadow (its basically invisible)
  • Switch danger button to use the same border strategy as primary for hover/active

@changeset-bot
Copy link

changeset-bot bot commented Sep 18, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 1b83c29

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 Sep 18, 2023 •
edited
Loading

Variables changed 
No variables changed

@github-actions
Copy link
Contributor

github-actions bot commented Sep 18, 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-09-19 14:32:43.013508048 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #30363d;
 --button-default-borderColor-disabled: #161b22;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-default-shadow-inset: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffff80;
 --button-primary-iconColor-rest: #ffffff;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #1158c7;
 --button-primary-borderColor-rest: #f0f6fc1a;
 --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-active: #f0f6fc1a;
 --button-primary-borderColor-disabled: #1158c7;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #30363d;
 --button-outline-bgColor-active: #0d419d;
 --button-outline-bgColor-disabled: #0d1117;
-  --button-outline-borderColor-hover: #30363d66;
-  --button-outline-borderColor-selected: #30363d66;
+  --button-outline-borderColor-hover: #f0f6fc1a;
+  --button-outline-borderColor-selected: #f0f6fc1a;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
 --button-danger-fgColor-rest: #db6d28;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #b5531d;
 --button-danger-bgColor-disabled: #161b22;
 --button-danger-borderColor-rest: #30363d;
-  --button-danger-borderColor-hover: #9b4215;
-  --button-danger-borderColor-active: #b5531d;
+  --button-danger-borderColor-hover: #f0f6fc1a;
+  --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #30363d;
   --button-default-borderColor-disabled: #161b22;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-default-shadow-inset: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffff80;
   --button-primary-iconColor-rest: #ffffff;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #1158c7;
   --button-primary-borderColor-rest: #f0f6fc1a;
   --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-active: #f0f6fc1a;
   --button-primary-borderColor-disabled: #1158c7;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #30363d;
   --button-outline-bgColor-active: #0d419d;
   --button-outline-bgColor-disabled: #0d1117;
-    --button-outline-borderColor-hover: #30363d66;
-    --button-outline-borderColor-selected: #30363d66;
+    --button-outline-borderColor-hover: #f0f6fc1a;
+    --button-outline-borderColor-selected: #f0f6fc1a;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
   --button-danger-fgColor-rest: #db6d28;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #b5531d;
   --button-danger-bgColor-disabled: #161b22;
   --button-danger-borderColor-rest: #30363d;
-    --button-danger-borderColor-hover: #9b4215;
-    --button-danger-borderColor-active: #b5531d;
+    --button-danger-borderColor-hover: #f0f6fc1a;
+    --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-09-19 14:32:42.125507982 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #444c56;
 --button-default-borderColor-disabled: #2d333b;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-default-shadow-inset: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #cdd9e5;
 --button-primary-fgColor-disabled: #cdd9e580;
 --button-primary-iconColor-rest: #cdd9e5;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #50a254;
 --button-primary-borderColor-rest: #cdd9e51a;
 --button-primary-borderColor-hover: #cdd9e51a;
+  --button-primary-borderColor-active: #cdd9e51a;
 --button-primary-borderColor-disabled: #50a254;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #3b7cdb;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #444c56;
 --button-outline-bgColor-active: #1b4b91;
 --button-outline-bgColor-disabled: #22272e;
-  --button-outline-borderColor-hover: #444c5666;
-  --button-outline-borderColor-selected: #444c5666;
+  --button-outline-borderColor-hover: #cdd9e51a;
+  --button-outline-borderColor-selected: #cdd9e51a;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
 --button-danger-fgColor-rest: #e5534b;
 --button-danger-fgColor-hover: #cdd9e5;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #c33d38;
 --button-danger-bgColor-disabled: #2d333b;
 --button-danger-borderColor-rest: #444c56;
-  --button-danger-borderColor-hover: #ad2e2c;
-  --button-danger-borderColor-active: #c33d38;
+  --button-danger-borderColor-hover: #cdd9e51a;
+  --button-danger-borderColor-active: #cdd9e51a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #444c56;
 --buttonCounter-invisible-bgColor-rest: #444c56;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #444c56;
   --button-default-borderColor-disabled: #2d333b;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-default-shadow-inset: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #cdd9e5;
   --button-primary-fgColor-disabled: #cdd9e580;
   --button-primary-iconColor-rest: #cdd9e5;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #50a254;
   --button-primary-borderColor-rest: #cdd9e51a;
   --button-primary-borderColor-hover: #cdd9e51a;
+    --button-primary-borderColor-active: #cdd9e51a;
   --button-primary-borderColor-disabled: #50a254;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #3b7cdb;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #444c56;
   --button-outline-bgColor-active: #1b4b91;
   --button-outline-bgColor-disabled: #22272e;
-    --button-outline-borderColor-hover: #444c5666;
-    --button-outline-borderColor-selected: #444c5666;
+    --button-outline-borderColor-hover: #cdd9e51a;
+    --button-outline-borderColor-selected: #cdd9e51a;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
   --button-danger-fgColor-rest: #e5534b;
   --button-danger-fgColor-hover: #cdd9e5;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #c33d38;
   --button-danger-bgColor-disabled: #2d333b;
   --button-danger-borderColor-rest: #444c56;
-    --button-danger-borderColor-hover: #ad2e2c;
-    --button-danger-borderColor-active: #c33d38;
+    --button-danger-borderColor-hover: #cdd9e51a;
+    --button-danger-borderColor-active: #cdd9e51a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #444c56;
   --buttonCounter-invisible-bgColor-rest: #444c56;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-09-19 14:32:43.461508082 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #7a828e;
 --button-default-borderColor-disabled: #272b33;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-default-shadow-inset: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #0a0c10;
 --button-primary-fgColor-disabled: #0a0c1080;
 --button-primary-iconColor-rest: #0a0c10;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #6bdc84;
 --button-primary-borderColor-rest: #4ae168;
 --button-primary-borderColor-hover: #4ae168;
+  --button-primary-borderColor-active: #4ae168;
 --button-primary-borderColor-disabled: #4ae16866;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #409eff;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #525964;
 --button-outline-bgColor-active: #2672f3;
 --button-outline-bgColor-disabled: #0a0c10;
-  --button-outline-borderColor-hover: #7a828e;
-  --button-outline-borderColor-selected: #7a828e;
+  --button-outline-borderColor-hover: #ffffff1a;
+  --button-outline-borderColor-selected: #ffffff1a;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
 --button-danger-fgColor-rest: #ff6a69;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #ff5353;
 --button-danger-bgColor-disabled: #272b33;
 --button-danger-borderColor-rest: #7a828e;
-  --button-danger-borderColor-hover: #ff4445;
-  --button-danger-borderColor-active: #ff5353;
+  --button-danger-borderColor-hover: #ffffff1a;
+  --button-danger-borderColor-active: #ffffff1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #525964;
 --buttonCounter-invisible-bgColor-rest: #525964;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #7a828e;
   --button-default-borderColor-disabled: #272b33;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-default-shadow-inset: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #0a0c10;
   --button-primary-fgColor-disabled: #0a0c1080;
   --button-primary-iconColor-rest: #0a0c10;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #6bdc84;
   --button-primary-borderColor-rest: #4ae168;
   --button-primary-borderColor-hover: #4ae168;
+    --button-primary-borderColor-active: #4ae168;
   --button-primary-borderColor-disabled: #4ae16866;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #409eff;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #525964;
   --button-outline-bgColor-active: #2672f3;
   --button-outline-bgColor-disabled: #0a0c10;
-    --button-outline-borderColor-hover: #7a828e;
-    --button-outline-borderColor-selected: #7a828e;
+    --button-outline-borderColor-hover: #ffffff1a;
+    --button-outline-borderColor-selected: #ffffff1a;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
   --button-danger-fgColor-rest: #ff6a69;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #ff5353;
   --button-danger-bgColor-disabled: #272b33;
   --button-danger-borderColor-rest: #7a828e;
-    --button-danger-borderColor-hover: #ff4445;
-    --button-danger-borderColor-active: #ff5353;
+    --button-danger-borderColor-hover: #ffffff1a;
+    --button-danger-borderColor-active: #ffffff1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #525964;
   --buttonCounter-invisible-bgColor-rest: #525964;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-09-19 14:32:42.561508015 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #30363d;
 --button-default-borderColor-disabled: #161b22;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-default-shadow-inset: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffff80;
 --button-primary-iconColor-rest: #ffffff;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #5fabfe;
 --button-primary-borderColor-rest: #f0f6fc1a;
 --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-active: #f0f6fc1a;
 --button-primary-borderColor-disabled: #5fabfe;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #30363d;
 --button-outline-bgColor-active: #0d419d;
 --button-outline-bgColor-disabled: #0d1117;
-  --button-outline-borderColor-hover: #30363d66;
-  --button-outline-borderColor-selected: #30363d66;
+  --button-outline-borderColor-hover: #f0f6fc1a;
+  --button-outline-borderColor-selected: #f0f6fc1a;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
 --button-danger-fgColor-rest: #f85149;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #d03533;
 --button-danger-bgColor-disabled: #161b22;
 --button-danger-borderColor-rest: #30363d;
-  --button-danger-borderColor-hover: #b62324;
-  --button-danger-borderColor-active: #d03533;
+  --button-danger-borderColor-hover: #f0f6fc1a;
+  --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #30363d;
   --button-default-borderColor-disabled: #161b22;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-default-shadow-inset: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffff80;
   --button-primary-iconColor-rest: #ffffff;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #5fabfe;
   --button-primary-borderColor-rest: #f0f6fc1a;
   --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-active: #f0f6fc1a;
   --button-primary-borderColor-disabled: #5fabfe;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #30363d;
   --button-outline-bgColor-active: #0d419d;
   --button-outline-bgColor-disabled: #0d1117;
-    --button-outline-borderColor-hover: #30363d66;
-    --button-outline-borderColor-selected: #30363d66;
+    --button-outline-borderColor-hover: #f0f6fc1a;
+    --button-outline-borderColor-selected: #f0f6fc1a;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
   --button-danger-fgColor-rest: #f85149;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #d03533;
   --button-danger-bgColor-disabled: #161b22;
   --button-danger-borderColor-rest: #30363d;
-    --button-danger-borderColor-hover: #b62324;
-    --button-danger-borderColor-active: #d03533;
+    --button-danger-borderColor-hover: #f0f6fc1a;
+    --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-09-19 14:32:41.525499922 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #30363d;
 --button-default-borderColor-disabled: #161b22;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-default-shadow-inset: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffff80;
 --button-primary-iconColor-rest: #ffffff;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #46bf57;
 --button-primary-borderColor-rest: #f0f6fc1a;
 --button-primary-borderColor-hover: #f0f6fc1a;
+  --button-primary-borderColor-active: #f0f6fc1a;
 --button-primary-borderColor-disabled: #46bf57;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #2f81f7;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #30363d;
 --button-outline-bgColor-active: #0d419d;
 --button-outline-bgColor-disabled: #0d1117;
-  --button-outline-borderColor-hover: #30363d66;
-  --button-outline-borderColor-selected: #30363d66;
+  --button-outline-borderColor-hover: #f0f6fc1a;
+  --button-outline-borderColor-selected: #f0f6fc1a;
 --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
 --button-danger-fgColor-rest: #f85149;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #d03533;
 --button-danger-bgColor-disabled: #161b22;
 --button-danger-borderColor-rest: #30363d;
-  --button-danger-borderColor-hover: #b62324;
-  --button-danger-borderColor-active: #d03533;
+  --button-danger-borderColor-hover: #f0f6fc1a;
+  --button-danger-borderColor-active: #f0f6fc1a;
 --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
 --buttonCounter-default-bgColor-rest: #30363d;
 --buttonCounter-invisible-bgColor-rest: #30363d;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #30363d;
   --button-default-borderColor-disabled: #161b22;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-default-shadow-inset: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffff80;
   --button-primary-iconColor-rest: #ffffff;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #46bf57;
   --button-primary-borderColor-rest: #f0f6fc1a;
   --button-primary-borderColor-hover: #f0f6fc1a;
+    --button-primary-borderColor-active: #f0f6fc1a;
   --button-primary-borderColor-disabled: #46bf57;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #2f81f7;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #30363d;
   --button-outline-bgColor-active: #0d419d;
   --button-outline-bgColor-disabled: #0d1117;
-    --button-outline-borderColor-hover: #30363d66;
-    --button-outline-borderColor-selected: #30363d66;
+    --button-outline-borderColor-hover: #f0f6fc1a;
+    --button-outline-borderColor-selected: #f0f6fc1a;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
   --button-danger-fgColor-rest: #f85149;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #d03533;
   --button-danger-bgColor-disabled: #161b22;
   --button-danger-borderColor-rest: #30363d;
-    --button-danger-borderColor-hover: #b62324;
-    --button-danger-borderColor-active: #d03533;
+    --button-danger-borderColor-hover: #f0f6fc1a;
+    --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-09-19 14:32:40.605483257 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #d0d7de;
 --button-default-borderColor-disabled: #f6f8fa;
 --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-  --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffffcc;
 --button-primary-iconColor-rest: #ffffffcc;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #92caff;
 --button-primary-borderColor-rest: #1f232826;
 --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-active: #1f232826;
 --button-primary-borderColor-disabled: #92caff;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
 --button-invisible-fgColor-rest: #0969da;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #0969da;
 --button-outline-bgColor-active: #0757ba;
 --button-outline-bgColor-disabled: #f6f8fa;
-  --button-outline-borderColor-hover: #d0d7de;
-  --button-outline-borderColor-active: #d0d7de;
+  --button-outline-borderColor-hover: #1f232826;
+  --button-outline-borderColor-active: #1f232826;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
 --button-danger-fgColor-rest: #be4e02;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #7e2f00;
 --button-danger-bgColor-disabled: #f6f8fa;
 --button-danger-borderColor-rest: #d0d7de;
-  --button-danger-borderColor-hover: #d0d7de;
-  --button-danger-borderColor-active: #d0d7de;
+  --button-danger-borderColor-hover: #1f232826;
+  --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
 --buttonCounter-default-bgColor-rest: #eaeef2;
 --buttonCounter-invisible-bgColor-rest: #eaeef2;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #d0d7de;
   --button-default-borderColor-disabled: #f6f8fa;
   --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-    --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
   --button-primary-iconColor-rest: #ffffffcc;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #92caff;
   --button-primary-borderColor-rest: #1f232826;
   --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-active: #1f232826;
   --button-primary-borderColor-disabled: #92caff;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
   --button-invisible-fgColor-rest: #0969da;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #0969da;
   --button-outline-bgColor-active: #0757ba;
   --button-outline-bgColor-disabled: #f6f8fa;
-    --button-outline-borderColor-hover: #d0d7de;
-    --button-outline-borderColor-active: #d0d7de;
+    --button-outline-borderColor-hover: #1f232826;
+    --button-outline-borderColor-active: #1f232826;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
   --button-danger-fgColor-rest: #be4e02;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #7e2f00;
   --button-danger-bgColor-disabled: #f6f8fa;
   --button-danger-borderColor-rest: #d0d7de;
-    --button-danger-borderColor-hover: #d0d7de;
-    --button-danger-borderColor-active: #d0d7de;
+    --button-danger-borderColor-hover: #1f232826;
+    --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
   --buttonCounter-default-bgColor-rest: #eaeef2;
   --buttonCounter-invisible-bgColor-rest: #eaeef2;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-09-19 14:32:41.069491662 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #20252c;
 --button-default-borderColor-disabled: #e7ecf0;
 --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
-  --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffffcc;
 --button-primary-iconColor-rest: #ffffffcc;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #85cb97;
 --button-primary-borderColor-rest: #013d14;
 --button-primary-borderColor-hover: #013d14;
+  --button-primary-borderColor-active: #013d14;
 --button-primary-borderColor-disabled: #85cb97;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
 --button-invisible-fgColor-rest: #023b95;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #0349b4;
 --button-outline-bgColor-active: #033f9d;
 --button-outline-bgColor-disabled: #ffffff;
-  --button-outline-borderColor-hover: #20252c;
-  --button-outline-borderColor-active: #20252c;
+  --button-outline-borderColor-hover: #01040926;
+  --button-outline-borderColor-active: #01040926;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
 --button-danger-fgColor-rest: #8a071e;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #74041a;
 --button-danger-bgColor-disabled: #e7ecf0;
 --button-danger-borderColor-rest: #20252c;
-  --button-danger-borderColor-hover: #20252c;
-  --button-danger-borderColor-active: #20252c;
+  --button-danger-borderColor-hover: #01040926;
+  --button-danger-borderColor-active: #01040926;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
 --buttonCounter-default-bgColor-rest: #66707b33;
 --buttonCounter-invisible-bgColor-rest: #66707b33;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #20252c;
   --button-default-borderColor-disabled: #e7ecf0;
   --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
-    --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
   --button-primary-iconColor-rest: #ffffffcc;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #85cb97;
   --button-primary-borderColor-rest: #013d14;
   --button-primary-borderColor-hover: #013d14;
+    --button-primary-borderColor-active: #013d14;
   --button-primary-borderColor-disabled: #85cb97;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
   --button-invisible-fgColor-rest: #023b95;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #0349b4;
   --button-outline-bgColor-active: #033f9d;
   --button-outline-bgColor-disabled: #ffffff;
-    --button-outline-borderColor-hover: #20252c;
-    --button-outline-borderColor-active: #20252c;
+    --button-outline-borderColor-hover: #01040926;
+    --button-outline-borderColor-active: #01040926;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
   --button-danger-fgColor-rest: #8a071e;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #74041a;
   --button-danger-bgColor-disabled: #e7ecf0;
   --button-danger-borderColor-rest: #20252c;
-    --button-danger-borderColor-hover: #20252c;
-    --button-danger-borderColor-active: #20252c;
+    --button-danger-borderColor-hover: #01040926;
+    --button-danger-borderColor-active: #01040926;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
   --buttonCounter-default-bgColor-rest: #66707b33;
   --buttonCounter-invisible-bgColor-rest: #66707b33;

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-09-19 14:32:40.077473693 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #d0d7de;
 --button-default-borderColor-disabled: #f6f8fa;
 --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-  --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffffcc;
 --button-primary-iconColor-rest: #ffffffcc;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #92caff;
 --button-primary-borderColor-rest: #1f232826;
 --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-active: #1f232826;
 --button-primary-borderColor-disabled: #92caff;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
 --button-invisible-fgColor-rest: #0969da;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #0969da;
 --button-outline-bgColor-active: #0757ba;
 --button-outline-bgColor-disabled: #f6f8fa;
-  --button-outline-borderColor-hover: #d0d7de;
-  --button-outline-borderColor-active: #d0d7de;
+  --button-outline-borderColor-hover: #1f232826;
+  --button-outline-borderColor-active: #1f232826;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
 --button-danger-fgColor-rest: #d1242f;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #8b0820;
 --button-danger-bgColor-disabled: #f6f8fa;
 --button-danger-borderColor-rest: #d0d7de;
-  --button-danger-borderColor-hover: #d0d7de;
-  --button-danger-borderColor-active: #d0d7de;
+  --button-danger-borderColor-hover: #1f232826;
+  --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
 --buttonCounter-default-bgColor-rest: #eaeef2;
 --buttonCounter-invisible-bgColor-rest: #eaeef2;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #d0d7de;
   --button-default-borderColor-disabled: #f6f8fa;
   --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-    --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
   --button-primary-iconColor-rest: #ffffffcc;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #92caff;
   --button-primary-borderColor-rest: #1f232826;
   --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-active: #1f232826;
   --button-primary-borderColor-disabled: #92caff;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
   --button-invisible-fgColor-rest: #0969da;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #0969da;
   --button-outline-bgColor-active: #0757ba;
   --button-outline-bgColor-disabled: #f6f8fa;
-    --button-outline-borderColor-hover: #d0d7de;
-    --button-outline-borderColor-active: #d0d7de;
+    --button-outline-borderColor-hover: #1f232826;
+    --button-outline-borderColor-active: #1f232826;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
   --button-danger-fgColor-rest: #d1242f;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #8b0820;
   --button-danger-bgColor-disabled: #f6f8fa;
   --button-danger-borderColor-rest: #d0d7de;
-    --button-danger-borderColor-hover: #d0d7de;
-    --button-danger-borderColor-active: #d0d7de;
+    --button-danger-borderColor-hover: #1f232826;
+    --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
   --buttonCounter-default-bgColor-rest: #eaeef2;
   --buttonCounter-invisible-bgColor-rest: #eaeef2;

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-09-19 14:32:39.401461448 +0000
@@ -110,7 +110,6 @@
 --button-default-borderColor-active: #d0d7de;
 --button-default-borderColor-disabled: #f6f8fa;
 --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-  --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
 --button-primary-fgColor-rest: #ffffff;
 --button-primary-fgColor-disabled: #ffffffcc;
 --button-primary-iconColor-rest: #ffffffcc;
@@ -120,6 +119,7 @@
 --button-primary-bgColor-disabled: #95d8a6;
 --button-primary-borderColor-rest: #1f232826;
 --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-active: #1f232826;
 --button-primary-borderColor-disabled: #95d8a6;
 --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
 --button-invisible-fgColor-rest: #0969da;
@@ -140,8 +140,8 @@
 --button-outline-bgColor-hover: #0969da;
 --button-outline-bgColor-active: #0757ba;
 --button-outline-bgColor-disabled: #f6f8fa;
-  --button-outline-borderColor-hover: #d0d7de;
-  --button-outline-borderColor-active: #d0d7de;
+  --button-outline-borderColor-hover: #1f232826;
+  --button-outline-borderColor-active: #1f232826;
 --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
 --button-danger-fgColor-rest: #d1242f;
 --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
 --button-danger-bgColor-active: #8b0820;
 --button-danger-bgColor-disabled: #f6f8fa;
 --button-danger-borderColor-rest: #d0d7de;
-  --button-danger-borderColor-hover: #d0d7de;
-  --button-danger-borderColor-active: #d0d7de;
+  --button-danger-borderColor-hover: #1f232826;
+  --button-danger-borderColor-active: #1f232826;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
 --buttonCounter-default-bgColor-rest: #eaeef2;
 --buttonCounter-invisible-bgColor-rest: #eaeef2;
@@ -526,7 +526,6 @@
   --button-default-borderColor-active: #d0d7de;
   --button-default-borderColor-disabled: #f6f8fa;
   --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-    --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
   --button-primary-iconColor-rest: #ffffffcc;
@@ -536,6 +535,7 @@
   --button-primary-bgColor-disabled: #95d8a6;
   --button-primary-borderColor-rest: #1f232826;
   --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-active: #1f232826;
   --button-primary-borderColor-disabled: #95d8a6;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
   --button-invisible-fgColor-rest: #0969da;
@@ -556,8 +556,8 @@
   --button-outline-bgColor-hover: #0969da;
   --button-outline-bgColor-active: #0757ba;
   --button-outline-bgColor-disabled: #f6f8fa;
-    --button-outline-borderColor-hover: #d0d7de;
-    --button-outline-borderColor-active: #d0d7de;
+    --button-outline-borderColor-hover: #1f232826;
+    --button-outline-borderColor-active: #1f232826;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
   --button-danger-fgColor-rest: #d1242f;
   --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
   --button-danger-bgColor-active: #8b0820;
   --button-danger-bgColor-disabled: #f6f8fa;
   --button-danger-borderColor-rest: #d0d7de;
-    --button-danger-borderColor-hover: #d0d7de;
-    --button-danger-borderColor-active: #d0d7de;
+    --button-danger-borderColor-hover: #1f232826;
+    --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
   --buttonCounter-default-bgColor-rest: #eaeef2;
   --buttonCounter-invisible-bgColor-rest: #eaeef2;

@langermank langermank temporarily deployed to github-pages September 18, 2023 17:13 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview September 18, 2023 17:14 Inactive
@langermank langermank temporarily deployed to github-pages September 18, 2023 17:17 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview September 18, 2023 17:17 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Sep 18, 2023
@langermank langermank marked this pull request as ready for review September 18, 2023 21:17
@langermank langermank requested a review from a team as a code owner September 18, 2023 21:17
@langermank langermank requested review from a team, rezrah and broccolinisoup September 18, 2023 21:17
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 18, 2023
@langermank langermank temporarily deployed to github-pages September 18, 2023 21:32 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview September 18, 2023 21:33 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Sep 19, 2023
@github-actions github-actions bot temporarily deployed to storybook-preview September 19, 2023 14:34 Inactive
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 19, 2023
@langermank langermank merged commit f431e7e into main Sep 19, 2023
@langermank langermank deleted the button-color-updates branch September 19, 2023 16:08
@primer primer bot mentioned this pull request Sep 19, 2023
Merged
@langermank langermank mentioned this pull request Dec 8, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lukasoppermann lukasoppermann lukasoppermann approved these changes

@rezrah rezrah Awaiting requested review from rezrah rezrah is a code owner automatically assigned from primer/css-reviewers

@broccolinisoup broccolinisoup Awaiting requested review from broccolinisoup

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

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