From 92ab7a2ae67ef1b4600b1b657853c8d895e39277 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 3 Mar 2025 17:08:49 -0600 Subject: [PATCH 1/4] feat(theming): updated component tokens ready for upcoming theme --- .changeset/brown-zebras-try.md | 9 +++++++++ .changeset/neat-dancers-shake.md | 6 ++++++ .../paste-core/components/button/src/PrimaryButton.tsx | 2 +- .../paste-core/components/button/src/SecondaryButton.tsx | 4 ++-- packages/paste-core/components/card/src/Card.tsx | 2 +- .../input-box/src/FauxInput/DefaultFauxInput.tsx | 2 +- packages/paste-core/components/table/src/TBody.tsx | 2 +- .../tokens/global/background-color.yml | 3 +++ .../tokens/themes/dark/global/background-color.yml | 7 +++++-- .../tokens/themes/dark/global/box-shadow.yml | 2 +- 10 files changed, 30 insertions(+), 9 deletions(-) create mode 100644 .changeset/brown-zebras-try.md create mode 100644 .changeset/neat-dancers-shake.md diff --git a/.changeset/brown-zebras-try.md b/.changeset/brown-zebras-try.md new file mode 100644 index 0000000000..d1f8ba0e84 --- /dev/null +++ b/.changeset/brown-zebras-try.md @@ -0,0 +1,9 @@ +--- +"@twilio-paste/button": patch +"@twilio-paste/card": patch +"@twilio-paste/input-box": patch +"@twilio-paste/table": patch +"@twilio-paste/core": patch +--- + +[Button, Card, InputBox, Table] updated design tokens used for background color in preperation for theme changes diff --git a/.changeset/neat-dancers-shake.md b/.changeset/neat-dancers-shake.md new file mode 100644 index 0000000000..359e8bd8ad --- /dev/null +++ b/.changeset/neat-dancers-shake.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/core": minor +--- + +[Design tokens] added new background token, colorBackgroundWeakest and updated dark mode user shadow token in dark themes diff --git a/packages/paste-core/components/button/src/PrimaryButton.tsx b/packages/paste-core/components/button/src/PrimaryButton.tsx index ad80a6c29d..f452904ee3 100644 --- a/packages/paste-core/components/button/src/PrimaryButton.tsx +++ b/packages/paste-core/components/button/src/PrimaryButton.tsx @@ -16,7 +16,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { boxShadow: "shadowBorderPrimary", _hover: { color: "colorTextPrimary", - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", boxShadow: "shadowBorderPrimary", }, _focus: { diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx index f29cc74141..4ee481f85b 100644 --- a/packages/paste-core/components/button/src/SecondaryButton.tsx +++ b/packages/paste-core/components/button/src/SecondaryButton.tsx @@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types"; */ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { color: "colorText", - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", boxShadow: "shadowBorderWeak", _hover: { color: "colorTextPrimary", - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", boxShadow: "shadowBorderPrimary", }, _focus: { diff --git a/packages/paste-core/components/card/src/Card.tsx b/packages/paste-core/components/card/src/Card.tsx index afd67a9e78..6f8cd5b189 100644 --- a/packages/paste-core/components/card/src/Card.tsx +++ b/packages/paste-core/components/card/src/Card.tsx @@ -45,7 +45,7 @@ const Card = React.forwardRef( paddingLeft={paddingLeft} paddingRight={paddingRight} paddingTop={paddingTop} - backgroundColor="colorBackgroundBody" + backgroundColor="colorBackgroundWeakest" > {children} diff --git a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx index 6afef18a5d..e859af0bee 100644 --- a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx +++ b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx @@ -6,7 +6,7 @@ import type { FauxInputProps } from "../types"; const DefaultFauxInput = React.forwardRef>( ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => { - let backgroundColor = "colorBackgroundBody" as BackgroundColor; + let backgroundColor = "colorBackgroundWeakest" as BackgroundColor; let boxShadow = "shadowBorder" as BoxShadow; let boxShadowHover = "shadowBorderPrimary" as BoxShadow; let boxShadowActive = "shadowBorderPrimaryStronger" as BoxShadow; diff --git a/packages/paste-core/components/table/src/TBody.tsx b/packages/paste-core/components/table/src/TBody.tsx index cb89641ed5..8c8c917879 100644 --- a/packages/paste-core/components/table/src/TBody.tsx +++ b/packages/paste-core/components/table/src/TBody.tsx @@ -11,7 +11,7 @@ const bodyCellStyles: BoxStyleProps = { const StyledTBody = styled.tbody( css({ - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", "& > tr:last-of-type > td": bodyCellStyles, "& > tr:last-of-type > th": bodyCellStyles, }), diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml index 58fd8c8776..8aaadc357c 100644 --- a/packages/paste-design-tokens/tokens/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/global/background-color.yml @@ -36,6 +36,9 @@ props: color-background-weaker: value: "{!palette-gray-0}" comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. + color-background-weakest: + value: "{!palette-gray-0}" + comment: The weakest background color used for containers. # brand backgrounds color-background-brand: 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 68f7a0beb2..a4af1d5ec9 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 @@ -33,7 +33,10 @@ props: 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. - + color-background-weakest: + value: "{!palette-gray-110}" + comment: The weakest background color used for containers. + # brand backgrounds color-background-brand: value: "{!palette-gray-100}" @@ -53,7 +56,7 @@ props: # user background color-background-user: - value: "{!palette-purple-70}" + value: "{!palette-purple-90}" comment: User avatar background color. # account backgrounds 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 a922734f5e..08b317da40 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 @@ -169,7 +169,7 @@ props: # User shadow-border-user: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for user. # Bottom borders From 959d6fea6f19c959a00aa742650062515795c584 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 3 Mar 2025 17:09:02 -0600 Subject: [PATCH 2/4] feat(docs): added the Elevations url --- .../site-wrapper/sidebar/SidebarNavigation.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx index 8cbb38f27b..40313fd72d 100644 --- a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx +++ b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx @@ -137,6 +137,18 @@ const SiteSidebarNavigation = (): JSX.Element => { Data visualization + + event({ + category: "Left Navigation", + action: "click-elevation", + label: "Elevation", + }) + } + > + Elevation + From 1c1d2931ee959802b4db130a7de4ea20cae361ae Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 3 Mar 2025 17:17:38 -0600 Subject: [PATCH 3/4] fix(docs): ci issues --- .changeset/brown-zebras-try.md | 2 +- .../__tests__/__snapshots__/index.test.tsx.snap | 9 +++++++-- .../tokens/themes/dark/global/background-color.yml | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.changeset/brown-zebras-try.md b/.changeset/brown-zebras-try.md index d1f8ba0e84..c9965b4bcb 100644 --- a/.changeset/brown-zebras-try.md +++ b/.changeset/brown-zebras-try.md @@ -6,4 +6,4 @@ "@twilio-paste/core": patch --- -[Button, Card, InputBox, Table] updated design tokens used for background color in preperation for theme changes +[Button, Card, InputBox, Table] updated design tokens used for background color in preparation for theme changes 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 6b217a690f..6a1c825964 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` "{ - \\"color-background-user\\": \\"rgb(88, 23, 189)\\", + \\"color-background-user\\": \\"rgb(34, 9, 74)\\", \\"color-background-notification\\": \\"rgb(214, 31, 31)\\", \\"color-background-trial\\": \\"rgb(5, 41, 18)\\", \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\", @@ -53,6 +53,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-background\\": \\"rgb(18, 28, 45)\\", \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", + \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\", \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\", \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", @@ -227,7 +228,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"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-user\\": \\"0 0 0 1px #5817bd\\", \\"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\\", \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\", @@ -537,6 +538,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-background\\": \\"rgb(244, 244, 246)\\", \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", + \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", @@ -1021,6 +1023,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-background\\": \\"rgb(244, 244, 246)\\", \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", + \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", @@ -1505,6 +1508,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background\\": \\"rgb(18, 28, 45)\\", \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", + \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\", \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\", \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", @@ -1989,6 +1993,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-background\\": \\"rgb(244, 244, 246)\\", \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", + \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", 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 a4af1d5ec9..9f8b1a05ed 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 @@ -36,7 +36,7 @@ props: color-background-weakest: value: "{!palette-gray-110}" comment: The weakest background color used for containers. - + # brand backgrounds color-background-brand: value: "{!palette-gray-100}" From 3f1b2b62c7b0364cea9a932c8557dfd8445018b1 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 4 Mar 2025 09:29:45 -0600 Subject: [PATCH 4/4] fix(docs): tests and typedocs --- .../paste-core/components/button/__tests__/button.test.tsx | 4 ++-- .../components/button/src/DestructiveSecondaryButton.tsx | 4 ++-- packages/paste-core/primitives/box/type-docs.json | 2 +- packages/paste-core/primitives/sibling-box/type-docs.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/paste-core/components/button/__tests__/button.test.tsx b/packages/paste-core/components/button/__tests__/button.test.tsx index 72cf243725..953d000408 100644 --- a/packages/paste-core/components/button/__tests__/button.test.tsx +++ b/packages/paste-core/components/button/__tests__/button.test.tsx @@ -371,7 +371,7 @@ describe("Button", () => { expect(button).not.toHaveStyleRule("text-align", "left"); expect(button).toHaveStyleRule("color", "colorText"); - expect(button).toHaveStyleRule("background-color", "colorBackgroundBody"); + expect(button).toHaveStyleRule("background-color", "colorBackgroundWeakest"); expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak"); expect(getByText("Secondary")).toHaveStyleRule("justify-content", "center"); @@ -430,7 +430,7 @@ describe("Button", () => { const button = getByTestId("destructive_secondary-styles"); expect(button).not.toHaveStyleRule("text-align", "left"); expect(button).toHaveStyleRule("color", "colorTextDestructive"); - expect(button).toHaveStyleRule("background-color", "colorBackgroundBody"); + expect(button).toHaveStyleRule("background-color", "colorBackgroundWeakest"); expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak"); expect(getByText("Destructive secondary")).toHaveStyleRule("justify-content", "center"); diff --git a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx index 7a59461b4a..995c004e7d 100644 --- a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx +++ b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx @@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types"; */ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { color: "colorTextDestructive", - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", boxShadow: "shadowBorderWeak", _hover: { color: "colorTextDestructive", - backgroundColor: "colorBackgroundBody", + backgroundColor: "colorBackgroundWeakest", boxShadow: "shadowBorderDestructive", }, _focus: { diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 318ce1cd51..50a0576543 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\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }", + "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 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 dbd03e55c8..0639a9955a 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\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }", + "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false,