Skip to content

Commit

Permalink
Add semantic space token scale (Shopify#10643)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Fixes Shopify#10436

### WHAT is this pull request doing?

Adds the following values to new semantic `space` token scale: 

| New Token          | Value        |
| ------------------------- | ------------------------ |  
| `--p-space-button-group-gap` | `--p-space-200`    |
| `--p-space-card-gap` | `--p-space-400`    |
| `--p-space-card-padding` | `--p-space-400`    |
| `--p-space-table-cell-padding` | `--p-space-150`    |
  • Loading branch information
lgriffee authored Sep 22, 2023
1 parent 82d23cc commit ba2f01a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/sweet-toes-divide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris-tokens': minor
---

Added semantic `space` token scale
20 changes: 19 additions & 1 deletion polaris-tokens/src/themes/base/space.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
},
Expand Down

0 comments on commit ba2f01a

Please sign in to comment.