diff --git a/.changeset/wild-kings-tap.md b/.changeset/wild-kings-tap.md new file mode 100644 index 0000000000..6749dcb281 --- /dev/null +++ b/.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. 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 039debec10..c26db0565e 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/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\\", diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml index b3b4769f12..49f0d9bfe4 100644 --- a/packages/paste-design-tokens/tokens/aliases/offset.yml +++ b/packages/paste-design-tokens/tokens/aliases/offset.yml @@ -1,7 +1,10 @@ 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" @@ -9,3 +12,4 @@ aliases: offset-70: "20px" offset-80: "24px" offset-90: "32px" + offset-negative-05: -1px diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index e6588c1a12..fd3230ec63 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -30,97 +30,97 @@ props: value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0-transparent-40}" comment: Shadow for inset focus ring on interactive elements on inverse backgrounds. shadow-focus-shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}, {!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}, {!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}" comment: Shadow for simultaneous focus and border. shadow-border-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-20}" comment: Weaker shadow border for disabled inputs. shadow-border-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-30}" comment: Weak shadow border for disabled inputs. shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}" comment: Shadow border for inputs. shadow-border-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}" comment: Strong shadow border for inputs. shadow-border-primary-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-20}" comment: "Weaker shadow border for primary interactions." shadow-border-primary-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-30}" comment: "Weaker shadow border for primary interactions." shadow-border-primary: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-60}" comment: "Default shadow border for primary interactions." shadow-border-primary-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-80}" comment: Strong shadow border for inputs hover. shadow-border-primary-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-90}" comment: Stronger shadow border for inputs active. shadow-border-primary-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-100}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-100}" comment: Strongest shadow border for inputs active. shadow-border-destructive-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-20}" comment: Weaker shadow border for destructive interactions. shadow-border-destructive-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-30}" comment: Weak shadow border for destructive interactions. shadow-border-destructive: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-60}" comment: Shadow border for destructive interactions. shadow-border-destructive-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-80}" comment: Strong shadow border for destructive interactions shadow-border-destructive-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-90}" comment: Strong shadow border for destructive interactions shadow-border-destructive-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-100}" comment: Strongest shadow border for destructive interactions shadow-border-success-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-green-20}" comment: Weaker shadow border for success inputs. shadow-border-warning-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-orange-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-orange-20}" comment: Weaker shadow border for warning inputs. shadow-border-error-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-20}" comment: Weaker shadow border for error inputs. shadow-border-error-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-50}" comment: Shadow border for inverse error inputs. shadow-border-error: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-60}" comment: Shadow border for error inputs. shadow-border-error-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-80}" comment: Shadow border for error inputs hover. shadow-border-error-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-90}" comment: Shadow border for error inputs hover. shadow-border-error-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-100}" comment: Strongest shadow border for error inputs hover. shadow-border-neutral-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-20}" comment: Weaker shadow border for neutral inputs. shadow-border-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-20}" comment: Weaker shadow border for new status inputs. shadow-border-decorative-10-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-20}" comment: Weaker shadow border for decorative 10 shadow-border-decorative-20-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-20}" comment: Weaker shadow border for decorative 20 shadow-border-decorative-30-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-green-20}" comment: Weaker shadow border for decorative 30 shadow-border-decorative-40-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-20}" comment: Weaker shadow border for decorative 40 shadow-border-brand-10: value: "saffron" @@ -132,101 +132,101 @@ props: value: "mint" comment: Shadow border for brand 30 shadow-border-inverse-weakest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" comment: Weakest shadow border on interactive elements on inverse backgrounds. shadow-border-inverse-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}" comment: Weaker shadow border on interactive elements on inverse backgrounds. shadow-border-inverse: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}" comment: Shadow border on interactive elements on inverse backgrounds. shadow-border-inverse-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-20}" comment: Strong shadow border on interactive elements on inverse backgrounds. shadow-border-inverse-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-10}" comment: Stronger shadow border on interactive elements on inverse backgrounds. shadow-border-inverse-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-0}" comment: Strongest shadow border on interactive elements on inverse backgrounds. shadow-border-subaccount: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-yellow-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-yellow-20}" comment: Shadow border for subaccount badge. shadow-border-inverse-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for the sidebar beta badge. # Top borders shadow-border-top-primary: - value: "0px -1px {!offset-0} {!palette-blue-55}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!palette-blue-55}" comment: Top shadow border for selected status of horizontal tabs shadow-border-top-inverse-strongest: - value: "0px -1px {!offset-0} {!palette-blue-20}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!palette-blue-20}" comment: Top shadow border for for selected status of horizontal tabs on inverse backgrounds shadow-border-top-primary-strongest: - value: "0px -1px {!offset-0} {!palette-blue-90}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!palette-blue-90}" comment: Top shadow border for selected hover status of horizontal tabs # Right borders shadow-border-right-inverse-strong: - value: "1px 0px {!palette-gray-20}" + value: "{!offset-05} {!offset-0} {!palette-gray-20}" comment: Right shadow border for hover status of vertical tabs on inverse backgrounds # Bottom borders shadow-border-bottom-primary: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-55}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-55}" comment: Bottom shadow border for primary status shadow-border-bottom-neutral-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-20}" comment: Weaker bottom shadow border for neutral status shadow-border-bottom-warning-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-orange-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-orange-20}" comment: Weaker bottom shadow border for warning status shadow-border-bottom-error-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-red-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-20}" comment: Weaker bottom shadow border for error status shadow-border-bottom-success-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-20}" comment: Weaker bottom shadow border for success status shadow-border-bottom-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-20}" comment: Weaker bottom shadow border for new status shadow-border-bottom-decorative-10-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-gray-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-gray-20}" comment: Weaker bottom shadow border for decorative 10 shadow-border-bottom-decorative-20-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-20}" comment: Weaker bottom shadow border for decorative 20 shadow-border-bottom-decorative-30-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-20}" comment: Weaker bottom shadow border for decorative 30 shadow-border-bottom-decorative-40-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-20}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-20}" comment: Weaker bottom shadow border for decorative 40 shadow-border-bottom-brand-10-strong: - value: "{!offset-0} 1px {!offset-0} {!palette-yellow-80}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-yellow-80}" comment: Strong bottom shadow border for brand 10 shadow-border-bottom-brand-20-strong: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-70}" comment: Strong bottom shadow border for brand 20 shadow-border-bottom-brand-30-strong: - value: "{!offset-0} 1px {!offset-0} {!palette-green-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-70}" comment: Strong bottom shadow border for brand 30 shadow-border-bottom-subaccount: - value: "{!offset-0} 1px {!offset-0} {!palette-yellow-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-yellow-40}" comment: Bottom shadow border for subaccount badge shadow-border-bottom-inverse-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge # User shadow-border-user: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-50}" comment: Shadow border for user. # Notification shadow-border-notification: - value: "{!offset-0} 1px {!offset-0} {!palette-red-60}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-60}" comment: Shadow border for notification. shadow-border-bottom-notification-stronger: - value: "{!offset-0} 1px {!offset-0} {!palette-red-90}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-90}" comment: Stronger bottom shadow border for notification. 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 3c9fb890a5..69d2ea71e9 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 @@ -27,147 +27,147 @@ props: value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-60}" comment: Shadow for inset focus on elements, such as DataGrid cells. shadow-focus-shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}, {!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}, {!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}" comment: Shadow for simultaneous focus and border shadow-border-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" comment: Weaker shadow border for disabled inputs. shadow-border-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}" comment: Weak shadow border for disabled inputs. shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}" comment: Shadow border for inputs. shadow-border-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}" comment: Strong shadow border for inputs. shadow-border-primary-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" comment: "Weaker shadow border for primary interactions." shadow-border-primary-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}" comment: "Weaker shadow border for primary interactions." shadow-border-primary: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-60}" comment: "Default shadow border for primary interactions." shadow-border-primary-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-30}" comment: Strong shadow border for inputs hover. shadow-border-primary-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-20}" comment: Stronger shadow border for inputs active. shadow-border-primary-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-10}" comment: Strongest shadow border for inputs active. shadow-border-destructive-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" comment: Weaker shadow border for destructive interactions. shadow-border-destructive-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}" comment: Weak shadow border for destructive interactions. shadow-border-destructive: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-60}" comment: Shadow border for destructive interactions. shadow-border-destructive-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-30}" comment: Strong shadow border for destructive interactions shadow-border-destructive-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-20}" comment: Stronger shadow border for destructive interactions shadow-border-destructive-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-10}" comment: Strongest shadow border for destructive interactions shadow-border-success-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-green-70}" comment: Weaker shadow border for success inputs. shadow-border-warning-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-orange-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-orange-70}" comment: Weaker shadow border for warning inputs. shadow-border-error-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-70}" comment: Weaker shadow border for error inputs. shadow-border-error-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-70}" comment: Shadow border for inverse error inputs. shadow-border-error: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-60}" comment: Shadow border for error inputs. shadow-border-error-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-30}" comment: Shadow border for error inputs hover. shadow-border-error-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-20}" comment: Shadow border for error inputs hover. shadow-border-error-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-10}" comment: Strongest shadow border for error inputs hover. shadow-border-neutral-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-70}" comment: Weaker shadow border for neutral inputs. shadow-border-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Weaker shadow border for new status inputs. shadow-border-decorative-10-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" comment: Weaker shadow border for decorative 10 shadow-border-decorative-20-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-70}" comment: Weaker shadow border for decorative 20 shadow-border-decorative-30-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-green-70}" comment: Weaker shadow border for decorative 30 shadow-border-decorative-40-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Weaker shadow border for decorative 40 shadow-border-subaccount: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-yellow-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-yellow-70}" comment: Shadow border for subaccount badge. shadow-border-inverse-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for the sidebar beta badge. shadow-border-top-primary-strongest: - value: "0px -1px {!offset-0} {!palette-blue-10}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!palette-blue-10}" comment: Top shadow border for selected hover status of horizontal tabs. # Badge shadow-border-bottom-primary: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-55}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-55}" comment: Bottom shadow border for primary status shadow-border-bottom-neutral-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-80}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-80}" comment: Weaker bottom shadow border for neutral status shadow-border-bottom-warning-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-orange-90}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-orange-90}" comment: Weaker bottom shadow border warning warning status shadow-border-bottom-error-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-red-80}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-80}" comment: Weaker bottom shadow border for error status shadow-border-bottom-success-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-90}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-90}" comment: Weaker bottom shadow border for success status shadow-border-bottom-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Weaker bottom shadow border for new status shadow-border-bottom-decorative-10-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-gray-90}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-gray-90}" comment: Weaker bottom shadow border for decorative 10 shadow-border-bottom-decorative-20-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-80}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-80}" comment: Weaker bottom shadow border for decorative 20 shadow-border-bottom-decorative-30-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-90}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-90}" comment: Weaker bottom shadow border for decorative 30 shadow-border-bottom-decorative-40-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Weaker bottom shadow border for decorative 40 shadow-border-bottom-subaccount: - value: "{!offset-0} 1px {!offset-0} {!palette-yellow-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-yellow-70}" comment: Bottom shadow border for subaccount badge shadow-border-bottom-inverse-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge # User shadow-border-user: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-10}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-10}" comment: Shadow border for user. diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml index 6300b2660a..e6cf07ef18 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml @@ -3,118 +3,3 @@ global: category: box-shadow imports: - ../../../global/box-shadow.yml - - ../aliases/box-shadow.yml -props: - shadow-high: - value: "{!shadow-elevation-30}" - comment: High elevation default shadow. - shadow: - value: "{!shadow-elevation-20}" - comment: Default shadow. - shadow-low: - value: "{!shadow-elevation-10}" - comment: Low elevation default shadow. - shadow-card: - value: "{!shadow-elevation-10}" - comment: Shadow for cards. - shadow-focus: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} 5px {!palette-blue-20}" - comment: Shadow for focus ring on interactive elements. - shadow-focus-inverse: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} rgba(255, 255, 255, 0.4)" - comment: Shadow for focus ring on interactive elements on inverse backgrounds. - shadow-focus-inset: - value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} #9DB5FF" - comment: Shadow for inset focus on elements, such as DataGrid cells. - shadow-focus-shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-blue-20}" - comment: Shadow for simultaneous focus and border - shadow-border-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #EDEFF5" - comment: Weaker shadow border for disabled inputs. - shadow-border-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #E6E8F0" - comment: Weak shadow border for disabled inputs. - shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #D8DAE5" - comment: Shadow border for inputs. - shadow-border-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #8F95B2" - comment: Strong shadow border for inputs. - shadow-border-primary-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #D6E0FF" - comment: "Weaker shadow border for primary interactions." - shadow-border-primary-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #9DB5FF" - comment: "Weaker shadow border for primary interactions." - shadow-border-primary: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #3366FF" - comment: "Default shadow border for primary interactions." - shadow-border-primary-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #2952CC" - comment: Strong shadow border for inputs hover. - shadow-border-primary-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #1F3D99" - comment: Stronger shadow border for inputs active. - shadow-border-primary-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #0C1E56" - comment: Strongest shadow border for inputs active. - shadow-border-destructive-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #F9DADA" - comment: Weaker shadow border for destructive interactions. - shadow-border-destructive-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6" - comment: Weak shadow border for destructive interactions. - shadow-border-destructive: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343" - comment: Shadow border for destructive interactions. - shadow-border-destructive-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636" - comment: Strong shadow border for destructive interactions - shadow-border-destructive-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828" - comment: Stronger shadow border for destructive interactions - shadow-border-destructive-strongest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #310C0C" - comment: Strongest shadow border for destructive interactions - shadow-border-error-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6" - comment: Shadow border for inverse error inputs. - shadow-border-error: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343" - comment: Shadow border for error inputs. - shadow-border-error-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636" - comment: Shadow border for error inputs hover. - shadow-border-error-stronger: - value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828" - comment: Shadow border for error inputs hover. - - # Badge - shadow-border-bottom-neutral-weaker: - value: "{!offset-0} 1px {!offset-0} #9DB5FF" - comment: Weaker bottom shadow border for neutral status - shadow-border-bottom-warning-weaker: - value: "{!offset-0} 1px {!offset-0} #F2C8B6" - comment: Weaker bottom shadow border warning warning status - shadow-border-bottom-error-weaker: - value: "{!offset-0} 1px {!offset-0} #F4B6B6" - comment: Weaker bottom shadow border for error status - shadow-border-bottom-success-weaker: - value: "{!offset-0} 1px {!offset-0} #DCF2EA" - comment: Weaker bottom shadow border for success status - shadow-border-bottom-new-weaker: - value: "{!offset-0} 1px {!offset-0} #D0CAF4" - comment: Weaker bottom shadow border for new status - shadow-border-bottom-decorative-10-weaker: - value: "{!offset-0} 1px {!offset-0} #D8DAE5" - comment: Weaker bottom shadow border for decorative 10 - shadow-border-bottom-decorative-20-weaker: - value: "{!offset-0} 1px {!offset-0} #D6E0FF" - comment: Weaker bottom shadow border for decorative 20 - shadow-border-bottom-decorative-30-weaker: - value: "{!offset-0} 1px {!offset-0} #DCF2EA" - comment: Weaker bottom shadow border for decorative 30 - shadow-border-bottom-decorative-40-weaker: - value: "{!offset-0} 1px {!offset-0} #D0CAF4" - comment: Weaker bottom shadow border for decorative 40 diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml index 2619f8b4ec..fc41897e16 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml @@ -5,75 +5,75 @@ imports: - ../../dark/global/box-shadow.yml props: shadow-focus: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} 5px {!palette-gray-0-transparent-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-25} {!palette-gray-0-transparent-20}" comment: Shadow for focus ring on interactive elements. shadow-focus-inverse: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-gray-0-transparent-20}" comment: Shadow for focus ring on interactive elements on inverse backgrounds. shadow-border-inverse-weakest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-100}" comment: Weakest shadow border on interactive elements on inverse backgrounds. shadow-focus-shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-gray-0-transparent-20}" comment: Shadow for simultaneous focus and border shadow-focus-inset: - value: "inset {!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0-transparent-20}" + value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-0-transparent-20}" comment: Shadow for inset focus on elements, such as DataGrid cells. shadow-focus-inverse-inset: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} 3px rgba(255, 255, 255, 0.2)" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-0-transparent-20}" comment: Shadow for inset focus ring on interactive elements on inverse backgrounds. shadow-border-primary-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-70}" comment: "Weaker shadow border for primary interactions." shadow-border-primary-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-70}" comment: "Weaker shadow border for primary interactions." shadow-border-primary: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-55}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-55}" comment: Default shadow border for primary interactions. shadow-border-error-strong: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-40}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-40}" comment: Strong shadow border for error inputs hover. shadow-border-subaccount: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-yellow-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-yellow-70}" comment: Shadow border for subaccount badge. shadow-border-inverse-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for the sidebar beta badge. shadow-border-top-primary-strongest: - value: "0px -1px {!offset-0} {!palette-blue-10}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!palette-blue-10}" comment: Top shadow border for selected hover status of horizontal tabs. # Badge shadow-border-bottom-neutral-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-70}" comment: Weaker bottom shadow border for neutral status shadow-border-bottom-warning-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-orange-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-orange-70}" comment: Weaker bottom shadow border warning warning status shadow-border-bottom-error-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-red-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-70}" comment: Weaker bottom shadow border for error status shadow-border-bottom-success-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-70}" comment: Weaker bottom shadow border for success status shadow-border-bottom-decorative-10-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-gray-50}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-gray-50}" comment: Weaker bottom shadow border for decorative 10 shadow-border-bottom-decorative-20-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-70}" comment: Weaker bottom shadow border for decorative 20 shadow-border-bottom-decorative-30-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-70}" comment: Weaker bottom shadow border for decorative 30 shadow-border-bottom-subaccount: - value: "{!offset-0} 1px {!offset-0} {!palette-yellow-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-yellow-70}" comment: Bottom shadow border for subaccount badge shadow-border-bottom-inverse-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge # User shadow-border-user: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for user. diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml index 432ccd2210..4f69ed1a86 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml @@ -5,78 +5,78 @@ imports: - ../../../global/box-shadow.yml props: shadow-focus: - value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} 5px {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-25} {!palette-blue-20}" comment: Shadow for focus ring on interactive elements. shadow-focus-inverse: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-gray-0-transparent-20}" comment: Shadow for focus ring on interactive elements on inverse backgrounds. shadow-border-inverse-weakest: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-100}" comment: Weakest shadow border on interactive elements on inverse backgrounds. shadow-focus-shadow-border: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-blue-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-30}, {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-blue-20}" comment: Shadow for simultaneous focus and border shadow-focus-inset: - value: "inset {!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-55}, inset {!offset-0} {!offset-0} {!offset-0} 3px {!palette-blue-20}" + value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-55}, inset {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-blue-20}" comment: Shadow for inset focus on elements, such as DataGrid cells. shadow-focus-inverse-inset: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} 3px rgba(255, 255, 255, 0.2)" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-0}, inset {!offset-0} {!offset-0} {!offset-0} {!offset-15} {!palette-gray-0-transparent-20}" comment: Shadow for inset focus ring on interactive elements on inverse backgrounds. shadow-border-primary: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-55}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-55}" comment: Default shadow border for primary interactions. shadow-border-destructive: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-65}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-65}" comment: Shadow border for destructive interactions. shadow-border-error-weak: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-50}" comment: Shadow border for error inputs. shadow-border-error: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-65}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-red-65}" comment: Shadow border for error inputs. shadow-border-subaccount: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-yellow-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-yellow-20}" comment: Shadow border for subaccount badge. shadow-border-inverse-new-weaker: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}" comment: Shadow border for the sidebar beta badge. # Badge shadow-border-bottom-neutral-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-40}" comment: Weaker bottom shadow border for neutral status shadow-border-bottom-warning-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-orange-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-orange-40}" comment: Weaker bottom shadow border warning warning status shadow-border-bottom-error-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-red-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-40}" comment: Weaker bottom shadow border for error status shadow-border-bottom-success-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-40}" comment: Weaker bottom shadow border for success status shadow-border-bottom-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-30}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-30}" comment: Weaker bottom shadow border for new status shadow-border-bottom-decorative-10-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-gray-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-gray-40}" comment: Weaker bottom shadow border for decorative 10 shadow-border-bottom-decorative-20-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-blue-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-blue-40}" comment: Weaker bottom shadow border for decorative 20 shadow-border-bottom-decorative-30-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-green-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-green-40}" comment: Weaker bottom shadow border for decorative 30 shadow-border-bottom-decorative-40-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-30}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-30}" comment: Weaker bottom shadow border for decorative 40 shadow-border-bottom-subaccount: - value: "{!offset-0} 1px {!offset-0} {!palette-yellow-40}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-yellow-40}" comment: Bottom shadow border for subaccount badge shadow-border-bottom-inverse-new-weaker: - value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}" + value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge # User shadow-border-user: - value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-20}" comment: Shadow border for user.