diff --git a/.changeset/flat-rice-report.md b/.changeset/flat-rice-report.md new file mode 100644 index 0000000000..8519b2a48f --- /dev/null +++ b/.changeset/flat-rice-report.md @@ -0,0 +1,10 @@ +--- +"@twilio-paste/chat-composer": patch +"@twilio-paste/combobox": patch +"@twilio-paste/menu": patch +"@twilio-paste/topbar": patch +"@twilio-paste/design-tokens": patch +"@twilio-paste/core": patch +--- + +Visible changes in dark themes only. Redarkened color-background-weak and added color-background-weaker-elevation diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx index ad754decfe..9a5ac9a537 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx @@ -82,7 +82,7 @@ const ChatComposerAttachmentCard = React.forwardRef => ({ function getBackgroundColor(highlightedProp?: boolean, selectedProp?: boolean): BackgroundColor { if (highlightedProp && selectedProp) { - return "colorBackgroundWeak"; + return "colorBackgroundWeakerElevation"; } if (highlightedProp || selectedProp) { return "colorBackgroundBodyElevationPrimary"; diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx index cb5fba3843..7085f65531 100644 --- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx +++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx @@ -101,7 +101,7 @@ export const StyledMenuItem = React.forwardRef( element={element} width="100%" minHeight="sizeTopbar" - backgroundColor="colorBackgroundWeakElevation" + backgroundColor="colorBackgroundWeak" boxShadow="shadowElevationBottom05" paddingX="space70" position="sticky" diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 270be1becf..1c2d677cbb 100644 --- a/packages/paste-core/primitives/box/type-docs.json +++ b/packages/paste-core/primitives/box/type-docs.json @@ -767,7 +767,7 @@ "description": "Responsive prop for the CSS `background-attachment` property" }, "backgroundColor": { - "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }", + "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 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 791c96521e..ee5fb0a6de 100644 --- a/packages/paste-core/primitives/sibling-box/type-docs.json +++ b/packages/paste-core/primitives/sibling-box/type-docs.json @@ -869,7 +869,7 @@ "description": "Responsive prop for the CSS `background-attachment` property" }, "backgroundColor": { - "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }", + "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 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 db69f7a88d..9461632cea 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -16,12 +16,13 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\", \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", + \\"color-background-weaker-elevation\\": \\"rgb(24, 37, 60)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\", - \\"color-background-weak\\": \\"rgb(24, 37, 60)\\", + \\"color-background-weak\\": \\"rgb(18, 28, 45)\\", \\"color-background-primary\\": \\"rgb(2, 99, 224)\\", \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-busy\\": \\"rgb(244, 124, 34)\\", @@ -502,6 +503,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"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-weaker-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", @@ -988,6 +990,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"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-weaker-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", @@ -1474,12 +1477,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\", \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\", + \\"color-background-weaker-elevation\\": \\"rgb(24, 37, 60)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\", - \\"color-background-weak\\": \\"rgb(24, 37, 60)\\", + \\"color-background-weak\\": \\"rgb(18, 28, 45)\\", \\"color-background-primary\\": \\"rgb(0, 109, 250)\\", \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-busy\\": \\"rgb(244, 124, 34)\\", @@ -1960,6 +1964,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"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-weaker-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml index 90eff91951..204a662d11 100644 --- a/packages/paste-design-tokens/tokens/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/global/background-color.yml @@ -227,6 +227,9 @@ props: color-background-weak-elevation: value: "{!palette-gray-05}" comment: Elevation token for color-background-weak elements. + color-background-weaker-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. 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 ed52cd2405..cfed8bb260 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 @@ -28,7 +28,7 @@ props: value: "{!palette-gray-80}" comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse. color-background-weak: - value: "{!palette-gray-95}" + value: "{!palette-gray-100}" comment: Weak default background color. color-background-weaker: value: "{!palette-gray-100}" @@ -207,6 +207,9 @@ props: color-background-weak-elevation: value: "{!palette-gray-90}" comment: Elevation token for color-background-weak elements. + color-background-weaker-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background-weak elements. color-background-elevation: value: "{!palette-gray-90}" comment: Elevation token for color-background elements. diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png b/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png index 2e73fc7d1b..2ba4a833b7 100644 Binary files a/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png and b/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png differ