[Layout foundations] Refactor token types

.changeset/three-games-cough.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': patch
+'@shopify/polaris-tokens': minor
+---
+
+Refactored token types in primitive Layout components
+Exposed `DepthShadowAlias` type

polaris-react/src/components/AlphaCard/AlphaCard.tsx

@@ -1,35 +1,33 @@
+import type {
+  BreakpointsAlias,
+  ColorsTokenName,
+  DepthShadowAlias,
+  ShapeBorderRadiusScale,
+  SpacingSpaceScale,
+} from '@shopify/polaris-tokens';
 import React from 'react';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
-// These should come from polaris-tokens eventually, see #7164
-import {
-  BackgroundColorTokenScale,
-  BorderRadiusTokenScale,
-  Box,
-  DepthTokenScale,
-  SpacingTokenScale,
-} from '../Box';
+import {Box} from '../Box';
 
 type CardElevationTokensScale = Extract<
-  DepthTokenScale,
+  DepthShadowAlias,
   'card' | 'transparent'
 >;
 
 type CardBackgroundColorTokenScale = Extract<
-  BackgroundColorTokenScale,
+  ColorsTokenName,
   'surface' | 'surface-subdued'
 >;
 
-type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
 export interface AlphaCardProps {
   /** Elements to display inside card */
   children?: React.ReactNode;
   backgroundColor?: CardBackgroundColorTokenScale;
   hasBorderRadius?: boolean;
   elevation?: CardElevationTokensScale;
-  padding?: SpacingTokenScale;
-  roundedAbove?: Breakpoint;
+  padding?: SpacingSpaceScale;
+  roundedAbove?: BreakpointsAlias;
 }
 
 export const AlphaCard = ({
@@ -41,7 +39,7 @@ export const AlphaCard = ({
   roundedAbove,
 }: AlphaCardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius = '2' as BorderRadiusTokenScale;
+  const defaultBorderRadius = '2' as ShapeBorderRadiusScale;
 
   let hasBorderRadius = !roundedAbove && hasBorderRadiusProp;
 

polaris-react/src/components/AlphaStack/AlphaStack.tsx

@@ -1,23 +1,17 @@
 import React from 'react';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
 import styles from './AlphaStack.scss';
 
-type SpacingTokenGroup = typeof spacing;
-type SpacingTokenName = keyof SpacingTokenGroup;
-
-// TODO: Bring this logic into tokens
-type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
-
 type Align = 'start' | 'end' | 'center';
 
 export interface AlphaStackProps {
   /** Elements to display inside stack */
   children?: React.ReactNode;
   /** Adjust spacing between elements */
-  spacing?: Spacing;
+  spacing?: SpacingSpaceScale;
   /** Adjust vertical alignment of elements */
   align?: Align;
 }

polaris-react/src/components/Bleed/Bleed.tsx

@@ -1,34 +1,27 @@
 import React from 'react';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
 import {sanitizeCustomProperties} from '../../utilities/css';
 
 import styles from './Bleed.scss';
 
-type SpacingTokenName = keyof typeof spacing;
-
-// TODO: Bring this logic into tokens
-type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
-  ? Scale
-  : never;
-
 interface Spacing {
-  bottom: SpacingTokenScale;
-  left: SpacingTokenScale;
-  right: SpacingTokenScale;
-  top: SpacingTokenScale;
+  bottom: SpacingSpaceScale;
+  left: SpacingSpaceScale;
+  right: SpacingSpaceScale;
+  top: SpacingSpaceScale;
 }
 
 export interface BleedProps {
   /** Elements to display inside tile */
   children: React.ReactNode;
-  spacing?: SpacingTokenScale;
-  horizontal?: SpacingTokenScale;
-  vertical?: SpacingTokenScale;
-  top?: SpacingTokenScale;
-  bottom?: SpacingTokenScale;
-  left?: SpacingTokenScale;
-  right?: SpacingTokenScale;
+  spacing?: SpacingSpaceScale;
+  horizontal?: SpacingSpaceScale;
+  vertical?: SpacingSpaceScale;
+  top?: SpacingSpaceScale;
+  bottom?: SpacingSpaceScale;
+  left?: SpacingSpaceScale;
+  right?: SpacingSpaceScale;
 }
 
 export const Bleed = ({

polaris-react/src/components/Box/Box.tsx

@@ -1,12 +1,16 @@
 import React, {createElement, forwardRef, ReactNode} from 'react';
-import type {colors, depth, shape, spacing} from '@shopify/polaris-tokens';
+import type {
+  ColorsTokenName,
+  DepthShadowAlias,
+  ShapeTokenName,
+  SpacingSpaceScale,
+} from '@shopify/polaris-tokens';
 
 import {classNames, sanitizeCustomProperties} from '../../utilities/css';
 
 import styles from './Box.scss';
 
-type ColorsTokenName = keyof typeof colors;
-export type BackgroundColorTokenScale = Extract<
+type BackgroundColorTokenScale = Extract<
   ColorsTokenName,
   | 'background'
   | `background-${string}`
@@ -18,13 +22,6 @@ export type BackgroundColorTokenScale = Extract<
 >;
 type ColorTokenScale = Extract<ColorsTokenName, 'text' | `text-${string}`>;
 
-type DepthTokenName = keyof typeof depth;
-type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>;
-export type DepthTokenScale = ShadowsTokenName extends `shadow-${infer Scale}`
-  ? Scale
-  : never;
-
-type ShapeTokenName = keyof typeof shape;
 type BorderShapeTokenScale = ShapeTokenName extends `border-${infer Scale}`
   ? Scale
   : never;
@@ -40,7 +37,7 @@ interface Border {
   top: BorderTokenScale;
 }
 
-export type BorderRadiusTokenScale = Extract<
+type BorderRadiusTokenScale = Extract<
   BorderShapeTokenScale,
   `radius-${string}`
 > extends `radius-${infer Scale}`
@@ -54,16 +51,11 @@ interface BorderRadius {
   topRight: BorderRadiusTokenScale;
 }
 
-type SpacingTokenName = keyof typeof spacing;
-export type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
-  ? Scale
-  : never;
-
 interface Spacing {
-  bottom: SpacingTokenScale;
-  left: SpacingTokenScale;
-  right: SpacingTokenScale;
-  top: SpacingTokenScale;
+  bottom: SpacingSpaceScale;
+  left: SpacingSpaceScale;
+  right: SpacingSpaceScale;
+  top: SpacingSpaceScale;
 }
 
 type Element = 'div' | 'span';
@@ -98,29 +90,29 @@ export interface BoxProps {
   /** Color of children */
   color?: ColorTokenScale;
   /** Spacing outside of container */
-  margin?: SpacingTokenScale;
+  margin?: SpacingSpaceScale;
   /** Bottom spacing outside of container */
-  marginBottom?: SpacingTokenScale;
+  marginBottom?: SpacingSpaceScale;
   /** Left spacing outside of container */
-  marginLeft?: SpacingTokenScale;
+  marginLeft?: SpacingSpaceScale;
   /** Right spacing outside of container */
-  marginRight?: SpacingTokenScale;
+  marginRight?: SpacingSpaceScale;
   /** Top spacing outside of container */
-  marginTop?: SpacingTokenScale;
+  marginTop?: SpacingSpaceScale;
   /** Maximum width of container */
   maxWidth?: string;
   /** Spacing around children */
-  padding?: SpacingTokenScale;
+  padding?: SpacingSpaceScale;
   /** Bottom spacing around children */
-  paddingBottom?: SpacingTokenScale;
+  paddingBottom?: SpacingSpaceScale;
   /** Left spacing around children */
-  paddingLeft?: SpacingTokenScale;
+  paddingLeft?: SpacingSpaceScale;
   /** Right spacing around children */
-  paddingRight?: SpacingTokenScale;
+  paddingRight?: SpacingSpaceScale;
   /** Top spacing around children */
-  paddingTop?: SpacingTokenScale;
+  paddingTop?: SpacingSpaceScale;
   /** Shadow */
-  shadow?: DepthTokenScale;
+  shadow?: DepthShadowAlias;
 }
 
 export const Box = forwardRef<HTMLElement, BoxProps>(

polaris-react/src/components/Columns/Columns.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {
+  BreakpointsAlias,
+  SpacingSpaceScale,
+} from '@shopify/polaris-tokens';
 
 import {sanitizeCustomProperties} from '../../utilities/css';
 
 import styles from './Columns.scss';
 
-type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type SpacingName = keyof typeof spacing;
-type SpacingScale = SpacingName extends `space-${infer Scale}` ? Scale : never;
-
 type Columns = {
-  [Breakpoint in Breakpoints]?: number | string;
+  [Breakpoint in BreakpointsAlias]?: number | string;
 };
 
 type Gap = {
-  [Breakpoint in Breakpoints]?: SpacingScale;
+  [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
 export interface ColumnsProps {

polaris-react/src/components/Inline/Inline.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
 import {elementChildren} from '../../utilities/components';
 
 import styles from './Inline.scss';
 
-type SpacingTokenGroup = typeof spacing;
-type SpacingTokenName = keyof SpacingTokenGroup;
-
-// TODO: Bring this logic into tokens
-type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
-
 const AlignY = {
   top: 'start',
   center: 'center',
@@ -26,7 +20,7 @@ export interface InlineProps {
   /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */
   wrap?: boolean;
   /** Adjust spacing between elements */
-  spacing?: Spacing;
+  spacing?: SpacingSpaceScale;
   /** Adjust vertical alignment of elements */
   alignY?: keyof typeof AlignY;
   /** Adjust horizontal alignment of elements */

polaris-tokens/src/index.ts

@@ -15,7 +15,11 @@ export type {
 
 export type {ColorsTokenGroup, ColorsTokenName} from './token-groups/colors';
 
-export type {DepthTokenGroup, DepthTokenName} from './token-groups/depth';
+export type {
+  DepthTokenGroup,
+  DepthTokenName,
+  DepthShadowAlias,
+} from './token-groups/depth';
 
 export type {
   FontTokenGroup,

polaris-tokens/src/token-groups/depth.ts

@@ -44,3 +44,11 @@ export const depth = {
 
 export type DepthTokenGroup = TokenGroup<typeof depth>;
 export type DepthTokenName = keyof DepthTokenGroup;
+
+// temporary until shadows prefix is removed
+type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>;
+
+// e.g. "transparent" | "faint" | "base" | "deep" | ...
+export type DepthShadowAlias = ShadowsTokenName extends `shadow-${infer Scale}`
+  ? Scale
+  : never;