diff --git a/.changeset/violet-elephants-ring.md b/.changeset/violet-elephants-ring.md new file mode 100644 index 0000000000..03a670cfe4 --- /dev/null +++ b/.changeset/violet-elephants-ring.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": patch +"@twilio-paste/core": patch +--- + +[Design tokens] Added shadow border tokens and font-size-40 token back to evergreen theme 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 = [ + + + + + + + + + + + + ); diff --git a/packages/paste-core/components/table/stories/index.stories.tsx b/packages/paste-core/components/table/stories/index.stories.tsx index f7f5f0d973..22ce64e562 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 + + ))} + + + ); }; 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 e6cf07ef18..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 @@ -3,3 +3,98 @@ 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 + + # 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 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: 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.