Skip to content

Commit b04532d

Browse files
PixeledCodePixeledCode
authored
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
1 parent 3ab0e46 commit b04532d

File tree

7 files changed

+42
-5
lines changed

7 files changed

+42
-5
lines changed

‎.changeset/three-terms-teach.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@twilio-paste/design-tokens": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Design tokens]: Add new notification tokens:
7+
- color-background-notification
8+
- shadow-border-notification
9+
- shadow-border-bottom-notification-stronger

‎packages/paste-core/primitives/box/type-docs.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -727,7 +727,7 @@
727727
"description": "Responsive prop for the CSS `background-attachment` property"
728728
},
729729
"backgroundColor": {
730-
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
730+
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
731731
"defaultValue": null,
732732
"required": false,
733733
"externalProp": false,
@@ -958,7 +958,7 @@
958958
"description": "Responsive prop for the CSS `bottom` property"
959959
},
960960
"boxShadow": {
961-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
961+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
962962
"defaultValue": null,
963963
"required": false,
964964
"externalProp": false,

‎packages/paste-core/primitives/sibling-box/type-docs.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -829,7 +829,7 @@
829829
"description": "Responsive prop for the CSS `background-attachment` property"
830830
},
831831
"backgroundColor": {
832-
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
832+
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }",
833833
"defaultValue": null,
834834
"required": false,
835835
"externalProp": false,
@@ -1060,7 +1060,7 @@
10601060
"description": "Responsive prop for the CSS `bottom` property"
10611061
},
10621062
"boxShadow": {
1063-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
1063+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
10641064
"defaultValue": null,
10651065
"required": false,
10661066
"externalProp": false,

‎packages/paste-core/primitives/text/type-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@
531531
"description": "Responsive prop for the CSS `bottom` property"
532532
},
533533
"boxShadow": {
534-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
534+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 67 more ... | { ...; }",
535535
"defaultValue": null,
536536
"required": false,
537537
"externalProp": false,

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`Design Tokens matches the Dark theme 1`] = `
44
"{
55
\\"color-background-user\\": \\"rgb(88, 23, 189)\\",
6+
\\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
67
\\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
78
\\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
89
\\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -174,6 +175,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
174175
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
175176
\\"shadow-border-brand-20\\": \\"sky\\",
176177
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
178+
\\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
177179
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
178180
\\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
179181
\\"shadow-border\\": \\"0 0 0 1px #606b85\\",
@@ -195,6 +197,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
195197
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
196198
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
197199
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
200+
\\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
198201
\\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\",
199202
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
200203
\\"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`] = `
433436
exports[`Design Tokens matches the Global theme 1`] = `
434437
"{
435438
\\"color-background-user\\": \\"rgb(200, 175, 240)\\",
439+
\\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
436440
\\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
437441
\\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
438442
\\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -604,6 +608,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
604608
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
605609
\\"shadow-border-brand-20\\": \\"sky\\",
606610
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
611+
\\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
607612
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
608613
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
609614
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
@@ -625,6 +630,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
625630
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
626631
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
627632
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
633+
\\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
628634
\\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
629635
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
630636
\\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -863,6 +869,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
863869
exports[`Design Tokens matches the Sendgrid theme 1`] = `
864870
"{
865871
\\"color-background-user\\": \\"rgb(200, 175, 240)\\",
872+
\\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
866873
\\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
867874
\\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
868875
\\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1034,6 +1041,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
10341041
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
10351042
\\"shadow-border-brand-20\\": \\"sky\\",
10361043
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
1044+
\\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
10371045
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
10381046
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
10391047
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
@@ -1055,6 +1063,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
10551063
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
10561064
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
10571065
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
1066+
\\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
10581067
\\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
10591068
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
10601069
\\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
@@ -1293,6 +1302,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
12931302
exports[`Design Tokens matches the Twilio Dark theme 1`] = `
12941303
"{
12951304
\\"color-background-user\\": \\"rgb(34, 9, 74)\\",
1305+
\\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
12961306
\\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
12971307
\\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
12981308
\\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -1464,6 +1474,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
14641474
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
14651475
\\"shadow-border-brand-20\\": \\"sky\\",
14661476
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
1477+
\\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
14671478
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
14681479
\\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
14691480
\\"shadow-border\\": \\"0 0 0 1px #606b85\\",
@@ -1485,6 +1496,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
14851496
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
14861497
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
14871498
\\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
1499+
\\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
14881500
\\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
14891501
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
14901502
\\"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`] = `
17231735
exports[`Design Tokens matches the Twilio theme 1`] = `
17241736
"{
17251737
\\"color-background-user\\": \\"rgb(250, 247, 253)\\",
1738+
\\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
17261739
\\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
17271740
\\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
17281741
\\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1894,6 +1907,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
18941907
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
18951908
\\"shadow-border-brand-20\\": \\"sky\\",
18961909
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
1910+
\\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
18971911
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
18981912
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
18991913
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
@@ -1915,6 +1929,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
19151929
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
19161930
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
19171931
\\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
1932+
\\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
19181933
\\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
19191934
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
19201935
\\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",

‎packages/paste-design-tokens/tokens/global/background-color.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,3 +205,8 @@ props:
205205
color-background-decorative-40-weakest:
206206
value: "{!palette-purple-10}"
207207
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."
208+
209+
#notification
210+
color-background-notification:
211+
value: "{!palette-red-60}"
212+
comment: Background color used for notifications.

‎packages/paste-design-tokens/tokens/global/box-shadow.yml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,3 +222,11 @@ props:
222222
shadow-border-user:
223223
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-50}"
224224
comment: Shadow border for user.
225+
226+
# Notification
227+
shadow-border-notification:
228+
value: "{!offset-0} 1px {!offset-0} {!palette-red-60}"
229+
comment: Shadow border for notification.
230+
shadow-border-bottom-notification-stronger:
231+
value: "{!offset-0} 1px {!offset-0} {!palette-red-90}"
232+
comment: Stronger bottom shadow border for notification.

0 commit comments

Comments
 (0)