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
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: {
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-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: