feat(design-tokens): add elevation tokens

nkrantz · nkrantz · commit f7b09f48b6ca · 2025-01-14T15:29:15.000-05:00
diff --git a/.changeset/ninety-avocados-shout.md 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@twilio-paste/design-tokens": minor
 +---
++
 +[Design Tokens] Update aliases and add new tokens for elevation foundations