Add new token group "space" to replace spacing in v11

.changeset/eighty-maps-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Add new Space tokens and types to replace spacing in v11

polaris-for-vscode/src/server.ts

@@ -15,7 +15,13 @@ import type {
 } from 'vscode-languageserver/node';
 import {TextDocument} from 'vscode-languageserver-textdocument';
 
-const excludedTokenGroupNames = ['colors', 'depth', 'legacy', 'shape'] as const;
+const excludedTokenGroupNames = [
+  'colors',
+  'depth',
+  'legacy',
+  'spacing',
+  'shape',
+] as const;
 
 type ExcludedTokenGroupName = typeof excludedTokenGroupNames[number];
 
@@ -82,7 +88,7 @@ const tokenGroupPatterns: TokenGroupPatterns = {
   font: /font|line-height/,
   motion: /animation/,
   shadow: /shadow/,
-  spacing: /margin|padding|gap|top|left|right|bottom/,
+  space: /margin|padding|gap|top|left|right|bottom/,
   zIndex: /z-index/,
 };
 

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

@@ -2,15 +2,15 @@ import type {
   BreakpointsAlias,
   ColorBackgroundAlias,
   BorderRadiusScale,
-  SpacingSpaceScale,
+  SpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
 import type {ResponsiveProp} from '../../utilities/css';
 import {Box} from '../Box';
 
-type Spacing = ResponsiveProp<SpacingSpaceScale>;
+type Spacing = ResponsiveProp<SpaceScale>;
 
 export interface AlphaCardProps {
   children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
+import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {
   getResponsiveProps,
@@ -9,7 +9,7 @@ import type {ResponsiveProp} from '../../utilities/css';
 
 import styles from './Bleed.scss';
 
-type Spacing = ResponsiveProp<SpacingSpaceScale>;
+type Spacing = ResponsiveProp<SpaceScale>;
 
 export interface BleedProps extends React.AriaAttributes {
   children?: React.ReactNode;

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

@@ -6,7 +6,7 @@ import type {
   BorderWidthScale,
   BorderRadiusScale,
   ShadowAlias,
-  SpacingSpaceScale,
+  SpaceScale,
 } from '@shopify/polaris-tokens';
 
 import {
@@ -24,7 +24,7 @@ type LineStyles = 'solid' | 'dashed';
 type Overflow = 'hidden' | 'scroll';
 type Position = 'relative' | 'absolute' | 'fixed' | 'sticky';
 
-type Spacing = ResponsiveProp<SpacingSpaceScale>;
+type Spacing = ResponsiveProp<SpaceScale>;
 
 export interface BoxProps extends React.AriaAttributes {
   children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
+import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {
   getResponsiveProps,
@@ -13,7 +13,7 @@ import styles from './HorizontalGrid.scss';
 type ColumnsAlias = 'oneThird' | 'oneHalf' | 'twoThirds';
 type ColumnsType = number | string | ColumnsAlias[];
 type Columns = ResponsiveProp<ColumnsType>;
-type Gap = ResponsiveProp<SpacingSpaceScale>;
+type Gap = ResponsiveProp<SpaceScale>;
 type HorizontalGridAlignItems = 'start' | 'end' | 'center';
 
 export interface HorizontalGridProps extends React.AriaAttributes {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
+import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {getResponsiveProps} from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
@@ -15,7 +15,7 @@ type Align =
   | 'space-evenly';
 type BlockAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 
-type Gap = ResponsiveProp<SpacingSpaceScale>;
+type Gap = ResponsiveProp<SpaceScale>;
 
 export interface HorizontalStackProps extends React.AriaAttributes {
   children?: React.ReactNode;

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

@@ -1,8 +1,5 @@
 import React, {useEffect, useState, useRef, useCallback} from 'react';
-import type {
-  BorderRadiusScale,
-  SpacingSpaceScale,
-} from '@shopify/polaris-tokens';
+import type {BorderRadiusScale, SpaceScale} from '@shopify/polaris-tokens';
 
 import {Portal} from '../Portal';
 import {useEphemeralPresenceManager} from '../../utilities/ephemeral-presence-manager';
@@ -16,7 +13,7 @@ import type {TooltipOverlayProps} from './components';
 import styles from './Tooltip.scss';
 
 export type Width = 'default' | 'wide';
-export type Padding = 'default' | Extract<SpacingSpaceScale, '4'>;
+export type Padding = 'default' | Extract<SpaceScale, '4'>;
 export type BorderRadius = Extract<BorderRadiusScale, '1' | '2'>;
 
 export interface TooltipProps {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
+import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {
   classNames,
@@ -22,7 +22,7 @@ type InlineAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 
 type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
-type Gap = ResponsiveProp<SpacingSpaceScale>;
+type Gap = ResponsiveProp<SpaceScale>;
 
 export interface VerticalStackProps extends React.AriaAttributes {
   children?: React.ReactNode;

polaris-react/src/utilities/sticky-manager/sticky-manager.ts

@@ -1,4 +1,4 @@
-import {spacing} from '@shopify/polaris-tokens';
+import {space} from '@shopify/polaris-tokens';
 
 import {debounce} from '../debounce';
 import {dataPolarisTopBar, scrollable} from '../../components/shared';
@@ -135,7 +135,7 @@ export class StickyManager {
     }
 
     const stickyOffset = offset
-      ? this.getOffset(stickyNode) + parseInt(spacing['space-5'], 10)
+      ? this.getOffset(stickyNode) + parseInt(space['space-5'], 10)
       : this.getOffset(stickyNode);
 
     const scrollPosition = scrollTop + stickyOffset;

polaris-tokens/src/index.ts

@@ -83,6 +83,12 @@ export type {
   SpacingSpaceScale,
 } from './token-groups/spacing';
 
+export type {
+  SpaceTokenGroup,
+  SpaceTokenName,
+  SpaceScale,
+} from './token-groups/space';
+
 export type {
   ZIndexTokenGroup,
   ZIndexTokenName,

polaris-tokens/src/metadata.ts

@@ -11,6 +11,7 @@ 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';
 
 export const metadata = createMetadata({
@@ -25,6 +26,7 @@ export const metadata = createMetadata({
   shadow: tokensToRems(shadow),
   shape: tokensToRems(shape),
   spacing: tokensToRems(spacing),
+  space: tokensToRems(space),
   zIndex,
 });
 

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

@@ -0,0 +1,82 @@
+import type {MetadataProperties} from '../types';
+
+export type SpaceScale =
+  | '0'
+  | '025'
+  | '05'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '8'
+  | '10'
+  | '12'
+  | '16'
+  | '20'
+  | '24'
+  | '28'
+  | '32';
+
+export type SpaceTokenName = `space-${SpaceScale}`;
+
+export type SpaceTokenGroup = {
+  [TokenName in SpaceTokenName]: string;
+};
+
+export const space: {
+  [TokenName in SpaceTokenName]: 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',
+  },
+};

polaris.shopify.com/content/components/layout-and-structure/bleed.md

@@ -19,7 +19,7 @@ examples:
   - fileName: bleed-specific-direction.tsx
     title: Specific direction
     description: >-
-      Negative margins can be added in a specific direction using the [Spacing tokens](https://polaris.shopify.com/tokens/spacing).
+      Negative margins can be added in a specific direction using the [Space tokens](https://polaris.shopify.com/tokens/space).
 ---
 
 ## Bleed values

polaris.shopify.com/content/components/layout-and-structure/box.md

@@ -26,7 +26,7 @@ examples:
   - fileName: box-with-padding.tsx
     title: Padding
     description: >-
-      Padding can be added to either all sides, left, right, top, and bottom, using the [Spacing tokens](https://polaris.shopify.com/tokens/spacing). The `padding` prop supports responsive spacing with the [Breakpoints tokens](https://polaris.shopify.com/tokens/breakpoints).
+      Padding can be added to either all sides, left, right, top, and bottom, using the [Space tokens](https://polaris.shopify.com/tokens/space). The `padding` prop supports responsive spacing with the [Breakpoints tokens](https://polaris.shopify.com/tokens/breakpoints).
   - fileName: box-with-shadow.tsx
     title: Shadow
     description: >-

polaris.shopify.com/content/patterns/app-settings-layout/index.md

@@ -18,6 +18,6 @@ variants:
 - See another two-column layout in use in the [Resource detail layout](/patterns/resource-details-layout) pattern.
 - See a single-column layout in use in the [Resource index layout](/patterns/resource-index-layout) pattern.
 - Learn more about [Layout](https://shopify.dev/apps/design-guidelines/layout) in the app design guidelines.
-- Check out the Polaris [Spacing](/design/space) guidelines to understand Polaris grid and spacing scale.
+- Check out the Polaris [Space](/design/space) guidelines to understand Polaris grid and spacing scale.
 
 </div>

polaris.shopify.com/content/patterns/resource-details-layout/index.md

@@ -18,6 +18,6 @@ variants:
 - The [Resource index layout](/patterns/resource-index-layout) pattern is a complement to the resource detail layout pattern.
 - Learn about the meaning of “resources” on the [Resource list](/components/lists/resource-list) component page
 - Learn more about [Layout](https://shopify.dev/apps/design-guidelines/layout) in the app design guidelines.
-- Check out the Polaris [Spacing](/design/space) guidelines to understand Polaris grid and spacing scale.
+- Check out the Polaris [Space](/design/space) guidelines to understand Polaris grid and spacing scale.
 
 </div>

polaris.shopify.com/content/patterns/resource-index-layout/index.md

@@ -19,6 +19,6 @@ variants:
 - Use the [Empty state component](/components/layout-and-structure/empty-state) when the resource index is empty.
 - Learn about the meaning of “resources” on the [Resource list](/components/lists/resource-list) component page
 - Learn more about [Layout](https://shopify.dev/apps/design-guidelines/layout) in the app design guidelines.
-- Check out the Polaris [Spacing](/design/space) guidelines to understand Polaris grid and spacing scale.
+- Check out the Polaris [Space](/design/space) guidelines to understand Polaris grid and spacing scale.
 
 </div>

polaris.shopify.com/content/tools/stylelint-polaris/index.md

@@ -90,24 +90,24 @@ There are over 40 rules configured in Stylelint Polaris to help you avoid errors
 - [Media queries](/tools/stylelint-polaris/rules#media-queries)
 - [Motion](/tools/stylelint-polaris/rules#motion)
 - [Shape](/tools/stylelint-polaris/rules#shape)
-- [Spacing](/tools/stylelint-polaris/rules#spacing)
+- [Space](/tools/stylelint-polaris/rules#space)
 - [Typography](/tools/stylelint-polaris/rules#typography)
 - [Z-index](/tools/stylelint-polaris/rules#z-index)
 
 ## Version Matchups
 
 | @shopify/stylelint-polaris | @shopify/polaris |
 | -------------------------- | ---------------- |
-| 1.0.0                      | 9.13.0          |
-| 2.0.0                      | 9.16.0          |
-| 3.0.0                      | 9.19.0          |
-| 4.0.0                      | 9.20.0          |
-| 5.0.0                      | 10.14.0         |
-| 6.0.0                      | 10.28.1         |
-| 7.0.0                      | 10.31.0         |
-| 8.0.0                      | 10.32.0         |
-| 9.0.0                      | 10.36.0         |
-| 10.0.0                     | 10.44.0         |
+| 1.0.0                      | 9.13.0           |
+| 2.0.0                      | 9.16.0           |
+| 3.0.0                      | 9.19.0           |
+| 4.0.0                      | 9.20.0           |
+| 5.0.0                      | 10.14.0          |
+| 6.0.0                      | 10.28.1          |
+| 7.0.0                      | 10.31.0          |
+| 8.0.0                      | 10.32.0          |
+| 9.0.0                      | 10.36.0          |
+| 10.0.0                     | 10.44.0          |
 
 _\*@shopify/stylelint-polaris v5.0.0 was the first stable release_
 

polaris.shopify.com/content/tools/stylelint-polaris/rules/space-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: space/custom-property-disallowed-list
+description: Disallows use of legacy space custom properties.
+keywords:
+  - stylelint
+  - space
+  - space rules
+---
+
+```diff
+// Do
++ margin-bottom: var(--p-space-025);
+// Don't
+- margin-bottom: var(--p-choice-margin);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md → polaris.shopify.com/content/tools/stylelint-polaris/rules/space-declaration-property-unit-disallowed-list.md

@@ -1,10 +1,10 @@
 ---
-title: spacing/declaration-property-unit-disallowed-list
+title: space/declaration-property-unit-disallowed-list
 description: Disallows use of hard-coded px, em, and rem values on gap, margin, and padding properties.
 keywords:
   - stylelint
-  - spacing
-  - spacing rules
+  - space
+  - space rules
 ---
 
 ```diff

polaris.shopify.com/content/tools/stylelint-polaris/rules/space-function-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: space/function-disallowed-list
+description: Disallows use of legacy Sass space functions.
+keywords:
+  - stylelint
+  - space
+  - space rules
+---
+
+```diff
+// Do
++ padding: var(--p-space-1);
+// Don't
+- padding: rem(4px);
+```