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 (
-
-
-
- Column 1 |
- Column 2 |
- Column 3 |
-
-
- Column 1 |
- Column 2 |
- Column 3 |
-
-
-
- {[...new Array(40).keys()].map((index) => (
-
- Content |
- Content |
- Content |
+
+
+
+
+ Column 1 |
+ Column 2 |
+ Column 3 |
- ))}
-
-
-
- Column 1 |
- Column 2 |
- Column 3 |
-
-
- Column 1 |
- Column 2 |
- Column 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 (
-
-
-
- Column 1 |
- Column 2 |
- Column 3 |
-
-
-
- {[...new Array(40).keys()].map((index) => (
-
- Content |
- Content |
- Content |
+
+
+
+
+ Column 1 |
+ Column 2 |
+ Column 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.