From 16a016a6dece4af37a7ea28c0270e2f3f0a18fef Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 22 Sep 2023 10:07:05 -0600 Subject: [PATCH 1/2] Add semantic `space` token scale --- .changeset/sweet-toes-divide.md | 5 +++++ polaris-tokens/src/themes/base/space.ts | 22 +++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 .changeset/sweet-toes-divide.md 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..30e02994bc2 100644 --- a/polaris-tokens/src/themes/base/space.ts +++ b/polaris-tokens/src/themes/base/space.ts @@ -41,7 +41,15 @@ export type SpaceScale = | '32' | SpaceScaleExperimental; -export type SpaceTokenName = `space-${SpaceScale}`; +export type SpaceAlias = + | '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 +112,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', }, From b15ed3733a52efd81315211648c716d756caf513 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 22 Sep 2023 10:12:11 -0600 Subject: [PATCH 2/2] Add clarifying comment --- polaris-tokens/src/themes/base/space.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/polaris-tokens/src/themes/base/space.ts b/polaris-tokens/src/themes/base/space.ts index 30e02994bc2..3de711de43c 100644 --- a/polaris-tokens/src/themes/base/space.ts +++ b/polaris-tokens/src/themes/base/space.ts @@ -42,10 +42,8 @@ export type SpaceScale = | SpaceScaleExperimental; export type SpaceAlias = - | 'button-group-gap' - | 'card-gap' - | 'card-padding' - | 'table-cell-padding'; + /** Specialty and component spacing. */ + 'button-group-gap' | 'card-gap' | 'card-padding' | 'table-cell-padding'; export type SpaceAliasOrScale = SpaceAlias | SpaceScale;