From c958a2ff4ac7b8f70d823f3cca8f5522f74136f7 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 24 Jan 2025 12:31:55 -0800 Subject: [PATCH 01/10] fix: readd evergreen shadow borders and revert font-size-40 --- .../themes/evergreen/global/box-shadow.yml | 90 +++++++++++++++++++ .../themes/evergreen/global/font-size.yml | 2 + 2 files changed, 92 insertions(+) diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml index e6cf07ef18..6b74c7a83b 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml @@ -3,3 +3,93 @@ global: category: box-shadow imports: - ../../../global/box-shadow.yml +props: + shadow-border-weaker: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #EDEFF5" + comment: Weaker shadow border for disabled inputs. + shadow-border-weak: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #E6E8F0" + comment: Weak shadow border for disabled inputs. + shadow-border: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #D8DAE5" + comment: Shadow border for inputs. + shadow-border-strong: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #8F95B2" + comment: Strong shadow border for inputs. + shadow-border-primary-weaker: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #D6E0FF" + comment: "Weaker shadow border for primary interactions." + shadow-border-primary-weak: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #9DB5FF" + comment: "Weaker shadow border for primary interactions." + shadow-border-primary: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #3366FF" + comment: "Default shadow border for primary interactions." + shadow-border-primary-strong: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #2952CC" + comment: Strong shadow border for inputs hover. + shadow-border-primary-stronger: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #1F3D99" + comment: Stronger shadow border for inputs active. + shadow-border-primary-strongest: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #0C1E56" + comment: Strongest shadow border for inputs active. + shadow-border-destructive-weaker: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #F9DADA" + comment: Weaker shadow border for destructive interactions. + shadow-border-destructive-weak: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6" + comment: Weak shadow border for destructive interactions. + shadow-border-destructive: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343" + comment: Shadow border for destructive interactions. + shadow-border-destructive-strong: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636" + comment: Strong shadow border for destructive interactions + shadow-border-destructive-stronger: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828" + comment: Stronger shadow border for destructive interactions + shadow-border-destructive-strongest: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #310C0C" + comment: Strongest shadow border for destructive interactions + shadow-border-error-weak: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6" + comment: Shadow border for inverse error inputs. + shadow-border-error: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343" + comment: Shadow border for error inputs. + shadow-border-error-strong: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636" + comment: Shadow border for error inputs hover. + shadow-border-error-stronger: + value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828" + comment: Shadow border for error inputs hover. + + # Badge + shadow-border-bottom-neutral-weaker: + value: "{!offset-0} 1px {!offset-0} #9DB5FF" + comment: Weaker bottom shadow border for neutral status + shadow-border-bottom-warning-weaker: + value: "{!offset-0} 1px {!offset-0} #F2C8B6" + comment: Weaker bottom shadow border warning warning status + shadow-border-bottom-error-weaker: + value: "{!offset-0} 1px {!offset-0} #F4B6B6" + comment: Weaker bottom shadow border for error status + shadow-border-bottom-success-weaker: + value: "{!offset-0} 1px {!offset-0} #DCF2EA" + comment: Weaker bottom shadow border for success status + shadow-border-bottom-new-weaker: + value: "{!offset-0} 1px {!offset-0} #D0CAF4" + comment: Weaker bottom shadow border for new status + shadow-border-bottom-decorative-10-weaker: + value: "{!offset-0} 1px {!offset-0} #D8DAE5" + comment: Weaker bottom shadow border for decorative 10 + shadow-border-bottom-decorative-20-weaker: + value: "{!offset-0} 1px {!offset-0} #D6E0FF" + comment: Weaker bottom shadow border for decorative 20 + shadow-border-bottom-decorative-30-weaker: + value: "{!offset-0} 1px {!offset-0} #DCF2EA" + comment: Weaker bottom shadow border for decorative 30 + shadow-border-bottom-decorative-40-weaker: + value: "{!offset-0} 1px {!offset-0} #D0CAF4" + comment: Weaker bottom shadow border for decorative 40 diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/font-size.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/font-size.yml index 725370addb..16188bc40c 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/font-size.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/font-size.yml @@ -6,6 +6,8 @@ imports: props: font-size-10: value: "0.75rem" #12px + font-size-40: + value: "0.875rem" #14px, intentionally the same size as font-size-30 font-size-50: value: "1rem" #16px font-size-80: From e860ccc8d636c778210fa51e4f8a216fd951179b Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 24 Jan 2025 12:49:31 -0800 Subject: [PATCH 02/10] chore: add changeset --- .changeset/violet-elephants-ring.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/violet-elephants-ring.md diff --git a/.changeset/violet-elephants-ring.md b/.changeset/violet-elephants-ring.md new file mode 100644 index 0000000000..ca2e8d4e3e --- /dev/null +++ b/.changeset/violet-elephants-ring.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": major +"@twilio-paste/core": major +--- + +[Design tokens] Added shadow border tokens and font-size-40 token back to evergreen theme From de15fa8c109005789a93c8f7431f50a03424e4f9 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 24 Jan 2025 15:09:58 -0600 Subject: [PATCH 03/10] feat(storybook): include evergreen in stacked VRT view --- .storybook/preview.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f2207216c9..5fbb350e5d 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -248,6 +248,30 @@ export const decorators = [ + + + + + + + + + + + + ); From 8eb097d2ae86013e2367481a517fa24591e341ba Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 27 Jan 2025 09:55:42 -0600 Subject: [PATCH 04/10] chore(storybook): attempt to clear storybook cache in pipeline --- .storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 1b5ba5e0a8..704dd8ad9b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -16,7 +16,7 @@ const config: StorybookConfig = { ], framework: "@storybook/react-vite", features: { - interactionsDebugger: true, + interactionsDebugger: false, }, staticDirs: ["./static"], typescript: { From 7430760846df3324f38aa8b53d5505bed0b3cfdb Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 27 Jan 2025 09:58:32 -0600 Subject: [PATCH 05/10] chore(storybook): fix mmax height for Table --- .../table/stories/index.stories.tsx | 106 +++++++++--------- 1 file changed, 55 insertions(+), 51 deletions(-) diff --git a/packages/paste-core/components/table/stories/index.stories.tsx b/packages/paste-core/components/table/stories/index.stories.tsx index f7f5f0d973..5a457e7555 100644 --- a/packages/paste-core/components/table/stories/index.stories.tsx +++ b/packages/paste-core/components/table/stories/index.stories.tsx @@ -931,41 +931,43 @@ RowHeaders.storyName = "Row headers"; export const StickyHeaders = (): React.ReactNode => { return ( - - - - - - - - - - - - - - - {[...new Array(40).keys()].map((index) => ( - - - - + +
Column 1Column 2Column 3
Column 1Column 2Column 3
ContentContentContent
+ + + + + - ))} - - - - - - - - - - - - - -
Column 1Column 2Column 3
Column 1Column 2Column 3
Column 1Column 2Column 3
+ + Column 1 + Column 2 + Column 3 + + + + {[...new Array(5).keys()].map((index) => ( + + Content + Content + Content + + ))} + + + + Column 1 + Column 2 + Column 3 + + + Column 1 + Column 2 + Column 3 + + + + ); }; @@ -973,24 +975,26 @@ StickyHeaders.storyName = "Sticky headers"; export const BorderlessStickyHeaders = (): React.ReactNode => { return ( - - - - - - - - - - {[...new Array(40).keys()].map((index) => ( - - - - + +
Column 1Column 2Column 3
ContentContentContent
+ + + + + - ))} - -
Column 1Column 2Column 3
+ + + {[...new Array(5).keys()].map((index) => ( + + Content + Content + Content + + ))} + + + ); }; From 4c7e0b92ef16a16d34e6ea074f0b6e6f13233f6d Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 27 Jan 2025 10:01:54 -0600 Subject: [PATCH 06/10] chore(storybook): revert change to clear storybook cache --- .storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 704dd8ad9b..1b5ba5e0a8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -16,7 +16,7 @@ const config: StorybookConfig = { ], framework: "@storybook/react-vite", features: { - interactionsDebugger: false, + interactionsDebugger: true, }, staticDirs: ["./static"], typescript: { From bcbff7755196ccf33b4e4bf31853f03392675178 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 27 Jan 2025 10:14:05 -0600 Subject: [PATCH 07/10] chore(storybook): add storybook a11y fix --- .../paste-core/components/table/stories/index.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/table/stories/index.stories.tsx b/packages/paste-core/components/table/stories/index.stories.tsx index 5a457e7555..22ce64e562 100644 --- a/packages/paste-core/components/table/stories/index.stories.tsx +++ b/packages/paste-core/components/table/stories/index.stories.tsx @@ -931,7 +931,7 @@ RowHeaders.storyName = "Row headers"; export const StickyHeaders = (): React.ReactNode => { return ( - + @@ -975,7 +975,7 @@ StickyHeaders.storyName = "Sticky headers"; export const BorderlessStickyHeaders = (): React.ReactNode => { return ( - +
From 21b28e7c7dad467c05b07e853b1ee30d6c37d3b9 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 28 Jan 2025 08:34:41 -0600 Subject: [PATCH 08/10] feat(tokens): updated evergreen theme tokens --- .../themes/evergreen/global/background-color.yml | 3 --- .../tokens/themes/evergreen/global/box-shadow.yml | 5 +++++ .../tokens/themes/evergreen/global/text-color.yml | 11 +++++------ 3 files changed, 10 insertions(+), 9 deletions(-) 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 a0dfd4558a..593e6c60ed 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 @@ -18,9 +18,6 @@ props: color-background-strongest: value: "#696F8C" comment: Strongest default background color. - color-background-weak: - value: "#F9FAFC" - comment: Weak default background color. color-background-inverse: value: "{!palette-gray-100}" comment: Inverse background color for any container. Must be used on color-background-body-inverse. diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml index 6b74c7a83b..c81c78739c 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml @@ -93,3 +93,8 @@ props: shadow-border-bottom-decorative-40-weaker: value: "{!offset-0} 1px {!offset-0} #D0CAF4" comment: Weaker bottom shadow border for decorative 40 + + # Top borders + shadow-border-top-primary: + value: "{!offset-0} {!offset-negative-05} {!offset-0} #3366FF" + comment: Top shadow border for selected status of horizontal tabs \ No newline at end of file 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 6ab24ee943..5718275c7a 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 @@ -96,9 +96,6 @@ props: color-text-new: value: "#524988" comment: Color for text indicating a new status. - color-text-neutral: - value: "#1F3D99" - comment: Color for text indicating a neutral status. # icon color-text-icon: @@ -128,9 +125,6 @@ props: color-text-icon-warning: value: "#DE7548" comment: Icon color for indicating a warning. - color-text-icon-neutral: - value: "#2952CC" - comment: Icon color for being neutral. color-text-icon-brand-highlight: value: "#52BD94" comment: Segment brand color used for the Segment logo. @@ -153,3 +147,8 @@ props: color-text-user: value: "#6D2ED1" comment: Text color for user avatar. + + # primary + color-text-primary: + value: "#3366FF" + comment: Primary text. From 9b656721a4234d53b496f1dfeef0b0c4e5c44750 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 28 Jan 2025 08:36:42 -0600 Subject: [PATCH 09/10] chore(changeset): update changeset versions --- .changeset/violet-elephants-ring.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/violet-elephants-ring.md b/.changeset/violet-elephants-ring.md index ca2e8d4e3e..03a670cfe4 100644 --- a/.changeset/violet-elephants-ring.md +++ b/.changeset/violet-elephants-ring.md @@ -1,6 +1,6 @@ --- -"@twilio-paste/design-tokens": major -"@twilio-paste/core": major +"@twilio-paste/design-tokens": patch +"@twilio-paste/core": patch --- [Design tokens] Added shadow border tokens and font-size-40 token back to evergreen theme From 56e84d7cd9dafff3682b187d59ab36de0d1b172e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 28 Jan 2025 08:45:14 -0600 Subject: [PATCH 10/10] chore(ci): formatting fix --- .../tokens/themes/evergreen/global/box-shadow.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml index c81c78739c..7b2cd218f4 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml @@ -97,4 +97,4 @@ props: # Top borders shadow-border-top-primary: value: "{!offset-0} {!offset-negative-05} {!offset-0} #3366FF" - comment: Top shadow border for selected status of horizontal tabs \ No newline at end of file + comment: Top shadow border for selected status of horizontal tabs