From a186fbc2bc996d2609ae9aa94c20678488bb332b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Tue, 14 Jan 2025 15:29:15 -0500
Subject: [PATCH 1/6] feat(design-tokens): add elevation tokens

---
 .changeset/ninety-avocados-shout.md           |   5 +
 .../paste-core/primitives/box/type-docs.json  |   4 +-
 .../primitives/sibling-box/type-docs.json     |   4 +-
 .../paste-core/primitives/text/type-docs.json |   2 +-
 .../__snapshots__/index.test.tsx.snap         | 109 ++++++++++++++++--
 .../tokens/aliases/color-palette.yml          |  14 ++-
 .../tokens/aliases/color.yml                  |   2 +-
 .../tokens/aliases/offset.yml                 |   1 +
 .../tokens/global/background-color.yml        |  26 +++++
 .../tokens/global/box-shadow.yml              |  33 +++++-
 .../tokens/themes/dark/aliases/box-shadow.yml |   6 +-
 .../tokens/themes/dark/aliases/color.yml      |  20 ++--
 .../themes/dark/global/background-color.yml   |  13 +++
 .../tokens/themes/dark/global/box-shadow.yml  |  24 +++-
 .../themes/evergreen/aliases/box-shadow.yml   |   6 +-
 .../tokens/themes/evergreen/aliases/color.yml |  20 ++--
 .../evergreen/global/background-color.yml     |  21 +++-
 .../twilio-dark/global/background-color.yml   |  19 +++
 .../themes/twilio/global/background-color.yml |   8 ++
 .../__snapshots__/index.spec.tsx.snap         |   4 +-
 .../src/__tests__/colorGradient.test.tsx      |   7 +-
 21 files changed, 290 insertions(+), 58 deletions(-)
 create mode 100644 .changeset/ninety-avocados-shout.md

diff --git a/.changeset/ninety-avocados-shout.md b/.changeset/ninety-avocados-shout.md
new file mode 100644
index 0000000000..7ebe792601
--- /dev/null
+++ b/.changeset/ninety-avocados-shout.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/design-tokens": minor
+---
+
+[Design Tokens] Update aliases and add new tokens for elevation foundations
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 724125ffcb..f000c78519 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index d3afa5f1de..6186fbada1 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
index cbf3cb3985..6cc03034ab 100644
--- a/packages/paste-core/primitives/text/type-docs.json
+++ b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index da3a350385..984ea69cc7 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,10 +10,14 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-destructive-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -50,16 +54,20 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
+  \\"color-background-weaker\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -133,6 +141,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\",
   \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\",
+  \\"shadow-elevation-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\",
   \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\",
@@ -144,8 +153,10 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
   \\"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\\",
   \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-focus\\": \\"0 0 0 4px #606b85\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
@@ -159,6 +170,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
+  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -188,14 +200,18 @@ 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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
+  \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #1f304c\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #17243a, 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-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\\",
@@ -207,6 +223,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
@@ -261,7 +278,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(174, 178, 193)\\",
+  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -474,10 +491,14 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
+  \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -487,7 +508,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -514,16 +535,20 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
+  \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\",
   \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -597,6 +622,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
+  \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\",
@@ -608,8 +634,10 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
+  \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
   \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\",
   \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
@@ -623,6 +651,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -652,14 +681,18 @@ 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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
+  \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -671,6 +704,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -735,7 +769,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(174, 178, 193)\\",
+  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -909,7 +943,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
+  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -938,10 +972,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
+  \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -951,7 +989,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -978,16 +1016,20 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
+  \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\",
   \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1061,6 +1103,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
+  \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\",
@@ -1072,8 +1115,10 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
+  \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
   \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\",
   \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
@@ -1087,6 +1132,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -1116,14 +1162,18 @@ 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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
+  \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -1135,6 +1185,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -1199,7 +1250,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(174, 178, 193)\\",
+  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1373,7 +1424,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
+  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1402,10 +1453,14 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-destructive-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1442,16 +1497,20 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
+  \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1525,6 +1584,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\",
   \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\",
+  \\"shadow-elevation-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\",
   \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\",
@@ -1536,8 +1596,10 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
   \\"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\\",
   \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-focus\\": \\"0 0 0 2px #121c2d, 0 0 0 3px #ffffff, 0 0 0 5px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
@@ -1551,6 +1613,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
+  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -1580,14 +1643,18 @@ 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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
+  \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #1f304c\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"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 #17243a, 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-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\\",
@@ -1599,6 +1666,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
@@ -1653,7 +1721,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(174, 178, 193)\\",
+  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1866,10 +1934,14 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
+  \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\",
@@ -1879,7 +1951,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
   \\"color-background-row-striped\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -1906,16 +1978,20 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
+  \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1989,6 +2065,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
+  \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\",
@@ -2000,8 +2077,10 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
+  \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
   \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\",
   \\"shadow-focus\\": \\"0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
@@ -2015,13 +2094,14 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
-  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #aeb2c1\\",
+  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8e96ae\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
@@ -2044,14 +2124,18 @@ 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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
+  \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -2063,6 +2147,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
@@ -2117,7 +2202,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(174, 178, 193)\\",
+  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -2301,7 +2386,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
+  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(195, 83, 35)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index 8a9df18c83..f42eddbd1a 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -29,14 +29,19 @@ aliases:
   palette-gray-0: "#ffffff"
   palette-gray-05: "#f9f9fa"
   palette-gray-10: "#f4f4f6"
+  palette-gray-15: "#edeef2"
   palette-gray-20: "#e1e3ea"
   palette-gray-30: "#cacdd8"
-  palette-gray-40: "#aeb2c1"
+  palette-gray-40: "#8e96ae"
   palette-gray-50: "#8891aa"
+  palette-gray-55: "#67728e"
   palette-gray-60: "#606b85"
   palette-gray-70: "#4b5671"
+  palette-gray-75: "#404f6e"
   palette-gray-80: "#394762"
+  palette-gray-85: "#25395b"
   palette-gray-90: "#1f304c"
+  palette-gray-95: "#17243a"
   palette-gray-100: "#121c2d"
   palette-gray-110: "#0F1621"
 
@@ -52,7 +57,8 @@ aliases:
   palette-gray-0-transparent-90: "rgba(255, 255, 255, 0.9)"
   palette-gray-0-transparent-100: "rgba(255, 255, 255, 1)"
 
-  ## Grays transparent based on darkest gray
+  ## Grays transparent based on dark gray
+  palette-gray-100-transparent-05: "rgba(18, 28, 45, 0.05)"
   palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)"
   palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)"
   palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)"
@@ -64,6 +70,10 @@ aliases:
   palette-gray-100-transparent-90: "rgba(18, 28, 45, 0.9)"
   palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)"
 
+  ## Grays transparent based on darkest gray
+  palette-gray-110-transparent-05: "rgba(15,22,33 0.05)"
+  palette-gray-110-transparent-10: "rgba(15,22,33 0.1)"
+
   ## Blues transparent based on darkest blue
   palette-blue-100-transparent-10: "rgba(6, 3, 58, 0.1)"
   palette-blue-100-transparent-20: "rgba(6, 3, 58, 0.2)"
diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml
index 801741936d..4e05e7fde0 100644
--- a/packages/paste-design-tokens/tokens/aliases/color.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color.yml
@@ -11,4 +11,4 @@ aliases:
   sun: "#FF7A00"
   white: "#FFFFFF"
   white-accent: "#F6FBFE"
-  black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml
index 753518ce58..bf1aec7bbf 100644
--- a/packages/paste-design-tokens/tokens/aliases/offset.yml
+++ b/packages/paste-design-tokens/tokens/aliases/offset.yml
@@ -14,3 +14,4 @@ aliases:
   offset-90: "32px"
   offset-negative-05: -1px
   offset-negative-20: -4px
+  offset-negative-60: -16px
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 3ae9a24caf..eeb699e828 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -33,6 +33,9 @@ props:
   color-background-weak:
     value: "{!palette-gray-05}"
     comment: Weak background color used for containers.
+  color-background-weaker:
+    value: "{!palette-gray-0}"
+    comment: Weaker background color used for containers.
 
   # brand backgrounds
   color-background-brand:
@@ -210,3 +213,26 @@ props:
   color-background-notification:
     value: "{!palette-red-60}"
     comment: Background color used for notifications.
+
+  #elevation background
+  color-background-body-elevation:
+    value: "{!palette-gray-05}"
+    comment: Elevation token for color-background-body elements.
+  color-background-weak-elevation:
+    value: "{!palette-gray-05}"
+    comment: Elevation token for color-background-weak elements.
+  color-background-elevation:
+    value: "{!palette-gray-15}"
+    comment: Elevation token for color-background elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.
+  color-background-inverse-weak-elevation:
+    value: "{!palette-gray-85}"
+    comment: Elevation token for color-background-inverse-weak elements.
+  color-background-inverse-strong-elevation:
+    value: "{!palette-gray-75}"
+    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-stronger-elevation:
+    value: "{!palette-gray-75}"
+    comment: Elevation token for color-background-inverse-stronger elements.
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 67095948e7..8b6ca9c726 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -250,11 +250,40 @@ props:
     value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}"
     comment: Left shadow border for elements.
   shadow-left-inverse:
-    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}"
     comment: Left shadow border for inverse elements.
   shadow-right:
     value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}"
     comment: Right shadow border for elements.
   shadow-right-inverse:
-    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}"
     comment: Right shadow border for inverse elements.
+
+  # Elevation
+  shadow-elevation-05:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-15}"
+    comment: Shadow border for elevation.
+  shadow-elevation-top-05:
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-15}"
+    comment: Top shadow border for elevation.
+  shadow-elevation-bottom-05:
+    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-15}"
+    comment: Bottom shadow border for elevation.
+  shadow-elevation-inverse-05:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
+    comment: Shadow border for inverse elevation.
+  shadow-elevation-inverse-left-05:
+    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    comment: Left shadow border for inverse elevation.
+  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: Shadow border for elevation.
+  shadow-inverse-elevation-10:
+    value: "{!offset-negative-05} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
+    comment: Shadow border for inverse elevation.
+  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-100-transparent-05}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Shadow border for elevation.
+  shadow-elevation-left-20:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Left shadow border for elevation.
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
index c64fff9e2b..b29d7455a8 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
@@ -5,6 +5,6 @@ imports:
   - ./color.yml
 aliases:
   shadow-elevation-0: "none"
-  shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}"
-  shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!black-transparent-50}"
-  shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!black-transparent-50}"
+  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}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
index 35682e1aec..6f220f0ce6 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
@@ -2,13 +2,13 @@ imports:
   - ../../../aliases/color.yml
 
 aliases:
-  black-transparent-10: "rgba(0, 0, 0, 0.1)"
-  black-transparent-20: "rgba(0, 0, 0, 0.2)"
-  black-transparent-30: "rgba(0, 0, 0, 0.3)"
-  black-transparent-40: "rgba(0, 0, 0, 0.4)"
-  black-transparent-50: "rgba(0, 0, 0, 0.5)"
-  black-transparent-60: "rgba(0, 0, 0, 0.6)"
-  black-transparent-70: "rgba(0, 0, 0, 0.7)"
-  black-transparent-80: "rgba(0, 0, 0, 0.8)"
-  black-transparent-90: "rgba(0, 0, 0, 0.9)"
-  black-transparent-100: "rgba(0, 0, 0, 1)"
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index 8de81872c3..74e7443361 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -31,6 +31,8 @@ props:
   color-background-weak:
     value: "{!palette-gray-100}"
     comment: Weak default background color.
+  color-background-weaker:
+    value: "{!palette-gray-100}"
 
   # brand backgrounds
   color-background-brand:
@@ -191,3 +193,14 @@ props:
   color-background-decorative-40-weakest:
     value: "{!palette-purple-80}"
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
+
+  #elevation background
+  color-background-body-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-body elements.
+  color-background-weak-elevation:
+    value: "{!palette-gray-100}"
+    comment: Elevation token for color-background-weak elements.
+  color-background-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background elements.
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
index b34336e5a2..506943e9b1 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -179,8 +179,28 @@ props:
 
   # Left / Right
   shadow-left:
-    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}"
     comment: Left shadow border for elements.
   shadow-right:
-    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}"
     comment: Right shadow border for elements.
+
+  # Elevation
+  shadow-elevation-05:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
+    comment: Shadow border for elevation.
+  shadow-elevation-top-05:
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    comment: Top shadow border for elevation.
+  shadow-elevation-bottom-05:
+    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    comment: Bottom shadow border for elevation.
+  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}"
+    comment: Shadow border for elevation.
+  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: Shadow border for elevation.
+  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-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Left shadow border for elevation.
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
index c64fff9e2b..b29d7455a8 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
@@ -5,6 +5,6 @@ imports:
   - ./color.yml
 aliases:
   shadow-elevation-0: "none"
-  shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}"
-  shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!black-transparent-50}"
-  shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!black-transparent-50}"
+  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}"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
index 35682e1aec..6f220f0ce6 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
@@ -2,13 +2,13 @@ imports:
   - ../../../aliases/color.yml
 
 aliases:
-  black-transparent-10: "rgba(0, 0, 0, 0.1)"
-  black-transparent-20: "rgba(0, 0, 0, 0.2)"
-  black-transparent-30: "rgba(0, 0, 0, 0.3)"
-  black-transparent-40: "rgba(0, 0, 0, 0.4)"
-  black-transparent-50: "rgba(0, 0, 0, 0.5)"
-  black-transparent-60: "rgba(0, 0, 0, 0.6)"
-  black-transparent-70: "rgba(0, 0, 0, 0.7)"
-  black-transparent-80: "rgba(0, 0, 0, 0.8)"
-  black-transparent-90: "rgba(0, 0, 0, 0.9)"
-  black-transparent-100: "rgba(0, 0, 0, 1)"
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
index 2f389d2da4..5e4ccc2fd7 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
@@ -14,7 +14,7 @@ props:
     value: "#E6E8F0"
     comment: Strong default background color.
   color-background-stronger:
-    value: "#C1C4D6"
+    value: "{!palette-gray-30}"
     comment: Stronger default background color.
   color-background-strongest:
     value: "#696F8C"
@@ -23,13 +23,13 @@ props:
     value: "#F9FAFC"
     comment: Weak default background color.
   color-background-inverse:
-    value: "#101840"
+    value: "{!palette-gray-100}"
     comment: Inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-inverse-strong:
-    value: "#474D66"
+    value: "{!palette-gray-75}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-inverse-stronger:
-    value: "#696F8C"
+    value: "{!palette-gray-60}"
     comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse.
 
   # brand backgrounds
@@ -61,7 +61,7 @@ props:
     value: "#FFFFFF"
     comment: Background color used for the main page body.
   color-background-body-inverse:
-    value: "#101840"
+    value: "{!palette-gray-100}"
     comment: Inverse background color used for the main page body.
 
   # status
@@ -182,3 +182,14 @@ props:
   color-background-decorative-40-weakest:
     value: "F8F7FD"
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
+
+  #elevation background
+  color-background-inverse-weak-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse-weak elements.
+  color-background-inverse-strong-elevation:
+    value: "{!palette-gray-70}"
+    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-stronger-elevation:
+    value: "{!palette-gray-55}"
+    comment: Elevation token for color-background-inverse-stronger elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 8203df2cb0..3697cb3850 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -11,6 +11,8 @@ props:
   color-background-inverse-strong:
     value: "{!palette-gray-90}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
+  color-background-weaker:
+    value: "{!palette-gray-0}"
 
   # brand backgrounds
   color-background-brand:
@@ -61,3 +63,20 @@ props:
   color-background-decorative-40-weakest:
     value: "{!palette-purple-90}"
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
+
+  #elevation background
+  color-background-body-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-body elements.
+  color-background-weak-elevation:
+    value: "{!palette-gray-100}"
+    comment: Elevation token for color-background-weak elements.
+  color-background-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background elements.
+  color-background-inverse-weak-elevation:
+    value: "{!palette-gray-100}"
+    comment: Elevation token for color-background-inverse-weak elements.
+  color-background-inverse-strong-elevation:
+    value: "{!palette-gray-85}"
+    comment: Elevation token for color-background-inverse-strong elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
index a728db6d75..8ad8c41a85 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
@@ -86,3 +86,11 @@ props:
   color-background-decorative-40-weakest:
     value: "{!palette-purple-05}"
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
+
+  #elevation background
+  color-background-inverse-weak-elevation:
+    value: "{!palette-gray-100}"
+    comment: Elevation token for color-background-inverse-weak elements.
+  color-background-inverse-strong-elevation:
+    value: "{!palette-gray-85}"
+    comment: Elevation token for color-background-inverse-strong elements.
diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
index f75e26094c..1e7b20ed73 100644
--- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
@@ -22,7 +22,7 @@ Object {
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(174, 178, 193)",
+      "color": "rgb(142, 150, 174)",
     },
   },
   "labels": Object {
@@ -188,7 +188,7 @@ Object {
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(174, 178, 193)",
+      "color": "rgb(142, 150, 174)",
     },
   },
   "labels": Object {
diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx
index f6e7b965e5..014872cd3b 100644
--- a/packages/paste-website/src/__tests__/colorGradient.test.tsx
+++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx
@@ -4,14 +4,19 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20",
 const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"];
 const aliasValues = [
   "#121c2d",
+  "#17243a",
   "#1f304c",
+  "#25395b",
   "#394762",
+  "#404f6e",
   "#4b5671",
   "#606b85",
+  "#67728e",
   "#8891aa",
-  "#aeb2c1",
+  "#8e96ae",
   "#cacdd8",
   "#e1e3ea",
+  "#edeef2",
   "#f4f4f6",
 ];
 

From ad76f9e26b89f7d28d82b0fb632b62463f1cbc92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Tue, 14 Jan 2025 16:46:28 -0500
Subject: [PATCH 2/6] chore(website): add functionality to hide certain tokens
 from list

---
 .../src/components/tokens-list/index.tsx          | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index ef7a0a519a..42cedf9d3e 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -40,6 +40,8 @@ const Content: React.FC<React.PropsWithChildren<BoxProps>> = (props) => (
 const defaultTheme = "twilio";
 const defaultFormat = "css";
 
+const hiddenTokens = { "box-shadows": ["shadow", "shadow-low", "shadow-high", "shadow-card"] };
+
 const getTokenListByTheme = (theme: Themes): Tokens => {
   let tokenList: Tokens = TwilioThemeTokens.tokens;
 
@@ -61,6 +63,19 @@ const getTokenListByTheme = (theme: Themes): Tokens => {
       tokenList = TwilioThemeTokens.tokens;
       break;
   }
+
+  // Remove hidden tokens from tokenList
+  Object.keys(hiddenTokens).forEach((category) => {
+    const cat = category as keyof typeof hiddenTokens;
+    hiddenTokens[cat].forEach((token) => {
+      tokenList[cat].forEach((tokenObj) => {
+        if (tokenObj.name === token) {
+          tokenList[cat] = tokenList[cat].filter((item) => item.name !== token);
+        }
+      });
+    });
+  });
+
   return tokenList;
 };
 

From 5216faf66bae363799d886af0ac5df765c581add Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Fri, 17 Jan 2025 12:15:58 -0500
Subject: [PATCH 3/6] chore: pr feedback

---
 .../paste-core/primitives/box/type-docs.json  |  2 +-
 .../primitives/sibling-box/type-docs.json     |  2 +-
 .../paste-core/primitives/text/type-docs.json |  2 +-
 .../__snapshots__/index.test.tsx.snap         | 71 ++++++++++---------
 .../tokens/aliases/color-palette.yml          | 10 +--
 .../tokens/aliases/color.yml                  |  1 -
 .../tokens/global/background-color.yml        |  2 +-
 .../tokens/global/box-shadow.yml              | 32 +++++----
 .../tokens/themes/dark/aliases/box-shadow.yml |  1 -
 .../themes/dark/aliases/color-palette.yml     | 12 ++++
 .../tokens/themes/dark/aliases/color.yml      | 14 ----
 .../themes/dark/global/background-color.yml   |  2 +-
 .../themes/dark/global/border-color.yml       |  1 -
 .../tokens/themes/dark/global/box-shadow.yml  | 14 ++--
 .../tokens/themes/dark/global/text-color.yml  |  1 -
 .../themes/evergreen/aliases/box-shadow.yml   |  1 -
 .../evergreen/aliases/color-palette.yml       | 12 ++++
 .../tokens/themes/evergreen/aliases/color.yml | 14 ----
 .../evergreen/global/background-color.yml     |  1 -
 .../themes/evergreen/global/border-color.yml  |  1 -
 .../themes/evergreen/global/text-color.yml    |  1 -
 .../twilio-dark/global/background-color.yml   |  2 +-
 .../src/__tests__/colorGradient.test.tsx      |  2 +-
 23 files changed, 99 insertions(+), 102 deletions(-)
 delete mode 100644 packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
 delete mode 100644 packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index f000c78519..c987a126e0 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 6186fbada1..24b82c3189 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
index 6cc03034ab..ec4863fead 100644
--- a/packages/paste-core/primitives/text/type-docs.json
+++ b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 984ea69cc7..e2f3b3991d 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,13 +11,13 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -152,8 +152,9 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"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 #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
+  \\"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-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\\",
@@ -165,12 +166,12 @@ 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-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\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
-  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -200,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-inverse-elevation-10\\": \\"-1px -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(15, 22, 33, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -209,7 +210,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #17243a, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 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-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -498,7 +499,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -633,8 +634,9 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
+  \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
@@ -646,12 +648,12 @@ 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-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\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
-  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -681,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-inverse-elevation-10\\": \\"-1px -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(15, 22, 33, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -690,9 +692,9 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -979,7 +981,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1114,8 +1116,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
+  \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
@@ -1127,12 +1130,12 @@ 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-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\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
-  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -1162,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-inverse-elevation-10\\": \\"-1px -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(15, 22, 33, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1171,9 +1174,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
@@ -1454,13 +1457,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1504,7 +1507,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
-  \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\",
+  \\"color-background-weaker\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
@@ -1595,8 +1598,9 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"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 #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
+  \\"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-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\\",
@@ -1608,12 +1612,12 @@ 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-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\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
-  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -1643,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-inverse-elevation-10\\": \\"-1px -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(15, 22, 33, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1652,7 +1656,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"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 #17243a, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 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-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -1941,7 +1945,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\",
@@ -2076,8 +2080,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
+  \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\",
@@ -2089,12 +2094,12 @@ 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-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\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
-  \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -2124,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-inverse-elevation-10\\": \\"-1px -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(15, 22, 33, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -2133,9 +2138,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\",
+  \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index f42eddbd1a..f524ee34f6 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -41,7 +41,7 @@ aliases:
   palette-gray-80: "#394762"
   palette-gray-85: "#25395b"
   palette-gray-90: "#1f304c"
-  palette-gray-95: "#17243a"
+  palette-gray-95: "#19273E"
   palette-gray-100: "#121c2d"
   palette-gray-110: "#0F1621"
 
@@ -58,7 +58,6 @@ aliases:
   palette-gray-0-transparent-100: "rgba(255, 255, 255, 1)"
 
   ## Grays transparent based on dark gray
-  palette-gray-100-transparent-05: "rgba(18, 28, 45, 0.05)"
   palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)"
   palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)"
   palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)"
@@ -71,8 +70,11 @@ aliases:
   palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)"
 
   ## Grays transparent based on darkest gray
-  palette-gray-110-transparent-05: "rgba(15,22,33 0.05)"
-  palette-gray-110-transparent-10: "rgba(15,22,33 0.1)"
+  palette-gray-110-transparent-05: "rgba(15, 22, 33, 0.05)"
+  palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)"
+
+  ## Blacks transparent
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
 
   ## Blues transparent based on darkest blue
   palette-blue-100-transparent-10: "rgba(6, 3, 58, 0.1)"
diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml
index 4e05e7fde0..57c02860a2 100644
--- a/packages/paste-design-tokens/tokens/aliases/color.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color.yml
@@ -11,4 +11,3 @@ aliases:
   sun: "#FF7A00"
   white: "#FFFFFF"
   white-accent: "#F6FBFE"
-  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index eeb699e828..6dc9a25a20 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -35,7 +35,7 @@ props:
     comment: Weak background color used for containers.
   color-background-weaker:
     value: "{!palette-gray-0}"
-    comment: Weaker background color used for containers.
+    comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
 
   # brand backgrounds
   color-background-brand:
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 8b6ca9c726..ef487f1134 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -4,7 +4,6 @@ global:
 imports:
   - ../aliases/box-shadow.yml
   - ../aliases/offset.yml
-  - ../aliases/color.yml
 props:
   shadow-high:
     value: "{!shadow-elevation-30}"
@@ -262,28 +261,31 @@ props:
   # Elevation
   shadow-elevation-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-15}"
-    comment: Shadow border for elevation.
+    comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-top-05:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-15}"
-    comment: Top shadow border for elevation.
+    comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-bottom-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-15}"
-    comment: Bottom shadow border for elevation.
+    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-inverse-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
-    comment: Shadow border for inverse elevation.
-  shadow-elevation-inverse-left-05:
+    comment: Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations.
+  shadow-elevation-bottom-inverse-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Left shadow border for inverse elevation.
+    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.
   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: Shadow border for elevation.
-  shadow-inverse-elevation-10:
-    value: "{!offset-negative-05} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
-    comment: Shadow border for inverse elevation.
+    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}"
+    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-100-transparent-05}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Shadow border for elevation.
+    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}"
+    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-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Left shadow border for elevation.
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!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}"
+    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/dark/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
index b29d7455a8..95866b1c1e 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
@@ -2,7 +2,6 @@ imports:
   - ../../../aliases/box-shadow.yml
   - ../../../aliases/offset.yml
   - ./color-palette.yml
-  - ./color.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
index 530c80ddd5..f062895d37 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
@@ -99,6 +99,18 @@ aliases:
   palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)"
   palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)"
 
+  ## Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
+
   ## Greens
   palette-green-10: "#edfdf3"
   palette-green-20: "#d1fae0"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
deleted file mode 100644
index 6f220f0ce6..0000000000
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-imports:
-  - ../../../aliases/color.yml
-
-aliases:
-  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
-  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
-  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
-  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
-  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
-  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
-  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
-  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
-  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
-  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index 74e7443361..a08aa9b979 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -3,7 +3,6 @@ global:
   category: background-color
 imports:
   - ../../../global/background-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # base background
@@ -33,6 +32,7 @@ props:
     comment: Weak default background color.
   color-background-weaker:
     value: "{!palette-gray-100}"
+    comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
 
   # brand backgrounds
   color-background-brand:
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
index 47c7c0b7c0..d46ed7a693 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
@@ -3,7 +3,6 @@ global:
   category: border-color
 imports:
   - ../../../global/border-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   color-border-strong:
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
index 506943e9b1..e0bd31ed69 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -188,19 +188,19 @@ props:
   # Elevation
   shadow-elevation-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
-    comment: Shadow border for elevation.
+    comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-top-05:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Top shadow border for elevation.
+    comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-bottom-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Bottom shadow border for elevation.
+    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}"
-    comment: Shadow border for elevation.
+    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: Shadow border for elevation.
+    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-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Left shadow border for elevation.
+    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}"
+    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/dark/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
index bc2825bb23..d9ec03766d 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
@@ -3,7 +3,6 @@ global:
   category: text-color
 imports:
   - ../../../global/text-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # body text
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
index b29d7455a8..95866b1c1e 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
@@ -2,7 +2,6 @@ imports:
   - ../../../aliases/box-shadow.yml
   - ../../../aliases/offset.yml
   - ./color-palette.yml
-  - ./color.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml
index 530c80ddd5..b40682f9bc 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml
@@ -99,6 +99,18 @@ aliases:
   palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)"
   palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)"
 
+  # Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
+
   ## Greens
   palette-green-10: "#edfdf3"
   palette-green-20: "#d1fae0"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
deleted file mode 100644
index 6f220f0ce6..0000000000
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-imports:
-  - ../../../aliases/color.yml
-
-aliases:
-  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
-  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
-  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
-  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
-  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
-  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
-  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
-  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
-  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
-  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
index 5e4ccc2fd7..a0dfd4558a 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
@@ -3,7 +3,6 @@ global:
   category: background-color
 imports:
   - ../../../global/background-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # base background
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
index 719b8281f9..721f3ae0c8 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
@@ -3,7 +3,6 @@ global:
   category: border-color
 imports:
   - ../../../global/border-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   color-border-strong:
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
index decdbae90f..6ab24ee943 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
@@ -3,7 +3,6 @@ global:
   category: text-color
 imports:
   - ../../../global/text-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # body text
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 3697cb3850..7613686f9b 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -12,7 +12,7 @@ props:
     value: "{!palette-gray-90}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-weaker:
-    value: "{!palette-gray-0}"
+    value: "{!palette-gray-100}"
 
   # brand backgrounds
   color-background-brand:
diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx
index 014872cd3b..033d0e6c6d 100644
--- a/packages/paste-website/src/__tests__/colorGradient.test.tsx
+++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx
@@ -4,7 +4,7 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20",
 const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"];
 const aliasValues = [
   "#121c2d",
-  "#17243a",
+  "#19273E",
   "#1f304c",
   "#25395b",
   "#394762",

From c86ebb61e81d8876d62630dcfeb565bacd88d8c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Fri, 17 Jan 2025 15:59:26 -0500
Subject: [PATCH 4/6] chore: roxana catches

---
 .../__snapshots__/index.test.tsx.snap         | 28 +++++++++----------
 .../tokens/aliases/box-shadow.yml             |  8 +++---
 .../tokens/global/box-shadow.yml              | 14 +++++-----
 .../tokens/themes/dark/aliases/box-shadow.yml |  8 +++---
 .../tokens/themes/dark/global/box-shadow.yml  | 12 ++++----
 .../themes/evergreen/aliases/box-shadow.yml   |  8 +++---
 6 files changed, 39 insertions(+), 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
index e2f3b3991d..769ab5d08c 100644
--- 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
index 4b81813ef1..1078fd3a9b 100644
--- 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
index ef487f1134..f7d685b265 100644
--- 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
index 95866b1c1e..15f410f617 100644
--- 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
index e0bd31ed69..f802ce9356 100644
--- 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
index 95866b1c1e..15f410f617 100644
--- 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}"

From 8d2e72f20e1f2cb339f5154cf5420a66e2948cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Fri, 17 Jan 2025 16:45:43 -0500
Subject: [PATCH 5/6] chore: sarah catches

---
 .../__tests__/__snapshots__/index.test.tsx.snap        | 10 +++++-----
 .../paste-design-tokens/tokens/global/box-shadow.yml   |  2 +-
 .../paste-website/src/components/tokens-list/index.tsx |  5 ++++-
 3 files changed, 10 insertions(+), 7 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
index 769ab5d08c..ab2623772d 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -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\\": \\"1px 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 0 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\\",
@@ -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\\": \\"1px 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 0 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\\",
@@ -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\\": \\"1px 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 0 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\\",
@@ -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\\": \\"1px 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 0 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\\",
@@ -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\\": \\"1px 1px 0 0 #1f304c\\",
+  \\"shadow-elevation-right-inverse-05\\": \\"1px 0 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\\",
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index f7d685b265..45eaa882fc 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -275,7 +275,7 @@ 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-05} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    value: "{!offset-05} {!offset-0} {!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}"
diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index 42cedf9d3e..0e50f3b7e0 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -40,7 +40,10 @@ const Content: React.FC<React.PropsWithChildren<BoxProps>> = (props) => (
 const defaultTheme = "twilio";
 const defaultFormat = "css";
 
-const hiddenTokens = { "box-shadows": ["shadow", "shadow-low", "shadow-high", "shadow-card"] };
+const hiddenTokens = {
+  "box-shadows": ["shadow", "shadow-low", "shadow-high", "shadow-card"],
+  "color-schemes": ["color-scheme"],
+};
 
 const getTokenListByTheme = (theme: Themes): Tokens => {
   let tokenList: Tokens = TwilioThemeTokens.tokens;

From 427f79c862f8091c0a2d1d056afb9d2270207f7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Fri, 17 Jan 2025 16:49:44 -0500
Subject: [PATCH 6/6] chore: oops danger

---
 .changeset/ninety-avocados-shout.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/ninety-avocados-shout.md b/.changeset/ninety-avocados-shout.md
index 7ebe792601..904cf75b43 100644
--- a/.changeset/ninety-avocados-shout.md
+++ b/.changeset/ninety-avocados-shout.md
@@ -1,5 +1,6 @@
 ---
 "@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
 ---
 
 [Design Tokens] Update aliases and add new tokens for elevation foundations