diff --git a/.changeset/hip-eagles-cry.md b/.changeset/hip-eagles-cry.md
new file mode 100644
index 0000000000..f4e8d6d20c
--- /dev/null
+++ b/.changeset/hip-eagles-cry.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/box': minor
+---
+
+[Box] add `_disabled_focus` pseudoprop style
diff --git a/.changeset/metal-bees-tease.md b/.changeset/metal-bees-tease.md
new file mode 100644
index 0000000000..23e7bef5ed
--- /dev/null
+++ b/.changeset/metal-bees-tease.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/code-block': patch
+'@twilio-paste/core': patch
+---
+
+[Codeblock] small adjustment to the backgroundColor on `CodeBlockHeader`
diff --git a/.changeset/pink-ghosts-chew.md b/.changeset/pink-ghosts-chew.md
new file mode 100644
index 0000000000..3d21e26816
--- /dev/null
+++ b/.changeset/pink-ghosts-chew.md
@@ -0,0 +1,10 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/design-tokens': patch
+---
+
+[Design Tokens] adjusting inverse colors for the `Twilio` and `Twilio-Dark` themes
+
+- `color-background-body-inverse` from `gray-110` to `gray-100`
+- `shadow-border-inverse-weakest` from `gray-90` to `gray-100`
+- `color-border-inverse-weakest` from `gray-90` to `gray-100`
diff --git a/.changeset/rude-socks-divide.md b/.changeset/rude-socks-divide.md
new file mode 100644
index 0000000000..1dfc13d18a
--- /dev/null
+++ b/.changeset/rude-socks-divide.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/tabs': patch
+'@twilio-paste/core': patch
+---
+
+[Tabs] update horizontal tabs style. They are now visually distinct from the InPageNavigation component.
diff --git a/.changeset/selfish-hats-behave.md b/.changeset/selfish-hats-behave.md
new file mode 100644
index 0000000000..5ffd8e431e
--- /dev/null
+++ b/.changeset/selfish-hats-behave.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/design-tokens': minor
+---
+
+[Design-tokens] add the `color-border-weakest` token
diff --git a/.changeset/three-geese-remember.md b/.changeset/three-geese-remember.md
new file mode 100644
index 0000000000..18df67d750
--- /dev/null
+++ b/.changeset/three-geese-remember.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/tooltip': patch
+'@twilio-paste/core': patch
+---
+
+[Tooltip] improve border color of the Tooltip
diff --git a/.eslintrc.js b/.eslintrc.js
index f9c4c35db1..88164a88b0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -63,6 +63,7 @@ module.exports = {
'_focus_hover',
'_focus_placeholder',
'_checked_hover',
+ '_disabled_focus',
'_selected_hover',
'_selected_focus',
'_selected_focusVisible',
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c27dd3ff9d..0a1572d9bb 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -16,7 +16,7 @@ export const globalTypes = {
theme: {
name: 'Paste Theme',
description: 'Global theme for components',
- defaultValue: 'default',
+ defaultValue: 'twilio',
toolbar: {
// All available icons
// https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
@@ -115,14 +115,18 @@ export const decorators = [
-
+
-
+
diff --git a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
index 1f8c66a4e6..75a0618b5f 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
@@ -16,7 +16,7 @@ export const CodeBlockHeader = React.forwardRef(({children, element, ...t
cursor={props['aria-disabled'] ? 'not-allowed' : 'pointer'}
element={elementName}
fontSize="fontSize30"
- lineHeight="lineHeight10"
+ lineHeight="lineHeight30"
fontWeight="fontWeightMedium"
overflow={orientation !== 'vertical' ? 'hidden' : undefined}
position="relative"
diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx
index 10a1e32c35..93553cdc93 100644
--- a/packages/paste-core/components/tabs/src/TabList.tsx
+++ b/packages/paste-core/components/tabs/src/TabList.tsx
@@ -17,11 +17,26 @@ export interface TabListProps {
variant?: Variants;
}
-const HorizontalTabList: React.FC> = ({children, element}) => (
-
- {children}
-
-);
+const HorizontalTabList: React.FC> = ({
+ children,
+ variant,
+ element,
+}) => {
+ const isInverse = variant === 'inverse' || variant === 'inverse_fitted';
+
+ return (
+
+ {children}
+
+ );
+};
HorizontalTabList.displayName = 'HorizontalTabList';
@@ -41,7 +56,9 @@ const TabList = React.forwardRef(({children, eleme
return (
- {children}
+
+ {children}
+
);
});
diff --git a/packages/paste-core/components/tabs/src/TabPanel.tsx b/packages/paste-core/components/tabs/src/TabPanel.tsx
index 86721e3177..0db6d88810 100644
--- a/packages/paste-core/components/tabs/src/TabPanel.tsx
+++ b/packages/paste-core/components/tabs/src/TabPanel.tsx
@@ -8,6 +8,7 @@ import {TabsContext} from './TabsContext';
import {getElementName} from './utils';
export const tabPanelStyles = {
+ paddingTop: 'space60',
borderRadius: 'borderRadius20',
_focusVisible: {
boxShadow: 'shadowFocus',
diff --git a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
index 8d3a8deae9..c8aad8b729 100644
--- a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
+++ b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
@@ -12,7 +12,7 @@ const TooltipArrow: React.FC> = (prop
);
diff --git a/packages/paste-core/components/tooltip/src/index.tsx b/packages/paste-core/components/tooltip/src/index.tsx
index 763c69a17b..dd86aa12f5 100644
--- a/packages/paste-core/components/tooltip/src/index.tsx
+++ b/packages/paste-core/components/tooltip/src/index.tsx
@@ -18,7 +18,7 @@ const StyledTooltip = React.forwardRef(({style, elemen
borderRadius="borderRadius30"
borderStyle="solid"
borderWidth="borderWidth10"
- borderColor="colorBorderInverseWeaker"
+ borderColor="colorBorderInverse"
element={element}
maxWidth="size30"
paddingX="space50"
diff --git a/packages/paste-core/primitives/box/src/PseudoPropStyles.ts b/packages/paste-core/primitives/box/src/PseudoPropStyles.ts
index f242b63524..8c034d9bbf 100644
--- a/packages/paste-core/primitives/box/src/PseudoPropStyles.ts
+++ b/packages/paste-core/primitives/box/src/PseudoPropStyles.ts
@@ -13,6 +13,7 @@ export const PseudoPropStyles = {
_odd: '&:nth-of-type(odd)',
_disabled:
'&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover',
+ _disabled_focus: '&:disabled:focus,&[aria-disabled=true]:focus',
_checked: '&:checked, &[aria-checked=true]',
_checked_hover: '&:checked:hover, &[aria-checked=true]:hover',
_mixed: '&:indeterminate, &[aria-checked=mixed]',
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 9ff99912db..7a5b7bd6dd 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -91,6 +91,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"color-border-error-weak\\": \\"rgb(173, 17, 17)\\",
\\"color-border-neutral-weak\\": \\"rgb(4, 60, 181)\\",
\\"color-border\\": \\"rgb(96, 107, 133)\\",
+ \\"color-border-weakest\\": \\"rgb(13, 19, 28)\\",
\\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
\\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-border-success-weak\\": \\"rgb(14, 124, 58)\\",
@@ -484,6 +485,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
\\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
\\"color-border\\": \\"rgb(136, 145, 170)\\",
+ \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
\\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-border-success-weak\\": \\"rgb(54, 213, 118)\\",
@@ -877,6 +879,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
\\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
\\"color-border\\": \\"rgb(136, 145, 170)\\",
+ \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
\\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-border-success-weak\\": \\"rgb(54, 213, 118)\\",
@@ -1230,7 +1233,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
\\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
- \\"color-background-body-inverse\\": \\"rgb(13, 19, 28)\\",
+ \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
\\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
\\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
\\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
@@ -1270,6 +1273,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-border-error-weak\\": \\"rgb(173, 17, 17)\\",
\\"color-border-neutral-weak\\": \\"rgb(4, 60, 181)\\",
\\"color-border\\": \\"rgb(96, 107, 133)\\",
+ \\"color-border-weakest\\": \\"rgb(13, 19, 28)\\",
\\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
\\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-border-success-weak\\": \\"rgb(14, 124, 58)\\",
@@ -1277,7 +1281,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-border-inverse\\": \\"rgb(136, 145, 170)\\",
\\"color-border-destructive-strong\\": \\"rgb(246, 177, 177)\\",
\\"color-border-primary-weak\\": \\"rgb(4, 60, 181)\\",
- \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\",
+ \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\",
\\"color-border-destructive-weak\\": \\"rgb(117, 12, 12)\\",
\\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
\\"color-border-weaker\\": \\"rgb(31, 48, 76)\\",
@@ -1341,7 +1345,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
\\"shadow-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\\",
+ \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
\\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0e7c3a\\",
\\"shadow-border-decorative-40-weaker\\": \\"0 0 0 1px #5817bd\\",
\\"shadow-border-error-stronger\\": \\"0 0 0 1px #fccfcf\\",
@@ -1623,7 +1627,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
\\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
- \\"color-background-body-inverse\\": \\"rgb(15, 22, 33)\\",
+ \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
\\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
\\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
\\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
@@ -1663,6 +1667,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
\\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
\\"color-border\\": \\"rgb(136, 145, 170)\\",
+ \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
\\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-border-success-weak\\": \\"rgb(123, 234, 165)\\",
@@ -1670,7 +1675,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-border-inverse\\": \\"rgb(136, 145, 170)\\",
\\"color-border-destructive-strong\\": \\"rgb(117, 12, 12)\\",
\\"color-border-primary-weak\\": \\"rgb(153, 205, 255)\\",
- \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\",
+ \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\",
\\"color-border-destructive-weak\\": \\"rgb(246, 177, 177)\\",
\\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
\\"color-border-weaker\\": \\"rgb(225, 227, 234)\\",
@@ -1734,7 +1739,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
\\"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\\",
+ \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
\\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #7beaa5\\",
\\"shadow-border-decorative-40-weaker\\": \\"0 0 0 1px #e7dcfa\\",
\\"shadow-border-error-stronger\\": \\"0 0 0 1px #4a0b0b\\",
diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml
index 892931a8d9..d4f23c198c 100644
--- a/packages/paste-design-tokens/tokens/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/global/border-color.yml
@@ -52,6 +52,9 @@ props:
color-border-weaker:
value: "{!palette-gray-20}"
comment: Weaker border color
+ color-border-weakest:
+ value: "{!palette-gray-0}"
+ comment: Weakest border color
color-border-inverse-weakest:
value: "{!palette-gray-90}"
comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
index d790e49af7..e933e0bc1a 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
@@ -18,7 +18,9 @@ props:
color-border-weaker:
value: "{!palette-gray-90}"
comment: Weaker border color
-
+ color-border-weakest:
+ value: "{!palette-gray-110}"
+ comment: Weakest border color
# primary action borders
color-border-primary-strongest:
value: "{!palette-blue-10}"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
index abb9381fe5..d7894b6321 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml
@@ -18,6 +18,9 @@ props:
color-border-weaker:
value: "#EDEFF5"
comment: Weaker border color
+ color-border-weakest:
+ value: "#FFFFFF"
+ comment: Weakest border color
# primary action borders
color-border-primary-strongest:
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 8bdfbc14e4..3a316b4f36 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -19,7 +19,7 @@ props:
# page body
color-background-body-inverse:
- value: "{!palette-gray-110}"
+ value: "{!palette-gray-100}"
comment: Inverse background color used for the main page body.
# status
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml
index afc93108f8..894e3fb6dc 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml
@@ -18,6 +18,11 @@ props:
value: "{!palette-blue-90}"
comment: Weakest primary border color
+ # inverse borders
+ color-border-inverse-weakest:
+ value: "{!palette-gray-100}"
+ comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
+
# status borders
color-border-success-weaker:
value: "{!palette-green-70}"
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml
index f09b789182..8bf95caa1a 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml
@@ -10,6 +10,9 @@ props:
shadow-focus-inverse:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
comment: Shadow for focus ring on interactive elements on inverse backgrounds.
+ shadow-border-inverse-weakest:
+ value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}"
+ comment: Weakest shadow border on interactive elements on inverse backgrounds.
shadow-focus-shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
comment: Shadow for simultaneous focus and border
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
index 816292826c..d5acfada0d 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
@@ -20,7 +20,7 @@ props:
# page body
color-background-body-inverse:
- value: "{!palette-gray-110}"
+ value: "{!palette-gray-100}"
comment: Inverse background color used for the main page body.
# status
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/border-color.yml
index 99664bf580..64b8705949 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/border-color.yml
@@ -9,6 +9,11 @@ props:
value: "{!palette-blue-55}"
comment: Primary border color.
+ # inverse borders
+ color-border-inverse-weakest:
+ value: "{!palette-gray-100}"
+ comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
+
# status borders
color-border-success-weak:
value: "{!palette-green-40}"
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
index 83a78c47ed..4d80847134 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
@@ -10,6 +10,9 @@ props:
shadow-focus-inverse:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
comment: Shadow for focus ring on interactive elements on inverse backgrounds.
+ shadow-border-inverse-weakest:
+ value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}"
+ comment: Weakest shadow border on interactive elements on inverse backgrounds.
shadow-focus-shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-blue-20}"
comment: Shadow for simultaneous focus and border