diff --git a/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
index e8c87e0c083..0efc4be794c 100644
--- a/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
+++ b/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
@@ -107,7 +107,7 @@ export class PopoverOverlay extends PureComponent
{
this.clearTransitionTimeout();
this.enteringTimer = window.setTimeout(() => {
this.setState({transitionStatus: TransitionStatus.Entered});
- }, parseInt(motion['duration-100'], 10));
+ }, parseInt(motion['motion-duration-100'], 10));
});
}
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.tsx b/polaris-react/src/components/ProgressBar/ProgressBar.tsx
index c93b03a3736..c9991b5ccb2 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.tsx
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.tsx
@@ -63,8 +63,8 @@ export function ProgressBar({
const parsedProgress = parseProgress(progress, warningMessage);
const progressBarDuration = hasAppearAnimation
- ? motion['duration-500']
- : motion['duration-0'];
+ ? motion['motion-duration-500']
+ : motion['motion-duration-0'];
/* eslint-disable @shopify/jsx-no-hardcoded-content */
return (
diff --git a/polaris-react/src/components/Sheet/Sheet.tsx b/polaris-react/src/components/Sheet/Sheet.tsx
index ed50cfb1baf..a7f8ae7f361 100644
--- a/polaris-react/src/components/Sheet/Sheet.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.tsx
@@ -94,7 +94,7 @@ export function Sheet({
classNames={
isNavigationCollapsed ? BOTTOM_CLASS_NAMES : RIGHT_CLASS_NAMES
}
- timeout={parseInt(motion['duration-300'], 10)}
+ timeout={parseInt(motion['motion-duration-300'], 10)}
in={open}
mountOnEnter
unmountOnExit
diff --git a/polaris-tokens/README.md b/polaris-tokens/README.md
index 70812e59198..8202166c451 100644
--- a/polaris-tokens/README.md
+++ b/polaris-tokens/README.md
@@ -24,13 +24,13 @@ Accessing all of the available token groups
// Token values only
import {tokens} from '@shopify/polaris-tokens';
-console.log(tokens.colors.background); // 'rgba(246, 246, 247, 1)'
+console.log(tokens.color['color-bg']); // 'rgba(...)'
// Tokens with metadata
import {metadata} from '@shopify/polaris-tokens';
-console.log(metadata.colors.background.value); // 'rgba(246, 246, 247, 1)'
-console.log(metadata.colors.background.description); // 'For use as a background color, in components such as Page and Frame backgrounds.'
+console.log(metadata.color['color-bg'].value); // 'rgba(...)'
+console.log(metadata.color['color-bg'].description); // 'For use as a background color, in components such as Page and Frame backgrounds.'
```
#### CSS
@@ -41,7 +41,7 @@ Importing all of the css variables. CSS variables are prefixed with `--p` to sig
import '@shopify/polaris-tokens/css/styles.css';
div {
- background: var(--p-background);
+ background: var(--p-color-bg);
}
```
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index bcc39ac7360..299e7355a59 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -7,23 +7,19 @@ export type {
MetadataGroup,
} from './types';
+export type {
+ BorderTokenGroup,
+ BorderTokenName,
+ BorderRadiusScale,
+ BorderWidthScale,
+} from './token-groups/border';
+
export type {
BreakpointsTokenGroup,
BreakpointsTokenName,
BreakpointsAlias,
} from './token-groups/breakpoints';
-export type {
- ColorsTokenGroup,
- ColorsTokenName,
- ColorsBackgroundTokenAlias,
- ColorsActionTokenAlias,
- ColorsSurfaceTokenAlias,
- ColorsBackdropTokenAlias,
- ColorsOverlayTokenAlias,
- ColorsBorderTokenAlias,
-} from './token-groups/colors';
-
export type {
ColorTokenGroup,
ColorTokenName,
@@ -33,12 +29,6 @@ export type {
ColorTextAlias,
} from './token-groups/color';
-export type {
- DepthTokenGroup,
- DepthTokenName,
- DepthShadowAlias,
-} from './token-groups/depth';
-
export type {
FontTokenGroup,
FontTokenName,
@@ -60,27 +50,6 @@ export type {
ShadowAlias,
} from './token-groups/shadow';
-export type {
- ShapeTokenGroup,
- ShapeTokenName,
- ShapeBorderRadiusScale,
- ShapeBorderRadiusAlias,
- ShapeBorderWidthScale,
-} from './token-groups/shape';
-
-export type {
- BorderTokenGroup,
- BorderTokenName,
- BorderRadiusScale,
- BorderWidthScale,
-} from './token-groups/border';
-
-export type {
- SpacingTokenGroup,
- SpacingTokenName,
- SpacingSpaceScale,
-} from './token-groups/spacing';
-
export type {
SpaceTokenGroup,
SpaceTokenName,
diff --git a/polaris-tokens/src/metadata.ts b/polaris-tokens/src/metadata.ts
index ed8a0c08cb3..01f1a1943e3 100644
--- a/polaris-tokens/src/metadata.ts
+++ b/polaris-tokens/src/metadata.ts
@@ -1,15 +1,11 @@
import type {Exact, MetadataBase} from './types';
import {tokensToRems} from './utilities';
-import {breakpoints} from './token-groups/breakpoints';
import {border} from './token-groups/border';
-import {depth} from './token-groups/depth';
-import {font} from './token-groups/font';
+import {breakpoints} from './token-groups/breakpoints';
import {color} from './token-groups/color';
-import {colors} from './token-groups/colors';
+import {font} from './token-groups/font';
import {motion} from './token-groups/motion';
import {shadow} from './token-groups/shadow';
-import {shape} from './token-groups/shape';
-import {spacing} from './token-groups/spacing';
import {space} from './token-groups/space';
import {zIndex} from './token-groups/zIndex';
@@ -17,13 +13,9 @@ export const metadata = createMetadata({
breakpoints: tokensToRems(breakpoints),
border: tokensToRems(border),
color,
- colors,
- depth,
font: tokensToRems(font),
motion,
shadow: tokensToRems(shadow),
- shape: tokensToRems(shape),
- spacing: tokensToRems(spacing),
space: tokensToRems(space),
zIndex,
});
diff --git a/polaris-tokens/src/token-groups/depth.ts b/polaris-tokens/src/token-groups/depth.ts
deleted file mode 100644
index cce049fd992..00000000000
--- a/polaris-tokens/src/token-groups/depth.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type {MetadataProperties} from '../types';
-
-export type DepthShadowAlias =
- | 'base'
- | 'transparent'
- | 'faint'
- | 'deep'
- | 'button'
- | 'top-bar'
- | 'card'
- | 'popover'
- | 'layer'
- | 'modal';
-
-type DepthShadowsAlias = 'inset-button' | 'inset-button-pressed';
-
-export type DepthTokenName =
- | `shadow-${DepthShadowAlias}`
- | `shadows-${DepthShadowsAlias}`;
-
-export type DepthTokenGroup = {
- [TokenName in DepthTokenName]: string;
-};
-
-export const depth: {
- [TokenName in DepthTokenName]: MetadataProperties;
-} = {
- 'shadow-transparent': {
- value: '0 0 0 0 transparent',
- },
- 'shadow-faint': {
- value: '0 1px 0 0 rgba(22, 29, 37, 0.05)',
- },
- 'shadow-base': {
- value:
- '0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)',
- },
- 'shadow-deep': {
- value: '0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)',
- },
- 'shadow-button': {
- value: '0 1px 0 rgba(0, 0, 0, 0.05)',
- },
- 'shadow-top-bar': {
- value: '0 2px 2px -1px rgba(0, 0, 0, 0.15)',
- },
- 'shadow-card': {
- value: '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)',
- },
- 'shadow-popover': {
- value:
- '0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12)',
- },
- 'shadow-layer': {
- value:
- '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)',
- },
- 'shadow-modal': {
- value: '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)',
- },
- 'shadows-inset-button': {
- value: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
- },
- 'shadows-inset-button-pressed': {
- value: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
- },
-};
diff --git a/polaris-tokens/src/token-groups/motion.ts b/polaris-tokens/src/token-groups/motion.ts
index e7d7cccc419..6bf7428badd 100644
--- a/polaris-tokens/src/token-groups/motion.ts
+++ b/polaris-tokens/src/token-groups/motion.ts
@@ -30,9 +30,6 @@ type MotionTimingFunctionAlias =
| 'linear';
export type MotionTokenName =
- | `duration-${MotionDurationScale}`
- | `keyframes-${MotionKeyframesAlias}`
- | MotionTimingFunctionAlias
| `motion-duration-${MotionDurationScale}`
| `motion-keyframes-${MotionKeyframesAlias}`
| `motion-${MotionTimingFunctionAlias}`;
@@ -44,87 +41,6 @@ export type MotionTokenGroup = {
export const motion: {
[TokenName in MotionTokenName]: MetadataProperties;
} = {
- 'duration-0': {
- value: '0ms',
- },
- 'duration-50': {
- value: '50ms',
- },
- 'duration-100': {
- value: '100ms',
- },
- 'duration-150': {
- value: '150ms',
- },
- 'duration-200': {
- value: '200ms',
- },
- 'duration-250': {
- value: '250ms',
- },
- 'duration-300': {
- value: '300ms',
- },
- 'duration-350': {
- value: '350ms',
- },
- 'duration-400': {
- value: '400ms',
- },
- 'duration-450': {
- value: '450ms',
- },
- 'duration-500': {
- value: '500ms',
- },
- 'duration-5000': {
- value: '5000ms',
- },
- ease: {
- value: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
- description:
- 'Responds quickly and finishes with control. A great default for any user interaction.',
- },
- 'ease-in': {
- value: 'cubic-bezier(0.42, 0, 1, 1)',
- description: 'Starts slowly and finishes at top speed. Use sparingly.',
- },
- 'ease-out': {
- value: 'cubic-bezier(0, 0, 0.58, 1)',
- description: 'Starts at top speed and finishes slowly. Use sparingly.',
- },
- 'ease-in-out': {
- value: 'cubic-bezier(0.42, 0, 0.58, 1)',
- description:
- 'Starts and finishes with equal speed. A good default for transitions triggered by the system.',
- },
- linear: {
- value: 'cubic-bezier(0, 0, 1, 1)',
- description:
- 'Moves with constant speed. Use for continuous and mechanical animations, such as rotating spinners.',
- },
- 'keyframes-bounce': {
- value:
- '{ from, 65%, 85% { transform: scale(1) } 75% { transform: scale(0.85) } 82.5% { transform: scale(1.05) } }',
- },
- 'keyframes-fade-in': {
- value: '{ to { opacity: 1 } }',
- },
- 'keyframes-pulse': {
- value:
- '{ from, 75% { transform: scale(0.85); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }',
- },
- 'keyframes-spin': {
- value: '{ to { transform: rotate(1turn) } }',
- },
- 'keyframes-appear-above': {
- value:
- '{ from { transform: translateY(var(--p-space-1)); opacity: 0; } to { transform: none; opacity: 1; } }',
- },
- 'keyframes-appear-below': {
- value:
- '{ from { transform: translateY(calc(var(--p-space-1) * -1)); opacity: 0; } to { transform: none; opacity: 1; } }',
- },
'motion-duration-0': {
value: '0ms',
},
diff --git a/polaris-tokens/src/token-groups/shape.ts b/polaris-tokens/src/token-groups/shape.ts
deleted file mode 100644
index f430216eff2..00000000000
--- a/polaris-tokens/src/token-groups/shape.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import type {MetadataProperties} from '../types';
-
-export type ShapeBorderRadiusScale =
- | '05'
- | '1'
- | '2'
- | '3'
- | '4'
- | '5'
- | '6'
- | 'full';
-
-export type ShapeBorderRadiusAlias = 'base' | 'large' | 'half';
-
-export type ShapeBorderWidthScale = '1' | '2' | '3' | '4' | '5';
-
-type ShapeBorderAlias =
- | 'base'
- | 'dark'
- | 'transparent'
- | 'divider'
- | 'divider-on-dark';
-
-export type ShapeTokenName =
- | `border-radius-${ShapeBorderRadiusScale}`
- | `border-radius-${ShapeBorderRadiusAlias}`
- | `border-width-${ShapeBorderWidthScale}`
- | `border-${ShapeBorderAlias}`;
-
-export type ShapeTokenGroup = {
- [TokenName in ShapeTokenName]: string;
-};
-
-export const shape: {
- [TokenName in ShapeTokenName]: MetadataProperties;
-} = {
- 'border-radius-05': {
- value: '2px',
- },
- 'border-radius-1': {
- value: '4px',
- },
- 'border-radius-2': {
- value: '8px',
- },
- 'border-radius-3': {
- value: '12px',
- },
- 'border-radius-4': {
- value: '16px',
- },
- 'border-radius-5': {
- value: '20px',
- },
- 'border-radius-6': {
- value: '30px',
- },
- 'border-radius-full': {
- value: '9999px',
- },
- 'border-radius-base': {
- value: '3px',
- },
- 'border-radius-large': {
- value: '6px',
- },
- 'border-radius-half': {
- value: '50%',
- },
- 'border-width-1': {
- value: '1px',
- },
- 'border-width-2': {
- value: '2px',
- },
- 'border-width-3': {
- value: '3px',
- },
- 'border-width-4': {
- value: '4px',
- },
- 'border-width-5': {
- value: '5px',
- },
- 'border-base': {
- value: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
- },
- 'border-dark': {
- value: 'var(--p-border-width-1) solid var(--p-color-border)',
- },
- 'border-transparent': {
- value: 'var(--p-border-width-1) solid transparent',
- },
- 'border-divider': {
- value: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
- },
- 'border-divider-on-dark': {
- value: 'var(--p-border-width-1) solid var(--p-color-border-inverse)',
- },
-};
diff --git a/polaris-tokens/src/token-groups/spacing.ts b/polaris-tokens/src/token-groups/spacing.ts
deleted file mode 100644
index 070f1463353..00000000000
--- a/polaris-tokens/src/token-groups/spacing.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type {MetadataProperties} from '../types';
-
-export type SpacingSpaceScale =
- | '0'
- | '025'
- | '05'
- | '1'
- | '2'
- | '3'
- | '4'
- | '5'
- | '6'
- | '8'
- | '10'
- | '12'
- | '16'
- | '20'
- | '24'
- | '28'
- | '32';
-
-export type SpacingTokenName = `space-${SpacingSpaceScale}`;
-
-export type SpacingTokenGroup = {
- [TokenName in SpacingTokenName]: string;
-};
-
-export const spacing: {
- [TokenName in SpacingTokenName]: MetadataProperties;
-} = {
- 'space-0': {
- value: '0',
- },
- 'space-025': {
- value: '1px',
- },
- 'space-05': {
- value: '2px',
- },
- 'space-1': {
- value: '4px',
- },
- 'space-2': {
- value: '8px',
- },
- 'space-3': {
- value: '12px',
- },
- 'space-4': {
- value: '16px',
- },
- 'space-5': {
- value: '20px',
- },
- 'space-6': {
- value: '24px',
- },
- 'space-8': {
- value: '32px',
- },
- 'space-10': {
- value: '40px',
- },
- 'space-12': {
- value: '48px',
- },
- 'space-16': {
- value: '64px',
- },
- 'space-20': {
- value: '80px',
- },
- 'space-24': {
- value: '96px',
- },
- 'space-28': {
- value: '112px',
- },
- 'space-32': {
- value: '128px',
- },
-};
diff --git a/polaris-tokens/src/token-groups/zIndex.ts b/polaris-tokens/src/token-groups/zIndex.ts
index e61819dfdb1..2aef2296b60 100644
--- a/polaris-tokens/src/token-groups/zIndex.ts
+++ b/polaris-tokens/src/token-groups/zIndex.ts
@@ -14,7 +14,7 @@ export type ZIndexZScale =
| '11'
| '12';
-export type ZIndexTokenName = `z-index-${ZIndexZScale}` | `z-${ZIndexZScale}`;
+export type ZIndexTokenName = `z-index-${ZIndexZScale}`;
export type ZIndexTokenGroup = {
[TokenName in ZIndexTokenName]: string;
@@ -59,40 +59,4 @@ export const zIndex: {
'z-index-12': {
value: '520',
},
- 'z-1': {
- value: '100',
- },
- 'z-2': {
- value: '400',
- },
- 'z-3': {
- value: '510',
- },
- 'z-4': {
- value: '512',
- },
- 'z-5': {
- value: '513',
- },
- 'z-6': {
- value: '514',
- },
- 'z-7': {
- value: '515',
- },
- 'z-8': {
- value: '516',
- },
- 'z-9': {
- value: '517',
- },
- 'z-10': {
- value: '518',
- },
- 'z-11': {
- value: '519',
- },
- 'z-12': {
- value: '520',
- },
};
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
index f059df57931..9b22adbd758 100644
--- a/polaris-tokens/src/utilities.ts
+++ b/polaris-tokens/src/utilities.ts
@@ -110,7 +110,7 @@ export function getKeyframeNames(motionTokenGroup: TokenGroup) {
/**
* Allowed Polaris token custom properties.
*
- * Result: ['--p-background', '--p-text', etc...]
+ * Result: ['--p-color-bg-app', '--p-color-text', etc...]
*/
export function getCustomPropertyNames(tokens: Tokens) {
return Object.entries(tokens)
diff --git a/polaris-tokens/tests/toStyleSheet.test.js b/polaris-tokens/tests/toStyleSheet.test.js
index 7fa3bda3c40..9f2cf34af76 100644
--- a/polaris-tokens/tests/toStyleSheet.test.js
+++ b/polaris-tokens/tests/toStyleSheet.test.js
@@ -24,14 +24,13 @@ const mockMotionTokenGroup = {
};
const mockTokens = {
- colors: {},
border: {},
- // Note: We don't need to assign mock values to the remaining static tokens.
- depth: mockTokenGroup,
+ color: {},
font: {},
motion: {},
- shape: {},
- spacing: {},
+ // Note: We don't need to assign mock values to the remaining static tokens.
+ shadow: mockTokenGroup,
+ space: {},
zIndex: {},
};
diff --git a/polaris-tokens/tests/utilities.test.js b/polaris-tokens/tests/utilities.test.js
index 94e8314fdeb..69ab3e9f533 100644
--- a/polaris-tokens/tests/utilities.test.js
+++ b/polaris-tokens/tests/utilities.test.js
@@ -30,14 +30,13 @@ const mockMotionTokenGroup = {
};
const mockTokens = {
- colors: mockTokenGroup,
- border: {},
// Note: We don't need to assign mock values to the remaining static tokens.
- depth: {},
+ color: mockTokenGroup,
+ border: {},
+ font: {},
motion: {},
- shape: {},
- spacing: {},
- typography: {},
+ shadow: {},
+ space: {},
zIndex: {},
};
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md
index 45a9c845473..91a4872b00d 100644
--- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md
@@ -9,7 +9,7 @@ keywords:
```diff
// Do
-+ animation: var(--p-keyframes-spin) var(--p-duration-500) linear infinite;
++ animation: var(--p-motion-keyframes-spin) var(--p-motion-duration-500) linear infinite;
// Don't
- @keyframes spin {
- from {
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md
index c9563f26b3b..a7f0d7aac8d 100644
--- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md
@@ -9,7 +9,7 @@ keywords:
```diff
// Do
-+ transition-duration: var(--p-duration-200);
++ transition-duration: var(--p-motion-duration-200);
// Don't
- transition-duration: 200ms;
```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md
index dd352d9e0e7..3d68f75fbc4 100644
--- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md
@@ -9,7 +9,7 @@ keywords:
```diff
// Do
-+ transition-duration: var(--p-duration-200);
++ transition-duration: var(--p-motion-duration-200);
// Don't
- transition-duration: 200ms;
```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md
index 11cf625cfdc..ce30d28f7cd 100644
--- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md
@@ -9,7 +9,7 @@ keywords:
```diff
// Do
-+ transition: var(--p-duration-500) var(--p-ease);
++ transition: var(--p-motion-duration-500) var(--p-motion-ease);
// Don't
- duration: $skeleton-shimmer-duration var(--p-ease);
```
diff --git a/polaris.shopify.com/pages/api/search/v0/index.tsx b/polaris.shopify.com/pages/api/search/v0/index.tsx
index 2a99250a183..d63e0bd1bf3 100644
--- a/polaris.shopify.com/pages/api/search/v0/index.tsx
+++ b/polaris.shopify.com/pages/api/search/v0/index.tsx
@@ -74,14 +74,14 @@ const getSearchResults = (query?: string) => {
});
});
- const {color, border, font, motion, shadow, spacing, zIndex} = metadata;
+ const {color, border, font, motion, shadow, space, zIndex} = metadata;
const tokenGroups = {
color,
border,
font,
motion,
shadow,
- spacing,
+ space,
zIndex,
};