diff --git a/.changeset/three-terms-teach.md b/.changeset/three-terms-teach.md new file mode 100644 index 0000000000..d369e3aa34 --- /dev/null +++ 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 index af0a2c2947..65eb97dedb 100644 --- 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 index 8c98e8d5df..48d44805cd 100644 --- 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 index 05a59065a0..90b59bdb2f 100644 --- 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 index 83fd383d54..6c47f8de61 100644 --- 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 index 13587f053e..3ae9a24caf 100644 --- 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 index 48b1b3a3d0..e6588c1a12 100644 --- 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.