From 45659856290e83366013d5dcb6e09b90a418ed88 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Fri, 22 Mar 2024 15:34:39 +0000 Subject: [PATCH 1/7] Helper method to convert preset to px values --- .../src/typography/storybookTypographyPresets.tsx | 1 + .../source-foundations/src/utils/typography.ts | 10 ++++++++++ 2 files changed, 11 insertions(+) create mode 100644 libs/@guardian/source-foundations/src/utils/typography.ts diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx index 1a38c906d..95d426060 100644 --- a/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx +++ b/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx @@ -3,6 +3,7 @@ import { css } from '@emotion/react'; import * as presets from './css'; import { space } from '../space/space'; import { palette } from '../colour/palette'; +import { typographyPresetPx } from '../utils/typography'; const presetTokens = tokens.typography.presets; type Preset = keyof typeof presetTokens; diff --git a/libs/@guardian/source-foundations/src/utils/typography.ts b/libs/@guardian/source-foundations/src/utils/typography.ts new file mode 100644 index 000000000..0d33ce3b8 --- /dev/null +++ b/libs/@guardian/source-foundations/src/utils/typography.ts @@ -0,0 +1,10 @@ +const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; + +export const typographyPresetPx = (preset: string) => { + const matches = preset.match(REGEX_FONT_SIZE); + if (matches?.[1]) { + const pxVal = parseFloat(matches[1]) * 16; + return preset.replace(REGEX_FONT_SIZE, `font-size: ${pxVal}px`); + } + return preset; +}; From e9e1cdcfd5c7a93bb2edc4fc3d6dfe2747e4cd3e Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 25 Mar 2024 12:17:32 +0000 Subject: [PATCH 2/7] Update helper name --- libs/@guardian/source-foundations/src/utils/typography.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/@guardian/source-foundations/src/utils/typography.ts b/libs/@guardian/source-foundations/src/utils/typography.ts index 0d33ce3b8..7b8832b7d 100644 --- a/libs/@guardian/source-foundations/src/utils/typography.ts +++ b/libs/@guardian/source-foundations/src/utils/typography.ts @@ -1,6 +1,6 @@ const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; -export const typographyPresetPx = (preset: string) => { +export const presetToPx = (preset: string) => { const matches = preset.match(REGEX_FONT_SIZE); if (matches?.[1]) { const pxVal = parseFloat(matches[1]) * 16; From ef957b77d76a9a2a1a525291523b97fe6e38e2d2 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 25 Mar 2024 12:24:29 +0000 Subject: [PATCH 3/7] Add tests for preset rem to px helper --- .../src/utils/typography.test.ts | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 libs/@guardian/source-foundations/src/utils/typography.test.ts diff --git a/libs/@guardian/source-foundations/src/utils/typography.test.ts b/libs/@guardian/source-foundations/src/utils/typography.test.ts new file mode 100644 index 000000000..4e233e2aa --- /dev/null +++ b/libs/@guardian/source-foundations/src/utils/typography.test.ts @@ -0,0 +1,30 @@ +import { headlineBold24, titlepiece42 } from '../typography/css'; +import { presetToPx } from './typography'; + +describe('presetToPx', () => { + it('should convert preset font size value from rem to px', () => { + expect(presetToPx(headlineBold24)).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + --source-text-decoration-thickness: 3px; + `, + { isFragment: true }, + ); + + expect(presetToPx(titlepiece42)).toMatchCSS( + ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + --source-text-decoration-thickness: 5px; + `, + { isFragment: true }, + ); + }); +}); From 5ed321a2bc5d3fa04817a0e0906521fd48c43e0f Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:16:38 +0000 Subject: [PATCH 4/7] Remove unused import --- .../src/typography/storybookTypographyPresets.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx index 95d426060..1a38c906d 100644 --- a/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx +++ b/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx @@ -3,7 +3,6 @@ import { css } from '@emotion/react'; import * as presets from './css'; import { space } from '../space/space'; import { palette } from '../colour/palette'; -import { typographyPresetPx } from '../utils/typography'; const presetTokens = tokens.typography.presets; type Preset = keyof typeof presetTokens; From d4e7754b1a37e6c76bbbb2a783f91dfc72a723b0 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:20:36 +0000 Subject: [PATCH 5/7] Add comment to conversion function --- libs/@guardian/source-foundations/src/utils/typography.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/libs/@guardian/source-foundations/src/utils/typography.ts b/libs/@guardian/source-foundations/src/utils/typography.ts index 7b8832b7d..5efba090e 100644 --- a/libs/@guardian/source-foundations/src/utils/typography.ts +++ b/libs/@guardian/source-foundations/src/utils/typography.ts @@ -1,10 +1,15 @@ -const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; +/* + * Convert font size in typography preset from default rem value to pixels + */ export const presetToPx = (preset: string) => { + const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; + const matches = preset.match(REGEX_FONT_SIZE); if (matches?.[1]) { const pxVal = parseFloat(matches[1]) * 16; return preset.replace(REGEX_FONT_SIZE, `font-size: ${pxVal}px`); } + return preset; }; From 751bc9b75f1f0ae7bcd80e066c53dcfec5b8db8c Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:48:09 +0000 Subject: [PATCH 6/7] Add TypographyPreset type --- .../@guardian/source-foundations/src/typography/types.ts | 9 +++++++++ .../@guardian/source-foundations/src/utils/typography.ts | 7 ++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/libs/@guardian/source-foundations/src/typography/types.ts b/libs/@guardian/source-foundations/src/typography/types.ts index 70865d6e8..0a830f934 100644 --- a/libs/@guardian/source-foundations/src/typography/types.ts +++ b/libs/@guardian/source-foundations/src/typography/types.ts @@ -115,3 +115,12 @@ export type Fs = < unit: ScaleUnit; }, ) => TypographyStyles; + +export type TypographyPreset = ` + font-family: ${string}; + font-size: ${number}rem; + line-height: ${number}; + font-weight: ${number}; + font-style: ${'normal' | 'italic'}; + --source-text-decoration-thickness: ${number}px; +`; diff --git a/libs/@guardian/source-foundations/src/utils/typography.ts b/libs/@guardian/source-foundations/src/utils/typography.ts index 5efba090e..080bd49b8 100644 --- a/libs/@guardian/source-foundations/src/utils/typography.ts +++ b/libs/@guardian/source-foundations/src/utils/typography.ts @@ -1,8 +1,9 @@ +import type { TypographyPreset } from '../typography/types'; + /* - * Convert font size in typography preset from default rem value to pixels + * Convert `font-size` value in typography preset from rem to px */ - -export const presetToPx = (preset: string) => { +export const presetToPx = (preset: TypographyPreset) => { const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; const matches = preset.match(REGEX_FONT_SIZE); From 7a98a779a7c17af908e7aacc78a6b443cff81b61 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:18:19 +0000 Subject: [PATCH 7/7] Lowercase 'italic' in tokens so it satisfies type --- libs/@guardian/design-tokens/src/tokens.json | 2 +- libs/@guardian/design-tokens/tokens.d.ts | 2 +- libs/@guardian/design-tokens/tokens.js | 2 +- libs/@guardian/design-tokens/variables.css | 2 +- libs/@guardian/source-foundations/src/tokens.test.ts | 4 ++-- libs/@guardian/source-foundations/src/typography/css.ts | 2 +- libs/@guardian/source-foundations/src/typography/objects.ts | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/libs/@guardian/design-tokens/src/tokens.json b/libs/@guardian/design-tokens/src/tokens.json index 704d2bdb0..e636d7a3f 100644 --- a/libs/@guardian/design-tokens/src/tokens.json +++ b/libs/@guardian/design-tokens/src/tokens.json @@ -1537,7 +1537,7 @@ "fontSize": "{typography.fontSize.14}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", - "fontStyle": "Italic" + "fontStyle": "italic" } }, "textSansItalic15": { diff --git a/libs/@guardian/design-tokens/tokens.d.ts b/libs/@guardian/design-tokens/tokens.d.ts index 6cc89de9d..2cf19f477 100644 --- a/libs/@guardian/design-tokens/tokens.d.ts +++ b/libs/@guardian/design-tokens/tokens.d.ts @@ -1444,7 +1444,7 @@ export declare const tokens: { readonly fontSize: '14px'; readonly lineHeight: 1.3; readonly fontWeight: 400; - readonly fontStyle: 'Italic'; + readonly fontStyle: 'italic'; }; readonly textSansItalic15: { readonly fontFamily: readonly [ diff --git a/libs/@guardian/design-tokens/tokens.js b/libs/@guardian/design-tokens/tokens.js index 91ae76d49..24b562efe 100644 --- a/libs/@guardian/design-tokens/tokens.js +++ b/libs/@guardian/design-tokens/tokens.js @@ -1440,7 +1440,7 @@ export const tokens = { fontSize: '14px', lineHeight: 1.3, fontWeight: 400, - fontStyle: 'Italic', + fontStyle: 'italic', }, textSansItalic15: { fontFamily: [ diff --git a/libs/@guardian/design-tokens/variables.css b/libs/@guardian/design-tokens/variables.css index 57492a7c1..ac42bf5e7 100644 --- a/libs/@guardian/design-tokens/variables.css +++ b/libs/@guardian/design-tokens/variables.css @@ -1410,7 +1410,7 @@ --source-typography-presets-textSansItalic14-font-size: var( --source-typography-fontSize-14 ); - --source-typography-presets-textSansItalic14-font-style: Italic; + --source-typography-presets-textSansItalic14-font-style: italic; --source-typography-presets-textSansItalic14-font-weight: var( --source-typography-fontWeight-regular ); diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index 1949430ca..3136b215f 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -1870,7 +1870,7 @@ describe('Typography preset CSS output', () => { font-size: 0.875rem; line-height: 1.3; font-weight: 400; - font-style: Italic; + font-style: italic; --source-text-decoration-thickness: 2px; `, { isFragment: true }, @@ -2681,7 +2681,7 @@ describe('Typography preset object output', () => { fontSize: '0.875rem', lineHeight: 1.3, fontWeight: 400, - fontStyle: 'Italic', + fontStyle: 'italic', }); expect(typePresetObject.textSansItalic15Object).toEqual({ fontFamily: diff --git a/libs/@guardian/source-foundations/src/typography/css.ts b/libs/@guardian/source-foundations/src/typography/css.ts index 1a9532a45..0eb43fcb6 100644 --- a/libs/@guardian/source-foundations/src/typography/css.ts +++ b/libs/@guardian/source-foundations/src/typography/css.ts @@ -790,7 +790,7 @@ export const textSansItalic14 = ` font-size: 0.875rem; line-height: 1.3; font-weight: 400; - font-style: Italic; + font-style: italic; --source-text-decoration-thickness: 2px; `; diff --git a/libs/@guardian/source-foundations/src/typography/objects.ts b/libs/@guardian/source-foundations/src/typography/objects.ts index 8327bd06a..4fc4ce739 100644 --- a/libs/@guardian/source-foundations/src/typography/objects.ts +++ b/libs/@guardian/source-foundations/src/typography/objects.ts @@ -741,7 +741,7 @@ export const textSansItalic14Object = { fontSize: '0.875rem', lineHeight: 1.3, fontWeight: 400, - fontStyle: 'Italic', + fontStyle: 'italic', } as const; export const textSansItalic15Object = {