diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index f000c78519..c987a126e0 100644 --- a/packages/paste-core/primitives/box/type-docs.json +++ b/packages/paste-core/primitives/box/type-docs.json @@ -958,7 +958,7 @@ "description": "Responsive prop for the CSS `bottom` property" }, "boxShadow": { - "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 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 6186fbada1..24b82c3189 100644 --- a/packages/paste-core/primitives/sibling-box/type-docs.json +++ b/packages/paste-core/primitives/sibling-box/type-docs.json @@ -1060,7 +1060,7 @@ "description": "Responsive prop for the CSS `bottom` property" }, "boxShadow": { - "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 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 6cc03034ab..ec4863fead 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\" | ... 84 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 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 984ea69cc7..e2f3b3991d 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -11,13 +11,13 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", - \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", - \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", - \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -152,8 +152,9 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", - \\"shadow-elevation-left-20\\": \\"0 0 0 1px #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\", @@ -165,12 +166,12 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\", - \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", @@ -200,7 +201,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -209,7 +210,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\", - \\"shadow-elevation-20\\": \\"0 0 0 1px #17243a, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 4px 5px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", @@ -498,7 +499,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", - \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -633,8 +634,9 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", @@ -646,12 +648,12 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", - \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", @@ -681,7 +683,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -690,9 +692,9 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\", - \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", - \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -979,7 +981,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", - \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -1114,8 +1116,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", @@ -1127,12 +1130,12 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", - \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", @@ -1162,7 +1165,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -1171,9 +1174,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\", - \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", - \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -1454,13 +1457,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", - \\"color-background-body-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", - \\"color-background-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", - \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -1504,7 +1507,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\", \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", - \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weaker\\": \\"rgb(18, 28, 45)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\", @@ -1595,8 +1598,9 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", - \\"shadow-elevation-left-20\\": \\"0 0 0 1px #17243a, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\", @@ -1608,12 +1612,12 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\", - \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", @@ -1643,7 +1647,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -1652,7 +1656,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", - \\"shadow-elevation-20\\": \\"0 0 0 1px #17243a, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 4px 5px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", @@ -1941,7 +1945,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\", \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", - \\"color-background-inverse-elevation\\": \\"rgb(23, 36, 58)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\", @@ -2076,8 +2080,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(18, 28, 45, 0.05), -16px 0 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", @@ -2089,12 +2094,12 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #c72323\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", - \\"shadow-elevation-inverse-left-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", @@ -2124,7 +2129,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"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-inverse-elevation-10\\": \\"-1px -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -2133,9 +2138,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\", - \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(18, 28, 45, 0.05), 16px 16px 32px 0 rgba(15,22,33 0.05)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", - \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15,22,33 0.1)\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml index f42eddbd1a..f524ee34f6 100644 --- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml @@ -41,7 +41,7 @@ aliases: palette-gray-80: "#394762" palette-gray-85: "#25395b" palette-gray-90: "#1f304c" - palette-gray-95: "#17243a" + palette-gray-95: "#19273E" palette-gray-100: "#121c2d" palette-gray-110: "#0F1621" @@ -58,7 +58,6 @@ aliases: palette-gray-0-transparent-100: "rgba(255, 255, 255, 1)" ## Grays transparent based on dark gray - palette-gray-100-transparent-05: "rgba(18, 28, 45, 0.05)" palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)" palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)" palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)" @@ -71,8 +70,11 @@ aliases: palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)" ## Grays transparent based on darkest gray - palette-gray-110-transparent-05: "rgba(15,22,33 0.05)" - palette-gray-110-transparent-10: "rgba(15,22,33 0.1)" + palette-gray-110-transparent-05: "rgba(15, 22, 33, 0.05)" + palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)" + + ## Blacks transparent + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" ## Blues transparent based on darkest blue palette-blue-100-transparent-10: "rgba(6, 3, 58, 0.1)" diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml index 4e05e7fde0..57c02860a2 100644 --- a/packages/paste-design-tokens/tokens/aliases/color.yml +++ b/packages/paste-design-tokens/tokens/aliases/color.yml @@ -11,4 +11,3 @@ aliases: sun: "#FF7A00" white: "#FFFFFF" white-accent: "#F6FBFE" - palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml index eeb699e828..6dc9a25a20 100644 --- a/packages/paste-design-tokens/tokens/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/global/background-color.yml @@ -35,7 +35,7 @@ props: comment: Weak background color used for containers. color-background-weaker: value: "{!palette-gray-0}" - comment: Weaker background color used for containers. + comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. # brand backgrounds color-background-brand: diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 8b6ca9c726..ef487f1134 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -4,7 +4,6 @@ global: imports: - ../aliases/box-shadow.yml - ../aliases/offset.yml - - ../aliases/color.yml props: shadow-high: value: "{!shadow-elevation-30}" @@ -262,28 +261,31 @@ props: # Elevation shadow-elevation-05: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-15}" - comment: Shadow border for elevation. + comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-top-05: value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-15}" - comment: Top shadow border for elevation. + comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-bottom-05: value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-15}" - comment: Bottom shadow border for elevation. + comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-inverse-05: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" - comment: Shadow border for inverse elevation. - shadow-elevation-inverse-left-05: + comment: Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-bottom-inverse-05: value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" - comment: Left shadow border for inverse elevation. + comment: Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-right-inverse-05: + value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the left edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-10: value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}" - comment: Shadow border for elevation. - shadow-inverse-elevation-10: - value: "{!offset-negative-05} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}" - comment: Shadow border for inverse elevation. + comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them. + shadow-elevation-inverse-10: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}" + comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them. shadow-elevation-20: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" - comment: Shadow border for elevation. + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them. shadow-elevation-left-20: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" - comment: Left shadow border for elevation. + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface. diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml index b29d7455a8..95866b1c1e 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml @@ -2,7 +2,6 @@ imports: - ../../../aliases/box-shadow.yml - ../../../aliases/offset.yml - ./color-palette.yml - - ./color.yml aliases: shadow-elevation-0: "none" shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml index 530c80ddd5..f062895d37 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml @@ -99,6 +99,18 @@ aliases: palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)" palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)" + ## Blacks transparent + palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" + palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" + palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" + palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" + palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" + palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" + palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" + palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" + palette-black-transparent-100: "rgba(0, 0, 0, 1)" + ## Greens palette-green-10: "#edfdf3" palette-green-20: "#d1fae0" diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml deleted file mode 100644 index 6f220f0ce6..0000000000 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml +++ /dev/null @@ -1,14 +0,0 @@ -imports: - - ../../../aliases/color.yml - -aliases: - palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" - palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" - palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" - palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" - palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" - palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" - palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" - palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" - palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" - palette-black-transparent-100: "rgba(0, 0, 0, 1)" diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml index 74e7443361..a08aa9b979 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml @@ -3,7 +3,6 @@ global: category: background-color imports: - ../../../global/background-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # base background @@ -33,6 +32,7 @@ props: comment: Weak default background color. color-background-weaker: value: "{!palette-gray-100}" + comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. # brand backgrounds color-background-brand: diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml index 47c7c0b7c0..d46ed7a693 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml @@ -3,7 +3,6 @@ global: category: border-color imports: - ../../../global/border-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: color-border-strong: diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml index 506943e9b1..e0bd31ed69 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml @@ -188,19 +188,19 @@ props: # Elevation shadow-elevation-05: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" - comment: Shadow border for elevation. + comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-top-05: value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}" - comment: Top shadow border for elevation. + comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-bottom-05: value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" - comment: Bottom shadow border for elevation. + comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations. shadow-elevation-10: value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-20} {!offset-25} {!offset-0} {!palette-black-transparent-40}" - comment: Shadow border for elevation. + comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them. shadow-elevation-20: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}" - comment: Shadow border for elevation. + comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them. shadow-elevation-left-20: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" - comment: Left shadow border for elevation. + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface. diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml index bc2825bb23..d9ec03766d 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml @@ -3,7 +3,6 @@ global: category: text-color imports: - ../../../global/text-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # body text diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml index b29d7455a8..95866b1c1e 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml @@ -2,7 +2,6 @@ imports: - ../../../aliases/box-shadow.yml - ../../../aliases/offset.yml - ./color-palette.yml - - ./color.yml aliases: shadow-elevation-0: "none" shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml index 530c80ddd5..b40682f9bc 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml @@ -99,6 +99,18 @@ aliases: palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)" palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)" + # Blacks transparent + palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" + palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" + palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" + palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" + palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" + palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" + palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" + palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" + palette-black-transparent-100: "rgba(0, 0, 0, 1)" + ## Greens palette-green-10: "#edfdf3" palette-green-20: "#d1fae0" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml deleted file mode 100644 index 6f220f0ce6..0000000000 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml +++ /dev/null @@ -1,14 +0,0 @@ -imports: - - ../../../aliases/color.yml - -aliases: - palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" - palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" - palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" - palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" - palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" - palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" - palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" - palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" - palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" - palette-black-transparent-100: "rgba(0, 0, 0, 1)" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml index 5e4ccc2fd7..a0dfd4558a 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml @@ -3,7 +3,6 @@ global: category: background-color imports: - ../../../global/background-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # base background diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml index 719b8281f9..721f3ae0c8 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml @@ -3,7 +3,6 @@ global: category: border-color imports: - ../../../global/border-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: color-border-strong: diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml index decdbae90f..6ab24ee943 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml @@ -3,7 +3,6 @@ global: category: text-color imports: - ../../../global/text-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # body text diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml index 3697cb3850..7613686f9b 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml @@ -12,7 +12,7 @@ props: value: "{!palette-gray-90}" comment: Strong inverse background color for any container. Must be used on color-background-body-inverse. color-background-weaker: - value: "{!palette-gray-0}" + value: "{!palette-gray-100}" # brand backgrounds color-background-brand: diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx index 014872cd3b..033d0e6c6d 100644 --- a/packages/paste-website/src/__tests__/colorGradient.test.tsx +++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx @@ -4,7 +4,7 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20", const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"]; const aliasValues = [ "#121c2d", - "#17243a", + "#19273E", "#1f304c", "#25395b", "#394762",