diff --git a/packages/react/src/themes/build-theme.test.ts.snap b/packages/react/src/themes/build-theme.test.ts.snap index cf0c02e88..9f58fabe7 100644 --- a/packages/react/src/themes/build-theme.test.ts.snap +++ b/packages/react/src/themes/build-theme.test.ts.snap @@ -114,5 +114,107 @@ exports[`buildTheme should build the defaultAliasTokens theme with the customiza "color-menu-item-content-disabled": "#B7BBC2", "color-menu-item-content-hover": "#000000", "color-menu-item-subcontent": "green", + "text-action-md-font-family": ""Open Sans", sans-serif", + "text-action-md-font-size": "0.75rem", + "text-action-md-font-weight": "700", + "text-action-md-letter-spacing": "0.2px", + "text-action-md-line-height": "1.5rem", + "text-action-md-transform": "uppercase", + "text-action-sm-font-family": ""Open Sans", sans-serif", + "text-action-sm-font-size": "0.6875rem", + "text-action-sm-font-weight": "700", + "text-action-sm-letter-spacing": "0.2px", + "text-action-sm-line-height": "1.5rem", + "text-action-sm-transform": "uppercase", + "text-body-lg-font-family": ""Open Sans", sans-serif", + "text-body-lg-font-size": "1rem", + "text-body-lg-font-weight": "400", + "text-body-lg-letter-spacing": "0.2px", + "text-body-lg-line-height": "1.5rem", + "text-body-lg-transform": "none", + "text-body-md-font-family": ""Open Sans", sans-serif", + "text-body-md-font-size": "0.875rem", + "text-body-md-font-weight": "400", + "text-body-md-letter-spacing": "0.2px", + "text-body-md-line-height": "1.5rem", + "text-body-md-transform": "none", + "text-body-sm-font-family": ""Open Sans", sans-serif", + "text-body-sm-font-size": "0.75rem", + "text-body-sm-font-weight": "400", + "text-body-sm-letter-spacing": "0.2px", + "text-body-sm-line-height": "1.25rem", + "text-body-sm-transform": "none", + "text-caption-md-font-family": ""Open Sans", sans-serif", + "text-caption-md-font-size": "0.875rem", + "text-caption-md-font-weight": "400", + "text-caption-md-letter-spacing": "0.2px", + "text-caption-md-line-height": "1.5rem", + "text-caption-md-transform": "none", + "text-heading-lg-font-family": ""Open Sans", sans-serif", + "text-heading-lg-font-size": "1.5rem", + "text-heading-lg-font-weight": "600", + "text-heading-lg-letter-spacing": "0.2px", + "text-heading-lg-line-height": "2rem", + "text-heading-lg-transform": "none", + "text-heading-md-font-family": ""Open Sans", sans-serif", + "text-heading-md-font-size": "1.25rem", + "text-heading-md-font-weight": "600", + "text-heading-md-letter-spacing": "0.2px", + "text-heading-md-line-height": "1.75rem", + "text-heading-md-transform": "none", + "text-heading-sm-font-family": ""Open Sans", sans-serif", + "text-heading-sm-font-size": "1rem", + "text-heading-sm-font-weight": "600", + "text-heading-sm-letter-spacing": "0.2px", + "text-heading-sm-line-height": "1.5rem", + "text-heading-sm-transform": "none", + "text-heading-xl-font-family": ""Open Sans", sans-serif", + "text-heading-xl-font-size": "2rem", + "text-heading-xl-font-weight": "600", + "text-heading-xl-letter-spacing": "0.2px", + "text-heading-xl-line-height": "2.5rem", + "text-heading-xl-transform": "none", + "text-heading-xs-font-family": ""Open Sans", sans-serif", + "text-heading-xs-font-size": "0.875rem", + "text-heading-xs-font-weight": "600", + "text-heading-xs-letter-spacing": "0.2px", + "text-heading-xs-line-height": "1.25rem", + "text-heading-xs-transform": "none", + "text-highlight-lg-font-family": ""Open Sans", sans-serif", + "text-highlight-lg-font-size": "1.5rem", + "text-highlight-lg-font-weight": "600", + "text-highlight-lg-letter-spacing": "0.2px", + "text-highlight-lg-line-height": "2rem", + "text-highlight-lg-transform": "none", + "text-highlight-md-font-family": ""Open Sans", sans-serif", + "text-highlight-md-font-size": "1.25rem", + "text-highlight-md-font-weight": "600", + "text-highlight-md-letter-spacing": "0.2px", + "text-highlight-md-line-height": "1.75rem", + "text-highlight-md-transform": "none", + "text-highlight-sm-font-family": ""Open Sans", sans-serif", + "text-highlight-sm-font-size": "1rem", + "text-highlight-sm-font-weight": "600", + "text-highlight-sm-letter-spacing": "0.2px", + "text-highlight-sm-line-height": "1.5rem", + "text-highlight-sm-transform": "none", + "text-label-md-font-family": ""Open Sans", sans-serif", + "text-label-md-font-size": "0.875rem", + "text-label-md-font-weight": "400", + "text-label-md-letter-spacing": "0.2px", + "text-label-md-line-height": "1.5rem", + "text-label-md-transform": "none", + "text-label-sm-font-family": ""Open Sans", sans-serif", + "text-label-sm-font-size": "0.75rem", + "text-label-sm-font-weight": "400", + "text-label-sm-letter-spacing": "0.2px", + "text-label-sm-line-height": "1.25rem", + "text-label-sm-transform": "none", + "text-legend-sm-font-family": ""Open Sans", sans-serif", + "text-legend-sm-font-size": "0.75rem", + "text-legend-sm-font-weight": "400", + "text-legend-sm-letter-spacing": "0.2px", + "text-legend-sm-line-height": "1.25rem", + "text-legend-sm-transform": "none", } `; diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts index 97c767291..e8107fd26 100644 --- a/packages/react/src/themes/tokens/alias-tokens.ts +++ b/packages/react/src/themes/tokens/alias-tokens.ts @@ -1,8 +1,11 @@ import { ColorAliasToken, defaultColorAliasTokens } from './alias/color-tokens'; +import { defaultTextAliasTokens, TextAliasToken } from './alias/text-tokens'; export type AliasToken = - | ColorAliasToken; + | ColorAliasToken + | TextAliasToken; export const defaultAliasTokens = { ...defaultColorAliasTokens, + ...defaultTextAliasTokens, }; diff --git a/packages/react/src/themes/tokens/alias/text-tokens.ts b/packages/react/src/themes/tokens/alias/text-tokens.ts new file mode 100644 index 000000000..f440ff09b --- /dev/null +++ b/packages/react/src/themes/tokens/alias/text-tokens.ts @@ -0,0 +1,210 @@ +import type { AliasTokenMap } from '../tokens'; + +export type TextAliasToken = + | 'text-heading-xl-font-family' + | 'text-heading-xl-font-weight' + | 'text-heading-xl-font-size' + | 'text-heading-xl-line-height' + | 'text-heading-xl-letter-spacing' + | 'text-heading-xl-transform' + | 'text-heading-lg-font-family' + | 'text-heading-lg-font-weight' + | 'text-heading-lg-font-size' + | 'text-heading-lg-line-height' + | 'text-heading-lg-letter-spacing' + | 'text-heading-lg-transform' + | 'text-heading-md-font-family' + | 'text-heading-md-font-weight' + | 'text-heading-md-font-size' + | 'text-heading-md-line-height' + | 'text-heading-md-letter-spacing' + | 'text-heading-md-transform' + | 'text-heading-sm-font-family' + | 'text-heading-sm-font-weight' + | 'text-heading-sm-font-size' + | 'text-heading-sm-line-height' + | 'text-heading-sm-letter-spacing' + | 'text-heading-sm-transform' + | 'text-heading-xs-font-family' + | 'text-heading-xs-font-weight' + | 'text-heading-xs-font-size' + | 'text-heading-xs-line-height' + | 'text-heading-xs-letter-spacing' + | 'text-heading-xs-transform' + | 'text-body-lg-font-family' + | 'text-body-lg-font-weight' + | 'text-body-lg-font-size' + | 'text-body-lg-line-height' + | 'text-body-lg-letter-spacing' + | 'text-body-lg-transform' + | 'text-body-md-font-family' + | 'text-body-md-font-weight' + | 'text-body-md-font-size' + | 'text-body-md-line-height' + | 'text-body-md-letter-spacing' + | 'text-body-md-transform' + | 'text-body-sm-font-family' + | 'text-body-sm-font-weight' + | 'text-body-sm-font-size' + | 'text-body-sm-line-height' + | 'text-body-sm-letter-spacing' + | 'text-body-sm-transform' + | 'text-highlight-lg-font-family' + | 'text-highlight-lg-font-weight' + | 'text-highlight-lg-font-size' + | 'text-highlight-lg-line-height' + | 'text-highlight-lg-letter-spacing' + | 'text-highlight-lg-transform' + | 'text-highlight-md-font-family' + | 'text-highlight-md-font-weight' + | 'text-highlight-md-font-size' + | 'text-highlight-md-line-height' + | 'text-highlight-md-letter-spacing' + | 'text-highlight-md-transform' + | 'text-highlight-sm-font-family' + | 'text-highlight-sm-font-weight' + | 'text-highlight-sm-font-size' + | 'text-highlight-sm-line-height' + | 'text-highlight-sm-letter-spacing' + | 'text-highlight-sm-transform' + | 'text-action-md-font-family' + | 'text-action-md-font-weight' + | 'text-action-md-font-size' + | 'text-action-md-line-height' + | 'text-action-md-letter-spacing' + | 'text-action-md-transform' + | 'text-action-sm-font-family' + | 'text-action-sm-font-weight' + | 'text-action-sm-font-size' + | 'text-action-sm-line-height' + | 'text-action-sm-letter-spacing' + | 'text-action-sm-transform' + | 'text-label-md-font-family' + | 'text-label-md-font-weight' + | 'text-label-md-font-size' + | 'text-label-md-line-height' + | 'text-label-md-letter-spacing' + | 'text-label-md-transform' + | 'text-label-sm-font-family' + | 'text-label-sm-font-weight' + | 'text-label-sm-font-size' + | 'text-label-sm-line-height' + | 'text-label-sm-letter-spacing' + | 'text-label-sm-transform' + | 'text-legend-sm-font-family' + | 'text-legend-sm-font-weight' + | 'text-legend-sm-font-size' + | 'text-legend-sm-line-height' + | 'text-legend-sm-letter-spacing' + | 'text-legend-sm-transform' + | 'text-caption-md-font-family' + | 'text-caption-md-font-weight' + | 'text-caption-md-font-size' + | 'text-caption-md-line-height' + | 'text-caption-md-letter-spacing' + | 'text-caption-md-transform'; + +export const defaultTextAliasTokens: AliasTokenMap = { + 'text-heading-xl-font-family': 'font-family-brand', + 'text-heading-xl-font-weight': 'font-weight-semibold', + 'text-heading-xl-font-size': 'font-size-800', + 'text-heading-xl-line-height': 'line-height-1000', + 'text-heading-xl-letter-spacing': 'letter-spacing-normal', + 'text-heading-xl-transform': 'font-transform-none', + 'text-heading-lg-font-family': 'font-family-brand', + 'text-heading-lg-font-weight': 'font-weight-semibold', + 'text-heading-lg-font-size': 'font-size-600', + 'text-heading-lg-line-height': 'line-height-800', + 'text-heading-lg-letter-spacing': 'letter-spacing-normal', + 'text-heading-lg-transform': 'font-transform-none', + 'text-heading-md-font-family': 'font-family-brand', + 'text-heading-md-font-weight': 'font-weight-semibold', + 'text-heading-md-font-size': 'font-size-500', + 'text-heading-md-line-height': 'line-height-700', + 'text-heading-md-letter-spacing': 'letter-spacing-normal', + 'text-heading-md-transform': 'font-transform-none', + 'text-heading-sm-font-family': 'font-family-brand', + 'text-heading-sm-font-weight': 'font-weight-semibold', + 'text-heading-sm-font-size': 'font-size-400', + 'text-heading-sm-line-height': 'line-height-600', + 'text-heading-sm-letter-spacing': 'letter-spacing-normal', + 'text-heading-sm-transform': 'font-transform-none', + 'text-heading-xs-font-family': 'font-family-brand', + 'text-heading-xs-font-weight': 'font-weight-semibold', + 'text-heading-xs-font-size': 'font-size-350', + 'text-heading-xs-line-height': 'line-height-500', + 'text-heading-xs-letter-spacing': 'letter-spacing-normal', + 'text-heading-xs-transform': 'font-transform-none', + 'text-body-lg-font-family': 'font-family-sans', + 'text-body-lg-font-weight': 'font-weight-regular', + 'text-body-lg-font-size': 'font-size-400', + 'text-body-lg-line-height': 'line-height-600', + 'text-body-lg-letter-spacing': 'letter-spacing-normal', + 'text-body-lg-transform': 'font-transform-none', + 'text-body-md-font-family': 'font-family-sans', + 'text-body-md-font-weight': 'font-weight-regular', + 'text-body-md-font-size': 'font-size-350', + 'text-body-md-line-height': 'line-height-600', + 'text-body-md-letter-spacing': 'letter-spacing-normal', + 'text-body-md-transform': 'font-transform-none', + 'text-body-sm-font-family': 'font-family-sans', + 'text-body-sm-font-weight': 'font-weight-regular', + 'text-body-sm-font-size': 'font-size-300', + 'text-body-sm-line-height': 'line-height-500', + 'text-body-sm-letter-spacing': 'letter-spacing-normal', + 'text-body-sm-transform': 'font-transform-none', + 'text-highlight-lg-font-family': 'font-family-sans', + 'text-highlight-lg-font-weight': 'text-heading-lg-font-weight', + 'text-highlight-lg-font-size': 'text-heading-lg-font-size', + 'text-highlight-lg-line-height': 'text-heading-lg-line-height', + 'text-highlight-lg-letter-spacing': 'text-heading-lg-letter-spacing', + 'text-highlight-lg-transform': 'text-heading-lg-transform', + 'text-highlight-md-font-family': 'font-family-sans', + 'text-highlight-md-font-weight': 'text-heading-md-font-weight', + 'text-highlight-md-font-size': 'text-heading-md-font-size', + 'text-highlight-md-line-height': 'text-heading-md-line-height', + 'text-highlight-md-letter-spacing': 'text-heading-md-letter-spacing', + 'text-highlight-md-transform': 'text-heading-md-transform', + 'text-highlight-sm-font-family': 'font-family-sans', + 'text-highlight-sm-font-weight': 'text-heading-sm-font-weight', + 'text-highlight-sm-font-size': 'text-heading-sm-font-size', + 'text-highlight-sm-line-height': 'text-heading-sm-line-height', + 'text-highlight-sm-letter-spacing': 'text-heading-sm-letter-spacing', + 'text-highlight-sm-transform': 'text-heading-sm-transform', + 'text-action-md-font-family': 'text-body-sm-font-family', + 'text-action-md-font-weight': 'font-weight-bold', + 'text-action-md-font-size': 'text-body-sm-font-size', + 'text-action-md-line-height': 'line-height-600', + 'text-action-md-letter-spacing': 'text-body-sm-letter-spacing', + 'text-action-md-transform': 'font-transform-uppercase', + 'text-action-sm-font-family': 'text-body-sm-font-family', + 'text-action-sm-font-weight': 'font-weight-bold', + 'text-action-sm-font-size': 'font-size-275', + 'text-action-sm-line-height': 'line-height-600', + 'text-action-sm-letter-spacing': 'text-body-sm-letter-spacing', + 'text-action-sm-transform': 'font-transform-uppercase', + 'text-label-md-font-family': 'text-body-md-font-family', + 'text-label-md-font-weight': 'text-body-md-font-weight', + 'text-label-md-font-size': 'text-body-md-font-size', + 'text-label-md-line-height': 'text-body-md-line-height', + 'text-label-md-letter-spacing': 'text-body-md-letter-spacing', + 'text-label-md-transform': 'text-body-md-transform', + 'text-label-sm-font-family': 'text-body-sm-font-family', + 'text-label-sm-font-weight': 'text-body-sm-font-weight', + 'text-label-sm-font-size': 'text-body-sm-font-size', + 'text-label-sm-line-height': 'text-body-sm-line-height', + 'text-label-sm-letter-spacing': 'text-body-sm-letter-spacing', + 'text-label-sm-transform': 'text-body-sm-transform', + 'text-legend-sm-font-family': 'text-body-sm-font-family', + 'text-legend-sm-font-weight': 'text-body-sm-font-weight', + 'text-legend-sm-font-size': 'text-body-sm-font-size', + 'text-legend-sm-line-height': 'text-body-sm-line-height', + 'text-legend-sm-letter-spacing': 'text-body-sm-letter-spacing', + 'text-legend-sm-transform': 'text-body-sm-transform', + 'text-caption-md-font-family': 'text-body-md-font-family', + 'text-caption-md-font-weight': 'text-body-md-font-weight', + 'text-caption-md-font-size': 'text-body-md-font-size', + 'text-caption-md-line-height': 'text-body-md-line-height', + 'text-caption-md-letter-spacing': 'text-body-md-letter-spacing', + 'text-caption-md-transform': 'text-body-md-transform', +}; diff --git a/packages/react/src/themes/tokens/ref-tokens.ts b/packages/react/src/themes/tokens/ref-tokens.ts index 6e3b6b400..07cfe20d9 100644 --- a/packages/react/src/themes/tokens/ref-tokens.ts +++ b/packages/react/src/themes/tokens/ref-tokens.ts @@ -1,11 +1,14 @@ import { defaultPaletteTokens, PaletteToken } from './ref/palette-tokens'; +import { defaultTextTokens, TextToken } from './ref/text-tokens'; import { defaultUtilityTokens, UtilityToken } from './ref/utility-tokens'; export type RefToken = | PaletteToken + | TextToken | UtilityToken; export const defaultRefTokens = { ...defaultPaletteTokens, + ...defaultTextTokens, ...defaultUtilityTokens, }; diff --git a/packages/react/src/themes/tokens/ref/text-tokens.ts b/packages/react/src/themes/tokens/ref/text-tokens.ts new file mode 100644 index 000000000..6a4787502 --- /dev/null +++ b/packages/react/src/themes/tokens/ref/text-tokens.ts @@ -0,0 +1,78 @@ +import type { RefTokenMap } from '../tokens'; + +export type TextToken = + | 'font-family-sans' + | 'font-family-brand' + | 'font-size-100' + | 'font-size-200' + | 'font-size-275' + | 'font-size-300' + | 'font-size-350' + | 'font-size-400' + | 'font-size-500' + | 'font-size-600' + | 'font-size-700' + | 'font-size-800' + | 'font-size-900' + | 'font-size-1000' + | 'font-size-1100' + | 'font-size-1200' + | 'font-weight-regular' + | 'font-weight-semibold' + | 'font-weight-bold' + | 'line-height-100' + | 'line-height-200' + | 'line-height-300' + | 'line-height-400' + | 'line-height-500' + | 'line-height-600' + | 'line-height-700' + | 'line-height-800' + | 'line-height-900' + | 'line-height-1000' + | 'line-height-1100' + | 'line-height-1200' + | 'letter-spacing-normal' + | 'letter-spacing-narrow' + | 'letter-spacing-dense' + | 'font-transform-none' + | 'font-transform-uppercase'; + +export const defaultTextTokens: RefTokenMap = { + 'font-family-sans': '"Open Sans", sans-serif', + 'font-family-brand': '"Open Sans", sans-serif', + 'font-size-100': '0.25rem', + 'font-size-200': '0.5rem', + 'font-size-275': '0.6875rem', + 'font-size-300': '0.75rem', + 'font-size-350': '0.875rem', + 'font-size-400': '1rem', + 'font-size-500': '1.25rem', + 'font-size-600': '1.5rem', + 'font-size-700': '1.75rem', + 'font-size-800': '2rem', + 'font-size-900': '2.25rem', + 'font-size-1000': '2.5rem', + 'font-size-1100': '2.75rem', + 'font-size-1200': '3rem', + 'font-weight-regular': '400', + 'font-weight-semibold': '600', + 'font-weight-bold': '700', + 'line-height-100': '0.25rem', + 'line-height-200': '0.5rem', + 'line-height-300': '0.75rem', + 'line-height-400': '1rem', + 'line-height-500': '1.25rem', + 'line-height-600': '1.5rem', + 'line-height-700': '1.75rem', + 'line-height-800': '2rem', + 'line-height-900': '2.25rem', + 'line-height-1000': '2.5rem', + 'line-height-1100': '2.75rem', + 'line-height-1200': '3rem', + 'letter-spacing-normal': '0.2px', + 'letter-spacing-narrow': 'normal', + 'letter-spacing-dense': '-0.2px', + 'font-transform-none': 'none', + 'font-transform-uppercase': 'uppercase', +};