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.

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

v8 bug fixes + enhancements for rollout #843

Merged
merged 8 commits into from
Mar 21, 2024
Merged

v8 bug fixes + enhancements for rollout #843

merged 8 commits into from
Mar 21, 2024

Conversation

langermank
Copy link
Contributor

Bug fixes:

  • Primary button disabled state bg color (darker)
  • Avatar shadow has proper opacity in all color themes

Enhancements

  • Adding black and white tokens that remain the same across all color modes in order to remove scale color usage in dotcom
  • Not adding these to documentation to discourage use

@langermank langermank requested review from a team as code owners March 20, 2024 21:36
@langermank langermank requested a review from jonrohan March 20, 2024 21:36
Copy link

changeset-bot bot commented Mar 20, 2024

🦋 Changeset detected

Latest commit: 607c53d

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

Copy link
Contributor

github-actions bot commented Mar 20, 2024

Variables changed
No variables changed

@langermank langermank added the update snapshots Update visual regression test snapshots label Mar 20, 2024
Copy link
Contributor

github-actions bot commented Mar 20, 2024

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2024-03-21 00:34:29.382000131 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #25215f;
 --display-indigo-borderColor-emphasis: #7070e1;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363db3;
+  --avatar-borderColor: #ffffff26;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -202,7 +202,7 @@
 --button-default-borderColor-disabled: #21262db3;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #ffffffcc;
+  --button-primary-fgColor-disabled: #ffffff66;
 --button-primary-iconColor-rest: #ffffff;
 --button-primary-bgColor-rest: #1f6feb;
 --button-primary-bgColor-hover: #2a7aef;
@@ -288,6 +288,7 @@
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
 --fgColor-link: #4493f8;
 --fgColor-neutral: #6e7681;
@@ -305,6 +306,8 @@
 --bgColor-inset: #010409;
 --bgColor-emphasis: #6e7681;
 --bgColor-inverse: #ffffff;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
 --bgColor-disabled: #21262db3;
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #6e768166;
@@ -494,7 +497,7 @@
 --color-scale-coral-9: #460701;
 --shadow-inset: inset 0px 1px 0px 0px #0104093d;
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363db3;
+    --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -706,7 +709,7 @@
   --button-default-borderColor-disabled: #21262db3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #ffffffcc;
+    --button-primary-fgColor-disabled: #ffffff66;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #1f6feb;
   --button-primary-bgColor-hover: #2a7aef;
@@ -792,6 +795,7 @@
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -809,6 +813,8 @@
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-inverse: #ffffff;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
   --bgColor-disabled: #21262db3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768166;
@@ -998,7 +1004,7 @@
   --color-scale-coral-9: #460701;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
   --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2024-03-21 00:34:28.562000682 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #25215f;
 --display-indigo-borderColor-emphasis: #7070e1;
 --avatar-bgColor: #cdd9e51a;
-  --avatar-borderColor: #444c56b3;
+  --avatar-borderColor: #cdd9e526;
 --avatar-shadow: 0px 0px 0px 2px #22272e;
 --avatarStack-fade-bgColor-default: #444c56;
 --avatarStack-fade-bgColor-muted: #373e47;
@@ -202,7 +202,7 @@
 --button-default-borderColor-disabled: #373e47b3;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #cdd9e5cc;
+  --button-primary-fgColor-disabled: #cdd9e566;
 --button-primary-iconColor-rest: #ffffff;
 --button-primary-bgColor-rest: #347d39;
 --button-primary-bgColor-hover: #3b8640;
@@ -287,7 +287,8 @@
 --fgColor-default: #c5d1de;
 --fgColor-muted: #717e8b;
 --fgColor-onEmphasis: #cdd9e5;
-  --fgColor-white: #ffffff;
+  --fgColor-white: #cdd9e5;
+  --fgColor-black: #1c2128;
 --fgColor-disabled: #636e7b;
 --fgColor-link: #478be6;
 --fgColor-neutral: #636e7b;
@@ -305,6 +306,8 @@
 --bgColor-inset: #1c2128;
 --bgColor-emphasis: #636e7b;
 --bgColor-inverse: #cdd9e5;
+  --bgColor-white: #cdd9e5;
+  --bgColor-black: #1c2128;
 --bgColor-disabled: #373e47b3;
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #636e7b66;
@@ -494,7 +497,7 @@
 --color-scale-coral-9: #5d1008;
 --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
 --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
-  --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+  --shadow-resting-small: 0px 1px 0px 0px #1c212866;
 --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
 --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
 --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #cdd9e51a;
-    --avatar-borderColor: #444c56b3;
+    --avatar-borderColor: #cdd9e526;
   --avatar-shadow: 0px 0px 0px 2px #22272e;
   --avatarStack-fade-bgColor-default: #444c56;
   --avatarStack-fade-bgColor-muted: #373e47;
@@ -706,7 +709,7 @@
   --button-default-borderColor-disabled: #373e47b3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #cdd9e5cc;
+    --button-primary-fgColor-disabled: #cdd9e566;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #347d39;
   --button-primary-bgColor-hover: #3b8640;
@@ -791,7 +794,8 @@
   --fgColor-default: #c5d1de;
   --fgColor-muted: #717e8b;
   --fgColor-onEmphasis: #cdd9e5;
-    --fgColor-white: #ffffff;
+    --fgColor-white: #cdd9e5;
+    --fgColor-black: #1c2128;
   --fgColor-disabled: #636e7b;
   --fgColor-link: #478be6;
   --fgColor-neutral: #636e7b;
@@ -809,6 +813,8 @@
   --bgColor-inset: #1c2128;
   --bgColor-emphasis: #636e7b;
   --bgColor-inverse: #cdd9e5;
+    --bgColor-white: #cdd9e5;
+    --bgColor-black: #1c2128;
   --bgColor-disabled: #373e47b3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #636e7b66;
@@ -998,7 +1004,7 @@
   --color-scale-coral-9: #5d1008;
   --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
-    --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+    --shadow-resting-small: 0px 1px 0px 0px #1c212866;
   --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
   --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
   --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2024-03-21 00:34:29.805999845 +0000
@@ -207,7 +207,7 @@
 --button-primary-bgColor-rest: #09b43a;
 --button-primary-bgColor-hover: #0fbb3f;
 --button-primary-bgColor-active: #15c243;
-  --button-primary-bgColor-disabled: #6bdc84;
+  --button-primary-bgColor-disabled: #048f2f;
 --button-primary-borderColor-rest: #4ae168;
 --button-primary-borderColor-hover: #4ae168;
 --button-primary-borderColor-active: #4ae168;
@@ -288,6 +288,7 @@
 --fgColor-muted: #f0f3f6;
 --fgColor-onEmphasis: #0a0c10;
 --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
 --fgColor-disabled: #9ea7b3;
 --fgColor-link: #60aeff;
 --fgColor-neutral: #9ea7b3;
@@ -305,6 +306,8 @@
 --bgColor-inset: #010409;
 --bgColor-emphasis: #ffffff;
 --bgColor-inverse: #ffffff;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
 --bgColor-disabled: #3d424db3;
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #9ea7b366;
@@ -494,7 +497,7 @@
 --color-scale-coral-9: #a91500;
 --shadow-inset: inset 0px 1px 0px 0px #0104093d;
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 --shadow-floating-small: 0px 0px 0px 1px #7a828e, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 --shadow-floating-medium: 0px 0px 0px 1px #7a828e, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -711,7 +714,7 @@
   --button-primary-bgColor-rest: #09b43a;
   --button-primary-bgColor-hover: #0fbb3f;
   --button-primary-bgColor-active: #15c243;
-    --button-primary-bgColor-disabled: #6bdc84;
+    --button-primary-bgColor-disabled: #048f2f;
   --button-primary-borderColor-rest: #4ae168;
   --button-primary-borderColor-hover: #4ae168;
   --button-primary-borderColor-active: #4ae168;
@@ -792,6 +795,7 @@
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
   --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
   --fgColor-disabled: #9ea7b3;
   --fgColor-link: #60aeff;
   --fgColor-neutral: #9ea7b3;
@@ -809,6 +813,8 @@
   --bgColor-inset: #010409;
   --bgColor-emphasis: #ffffff;
   --bgColor-inverse: #ffffff;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
   --bgColor-disabled: #3d424db3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #9ea7b366;
@@ -998,7 +1004,7 @@
   --color-scale-coral-9: #a91500;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
   --shadow-floating-small: 0px 0px 0px 1px #7a828e, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #7a828e, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2024-03-21 00:34:28.970000407 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #25215f;
 --display-indigo-borderColor-emphasis: #7070e1;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363db3;
+  --avatar-borderColor: #ffffff26;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -202,7 +202,7 @@
 --button-default-borderColor-disabled: #21262db3;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #ffffffcc;
+  --button-primary-fgColor-disabled: #ffffff66;
 --button-primary-iconColor-rest: #ffffff;
 --button-primary-bgColor-rest: #1f6feb;
 --button-primary-bgColor-hover: #2a7aef;
@@ -288,6 +288,7 @@
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
 --fgColor-link: #4493f8;
 --fgColor-neutral: #6e7681;
@@ -305,6 +306,8 @@
 --bgColor-inset: #010409;
 --bgColor-emphasis: #6e7681;
 --bgColor-inverse: #ffffff;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
 --bgColor-disabled: #21262db3;
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #6e768166;
@@ -494,7 +497,7 @@
 --color-scale-coral-9: #460701;
 --shadow-inset: inset 0px 1px 0px 0px #0104093d;
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363db3;
+    --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -706,7 +709,7 @@
   --button-default-borderColor-disabled: #21262db3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #ffffffcc;
+    --button-primary-fgColor-disabled: #ffffff66;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #1f6feb;
   --button-primary-bgColor-hover: #2a7aef;
@@ -792,6 +795,7 @@
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -809,6 +813,8 @@
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-inverse: #ffffff;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
   --bgColor-disabled: #21262db3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768166;
@@ -998,7 +1004,7 @@
   --color-scale-coral-9: #460701;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
   --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2024-03-21 00:34:28.122000978 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #25215f;
 --display-indigo-borderColor-emphasis: #7070e1;
 --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363db3;
+  --avatar-borderColor: #ffffff26;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
 --avatarStack-fade-bgColor-default: #30363d;
 --avatarStack-fade-bgColor-muted: #21262d;
@@ -202,16 +202,16 @@
 --button-default-borderColor-disabled: #21262db3;
 --button-default-shadow-resting: 0px 0px 0px 0px #000000;
 --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #ffffffcc;
+  --button-primary-fgColor-disabled: #ffffff66;
 --button-primary-iconColor-rest: #ffffff;
 --button-primary-bgColor-rest: #238636;
 --button-primary-bgColor-hover: #29903b;
 --button-primary-bgColor-active: #2e9a40;
-  --button-primary-bgColor-disabled: #77c982;
+  --button-primary-bgColor-disabled: #105823;
 --button-primary-borderColor-rest: #f0f6fc1a;
 --button-primary-borderColor-hover: #f0f6fc1a;
 --button-primary-borderColor-active: #f0f6fc1a;
-  --button-primary-borderColor-disabled: #77c982;
+  --button-primary-borderColor-disabled: #105823;
 --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 --button-invisible-fgColor-rest: #4493f8;
 --button-invisible-fgColor-hover: #58a6ff;
@@ -288,6 +288,7 @@
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
 --fgColor-link: #4493f8;
 --fgColor-neutral: #6e7681;
@@ -305,6 +306,8 @@
 --bgColor-inset: #010409;
 --bgColor-emphasis: #6e7681;
 --bgColor-inverse: #ffffff;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
 --bgColor-disabled: #21262db3;
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #6e768166;
@@ -494,7 +497,7 @@
 --color-scale-coral-9: #460701;
 --shadow-inset: inset 0px 1px 0px 0px #0104093d;
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363db3;
+    --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -706,16 +709,16 @@
   --button-default-borderColor-disabled: #21262db3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #ffffffcc;
+    --button-primary-fgColor-disabled: #ffffff66;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #238636;
   --button-primary-bgColor-hover: #29903b;
   --button-primary-bgColor-active: #2e9a40;
-    --button-primary-bgColor-disabled: #77c982;
+    --button-primary-bgColor-disabled: #105823;
   --button-primary-borderColor-rest: #f0f6fc1a;
   --button-primary-borderColor-hover: #f0f6fc1a;
   --button-primary-borderColor-active: #f0f6fc1a;
-    --button-primary-borderColor-disabled: #77c982;
+    --button-primary-borderColor-disabled: #105823;
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #4493f8;
   --button-invisible-fgColor-hover: #58a6ff;
@@ -792,6 +795,7 @@
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -809,6 +813,8 @@
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-inverse: #ffffff;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
   --bgColor-disabled: #21262db3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768166;
@@ -998,7 +1004,7 @@
   --color-scale-coral-9: #460701;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
   --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2024-03-21 00:34:27.114001657 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #d2d7fe;
 --display-indigo-borderColor-emphasis: #5a61e7;
 --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #d0d7de;
+  --avatar-borderColor: #1f232826;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 --avatarStack-fade-bgColor-default: #afb8c1;
 --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -289,6 +289,7 @@
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
 --fgColor-link: #0969da;
 --fgColor-neutral: #6e7781;
@@ -306,6 +307,8 @@
 --bgColor-inset: #f6f8fa;
 --bgColor-emphasis: #24292f;
 --bgColor-inverse: #24292f;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #1f2328;
 --bgColor-disabled: #eaeef2b3;
 --bgColor-transparent: #ffffff00;
 --bgColor-neutral-muted: #afb8c133;
@@ -495,7 +498,7 @@
 --color-scale-coral-9: #510901;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #d0d7de;
+    --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #afb8c1;
   --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -793,6 +796,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -810,6 +814,8 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #1f2328;
   --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
@@ -999,7 +1005,7 @@
   --color-scale-coral-9: #510901;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
   --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2024-03-21 00:34:27.566001352 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #d2d7fe;
 --display-indigo-borderColor-emphasis: #5a61e7;
 --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #20252c;
+  --avatar-borderColor: #010409e6;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 --avatarStack-fade-bgColor-default: #acb6c0;
 --avatarStack-fade-bgColor-muted: #ced5dc;
@@ -289,6 +289,7 @@
 --fgColor-muted: #0e1116;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
 --fgColor-disabled: #66707b;
 --fgColor-link: #023b95;
 --fgColor-neutral: #66707b;
@@ -306,6 +307,8 @@
 --bgColor-inset: #ffffff;
 --bgColor-emphasis: #0e1116;
 --bgColor-inverse: #0e1116;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
 --bgColor-disabled: #ced5dcb3;
 --bgColor-transparent: #ffffff00;
 --bgColor-neutral-muted: #e7ecf0;
@@ -495,7 +498,7 @@
 --color-scale-coral-9: #430200;
 --shadow-inset: inset 0px 1px 0px 0px #0104090a;
 --shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
-  --shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
+  --shadow-resting-small: 0px 1px 0px 0px #0104090a;
 --shadow-resting-medium: 0px 3px 6px 0px #343b431f;
 --shadow-floating-small: 0px 0px 0px 1px #88929d80, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
 --shadow-floating-medium: 0px 0px 0px 1px #88929d, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #20252c;
+    --avatar-borderColor: #010409e6;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #acb6c0;
   --avatarStack-fade-bgColor-muted: #ced5dc;
@@ -793,6 +796,7 @@
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
   --fgColor-disabled: #66707b;
   --fgColor-link: #023b95;
   --fgColor-neutral: #66707b;
@@ -810,6 +814,8 @@
   --bgColor-inset: #ffffff;
   --bgColor-emphasis: #0e1116;
   --bgColor-inverse: #0e1116;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
   --bgColor-disabled: #ced5dcb3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #e7ecf0;
@@ -999,7 +1005,7 @@
   --color-scale-coral-9: #430200;
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
-    --shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
+    --shadow-resting-small: 0px 1px 0px 0px #0104090a;
   --shadow-resting-medium: 0px 3px 6px 0px #343b431f;
   --shadow-floating-small: 0px 0px 0px 1px #88929d80, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
   --shadow-floating-medium: 0px 0px 0px 1px #88929d, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2024-03-21 00:34:26.678001950 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #d2d7fe;
 --display-indigo-borderColor-emphasis: #5a61e7;
 --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #d0d7de;
+  --avatar-borderColor: #1f232826;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 --avatarStack-fade-bgColor-default: #afb8c1;
 --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -289,6 +289,7 @@
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
 --fgColor-link: #0969da;
 --fgColor-neutral: #6e7781;
@@ -306,6 +307,8 @@
 --bgColor-inset: #f6f8fa;
 --bgColor-emphasis: #24292f;
 --bgColor-inverse: #24292f;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #1f2328;
 --bgColor-disabled: #eaeef2b3;
 --bgColor-transparent: #ffffff00;
 --bgColor-neutral-muted: #afb8c133;
@@ -495,7 +498,7 @@
 --color-scale-coral-9: #510901;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #d0d7de;
+    --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #afb8c1;
   --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -793,6 +796,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -810,6 +814,8 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #1f2328;
   --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
@@ -999,7 +1005,7 @@
   --color-scale-coral-9: #510901;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
   --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2024-03-21 00:34:26.222002257 +0000
@@ -133,7 +133,7 @@
 --display-indigo-borderColor-muted: #d2d7fe;
 --display-indigo-borderColor-emphasis: #5a61e7;
 --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #d0d7de;
+  --avatar-borderColor: #1f232826;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 --avatarStack-fade-bgColor-default: #afb8c1;
 --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -289,6 +289,7 @@
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
 --fgColor-white: #ffffff;
+  --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
 --fgColor-link: #0969da;
 --fgColor-neutral: #6e7781;
@@ -306,6 +307,8 @@
 --bgColor-inset: #f6f8fa;
 --bgColor-emphasis: #24292f;
 --bgColor-inverse: #24292f;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #1f2328;
 --bgColor-disabled: #eaeef2b3;
 --bgColor-transparent: #ffffff00;
 --bgColor-neutral-muted: #afb8c133;
@@ -495,7 +498,7 @@
 --color-scale-coral-9: #510901;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
@@ -637,7 +640,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #d0d7de;
+    --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #afb8c1;
   --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -793,6 +796,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+    --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -810,6 +814,8 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #1f2328;
   --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
@@ -999,7 +1005,7 @@
   --color-scale-coral-9: #510901;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
   --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

Verified

This commit was signed with the committer’s verified signature.
amilamen Ezéchiel Amen AGBLA
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Mar 20, 2024
@primer primer bot temporarily deployed to github-pages March 20, 2024 22:07 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview March 20, 2024 22:08 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Mar 21, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview March 21, 2024 00:04 Inactive
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Mar 21, 2024
@primer primer bot temporarily deployed to github-pages March 21, 2024 00:35 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview March 21, 2024 00:36 Inactive
@langermank langermank merged commit d43b576 into main Mar 21, 2024
26 checks passed
@langermank langermank deleted the v8-bug-fixes branch March 21, 2024 00:51
@primer primer bot mentioned this pull request Mar 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant