From c86ebb61e81d8876d62630dcfeb565bacd88d8c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 17 Jan 2025 15:59:26 -0500 Subject: [PATCH] chore: roxana catches --- .../__snapshots__/index.test.tsx.snap | 28 +++++++++---------- .../tokens/aliases/box-shadow.yml | 8 +++--- .../tokens/global/box-shadow.yml | 14 +++++----- .../tokens/themes/dark/aliases/box-shadow.yml | 8 +++--- .../tokens/themes/dark/global/box-shadow.yml | 12 ++++---- .../themes/evergreen/aliases/box-shadow.yml | 8 +++--- 6 files changed, 39 insertions(+), 39 deletions(-) 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 e2f3b3991d..769ab5d08c 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -154,7 +154,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"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 #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\", \\"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\\", @@ -166,7 +166,7 @@ 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-elevation-right-inverse-05\\": \\"1px 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\\", @@ -201,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-elevation-inverse-10\\": \\"0 -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(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -212,7 +212,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\", \\"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-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -648,7 +648,7 @@ 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-elevation-right-inverse-05\\": \\"1px 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\\", @@ -683,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-elevation-inverse-10\\": \\"0 -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(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -1130,7 +1130,7 @@ 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-elevation-right-inverse-05\\": \\"1px 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\\", @@ -1165,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-elevation-inverse-10\\": \\"0 -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(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -1600,7 +1600,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"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 #19273E, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\", \\"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\\", @@ -1612,7 +1612,7 @@ 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-elevation-right-inverse-05\\": \\"1px 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\\", @@ -1647,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-elevation-inverse-10\\": \\"0 -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(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-brand-10\\": \\"saffron\\", @@ -1658,7 +1658,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"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 #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-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -2094,7 +2094,7 @@ 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-elevation-right-inverse-05\\": \\"1px 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\\", @@ -2129,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-elevation-inverse-10\\": \\"0 -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(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", diff --git a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml index 4b81813ef1..1078fd3a9b 100644 --- a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml @@ -3,7 +3,7 @@ imports: - ./offset.yml - ./spacing.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}" diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index ef487f1134..f7d685b265 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -6,16 +6,16 @@ imports: - ../aliases/offset.yml props: shadow-high: - value: "{!shadow-elevation-30}" + value: "{!deprecated-shadow-elevation-30}" comment: High elevation default shadow. shadow: - value: "{!shadow-elevation-20}" + value: "{!deprecated-shadow-elevation-20}" comment: Default shadow. shadow-low: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Low elevation default shadow. shadow-card: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Shadow for cards. shadow-focus: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}" @@ -275,13 +275,13 @@ props: value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" 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. + value: "{!offset-05} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the right 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: 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}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}" 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-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" 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 95866b1c1e..15f410f617 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 @@ -3,7 +3,7 @@ imports: - ../../../aliases/offset.yml - ./color-palette.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}" 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 e0bd31ed69..f802ce9356 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 @@ -6,16 +6,16 @@ imports: - ../aliases/box-shadow.yml props: shadow-high: - value: "{!shadow-elevation-30}" + value: "{!deprecated-shadow-elevation-30}" comment: High elevation default shadow. shadow: - value: "{!shadow-elevation-20}" + value: "{!deprecated-shadow-elevation-20}" comment: Default shadow. shadow-low: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Low elevation default shadow. shadow-card: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Shadow for cards. shadow-focus: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}" @@ -196,11 +196,11 @@ props: value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" 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}" + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}" 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: 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-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}" 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/evergreen/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml index 95866b1c1e..15f410f617 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 @@ -3,7 +3,7 @@ imports: - ../../../aliases/offset.yml - ./color-palette.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}"