From c958a2ff4ac7b8f70d823f3cca8f5522f74136f7 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 24 Jan 2025 12:31:55 -0800 Subject: [PATCH 1/4] 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 2/4] 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 3/4] 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 f37056f2a97fc30bc13826b76a771f94de9fe950 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 27 Jan 2025 09:35:24 -0600 Subject: [PATCH 4/4] 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: {