From 9cb5ef6bf6eed7aba7c25fa68aba8d7b96549065 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 17:07:25 +0530 Subject: [PATCH 01/19] feat(tokens): update border tokens related to tabs --- .../tokens/global/box-shadow.yml | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 9209039cf3..9e1726d960 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -218,6 +218,13 @@ props: shadow-border-bottom-inverse-new-weaker: value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge + shadow-border-bottom-weak: + value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-30}" + comment: Weak bottom shadow border for tab container + shadow-border-bottom-inverse-weaker: + value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}" + comment: Weaker bottom shadow border for tab container on inverse backgrounds + # User shadow-border-user: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-50}" @@ -231,10 +238,16 @@ props: value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-90}" comment: Stronger bottom shadow border for notification. - # Scrollable elements - shadow-scroll-inverse: - value: "{!offset-0} {!offset-50} {!offset-50} {!offset-0} {!palette-gray-100}" - comment: Shadow for scrollable elements on inverse elements. - shadow-scroll: - value: "{!offset-0} {!offset-20} {!offset-20} {!offset-0} {!palette-gray-100-transparent-20}" - comment: Shadow for scrollable elements. + # Left / Right + shadow-border-left: + value: "{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100-transparent-20}" + comment: Left shadow border for elements. + shadow-border-left-inverse: + value: "{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100}" + comment: Left shadow border for inverse elements. + shadow-border-right: + value: "-{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100-transparent-20}" + comment: Right shadow border for elements. + shadow-border-right-inverse: + value: "-{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100}" + comment: Right shadow border for inverse elements. From bda03d8eeac55e33ff36d5e699eeac5ee1678e8a Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 17:11:59 +0530 Subject: [PATCH 02/19] feat(tabs): fix underline bug on trackpad zoom --- packages/paste-core/components/tabs/src/OverflowButton.tsx | 4 +++- packages/paste-core/components/tabs/src/Tab.tsx | 3 ++- packages/paste-core/components/tabs/src/TabList.tsx | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/tabs/src/OverflowButton.tsx b/packages/paste-core/components/tabs/src/OverflowButton.tsx index 8207818047..499f77e410 100644 --- a/packages/paste-core/components/tabs/src/OverflowButton.tsx +++ b/packages/paste-core/components/tabs/src/OverflowButton.tsx @@ -47,7 +47,9 @@ export const OverflowButton: React.FC = ({ const determineShadow = (): BoxShadow | undefined => { if (showShadow) { - return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll; + if (position === "left") + return isInverse ? theme.shadows.shadowBorderLeftInverse : theme.shadows.shadowBorderLeft; + return isInverse ? theme.shadows.shadowBorderRightInverse : theme.shadows.shadowBorderRight; } return undefined; }; diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/packages/paste-core/components/tabs/src/Tab.tsx index d7d2fd40bf..e03eac7b19 100644 --- a/packages/paste-core/components/tabs/src/Tab.tsx +++ b/packages/paste-core/components/tabs/src/Tab.tsx @@ -126,6 +126,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest", color: isInverse ? "colorTextInverse" : "colorTextPrimary", boxShadow: isInverse ? "shadowBorderTopInverseStrongest" : "shadowBorderTopPrimary", + backgroundColor: isInverse ? "colorBackgroundInverseStrongest" : "colorBackgroundBody", }, /* Disabled state */ _disabled: { @@ -139,7 +140,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP }, _selected_hover: { color: isInverse ? "colorTextInverse" : "colorTextPrimaryStronger", - borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest", + borderBottomColor: "transparent", boxShadow: isInverse ? "shadowBorderTopPrimary" : "shadowBorderTopPrimaryStrongest", }, /* Focus states */ diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx index 3705c7bcee..56aef4cdf6 100644 --- a/packages/paste-core/components/tabs/src/TabList.tsx +++ b/packages/paste-core/components/tabs/src/TabList.tsx @@ -113,7 +113,8 @@ const HorizontalTabList: React.FC From 5845c7eb6d3964cdd81af2f1f5581e7c99927930 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 17:15:03 +0530 Subject: [PATCH 03/19] feat(tokens): add changesets --- .changeset/lucky-fireants-complain.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lucky-fireants-complain.md diff --git a/.changeset/lucky-fireants-complain.md b/.changeset/lucky-fireants-complain.md new file mode 100644 index 0000000000..273b45b1ef --- /dev/null +++ b/.changeset/lucky-fireants-complain.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/core": minor +--- + +[Tokens]: Add new tokens related to box shadow of Tabs component From 2e2fef9d9776b3855190f881a57a3c9edff37c96 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 17:15:37 +0530 Subject: [PATCH 04/19] feat(Tabs): add changesets --- .changeset/tricky-jeans-collect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-jeans-collect.md diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md new file mode 100644 index 0000000000..9c1305bb59 --- /dev/null +++ b/.changeset/tricky-jeans-collect.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/tabs": patch +--- + +[Tabs]: Fix underline bug for trackpad zoom From c38f9d189b6d3e2fa55723a94be0e57e495af5a9 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 17:18:55 +0530 Subject: [PATCH 05/19] feat(tokens): update changesets --- .changeset/tricky-jeans-collect.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md index 9c1305bb59..20a7839dc2 100644 --- a/.changeset/tricky-jeans-collect.md +++ b/.changeset/tricky-jeans-collect.md @@ -1,5 +1,6 @@ --- "@twilio-paste/tabs": patch +"@twilio-paste/core": patch --- [Tabs]: Fix underline bug for trackpad zoom From d1abb463fbbd44acac86b9216a3f4cf17d12b2a0 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 18:00:02 +0530 Subject: [PATCH 06/19] feat(tabs): fix build issue --- .../components/code-block/src/OverflowButton.tsx | 11 ++++++++++- .../in-page-navigation/src/OverflowButton.tsx | 4 +++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/code-block/src/OverflowButton.tsx b/packages/paste-core/components/code-block/src/OverflowButton.tsx index 099b298551..14c4910101 100644 --- a/packages/paste-core/components/code-block/src/OverflowButton.tsx +++ b/packages/paste-core/components/code-block/src/OverflowButton.tsx @@ -1,6 +1,7 @@ import { Box, BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { ChevronLeftIcon } from "@twilio-paste/icons/esm/ChevronLeftIcon"; import { ChevronRightIcon } from "@twilio-paste/icons/esm/ChevronRightIcon"; +import { BoxShadow } from "@twilio-paste/style-props"; import { useTheme } from "@twilio-paste/theme"; import React from "react"; @@ -31,6 +32,14 @@ export const OverflowButton: React.FC = ({ const Chevron = position === "left" ? ChevronLeftIcon : ChevronRightIcon; if (!visible && position === "right") return null; + const determineShadow = (): BoxShadow | undefined => { + if (visible && showShadow) { + if (position === "left") return theme.shadows.shadowBorderLeftInverse; + return theme.shadows.shadowBorderRightInverse; + } + return undefined; + }; + return ( = ({ width="sizeIcon40" padding="space20" position="relative" - boxShadow={visible && showShadow ? theme.shadows.shadowScrollInverse : undefined} + boxShadow={determineShadow()} element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`} cursor={visible ? "pointer" : "none"} {...Styles} diff --git a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx index f68cf5155b..f63eb0173b 100644 --- a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx +++ b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx @@ -46,7 +46,9 @@ export const OverflowButton: React.FC = ({ const determineShadow = (): BoxShadow | undefined => { if (showShadow) { - return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll; + if (position === "left") + return isInverse ? theme.shadows.shadowBorderLeftInverse : theme.shadows.shadowBorderLeft; + return isInverse ? theme.shadows.shadowBorderRightInverse : theme.shadows.shadowBorderRight; } return undefined; }; From a4ff8e769f804561f8bf11c1fe8874361fc2971e Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 18:13:44 +0530 Subject: [PATCH 07/19] feat(tabs): update changeset --- .changeset/tricky-jeans-collect.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md index 20a7839dc2..ab43389286 100644 --- a/.changeset/tricky-jeans-collect.md +++ b/.changeset/tricky-jeans-collect.md @@ -1,4 +1,6 @@ --- +"@twilio-paste/code-block": patch +"@twilio-paste/in-page-navigation": patch "@twilio-paste/tabs": patch "@twilio-paste/core": patch --- From 5b35600dd38321aa586aebef9f4490f0bb033b7c Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 18:15:10 +0530 Subject: [PATCH 08/19] feat(tabs): update typedocs --- packages/paste-core/primitives/box/type-docs.json | 2 +- packages/paste-core/primitives/sibling-box/type-docs.json | 2 +- packages/paste-core/primitives/text/type-docs.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 4481f4a98c..238b2a4aef 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\" | ... 69 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 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 4b35c271ed..ee3d948143 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\" | ... 69 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 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 9b7b893b6f..d3c17bb3a7 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\" | ... 69 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, From e58825dd4c48ad6f0c78966b5528e511803e4c3a Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 18:49:55 +0530 Subject: [PATCH 09/19] feat(tabs): update tests --- .../__snapshots__/index.test.tsx.snap | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 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 4c040d7a3b..cb5a2d0e5f 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -140,18 +140,22 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", + \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 4px #606b85\\", + \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px #8891aa\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -183,14 +187,13 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-brand-10\\": \\"saffron\\", - \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", \\"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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", - \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0d3a1f\\", @@ -199,6 +202,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", + \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\", @@ -587,18 +591,22 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", + \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -630,14 +638,13 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", - \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", - \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #d1fae0\\", @@ -646,6 +653,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", + \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", @@ -1034,18 +1042,22 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", + \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1077,14 +1089,13 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", - \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", - \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #d1fae0\\", @@ -1093,6 +1104,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", + \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", @@ -1481,18 +1493,22 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", + \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 2px #121c2d, 0 0 0 3px #ffffff, 0 0 0 5px rgba(255, 255, 255, 0.2)\\", + \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\", \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1524,14 +1540,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-brand-10\\": \\"saffron\\", - \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", \\"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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", - \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0e7c3a\\", @@ -1540,6 +1555,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", + \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\", @@ -1928,18 +1944,22 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff\\", + \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\", \\"shadow-border-destructive\\": \\"0 0 0 1px #c72323\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1971,14 +1991,13 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", - \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", - \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #7beaa5\\", @@ -1987,6 +2006,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", + \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\", From c0d919b9bda72b82d7e830e98ab1427e37b64d45 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 24 Oct 2024 18:59:50 +0530 Subject: [PATCH 10/19] feat(tabs): update typedocs --- packages/paste-core/primitives/box/type-docs.json | 2 +- packages/paste-core/primitives/sibling-box/type-docs.json | 2 +- packages/paste-core/primitives/text/type-docs.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 238b2a4aef..5b226c8434 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\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 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 ee3d948143..8bd752b30e 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\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 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 d3c17bb3a7..da7cf17cc7 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\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, From 5df4afb46c38a1645eb31ee089217ad9701e3572 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 25 Oct 2024 00:13:54 +0530 Subject: [PATCH 11/19] feat(tabs): update tokens --- packages/paste-core/components/tabs/src/Tab.tsx | 2 +- packages/paste-design-tokens/tokens/global/box-shadow.yml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/packages/paste-core/components/tabs/src/Tab.tsx index e03eac7b19..4b6b5e72d4 100644 --- a/packages/paste-core/components/tabs/src/Tab.tsx +++ b/packages/paste-core/components/tabs/src/Tab.tsx @@ -126,7 +126,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest", color: isInverse ? "colorTextInverse" : "colorTextPrimary", boxShadow: isInverse ? "shadowBorderTopInverseStrongest" : "shadowBorderTopPrimary", - backgroundColor: isInverse ? "colorBackgroundInverseStrongest" : "colorBackgroundBody", + backgroundColor: isInverse ? "colorBackgroundInverse" : "colorBackgroundBody", }, /* Disabled state */ _disabled: { diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 9e1726d960..680d260515 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -219,10 +219,10 @@ props: value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge shadow-border-bottom-weak: - value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-30}" + value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-30}" comment: Weak bottom shadow border for tab container shadow-border-bottom-inverse-weaker: - value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}" + value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-80}" comment: Weaker bottom shadow border for tab container on inverse backgrounds # User From dff3ffb350a7a67f5407be58018eb2acded110a6 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 25 Oct 2024 00:31:37 +0530 Subject: [PATCH 12/19] feat(tabs): update tests --- .../__snapshots__/index.test.tsx.snap | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 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 cb5a2d0e5f..4588bad7fc 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -140,7 +140,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -155,7 +155,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-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 0 #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #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\\", @@ -591,7 +591,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -606,7 +606,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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 0 #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #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\\", @@ -1042,7 +1042,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -1057,7 +1057,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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 0 #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #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\\", @@ -1493,7 +1493,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -1508,7 +1508,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-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 0 #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #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\\", @@ -1944,7 +1944,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -1959,7 +1959,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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 0 #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #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\\", From 0ed47455ddbfd23d334b62f7262d47a51d21458a Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 25 Oct 2024 21:32:19 +0530 Subject: [PATCH 13/19] feat(tabs): update token --- .../__tests__/__snapshots__/index.test.tsx.snap | 4 ++-- .../tokens/themes/dark/global/box-shadow.yml | 5 +++++ 2 files changed, 7 insertions(+), 2 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 4588bad7fc..eb48c5a485 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -140,7 +140,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", @@ -1493,7 +1493,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", 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 69d2ea71e9..9a1f05bc7e 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 @@ -171,3 +171,8 @@ props: shadow-border-user: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-10}" comment: Shadow border for user. + + # Bottom borders + shadow-border-bottom-weak: + value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-80}" + comment: Weak bottom shadow border for tab container From 9f8ba2120fec8a4403af7c7fd8b8108175a59bbc Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Mon, 28 Oct 2024 16:18:48 +0530 Subject: [PATCH 14/19] feat(tabs): try different solution --- packages/paste-core/components/tabs/src/Tab.tsx | 1 + packages/paste-core/components/tabs/src/TabList.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/packages/paste-core/components/tabs/src/Tab.tsx index 4b6b5e72d4..cc7b022444 100644 --- a/packages/paste-core/components/tabs/src/Tab.tsx +++ b/packages/paste-core/components/tabs/src/Tab.tsx @@ -160,6 +160,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP borderColor: isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak", boxShadow: "none", borderBottom: "none", + overflow: "clip", }, }; } diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx index 56aef4cdf6..65e948bebc 100644 --- a/packages/paste-core/components/tabs/src/TabList.tsx +++ b/packages/paste-core/components/tabs/src/TabList.tsx @@ -107,18 +107,20 @@ const HorizontalTabList: React.FC {children} + Date: Tue, 29 Oct 2024 18:02:01 +0530 Subject: [PATCH 15/19] feat(tabs): add different background for inverse --- packages/paste-core/components/tabs/src/TabList.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx index 65e948bebc..d9c585d1b0 100644 --- a/packages/paste-core/components/tabs/src/TabList.tsx +++ b/packages/paste-core/components/tabs/src/TabList.tsx @@ -120,7 +120,13 @@ const HorizontalTabList: React.FC {children} - + Date: Wed, 30 Oct 2024 20:42:41 +0530 Subject: [PATCH 16/19] feat(tabs): add changes from review --- .../code-block/src/OverflowButton.tsx | 5 +++-- .../in-page-navigation/src/OverflowButton.tsx | 6 +++--- .../components/tabs/src/OverflowButton.tsx | 6 +++--- .../tokens/aliases/color.yml | 1 + .../tokens/aliases/offset.yml | 1 + .../tokens/global/box-shadow.yml | 21 ++++++++++--------- .../tokens/themes/dark/global/box-shadow.yml | 8 +++++++ 7 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/paste-core/components/code-block/src/OverflowButton.tsx b/packages/paste-core/components/code-block/src/OverflowButton.tsx index 14c4910101..f49bb9961a 100644 --- a/packages/paste-core/components/code-block/src/OverflowButton.tsx +++ b/packages/paste-core/components/code-block/src/OverflowButton.tsx @@ -34,8 +34,8 @@ export const OverflowButton: React.FC = ({ const determineShadow = (): BoxShadow | undefined => { if (visible && showShadow) { - if (position === "left") return theme.shadows.shadowBorderLeftInverse; - return theme.shadows.shadowBorderRightInverse; + if (position === "left") return theme.shadows.shadowLeftInverse; + return theme.shadows.shadowRightInverse; } return undefined; }; @@ -53,6 +53,7 @@ export const OverflowButton: React.FC = ({ boxShadow={determineShadow()} element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`} cursor={visible ? "pointer" : "none"} + zIndex="zIndex10" {...Styles} > {/* For left button to align with spacing of header we hide icon */} diff --git a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx index f63eb0173b..f8be8a8909 100644 --- a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx +++ b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx @@ -46,9 +46,8 @@ export const OverflowButton: React.FC = ({ const determineShadow = (): BoxShadow | undefined => { if (showShadow) { - if (position === "left") - return isInverse ? theme.shadows.shadowBorderLeftInverse : theme.shadows.shadowBorderLeft; - return isInverse ? theme.shadows.shadowBorderRightInverse : theme.shadows.shadowBorderRight; + if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft; + return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight; } return undefined; }; @@ -64,6 +63,7 @@ export const OverflowButton: React.FC = ({ padding="space20" boxShadow={determineShadow()} element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`} + zIndex="zIndex10" {...(isInverse ? InverseStyles : Styles)} > diff --git a/packages/paste-core/components/tabs/src/OverflowButton.tsx b/packages/paste-core/components/tabs/src/OverflowButton.tsx index 499f77e410..f9d27271f2 100644 --- a/packages/paste-core/components/tabs/src/OverflowButton.tsx +++ b/packages/paste-core/components/tabs/src/OverflowButton.tsx @@ -47,9 +47,8 @@ export const OverflowButton: React.FC = ({ const determineShadow = (): BoxShadow | undefined => { if (showShadow) { - if (position === "left") - return isInverse ? theme.shadows.shadowBorderLeftInverse : theme.shadows.shadowBorderLeft; - return isInverse ? theme.shadows.shadowBorderRightInverse : theme.shadows.shadowBorderRight; + if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft; + return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight; } return undefined; }; @@ -65,6 +64,7 @@ export const OverflowButton: React.FC = ({ padding="space20" boxShadow={determineShadow()} element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`} + zIndex="zIndex10" {...(isInverse ? InverseStyles : Styles)} > diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml index 57c02860a2..801741936d 100644 --- a/packages/paste-design-tokens/tokens/aliases/color.yml +++ b/packages/paste-design-tokens/tokens/aliases/color.yml @@ -11,3 +11,4 @@ aliases: sun: "#FF7A00" white: "#FFFFFF" white-accent: "#F6FBFE" + black-transparent-40: "rgba(0, 0, 0, 0.4)" diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml index 49f0d9bfe4..753518ce58 100644 --- a/packages/paste-design-tokens/tokens/aliases/offset.yml +++ b/packages/paste-design-tokens/tokens/aliases/offset.yml @@ -13,3 +13,4 @@ aliases: offset-80: "24px" offset-90: "32px" offset-negative-05: -1px + offset-negative-20: -4px diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 680d260515..09f9f021c5 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -4,6 +4,7 @@ global: imports: - ../aliases/box-shadow.yml - ../aliases/offset.yml + - ../aliases/color.yml props: shadow-high: value: "{!shadow-elevation-30}" @@ -219,10 +220,10 @@ props: value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge shadow-border-bottom-weak: - value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-30}" + value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-30}" comment: Weak bottom shadow border for tab container shadow-border-bottom-inverse-weaker: - value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-80}" + value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}" comment: Weaker bottom shadow border for tab container on inverse backgrounds # User @@ -239,15 +240,15 @@ props: comment: Stronger bottom shadow border for notification. # Left / Right - shadow-border-left: - value: "{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100-transparent-20}" + shadow-left: + value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}" comment: Left shadow border for elements. - shadow-border-left-inverse: - value: "{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100}" + shadow-left-inverse: + value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" comment: Left shadow border for inverse elements. - shadow-border-right: - value: "-{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100-transparent-20}" + shadow-right: + value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}" comment: Right shadow border for elements. - shadow-border-right-inverse: - value: "-{!offset-20} {!offset-0} {!offset-20} -{!offset-20} {!palette-gray-100}" + shadow-right-inverse: + value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" comment: Right shadow border for inverse elements. 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 9a1f05bc7e..cc3d2cbb33 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 @@ -176,3 +176,11 @@ props: shadow-border-bottom-weak: value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-80}" comment: Weak bottom shadow border for tab container + + # Left / Right + shadow-left: + value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + comment: Left shadow border for elements. + shadow-right: + value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + comment: Right shadow border for elements. From dafcaf58aa5f9b447c66902903a04399c22f9ecd Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 30 Oct 2024 20:43:02 +0530 Subject: [PATCH 17/19] feat(tabs): update tests --- .../__snapshots__/index.test.tsx.snap | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 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 eb48c5a485..b2d7e5bbb0 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -143,25 +143,26 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", - \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 4px #606b85\\", - \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px #8891aa\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"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-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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-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)\\", \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", + \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #1f304c\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -178,6 +179,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-focus-shadow-border\\": \\"0 0 0 4px #606b85, 0 0 0 1px #606b85\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\", + \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\", \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\", @@ -191,7 +193,6 @@ 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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", @@ -202,7 +203,6 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", - \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\", @@ -591,28 +591,29 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", - \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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-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)\\", \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", + \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -629,6 +630,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\", \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\", @@ -642,7 +644,6 @@ 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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", @@ -653,7 +654,6 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", - \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", @@ -1042,28 +1042,29 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", - \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\", \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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-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)\\", \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", + \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1080,6 +1081,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\", \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\", @@ -1093,7 +1095,6 @@ 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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", @@ -1104,7 +1105,6 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", - \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", @@ -1496,25 +1496,26 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", - \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 2px #121c2d, 0 0 0 3px #ffffff, 0 0 0 5px rgba(255, 255, 255, 0.2)\\", - \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\", \\"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-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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-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)\\", \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", + \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8891aa\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1531,6 +1532,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\", + \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\", \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\", @@ -1544,7 +1546,6 @@ 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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", @@ -1555,7 +1556,6 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", - \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\", @@ -1944,28 +1944,29 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #cacdd8\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", - \\"shadow-border-right\\": \\"-4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff\\", - \\"shadow-border-right-inverse\\": \\"-4px 0 4px -4px #121c2d\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\", \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -2px 0 -1px #394762\\", + \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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-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)\\", \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", + \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #aeb2c1\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1982,6 +1983,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #c8aff0\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\", \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\", @@ -1995,7 +1997,6 @@ 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-border-left\\": \\"4px 0 4px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", @@ -2006,7 +2007,6 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", - \\"shadow-border-left-inverse\\": \\"4px 0 4px -4px #121c2d\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\", From 89d143b1b72f347f83d7b22ceb3c4840b2e07052 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 31 Oct 2024 10:56:07 +0530 Subject: [PATCH 18/19] feat(tabs): implement changes from review --- .changeset/dirty-mails-kick.md | 6 +++++ .changeset/tender-bugs-itch.md | 6 +++++ .changeset/tricky-jeans-collect.md | 4 +--- .../components/tabs/src/TabList.tsx | 3 +-- .../__snapshots__/index.test.tsx.snap | 22 ++++++++++--------- .../tokens/global/box-shadow.yml | 4 ++-- 6 files changed, 28 insertions(+), 17 deletions(-) create mode 100644 .changeset/dirty-mails-kick.md create mode 100644 .changeset/tender-bugs-itch.md diff --git a/.changeset/dirty-mails-kick.md b/.changeset/dirty-mails-kick.md new file mode 100644 index 0000000000..5fe5bfaff7 --- /dev/null +++ b/.changeset/dirty-mails-kick.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/in-page-navigation": patch +"@twilio-paste/core": patch +--- + +[In Page Navigation]: Fix underline bug caused due to pixel rounding diff --git a/.changeset/tender-bugs-itch.md b/.changeset/tender-bugs-itch.md new file mode 100644 index 0000000000..3026c13b2e --- /dev/null +++ b/.changeset/tender-bugs-itch.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/code-block": patch +"@twilio-paste/core": patch +--- + +[Code Block]: Fix underline bug caused due to pixel rounding diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md index ab43389286..374b81ca25 100644 --- a/.changeset/tricky-jeans-collect.md +++ b/.changeset/tricky-jeans-collect.md @@ -1,8 +1,6 @@ --- -"@twilio-paste/code-block": patch -"@twilio-paste/in-page-navigation": patch "@twilio-paste/tabs": patch "@twilio-paste/core": patch --- -[Tabs]: Fix underline bug for trackpad zoom +[Tabs]: Fix underline bug caused due to pixel rounding diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx index d9c585d1b0..1855c9568c 100644 --- a/packages/paste-core/components/tabs/src/TabList.tsx +++ b/packages/paste-core/components/tabs/src/TabList.tsx @@ -114,8 +114,7 @@ const HorizontalTabList: React.FC 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 b2d7e5bbb0..ed37f57e8c 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -131,6 +131,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"border-width-40\\": \\"8px\\", \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\", + \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\", @@ -140,7 +141,6 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"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\\", @@ -154,7 +154,6 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"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-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -168,6 +167,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -207,6 +207,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\", \\"font-family-text-japanese\\": \\"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif\\", @@ -582,6 +583,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"border-width-40\\": \\"8px\\", \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", + \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", @@ -591,7 +593,6 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -605,7 +606,6 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -619,6 +619,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -1033,6 +1034,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"border-width-40\\": \\"8px\\", \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", + \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", @@ -1042,7 +1044,6 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -1056,7 +1057,6 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1070,6 +1070,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -1484,6 +1485,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"border-width-40\\": \\"8px\\", \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\", + \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\", @@ -1493,7 +1495,6 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"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\\", @@ -1507,7 +1508,6 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"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-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1521,6 +1521,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -1560,6 +1561,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", + \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\", \\"font-family-text-japanese\\": \\"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif\\", @@ -1935,6 +1937,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"border-width-40\\": \\"8px\\", \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #c8aff0\\", \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", + \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", @@ -1944,7 +1947,6 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive-weaker\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-primary-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", @@ -1958,7 +1960,6 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"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-border-error-strong\\": \\"0 0 0 1px #750c0c\\", - \\"shadow-border-bottom-inverse-weaker\\": \\"inset 0 -1px 0 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\\", @@ -1972,6 +1973,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", \\"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\\", diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 09f9f021c5..e9b971cdc9 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -219,10 +219,10 @@ props: shadow-border-bottom-inverse-new-weaker: value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}" comment: Bottom shadow border for the sidebar beta badge - shadow-border-bottom-weak: + shadow-border-bottom-weak-inset: value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-30}" comment: Weak bottom shadow border for tab container - shadow-border-bottom-inverse-weaker: + shadow-border-bottom-inverse-weaker-inset: value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}" comment: Weaker bottom shadow border for tab container on inverse backgrounds From 20fe9afade1c6a8f1cac6eca3d9f19c68ee0c603 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 31 Oct 2024 10:58:10 +0530 Subject: [PATCH 19/19] feat(tabs): update token name --- .../__tests__/__snapshots__/index.test.tsx.snap | 6 ++---- .../tokens/themes/dark/global/box-shadow.yml | 4 ++-- 2 files changed, 4 insertions(+), 6 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 ed37f57e8c..92dbb2c078 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -167,7 +167,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", - \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"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\\", @@ -207,7 +207,6 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\", \\"font-family-text-japanese\\": \\"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif\\", @@ -1521,7 +1520,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", - \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\", + \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"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\\", @@ -1561,7 +1560,6 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", - \\"shadow-border-bottom-weak\\": \\"inset 0 -2px 0 -1px #394762\\", \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\", \\"font-family-text-japanese\\": \\"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif\\", 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 cc3d2cbb33..b34336e5a2 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 @@ -173,8 +173,8 @@ props: comment: Shadow border for user. # Bottom borders - shadow-border-bottom-weak: - value: "inset {!offset-0} -{!offset-10} {!offset-0} {!offset-negative-05} {!palette-gray-80}" + shadow-border-bottom-weak-inset: + value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}" comment: Weak bottom shadow border for tab container # Left / Right