From 73e2f83eb8cd1e407da0366edf58e925391a337d Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:17:11 -0700 Subject: [PATCH 1/9] Add font-letter-spacing tokens --- polaris-tokens/src/themes/base/font.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts index b0c2ec5ea03..f565acf5db8 100644 --- a/polaris-tokens/src/themes/base/font.ts +++ b/polaris-tokens/src/themes/base/font.ts @@ -43,13 +43,11 @@ export type FontLineHeightScale = | '7' | FontLineHeightScaleExperimental; +export type FontLetterSpacingAlias = 'densest' | 'denser' | 'dense' | 'normal'; export type FontWeightAlias = 'regular' | 'medium' | 'semibold' | 'bold'; export type FontTokenName = - | `font-family-${FontFamilyAlias}` - | `font-size-${FontSizeScale}` - | `font-weight-${FontWeightAlias}` - | `font-line-height-${FontLineHeightScale}`; + | `font-letter-spacing-${FontLetterSpacingAlias}` export type FontTokenGroup = { [TokenName in FontTokenName]: string; @@ -126,6 +124,18 @@ export const font: { 'font-weight-bold': { value: '700', }, + 'font-letter-spacing-densest': { + value: '-0.54px', + }, + 'font-letter-spacing-denser': { + value: '-0.3px', + }, + 'font-letter-spacing-dense': { + value: '-0.2px', + }, + 'font-letter-spacing-normal': { + value: '0px', + }, 'font-line-height-300': { value: createVar('font-line-height-075-experimental'), }, From 8b5e9fb7a0abd0c6ece92c7aa0f8e79b2a7318be Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:17:47 -0700 Subject: [PATCH 2/9] Create type aliases for each font prefix for use in composite text tokens --- polaris-tokens/src/themes/base/font.ts | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts index f565acf5db8..43a6e3a5cea 100644 --- a/polaris-tokens/src/themes/base/font.ts +++ b/polaris-tokens/src/themes/base/font.ts @@ -2,10 +2,12 @@ import type {Experimental} from '../../types'; import {createVarName} from '../../utilities'; import type {MetaTokenProperties} from '../types'; +export type FontFamilyPrefix = 'font-family'; type FontFamilyAlias = 'sans' | 'mono'; type FontSizeScaleExperimental = Experimental<'70' | '80'>; +export type FontSizePrefix = 'font-size'; export type FontSizeScale = | '275' | '325' @@ -25,6 +27,7 @@ export type FontSizeScale = type FontLineHeightScaleExperimental = Experimental<'075'>; +export type FontLineHeightPrefix = 'font-line-height'; export type FontLineHeightScale = | '300' | '400' @@ -43,11 +46,25 @@ export type FontLineHeightScale = | '7' | FontLineHeightScaleExperimental; +export type FontLetterSpacingPrefix = 'font-letter-spacing'; export type FontLetterSpacingAlias = 'densest' | 'denser' | 'dense' | 'normal'; + +export type FontWeightPrefix = 'font-weight'; export type FontWeightAlias = 'regular' | 'medium' | 'semibold' | 'bold'; +export type FontPrefix = + | FontFamilyPrefix + | FontLetterSpacingPrefix + | FontLineHeightPrefix + | FontSizePrefix + | FontWeightPrefix; + export type FontTokenName = - | `font-letter-spacing-${FontLetterSpacingAlias}` + | `${FontFamilyPrefix}-${FontFamilyAlias}` + | `${FontLetterSpacingPrefix}-${FontLetterSpacingAlias}` + | `${FontLineHeightPrefix}-${FontLineHeightScale}` + | `${FontSizePrefix}-${FontSizeScale}` + | `${FontWeightPrefix}-${FontWeightAlias}`; export type FontTokenGroup = { [TokenName in FontTokenName]: string; @@ -186,6 +203,6 @@ export const font: { }, }; -function createVar(fontTokenName: FontTokenName) { +export function createVar(fontTokenName: FontTokenName) { return `var(${createVarName(fontTokenName)})`; } From 662a173defaa994a4ad7ad82f18f7262422306a9 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:19:33 -0700 Subject: [PATCH 3/9] Add composite text tokens --- polaris-tokens/src/themes/base/text.ts | 187 +++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 polaris-tokens/src/themes/base/text.ts diff --git a/polaris-tokens/src/themes/base/text.ts b/polaris-tokens/src/themes/base/text.ts new file mode 100644 index 00000000000..58070170466 --- /dev/null +++ b/polaris-tokens/src/themes/base/text.ts @@ -0,0 +1,187 @@ +import type {MetaTokenProperties} from '../types'; + +import type {FontPrefix} from './font'; +import {createVar} from './font'; + +export type TextVariant = + | 'heading-3xl' + | 'heading-2xl' + | 'heading-xl' + | 'heading-lg' + | 'heading-md' + | 'heading-sm' + | 'body-lg' + | 'body-md' + | 'body-sm' + | 'body-xs'; + +export type TextTokenName = `text-${TextVariant}-${FontPrefix}`; + +export type TextTokenGroup = { + [TokenName in TextTokenName]: string; +}; + +export const text: { + [TokenName in TextTokenName]: MetaTokenProperties; +} = { + // heading-3xl + 'text-heading-3xl-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-3xl-font-size': { + value: createVar('font-size-900'), + }, + 'text-heading-3xl-font-weight': { + value: createVar('font-weight-bold'), + }, + 'text-heading-3xl-font-letter-spacing': { + value: createVar('font-letter-spacing-densest'), + }, + 'text-heading-3xl-font-line-height': { + value: createVar('font-line-height-1200'), + }, + // heading-2xl + 'text-heading-2xl-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-2xl-font-size': { + value: createVar('font-size-750'), + }, + 'text-heading-2xl-font-weight': { + value: createVar('font-weight-bold'), + }, + 'text-heading-2xl-font-letter-spacing': { + value: createVar('font-letter-spacing-denser'), + }, + 'text-heading-2xl-font-line-height': { + value: createVar('font-size-1000'), + }, + // heading-xl + 'text-heading-xl-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-xl-font-size': { + value: createVar('font-size-600'), + }, + 'text-heading-xl-font-weight': { + value: createVar('font-weight-bold'), + }, + 'text-heading-xl-font-letter-spacing': { + value: createVar('font-letter-spacing-dense'), + }, + 'text-heading-xl-font-line-height': { + value: createVar('font-line-height-800'), + }, + // heading-lg + 'text-heading-lg-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-lg-font-size': { + value: createVar('font-size-500'), + }, + 'text-heading-lg-font-weight': { + value: createVar('font-weight-semibold'), + }, + 'text-heading-lg-font-letter-spacing': { + value: createVar('font-letter-spacing-dense'), + }, + 'text-heading-lg-font-line-height': { + value: createVar('font-size-600'), + }, + // heading-md + 'text-heading-md-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-md-font-size': { + value: createVar('font-size-350'), + }, + 'text-heading-md-font-weight': { + value: createVar('font-weight-semibold'), + }, + 'text-heading-md-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-heading-md-font-line-height': { + value: createVar('font-size-500'), + }, + // heading-sm + 'text-heading-sm-font-family': { + value: createVar('font-family-sans'), + }, + 'text-heading-sm-font-size': { + value: createVar('font-size-325'), + }, + 'text-heading-sm-font-weight': { + value: createVar('font-weight-semibold'), + }, + 'text-heading-sm-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-heading-sm-font-line-height': { + value: createVar('font-size-500'), + }, + // body-lg + 'text-body-lg-font-family': { + value: createVar('font-family-sans'), + }, + 'text-body-lg-font-size': { + value: createVar('font-size-350'), + }, + 'text-body-lg-font-weight': { + value: createVar('font-weight-regular'), + }, + 'text-body-lg-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-body-lg-font-line-height': { + value: createVar('font-size-500'), + }, + // body-md + 'text-body-md-font-family': { + value: createVar('font-family-sans'), + }, + 'text-body-md-font-size': { + value: createVar('font-size-325'), + }, + 'text-body-md-font-weight': { + value: createVar('font-weight-regular'), + }, + 'text-body-md-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-body-md-font-line-height': { + value: createVar('font-size-500'), + }, + // body-sm + 'text-body-sm-font-family': { + value: createVar('font-family-sans'), + }, + 'text-body-sm-font-size': { + value: createVar('font-size-300'), + }, + 'text-body-sm-font-weight': { + value: createVar('font-weight-regular'), + }, + 'text-body-sm-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-body-sm-font-line-height': { + value: createVar('font-size-400'), + }, + // body-xs + 'text-body-xs-font-family': { + value: createVar('font-family-sans'), + }, + 'text-body-xs-font-size': { + value: createVar('font-size-275'), + }, + 'text-body-xs-font-weight': { + value: createVar('font-weight-regular'), + }, + 'text-body-xs-font-letter-spacing': { + value: createVar('font-letter-spacing-normal'), + }, + 'text-body-xs-font-line-height': { + value: createVar('font-size-300'), + }, +}; From 4edaf6d9e40d7ef11f8f5bbb9b3c66a0e5bbf4b7 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:19:52 -0700 Subject: [PATCH 4/9] Add composite text token group to base theme --- polaris-tokens/src/themes/base/index.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/polaris-tokens/src/themes/base/index.ts b/polaris-tokens/src/themes/base/index.ts index b94d978b47e..cc913acbec9 100644 --- a/polaris-tokens/src/themes/base/index.ts +++ b/polaris-tokens/src/themes/base/index.ts @@ -1,6 +1,7 @@ import {createExact, tokensToRems} from '../../utilities'; import type {MetaThemeShape} from '../types'; +import {border} from './border'; import {breakpoints} from './breakpoints'; import {color} from './color'; import {font} from './font'; @@ -8,21 +9,22 @@ import {height} from './height'; import {motion} from './motion'; import {shadow} from './shadow'; import {space} from './space'; +import {text} from './text'; import {width} from './width'; import {zIndex} from './zIndex'; -import {border} from './border'; const createMetaThemeBase = createExact(); export const metaThemeBase = createMetaThemeBase({ - breakpoints: tokensToRems(breakpoints), border: tokensToRems(border), + breakpoints: tokensToRems(breakpoints), color, font: tokensToRems(font), height: tokensToRems(height), motion, shadow: tokensToRems(shadow), space: tokensToRems(space), + text, width: tokensToRems(width), zIndex, }); From 7169d7aa2f027207991faa39c7b62684d862cd2b Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:21:14 -0700 Subject: [PATCH 5/9] Add changeset entry --- .changeset/breezy-peas-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-peas-type.md diff --git a/.changeset/breezy-peas-type.md b/.changeset/breezy-peas-type.md new file mode 100644 index 00000000000..3707393d6da --- /dev/null +++ b/.changeset/breezy-peas-type.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-tokens': minor +--- + +Added composite `text` and `font-letter-spacing` tokens From 3e2bb1fdec6d026e40d91456ac53399af2d11602 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:18:46 -0700 Subject: [PATCH 6/9] Add composite text tokens to Polaris for VS Code --- polaris-for-vscode/src/server.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-for-vscode/src/server.ts b/polaris-for-vscode/src/server.ts index d00861f4418..6e0b853a1a7 100644 --- a/polaris-for-vscode/src/server.ts +++ b/polaris-for-vscode/src/server.ts @@ -79,6 +79,7 @@ const tokenGroupPatterns: TokenGroupPatterns = { breakpoints: /width/, color: /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/, + text: /font-family|font-size|font-weight|font-letter-spacing|font-line-height/, font: /font|line-height/, height: /height|min-height|max-height/, motion: /animation/, From c55efdbc7df8a10927e0a1d2e4b3dad9e3fd0303 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:19:44 -0700 Subject: [PATCH 7/9] Add changeset entry --- .changeset/spotty-owls-brake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spotty-owls-brake.md diff --git a/.changeset/spotty-owls-brake.md b/.changeset/spotty-owls-brake.md new file mode 100644 index 00000000000..9d88fabe067 --- /dev/null +++ b/.changeset/spotty-owls-brake.md @@ -0,0 +1,5 @@ +--- +'polaris-for-vscode': minor +--- + +Added composite `text` token completions From a5e588c74afc56f470907cc07962e79de7949bcf Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:21:00 -0700 Subject: [PATCH 8/9] Update font declaration patterns --- polaris-for-vscode/src/server.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-for-vscode/src/server.ts b/polaris-for-vscode/src/server.ts index 6e0b853a1a7..b2f0707aa1a 100644 --- a/polaris-for-vscode/src/server.ts +++ b/polaris-for-vscode/src/server.ts @@ -79,8 +79,8 @@ const tokenGroupPatterns: TokenGroupPatterns = { breakpoints: /width/, color: /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/, - text: /font-family|font-size|font-weight|font-letter-spacing|font-line-height/, - font: /font|line-height/, + text: /font|letter-spacing|line-height/, + font: /font|letter-spacing|line-height/, height: /height|min-height|max-height/, motion: /animation/, shadow: /shadow/, From 8d8f98bd59c28fd73d65d149aa061d8ffc3c2367 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:59:49 -0700 Subject: [PATCH 9/9] Fix typos --- polaris-tokens/src/themes/base/text.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/polaris-tokens/src/themes/base/text.ts b/polaris-tokens/src/themes/base/text.ts index 58070170466..0f1c6cea8a0 100644 --- a/polaris-tokens/src/themes/base/text.ts +++ b/polaris-tokens/src/themes/base/text.ts @@ -54,7 +54,7 @@ export const text: { value: createVar('font-letter-spacing-denser'), }, 'text-heading-2xl-font-line-height': { - value: createVar('font-size-1000'), + value: createVar('font-line-height-1000'), }, // heading-xl 'text-heading-xl-font-family': { @@ -86,7 +86,7 @@ export const text: { value: createVar('font-letter-spacing-dense'), }, 'text-heading-lg-font-line-height': { - value: createVar('font-size-600'), + value: createVar('font-line-height-600'), }, // heading-md 'text-heading-md-font-family': { @@ -102,7 +102,7 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-heading-md-font-line-height': { - value: createVar('font-size-500'), + value: createVar('font-line-height-500'), }, // heading-sm 'text-heading-sm-font-family': { @@ -118,7 +118,7 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-heading-sm-font-line-height': { - value: createVar('font-size-500'), + value: createVar('font-line-height-500'), }, // body-lg 'text-body-lg-font-family': { @@ -134,7 +134,7 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-body-lg-font-line-height': { - value: createVar('font-size-500'), + value: createVar('font-line-height-500'), }, // body-md 'text-body-md-font-family': { @@ -150,7 +150,7 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-body-md-font-line-height': { - value: createVar('font-size-500'), + value: createVar('font-line-height-500'), }, // body-sm 'text-body-sm-font-family': { @@ -166,7 +166,7 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-body-sm-font-line-height': { - value: createVar('font-size-400'), + value: createVar('font-line-height-400'), }, // body-xs 'text-body-xs-font-family': { @@ -182,6 +182,6 @@ export const text: { value: createVar('font-letter-spacing-normal'), }, 'text-body-xs-font-line-height': { - value: createVar('font-size-300'), + value: createVar('font-line-height-300'), }, };