Skip to content

Commit

Permalink
Add text decoration style to preset CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesmockett committed Mar 14, 2024
1 parent 662ddbf commit a1443ab
Show file tree
Hide file tree
Showing 3 changed files with 301 additions and 99 deletions.
14 changes: 11 additions & 3 deletions libs/@guardian/source-foundations/scripts/build-type-presets.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@ import fs from 'node:fs';
import { tokens } from '@guardian/design-tokens';
import { fontArrayToString, pxStringToRem } from '../src/utils/convert-value';

console.log('Building typography presets…');

const STRIP_WHITESPACE = /^\s+/gm;
const STRIP_TABS = /^\t{3}|\t{2}/gm;

const { presets } = tokens.typography;
const { presets, fontSize, textDecorationThicknessForFontSize } =
tokens.typography;

type FontSize = keyof typeof fontSize;

const textDecorationThickness = (size: string) =>
textDecorationThicknessForFontSize[size.slice(0, -2) as FontSize];

console.log('Building typography presets…');

const presetTotal = Object.keys(presets).length;
const outputPath = `${process.cwd()}/src/typography/presets.ts`;

Expand All @@ -26,6 +33,7 @@ const css = Object.entries(presets)
line-height: ${properties.lineHeight};
font-weight: ${properties.fontWeight};
font-style: ${properties.fontStyle};
--source-text-decoration-thickness: ${textDecorationThickness(properties.fontSize)};
\`;
`,
)
Expand Down
Loading

0 comments on commit a1443ab

Please sign in to comment.