feat(tokens): add notification tokens (#3987)

* feat(tokens): add notification tokens * feat(tokens): change box shadow value to 0 1px 0 * feat(tokens): add changeset * feat(tokens): update typedocs and test
twilio-labs · Jul 17, 2024 · b04532d · b04532d
1 parent 3ab0e46
commit b04532d
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 5 deletions.
diff --git a/.changeset/three-terms-teach.md b/.changeset/three-terms-teach.md
@@ -0,0 +1,9 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design tokens]: Add new notification tokens:
+- color-background-notification
+- shadow-border-notification
+- shadow-border-bottom-notification-stronger
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Design Tokens matches the Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(88, 23, 189)\\",
+  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -174,6 +175,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"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-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\\",
@@ -195,6 +197,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
@@ -433,6 +436,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
 exports[`Design Tokens matches the Global theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
+  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -604,6 +608,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"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-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\\",
@@ -625,6 +630,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -863,6 +869,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
 exports[`Design Tokens matches the Sendgrid theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
+  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1034,6 +1041,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"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-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\\",
@@ -1055,6 +1063,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -1293,6 +1302,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
 exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
+  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -1464,6 +1474,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"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-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\\",
@@ -1485,6 +1496,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
@@ -1723,6 +1735,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 exports[`Design Tokens matches the Twilio theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(250, 247, 253)\\",
+  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1894,6 +1907,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"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-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\\",
@@ -1915,6 +1929,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",

diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -205,3 +205,8 @@ props:
   color-background-decorative-40-weakest:
     value: "{!palette-purple-10}"
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
+
+  #notification
+  color-background-notification:
+    value: "{!palette-red-60}"
+    comment: Background color used for notifications.
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -222,3 +222,11 @@ props:
   shadow-border-user:
     value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-50}"
     comment: Shadow border for user.
+
+  # Notification
+  shadow-border-notification:
+    value: "{!offset-0} 1px {!offset-0} {!palette-red-60}"
+    comment: Shadow border for notification.
+  shadow-border-bottom-notification-stronger:
+    value: "{!offset-0} 1px {!offset-0} {!palette-red-90}"
+    comment: Stronger bottom shadow border for notification.