chore: roxana catches

twilio-labs · Jan 17, 2025 · c86ebb6 · c86ebb6
1 parent 5216faf
commit c86ebb6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 39 deletions.
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -154,7 +154,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -166,7 +166,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 1px 0 0 #1f304c\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
@@ -201,7 +201,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -212,7 +212,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
   \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 4px 5px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -648,7 +648,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 1px 0 0 #1f304c\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
@@ -683,7 +683,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1130,7 +1130,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 1px 0 0 #1f304c\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
@@ -1165,7 +1165,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1600,7 +1600,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -1612,7 +1612,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 1px 0 0 #1f304c\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #f58a8a\\",
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
@@ -1647,7 +1647,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1658,7 +1658,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 4px 5px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -2094,7 +2094,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-destructive\\": \\"0 0 0 1px #c72323\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 1px 0 0 #1f304c\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
@@ -2129,7 +2129,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",

diff --git a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml
@@ -3,7 +3,7 @@ imports:
   - ./offset.yml
   - ./spacing.yml
 aliases:
-  shadow-elevation-0: "none"
-  shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}"
-  shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}"
-  shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}"
+  deprecated-shadow-elevation-0: "none"
+  deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}"
+  deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}"
+  deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}"
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -6,16 +6,16 @@ imports:
   - ../aliases/offset.yml
 props:
   shadow-high:
-    value: "{!shadow-elevation-30}"
+    value: "{!deprecated-shadow-elevation-30}"
     comment: High elevation default shadow.
   shadow:
-    value: "{!shadow-elevation-20}"
+    value: "{!deprecated-shadow-elevation-20}"
     comment: Default shadow.
   shadow-low:
-    value: "{!shadow-elevation-10}"
+    value: "{!deprecated-shadow-elevation-10}"
     comment: Low elevation default shadow.
   shadow-card:
-    value: "{!shadow-elevation-10}"
+    value: "{!deprecated-shadow-elevation-10}"
     comment: Shadow for cards.
   shadow-focus:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}"
@@ -275,13 +275,13 @@ props:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
     comment: Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-right-inverse-05:
-    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Accent shadows that subtly define the left edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.
+    value: "{!offset-05} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    comment: Accent shadows that subtly define the right edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-10:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-inverse-10:
-    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
     comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"

diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
@@ -3,7 +3,7 @@ imports:
   - ../../../aliases/offset.yml
   - ./color-palette.yml
 aliases:
-  shadow-elevation-0: "none"
-  shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
-  shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}"
-  shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}"
+  deprecated-shadow-elevation-0: "none"
+  deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
+  deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}"
+  deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -6,16 +6,16 @@ imports:
   - ../aliases/box-shadow.yml
 props:
   shadow-high:
-    value: "{!shadow-elevation-30}"
+    value: "{!deprecated-shadow-elevation-30}"
     comment: High elevation default shadow.
   shadow:
-    value: "{!shadow-elevation-20}"
+    value: "{!deprecated-shadow-elevation-20}"
     comment: Default shadow.
   shadow-low:
-    value: "{!shadow-elevation-10}"
+    value: "{!deprecated-shadow-elevation-10}"
     comment: Low elevation default shadow.
   shadow-card:
-    value: "{!shadow-elevation-10}"
+    value: "{!deprecated-shadow-elevation-10}"
     comment: Shadow for cards.
   shadow-focus:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}"
@@ -196,11 +196,11 @@ props:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
     comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-10:
-    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-20} {!offset-25} {!offset-0} {!palette-black-transparent-40}"
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
@@ -3,7 +3,7 @@ imports:
   - ../../../aliases/offset.yml
   - ./color-palette.yml
 aliases:
-  shadow-elevation-0: "none"
-  shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
-  shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}"
-  shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}"
+  deprecated-shadow-elevation-0: "none"
+  deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
+  deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}"
+  deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}"