From 5d9b6871b499008442777fc89a12e16a11339d4f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 6 Feb 2026 16:39:19 +0000 Subject: [PATCH 1/3] updated the `generateTypographyHelpers` script to output aliases instead of values for the `font-weight` CSS helpers --- .../tokens/scripts/build-parts/generateTypographyHelpers.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts index 0a66f435f85..26ec6f5798f 100644 --- a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts +++ b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts @@ -42,7 +42,8 @@ export function generateTypographyHelpers(tokens: TransformedTokens, outputCssVa if (fontWeightTokens) { Object.keys(fontWeightTokens).forEach(weight => { const selector = `.${PREFIX}-font-weight-${weight}`; - helpers.push(`${selector} { font-weight: ${fontWeightTokens[weight].$value}; }`); + const valueFontWeight = outputCssVars ? `var(--token-typography-font-weight-${weight})` : fontWeightTokens[weight].$value; + helpers.push(`${selector} { font-weight: ${valueFontWeight}; }`); }); } From bdf13fc05fe9ce3b8fe636e9eedea6621053d710 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 6 Feb 2026 16:40:06 +0000 Subject: [PATCH 2/3] re-generated the design tokens CSS helpers --- packages/tokens/dist/devdot/css/helpers/typography.css | 8 ++++---- packages/tokens/dist/marketing/css/helpers/typography.css | 8 ++++---- packages/tokens/dist/products/css/helpers/typography.css | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/tokens/dist/devdot/css/helpers/typography.css b/packages/tokens/dist/devdot/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/devdot/css/helpers/typography.css +++ b/packages/tokens/dist/devdot/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/marketing/css/helpers/typography.css b/packages/tokens/dist/marketing/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/marketing/css/helpers/typography.css +++ b/packages/tokens/dist/marketing/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } diff --git a/packages/tokens/dist/products/css/helpers/typography.css b/packages/tokens/dist/products/css/helpers/typography.css index 393b8900901..c0913ef1a67 100644 --- a/packages/tokens/dist/products/css/helpers/typography.css +++ b/packages/tokens/dist/products/css/helpers/typography.css @@ -5,10 +5,10 @@ .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); } .hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); } .hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); } -.hds-font-weight-regular { font-weight: 400; } -.hds-font-weight-medium { font-weight: 500; } -.hds-font-weight-semibold { font-weight: 600; } -.hds-font-weight-bold { font-weight: 700; } +.hds-font-weight-regular { font-weight: var(--token-typography-font-weight-regular); } +.hds-font-weight-medium { font-weight: var(--token-typography-font-weight-medium); } +.hds-font-weight-semibold { font-weight: var(--token-typography-font-weight-semibold); } +.hds-font-weight-bold { font-weight: var(--token-typography-font-weight-bold); } .hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; } .hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; } .hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; } From 70302251f38182c778c2b3ad8a1caf80241d3ceb Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 6 Feb 2026 16:41:59 +0000 Subject: [PATCH 3/3] changeset --- .changeset/petite-zoos-fry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/petite-zoos-fry.md diff --git a/.changeset/petite-zoos-fry.md b/.changeset/petite-zoos-fry.md new file mode 100644 index 00000000000..489bf3766c3 --- /dev/null +++ b/.changeset/petite-zoos-fry.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-tokens": patch +--- + +Updated CSS helpers for `font-weight` property to use aliases to HDS tokens instead of direct values