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 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 diff --git a/polaris-for-vscode/src/server.ts b/polaris-for-vscode/src/server.ts index d00861f4418..b2f0707aa1a 100644 --- a/polaris-for-vscode/src/server.ts +++ b/polaris-for-vscode/src/server.ts @@ -79,7 +79,8 @@ const tokenGroupPatterns: TokenGroupPatterns = { breakpoints: /width/, color: /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/, - 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/, diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts index b0c2ec5ea03..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,13 +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-family-${FontFamilyAlias}` - | `font-size-${FontSizeScale}` - | `font-weight-${FontWeightAlias}` - | `font-line-height-${FontLineHeightScale}`; + | `${FontFamilyPrefix}-${FontFamilyAlias}` + | `${FontLetterSpacingPrefix}-${FontLetterSpacingAlias}` + | `${FontLineHeightPrefix}-${FontLineHeightScale}` + | `${FontSizePrefix}-${FontSizeScale}` + | `${FontWeightPrefix}-${FontWeightAlias}`; export type FontTokenGroup = { [TokenName in FontTokenName]: string; @@ -126,6 +141,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'), }, @@ -176,6 +203,6 @@ export const font: { }, }; -function createVar(fontTokenName: FontTokenName) { +export function createVar(fontTokenName: FontTokenName) { return `var(${createVarName(fontTokenName)})`; } 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, }); diff --git a/polaris-tokens/src/themes/base/text.ts b/polaris-tokens/src/themes/base/text.ts new file mode 100644 index 00000000000..0f1c6cea8a0 --- /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-line-height-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-line-height-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-line-height-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-line-height-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-line-height-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-line-height-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-line-height-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-line-height-300'), + }, +};