Shadow color adjustments #810

langermank · 2024-02-23T00:38:51Z

Adding a specific overlay color to be used within the floating shadows. This allows us to set a high contrast value for light/dark.

changeset-bot · 2024-02-23T00:38:56Z

🦋 Changeset detected

Latest commit: 8a8bef9

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 · 2024-02-23T00:39:07Z

Variables changed

No variables changed

github-actions · 2024-02-23T00:40:14Z

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2024-02-23 00:55:25.697074479 +0000
@@ -181,6 +181,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
+  --overlay-borderColor: #30363d;
 --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -403,10 +404,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+  --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;
+  --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
+    --overlay-borderColor: #30363d;
   --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -813,10 +815,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
   --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+    --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;
+    --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
   --outline-focus: #1f6feb solid 2px;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2024-02-23 00:55:25.037078474 +0000
@@ -181,6 +181,7 @@
 --focus-outlineColor: #316dca;
 --menu-bgColor-active: #2d333b;
 --overlay-bgColor: #2d333b;
+  --overlay-borderColor: #444c56;
 --overlay-backdrop-bgColor: #2d333b66;
 --selectMenu-borderColor: #545d68;
 --selectMenu-bgColor-active: #143d79;
@@ -403,10 +404,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
 --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
 --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-  --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
-  --shadow-floating-large: 0px 0px 0px 1px #2d333b, 0px 24px 48px 0px #1c2128;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
+  --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;
+  --shadow-floating-large: 0px 0px 0px 1px #444c56, 0px 24px 48px 0px #1c2128;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #444c56, 0px 32px 64px 0px #1c2128;
 --outline-focus: #316dca solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;
+    --overlay-borderColor: #444c56;
   --overlay-backdrop-bgColor: #2d333b66;
   --selectMenu-borderColor: #545d68;
   --selectMenu-bgColor-active: #143d79;
@@ -813,10 +815,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
   --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
   --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-    --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
-    --shadow-floating-large: 0px 0px 0px 1px #2d333b, 0px 24px 48px 0px #1c2128;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
+    --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;
+    --shadow-floating-large: 0px 0px 0px 1px #444c56, 0px 24px 48px 0px #1c2128;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #444c56, 0px 32px 64px 0px #1c2128;
   --outline-focus: #316dca solid 2px;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2024-02-23 00:55:26.017072570 +0000
@@ -181,6 +181,7 @@
 --focus-outlineColor: #409eff;
 --menu-bgColor-active: #272b33;
 --overlay-bgColor: #272b33;
+  --overlay-borderColor: #7a828e;
 --overlay-backdrop-bgColor: #272b3366;
 --selectMenu-borderColor: #7a828e;
 --selectMenu-bgColor-active: #1e60d5;
@@ -403,10 +404,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-floating-small: 0px 0px 0px 1px #272b33, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-floating-medium: 0px 0px 0px 1px #272b33, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-large: 0px 0px 0px 1px #272b33, 0px 24px 48px 0px #010409;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #272b33, 0px 32px 64px 0px #010409;
+  --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;
+  --shadow-floating-large: 0px 0px 0px 1px #7a828e, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #7a828e, 0px 32px 64px 0px #010409;
 --outline-focus: #409eff solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
   --focus-outlineColor: #409eff;
   --menu-bgColor-active: #272b33;
   --overlay-bgColor: #272b33;
+    --overlay-borderColor: #7a828e;
   --overlay-backdrop-bgColor: #272b3366;
   --selectMenu-borderColor: #7a828e;
   --selectMenu-bgColor-active: #1e60d5;
@@ -813,10 +815,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
   --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-floating-small: 0px 0px 0px 1px #272b33, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-floating-medium: 0px 0px 0px 1px #272b33, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-large: 0px 0px 0px 1px #272b33, 0px 24px 48px 0px #010409;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #272b33, 0px 32px 64px 0px #010409;
+    --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;
+    --shadow-floating-large: 0px 0px 0px 1px #7a828e, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #7a828e, 0px 32px 64px 0px #010409;
   --outline-focus: #409eff solid 2px;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2024-02-23 00:55:25.361076499 +0000
@@ -181,6 +181,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
+  --overlay-borderColor: #30363d;
 --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -403,10 +404,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+  --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;
+  --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
+    --overlay-borderColor: #30363d;
   --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -813,10 +815,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
   --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+    --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;
+    --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
   --outline-focus: #1f6feb solid 2px;
 }
}

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2024-02-23 00:55:24.709080474 +0000
@@ -181,6 +181,7 @@
 --focus-outlineColor: #1f6feb;
 --menu-bgColor-active: #161b22;
 --overlay-bgColor: #161b22;
+  --overlay-borderColor: #30363d;
 --overlay-backdrop-bgColor: #161b2266;
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -403,10 +404,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+  --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;
+  --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
+    --overlay-borderColor: #30363d;
   --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -813,10 +815,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
   --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+    --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;
+    --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
   --outline-focus: #1f6feb solid 2px;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2024-02-23 00:55:24.049084497 +0000
@@ -182,6 +182,7 @@
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
 --overlay-bgColor: #ffffff;
+  --overlay-borderColor: #ffffff00;
 --overlay-backdrop-bgColor: #8c959f33;
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -404,10 +405,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-  --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-  --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-  --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-  --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+  --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+  --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+  --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_colorblind"],
@@ -592,6 +593,7 @@
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
+    --overlay-borderColor: #ffffff00;
   --overlay-backdrop-bgColor: #8c959f33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -814,9 +816,9 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
   --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-    --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-    --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-    --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-    --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+    --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+    --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+    --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2024-02-23 00:55:24.385082448 +0000
@@ -182,6 +182,7 @@
 --focus-outline: #0349b4 solid 2px;
 --menu-bgColor-active: #ffffff00;
 --overlay-bgColor: #ffffff;
+  --overlay-borderColor: #20252c;
 --overlay-backdrop-bgColor: #88929d33;
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #9cd7ff;
@@ -404,10 +405,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
 --shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
 --shadow-resting-medium: 0px 3px 6px 0px #343b431f;
-  --shadow-floating-small: 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
-  --shadow-floating-medium: 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
-  --shadow-floating-large: 0px 40px 80px 0px #343b433d;
-  --shadow-floating-xlarge: 0px 56px 112px 0px #343b4352;
+  --shadow-floating-small: 0px 0px 0px 1px #20252c, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
+  --shadow-floating-medium: 0px 0px 0px 1px #20252c, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
+  --shadow-floating-large: 0px 0px 0px 1px #20252c, 0px 40px 80px 0px #343b433d;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #20252c, 0px 56px 112px 0px #343b4352;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_high_contrast"],
@@ -592,6 +593,7 @@
   --focus-outline: #0349b4 solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
+    --overlay-borderColor: #20252c;
   --overlay-backdrop-bgColor: #88929d33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #9cd7ff;
@@ -814,9 +816,9 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
   --shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
   --shadow-resting-medium: 0px 3px 6px 0px #343b431f;
-    --shadow-floating-small: 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
-    --shadow-floating-medium: 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
-    --shadow-floating-large: 0px 40px 80px 0px #343b433d;
-    --shadow-floating-xlarge: 0px 56px 112px 0px #343b4352;
+    --shadow-floating-small: 0px 0px 0px 1px #20252c, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
+    --shadow-floating-medium: 0px 0px 0px 1px #20252c, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
+    --shadow-floating-large: 0px 0px 0px 1px #20252c, 0px 40px 80px 0px #343b433d;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #20252c, 0px 56px 112px 0px #343b4352;
 }
}

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

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2024-02-23 00:55:23.709086569 +0000
@@ -182,6 +182,7 @@
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
 --overlay-bgColor: #ffffff;
+  --overlay-borderColor: #ffffff00;
 --overlay-backdrop-bgColor: #8c959f33;
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -404,10 +405,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-  --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-  --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-  --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-  --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+  --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+  --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+  --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_tritanopia"],
@@ -592,6 +593,7 @@
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
+    --overlay-borderColor: #ffffff00;
   --overlay-backdrop-bgColor: #8c959f33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -814,9 +816,9 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
   --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-    --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-    --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-    --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-    --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+    --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+    --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+    --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
 }
}

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2024-02-23 00:55:23.277089203 +0000
@@ -182,6 +182,7 @@
 --focus-outline: #0969da solid 2px;
 --menu-bgColor-active: #ffffff00;
 --overlay-bgColor: #ffffff;
+  --overlay-borderColor: #ffffff00;
 --overlay-backdrop-bgColor: #8c959f33;
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -404,10 +405,10 @@
 --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-  --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-  --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-  --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-  --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+  --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+  --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+  --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light"],
@@ -592,6 +593,7 @@
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
+    --overlay-borderColor: #ffffff00;
   --overlay-backdrop-bgColor: #8c959f33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -814,9 +816,9 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
   --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-    --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-    --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-    --shadow-floating-large: 0px 40px 80px 0px #424a533d;
-    --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+    --shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+    --shadow-floating-medium: 0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+    --shadow-floating-large: 0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;
 }
}

lukasoppermann · 2024-02-23T07:43:04Z

src/tokens/functional/shadow/light.json5

Do we want to have an effectively invisible border in light mode? I am fine either way, just asking.

* adjust box-shadow for dark * add color to respect themes * Create wise-shirts-pull.md * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <[email protected]>

langermank added 2 commits February 22, 2024 16:15

adjust box-shadow for dark

1ef203d

add color to respect themes

4e8de32

langermank requested a review from a team as a code owner February 23, 2024 00:38

langermank requested review from a team, broccolinisoup and simurai February 23, 2024 00:38

Create wise-shirts-pull.md

8e303f2

github-actions bot temporarily deployed to storybook-preview February 23, 2024 00:41 Inactive

langermank temporarily deployed to github-pages February 23, 2024 00:41 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 23, 2024 00:41 Inactive

langermank added the update snapshots Update visual regression test snapshots label Feb 23, 2024

github-actions[bot] Regenerated snapshots

8a8bef9

github-actions bot removed the update snapshots Update visual regression test snapshots label Feb 23, 2024

primer bot temporarily deployed to github-pages February 23, 2024 00:56 Inactive

github-actions bot temporarily deployed to storybook-preview February 23, 2024 00:56 Inactive

lukasoppermann reviewed Feb 23, 2024

View reviewed changes

lukasoppermann approved these changes Feb 23, 2024

View reviewed changes

langermank merged commit a607bde into main Feb 23, 2024

langermank deleted the floating-borders-dark branch February 23, 2024 20:52

primer bot mentioned this pull request Feb 23, 2024

Release Tracking #816

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Shadow color adjustments #810

Shadow color adjustments #810

Uh oh!

langermank commented Feb 23, 2024

Uh oh!

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Feb 23, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Feb 23, 2024 •

edited

Loading

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

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

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

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

/css/functional/themes/dark.css

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

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

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

/css/functional/themes/light.css

Uh oh!

lukasoppermann Feb 23, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Shadow color adjustments #810

Shadow color adjustments #810

Uh oh!

Conversation

langermank commented Feb 23, 2024

Uh oh!

changeset-bot bot commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff

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

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

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

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

/css/functional/themes/dark.css

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

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

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

/css/functional/themes/light.css

Uh oh!

lukasoppermann Feb 23, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

github-actions bot commented Feb 23, 2024 •

edited

Loading

github-actions bot commented Feb 23, 2024 •

edited

Loading