Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

feat(design-tokens): add elevation tokens #4207

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(design-tokens): add elevation tokens #4207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7b09f4
feat(design-tokens): add elevation tokens
nkrantz Jan 14, 2025
de02930
chore(website): add functionality to hide certain tokens from list
nkrantz Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/ninety-avocados-shout.md
View file
Open in desktop
Original file line number Diff 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
4 changes: 2 additions & 2 deletions packages/paste-core/primitives/box/type-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/primitives/sibling-box/type-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/primitives/text/type-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
109 changes: 97 additions & 12 deletions packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 12 additions & 2 deletions packages/paste-design-tokens/tokens/aliases/color-palette.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -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)"
Expand All @@ -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)"
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-design-tokens/tokens/aliases/color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
1 change: 1 addition & 0 deletions packages/paste-design-tokens/tokens/aliases/offset.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ aliases:
offset-90: "32px"
offset-negative-05: -1px
offset-negative-20: -4px
offset-negative-60: -16px
26 changes: 26 additions & 0 deletions packages/paste-design-tokens/tokens/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
33 changes: 31 additions & 2 deletions packages/paste-design-tokens/tokens/global/box-shadow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 3 additions & 3 deletions packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
20 changes: 10 additions & 10 deletions packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
13 changes: 13 additions & 0 deletions packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
24 changes: 22 additions & 2 deletions packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 3 additions & 3 deletions packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
20 changes: 10 additions & 10 deletions packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
21 changes: 16 additions & 5 deletions packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
19 changes: 19 additions & 0 deletions packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
8 changes: 8 additions & 0 deletions packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Loading
Loading