diff --git a/.changeset/sweet-toes-divide.md b/.changeset/sweet-toes-divide.md new file mode 100644 index 00000000000..45703aa685a --- /dev/null +++ b/.changeset/sweet-toes-divide.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-tokens': minor +--- + +Added semantic `space` token scale diff --git a/polaris-tokens/src/themes/base/space.ts b/polaris-tokens/src/themes/base/space.ts index 1dbd6d5c713..3de711de43c 100644 --- a/polaris-tokens/src/themes/base/space.ts +++ b/polaris-tokens/src/themes/base/space.ts @@ -41,7 +41,13 @@ export type SpaceScale = | '32' | SpaceScaleExperimental; -export type SpaceTokenName = `space-${SpaceScale}`; +export type SpaceAlias = + /** Specialty and component spacing. */ + 'button-group-gap' | 'card-gap' | 'card-padding' | 'table-cell-padding'; + +export type SpaceAliasOrScale = SpaceAlias | SpaceScale; + +export type SpaceTokenName = `space-${SpaceAliasOrScale}`; export type SpaceTokenGroup = { [TokenName in SpaceTokenName]: string; @@ -104,6 +110,18 @@ export const space: { 'space-3200': { value: createVar('space-32'), }, + 'space-button-group-gap': { + value: createVar('space-200'), + }, + 'space-card-gap': { + value: createVar('space-400'), + }, + 'space-card-padding': { + value: createVar('space-400'), + }, + 'space-table-cell-padding': { + value: createVar('space-150'), + }, 'space-05': { value: '2px', },