Add composite text and font-letter-spacing tokens

.changeset/breezy-peas-type.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added composite `text` and `font-letter-spacing` tokens

.changeset/spotty-owls-brake.md

@@ -0,0 +1,5 @@
+---
+'polaris-for-vscode': minor
+---
+
+Added composite `text` token completions

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/,

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)})`;
 }

polaris-tokens/src/themes/base/index.ts

@@ -1,28 +1,30 @@
 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';
 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<MetaThemeShape>();
 
 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,
 });

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'),
+  },
+};