Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Update shadows #721

Merged
merged 1 commit into from
Aug 29, 2023
Merged

Update shadows #721

merged 1 commit into from
Aug 29, 2023

Conversation

lukasoppermann
Copy link
Contributor

Summary

Updates the shadows tokens to correct some inconsistencies in progression.

List of notable changes:

What should reviewers focus on?

Steps to test:

@lukasoppermann lukasoppermann requested a review from a team as a code owner August 28, 2023 10:04
@lukasoppermann lukasoppermann requested review from a team, simurai and langermank August 28, 2023 10:04
@lukasoppermann lukasoppermann self-assigned this Aug 28, 2023
@changeset-bot
Copy link

changeset-bot bot commented Aug 28, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 97ed566

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023 •
edited
Loading

Variables changed 
No variables changed

@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023 •
edited
Loading

Design Token Diff

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-08-28 11:28:27.199127967 +0000
@@ -403,15 +403,15 @@
 --color-scale-coral-7: #872012;
 --color-scale-coral-8: #640d04;
 --color-scale-coral-9: #460701;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --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;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -819,15 +819,15 @@
   --color-scale-coral-7: #872012;
   --color-scale-coral-8: #640d04;
   --color-scale-coral-9: #460701;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --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;
   --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	2023-08-28 11:28:26.011113123 +0000
@@ -403,15 +403,15 @@
 --color-scale-coral-7: #8d291b;
 --color-scale-coral-8: #771d13;
 --color-scale-coral-9: #5d1008;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #1c2128;
-  --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 16px 32px 0px #1c2128d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #636e7b17, 0px 8px 16px -4px #636e7b17, 0px 24px 48px -12px #636e7b29, 0px 48px 96px -24px #636e7b3d;
-  --shadow-floating-large: 0px 8px 24px 0px #1c2128;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #1c2128;
+  --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
+  --shadow-highlight: inset 0px 1px 0px 0px #cdd9e51f;
+  --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;
 --outline-focus: #316dca solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -819,15 +819,15 @@
   --color-scale-coral-7: #8d291b;
   --color-scale-coral-8: #771d13;
   --color-scale-coral-9: #5d1008;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #1c2128;
-    --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 16px 32px 0px #1c2128d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #636e7b17, 0px 8px 16px -4px #636e7b17, 0px 24px 48px -12px #636e7b29, 0px 48px 96px -24px #636e7b3d;
-    --shadow-floating-large: 0px 8px 24px 0px #1c2128;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #1c2128;
+    --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
+    --shadow-highlight: inset 0px 1px 0px 0px #cdd9e51f;
+    --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;
   --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	2023-08-28 11:28:27.743134765 +0000
@@ -403,15 +403,15 @@
 --color-scale-coral-7: #e03b21;
 --color-scale-coral-8: #c62612;
 --color-scale-coral-9: #a91500;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #525964, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #9ea7b317, 0px 8px 16px -4px #9ea7b317, 0px 24px 48px -12px #9ea7b329, 0px 48px 96px -24px #9ea7b33d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --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;
 --outline-focus: #409eff solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -819,15 +819,15 @@
   --color-scale-coral-7: #e03b21;
   --color-scale-coral-8: #c62612;
   --color-scale-coral-9: #a91500;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #525964, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #9ea7b317, 0px 8px 16px -4px #9ea7b317, 0px 24px 48px -12px #9ea7b329, 0px 48px 96px -24px #9ea7b33d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --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;
   --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	2023-08-28 11:28:26.655121170 +0000
@@ -403,15 +403,15 @@
 --color-scale-coral-7: #872012;
 --color-scale-coral-8: #640d04;
 --color-scale-coral-9: #460701;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --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;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -819,15 +819,15 @@
   --color-scale-coral-7: #872012;
   --color-scale-coral-8: #640d04;
   --color-scale-coral-9: #460701;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --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;
   --outline-focus: #1f6feb solid 2px;
 }
}

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-08-28 11:28:25.387105325 +0000
@@ -403,15 +403,15 @@
 --color-scale-coral-7: #872012;
 --color-scale-coral-8: #640d04;
 --color-scale-coral-9: #460701;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --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;
 --outline-focus: #1f6feb solid 2px;
}
@media (prefers-color-scheme: dark) {
@@ -819,15 +819,15 @@
   --color-scale-coral-7: #872012;
   --color-scale-coral-8: #640d04;
   --color-scale-coral-9: #460701;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --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;
   --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	2023-08-28 11:28:24.291091630 +0000
@@ -404,15 +404,15 @@
 --color-scale-coral-7: #801f0f;
 --color-scale-coral-8: #691105;
 --color-scale-coral-9: #510901;
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-  --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-  --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-  --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-  --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-  --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+  --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+  --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 #424a533d;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_colorblind"] {
@@ -820,14 +820,14 @@
   --color-scale-coral-7: #801f0f;
   --color-scale-coral-8: #691105;
   --color-scale-coral-9: #510901;
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-    --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-    --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-    --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-    --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-    --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+    --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+    --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 #424a533d;
 }
}

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-08-28 11:28:24.879098978 +0000
@@ -404,15 +404,15 @@
 --color-scale-coral-7: #6f0107;
 --color-scale-coral-8: #5b0002;
 --color-scale-coral-9: #430200;
-  --shadow-inset: inset 0px 1px 0px 0px #0104090d;
-  --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #0104090f;
-  --shadow-resting-small: 0px 1px 0px 0px #0104090a;
-  --shadow-resting-medium: 0px 3px 6px 0px #88929d26;
-  --shadow-floating-small: 0px 1px 3px 0px #0104091f, 0px 8px 24px 0px #343b431f;
-  --shadow-floating-medium: 0px 4px 32px -4px #88929d17, 0px 8px 16px -4px #88929d17, 0px 24px 48px -12px #88929d29, 0px 48px 96px -24px #88929d3d;
-  --shadow-floating-large: 0px 8px 24px 0px #88929d33;
-  --shadow-floating-xlarge: 0px 12px 28px 0px #88929d4d;
+  --shadow-inset: inset 0px 1px 0px 0px #01040914;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+  --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 #343b433d;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
@@ -820,14 +820,14 @@
   --color-scale-coral-7: #6f0107;
   --color-scale-coral-8: #5b0002;
   --color-scale-coral-9: #430200;
-    --shadow-inset: inset 0px 1px 0px 0px #0104090d;
-    --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #0104090f;
-    --shadow-resting-small: 0px 1px 0px 0px #0104090a;
-    --shadow-resting-medium: 0px 3px 6px 0px #88929d26;
-    --shadow-floating-small: 0px 1px 3px 0px #0104091f, 0px 8px 24px 0px #343b431f;
-    --shadow-floating-medium: 0px 4px 32px -4px #88929d17, 0px 8px 16px -4px #88929d17, 0px 24px 48px -12px #88929d29, 0px 48px 96px -24px #88929d3d;
-    --shadow-floating-large: 0px 8px 24px 0px #88929d33;
-    --shadow-floating-xlarge: 0px 12px 28px 0px #88929d4d;
+    --shadow-inset: inset 0px 1px 0px 0px #01040914;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+    --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 #343b433d;
 }
}

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

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-08-28 11:28:23.495081684 +0000
@@ -404,15 +404,15 @@
 --color-scale-coral-7: #801f0f;
 --color-scale-coral-8: #691105;
 --color-scale-coral-9: #510901;
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-  --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-  --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-  --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-  --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-  --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+  --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+  --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 #424a533d;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_tritanopia"] {
@@ -820,14 +820,14 @@
   --color-scale-coral-7: #801f0f;
   --color-scale-coral-8: #691105;
   --color-scale-coral-9: #510901;
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-    --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-    --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-    --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-    --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-    --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+    --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+    --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 #424a533d;
 }
}

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-08-28 11:28:22.627070838 +0000
@@ -404,15 +404,15 @@
 --color-scale-coral-7: #801f0f;
 --color-scale-coral-8: #691105;
 --color-scale-coral-9: #510901;
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-  --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-  --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-  --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-  --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-  --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+  --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+  --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 #424a533d;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light"] {
@@ -820,14 +820,14 @@
   --color-scale-coral-7: #801f0f;
   --color-scale-coral-8: #691105;
   --color-scale-coral-9: #510901;
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-    --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-    --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-    --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-    --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-    --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+    --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+    --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 #424a533d;
 }
}

@lukasoppermann lukasoppermann temporarily deployed to github-pages August 28, 2023 10:06 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview August 28, 2023 10:06 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview August 28, 2023 11:30 Inactive
@lukasoppermann lukasoppermann merged commit 01aae86 into main Aug 29, 2023
@lukasoppermann lukasoppermann deleted the updateShadows branch August 29, 2023 13:43
@primer primer bot mentioned this pull request Sep 12, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@simurai simurai simurai approved these changes

@langermank langermank Awaiting requested review from langermank

Assignees

@lukasoppermann lukasoppermann

Labels
color modes primitives
Projects
None yet
Milestone
No milestone
Development

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