Skip to content

Repository navigation

Adjust borders/shadows for Button component - #733

Merged
langermank merged 6 commits into
mainfrom
button-color-updates
Sep 19, 2023
Merged

Adjust borders/shadows for Button component#733
langermank merged 6 commits into
mainfrom
button-color-updates

Conversation

@langermank

@langermank langermank commented Sep 18, 2023 •
edited
Loading

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

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

Copy link
Copy Markdown

🦋 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

github-actions Bot commented Sep 18, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor
Variables changed 
No variables changed

@github-actions

github-actions Bot commented Sep 18, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

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, broccolinisoup and rezrah 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 was 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