Merge branch 'main' into snyk-fix-fd339af5852fb832397bb149ef3b1f25

.changeset/wild-kings-tap.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
+---
+
+[Design Tokens] Update box shadow tokens. Remove hardcoded values.

packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap

@@ -138,7 +138,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-warning-weaker\\": \\"0 1px 0 #541914\\",
   \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #1f304c\\",
-  \\"shadow-border-top-inverse-strongest\\": \\"0px -1px 0 #cce4ff\\",
+  \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
@@ -165,7 +165,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
-  \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\",
+  \\"shadow-border-top-primary\\": \\"0 -1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #0d3a1f\\",
   \\"shadow-border-primary-strong\\": \\"0 0 0 1px #99cdff\\",
   \\"shadow-border-brand-30\\": \\"mint\\",
@@ -174,12 +174,12 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
-  \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
+  \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
+  \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
@@ -582,7 +582,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-warning-weaker\\": \\"0 1px 0 #fddcc4\\",
   \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"shadow-border-top-inverse-strongest\\": \\"0px -1px 0 #cce4ff\\",
+  \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
@@ -609,7 +609,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
-  \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\",
+  \\"shadow-border-top-primary\\": \\"0 -1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #d1fae0\\",
   \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\",
   \\"shadow-border-brand-30\\": \\"mint\\",
@@ -618,12 +618,12 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
-  \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
+  \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
+  \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
@@ -1026,7 +1026,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-warning-weaker\\": \\"0 1px 0 #fddcc4\\",
   \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"shadow-border-top-inverse-strongest\\": \\"0px -1px 0 #cce4ff\\",
+  \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
@@ -1053,7 +1053,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
-  \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\",
+  \\"shadow-border-top-primary\\": \\"0 -1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #d1fae0\\",
   \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\",
   \\"shadow-border-brand-30\\": \\"mint\\",
@@ -1062,12 +1062,12 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
-  \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
+  \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
+  \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
@@ -1470,7 +1470,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-warning-weaker\\": \\"0 1px 0 #c35323\\",
   \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #043cb5\\",
-  \\"shadow-border-top-inverse-strongest\\": \\"0px -1px 0 #cce4ff\\",
+  \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
@@ -1497,7 +1497,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
-  \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\",
+  \\"shadow-border-top-primary\\": \\"0 -1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-border-primary-strong\\": \\"0 0 0 1px #99cdff\\",
   \\"shadow-border-brand-30\\": \\"mint\\",
@@ -1506,12 +1506,12 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
-  \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
+  \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
+  \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
@@ -1914,7 +1914,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-warning-weaker\\": \\"0 1px 0 #ffb37a\\",
   \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"shadow-border-top-inverse-strongest\\": \\"0px -1px 0 #cce4ff\\",
+  \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\",
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
@@ -1941,7 +1941,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
-  \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\",
+  \\"shadow-border-top-primary\\": \\"0 -1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #7beaa5\\",
   \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\",
   \\"shadow-border-brand-30\\": \\"mint\\",
@@ -1950,12 +1950,12 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #c8aff0\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
-  \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
+  \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
+  \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",

packages/paste-design-tokens/tokens/aliases/offset.yml

@@ -1,11 +1,15 @@
 aliases:
   offset-0: "0" # Needs to be quoted or will be interpreted as 'false'
+  offset-05: "1px"
   offset-10: "2px"
+  offset-15: "3px"
   offset-20: "4px"
+  offset-25: "5px"
   offset-30: "6px"
   offset-40: "8px"
   offset-50: "12px"
   offset-60: "16px"
   offset-70: "20px"
   offset-80: "24px"
   offset-90: "32px"
+  offset-negative-05: -1px