From 77881c91c649793cd1c8413f9f9fa719779bea66 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 4 Mar 2024 17:52:16 +0000 Subject: [PATCH 01/18] Basic build script to generate presets vars --- .../@guardian/source-foundations/package.json | 4 +++ .../scripts/build-type-presets.ts | 26 +++++++++++++++++++ pnpm-lock.yaml | 14 ++++++++++ 3 files changed, 44 insertions(+) create mode 100644 libs/@guardian/source-foundations/scripts/build-type-presets.ts diff --git a/libs/@guardian/source-foundations/package.json b/libs/@guardian/source-foundations/package.json index 832a63d9a..5ec58c5a2 100644 --- a/libs/@guardian/source-foundations/package.json +++ b/libs/@guardian/source-foundations/package.json @@ -3,6 +3,9 @@ "version": "14.1.4", "license": "Apache-2.0", "sideEffects": false, + "scripts": { + "build-type-presets": "tsx scripts/build-type-presets.ts" + }, "dependencies": { "mini-svg-data-uri": "1.4.4" }, @@ -13,6 +16,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "tslib": "2.6.2", + "tsx": "^4.7.1", "typescript": "5.3.3" }, "peerDependencies": { diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts new file mode 100644 index 000000000..42ca6b96d --- /dev/null +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -0,0 +1,26 @@ +import { tokens } from '@guardian/design-tokens'; +import { fontArrayToString } from '../src/utils/convert-value'; + +const { presets } = tokens.typography; + +console.log('Building typography presets.\n'); + +let output = ` + // Typography presets + // Auto-generated by scripts/build-type-presets.ts + // DO NOT EDIT' +`; + +for (const [preset, properties] of Object.entries(presets)) { + output += ` + export const ${preset} = \` + font-family: ${fontArrayToString(properties.fontFamily)}; + font-size: ${properties.fontSize}; + line-height: ${properties.lineHeight}; + font-weight: ${properties.fontWeight}; + font-style: ${properties.fontStyle}; + \`; + `; +} + +console.log(output); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a21eb180a..481b7331b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -608,6 +608,9 @@ importers: tslib: specifier: 2.6.2 version: 2.6.2 + tsx: + specifier: ^4.7.1 + version: 4.7.1 typescript: specifier: 5.3.3 version: 5.3.3 @@ -17342,6 +17345,17 @@ packages: typescript: 5.3.3 dev: true + /tsx@4.7.1: + resolution: {integrity: sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==} + engines: {node: '>=18.0.0'} + hasBin: true + dependencies: + esbuild: 0.19.12 + get-tsconfig: 4.7.2 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /tty-table@4.1.6: resolution: {integrity: sha512-kRj5CBzOrakV4VRRY5kUWbNYvo/FpOsz65DzI5op9P+cHov3+IqPbo1JE1ZnQGkHdZgNFDsrEjrfqqy/Ply9fw==} engines: {node: '>=8.0.0'} From a133afe7a7b70d1ebb84d1f7b7c49910153fbb0f Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 10:11:42 +0000 Subject: [PATCH 02/18] Format build output with Prettier --- .../scripts/build-type-presets.ts | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts index 42ca6b96d..54fd11116 100644 --- a/libs/@guardian/source-foundations/scripts/build-type-presets.ts +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -1,26 +1,37 @@ +import fs from 'node:fs'; +import prettierConfig from '@guardian/prettier'; +import { format } from 'prettier'; import { tokens } from '@guardian/design-tokens'; import { fontArrayToString } from '../src/utils/convert-value'; const { presets } = tokens.typography; -console.log('Building typography presets.\n'); +const presetOutputPath = `${process.cwd()}/src/typography/presets.ts`; let output = ` // Typography presets // Auto-generated by scripts/build-type-presets.ts - // DO NOT EDIT' + // DO NOT EDIT `; for (const [preset, properties] of Object.entries(presets)) { output += ` export const ${preset} = \` - font-family: ${fontArrayToString(properties.fontFamily)}; - font-size: ${properties.fontSize}; - line-height: ${properties.lineHeight}; - font-weight: ${properties.fontWeight}; - font-style: ${properties.fontStyle}; + font-family: ${fontArrayToString(properties.fontFamily)}; + font-size: ${properties.fontSize}; + line-height: ${properties.lineHeight}; + font-weight: ${properties.fontWeight}; + font-style: ${properties.fontStyle}; \`; `; } -console.log(output); +console.log('Writing typography presets.'); + +(async () => { + const formattedOutput = await format(output, { + parser: 'typescript', + ...prettierConfig, + }); + fs.writeFileSync(presetOutputPath, formattedOutput); +})(); From 867abbcbb81f98f4ae9009901d74ab68935d0f8e Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 10:45:42 +0000 Subject: [PATCH 03/18] Move build script to nx target --- README.md | 1 + libs/@guardian/source-foundations/package.json | 3 --- libs/@guardian/source-foundations/project.json | 8 ++++++++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6a5398b9a..b3f5faf06 100644 --- a/README.md +++ b/README.md @@ -200,6 +200,7 @@ Project-specific are defined in their `project.json`, and can be run with `make - `make @guardian/source-foundations:build` - `make @guardian/source-foundations:build-storybook` +- `make @guardian/source-foundations:build-type-presets` - `make @guardian/source-foundations:dev` - `make @guardian/source-foundations:fix` - `make @guardian/source-foundations:lint` diff --git a/libs/@guardian/source-foundations/package.json b/libs/@guardian/source-foundations/package.json index 5ec58c5a2..45def1a30 100644 --- a/libs/@guardian/source-foundations/package.json +++ b/libs/@guardian/source-foundations/package.json @@ -3,9 +3,6 @@ "version": "14.1.4", "license": "Apache-2.0", "sideEffects": false, - "scripts": { - "build-type-presets": "tsx scripts/build-type-presets.ts" - }, "dependencies": { "mini-svg-data-uri": "1.4.4" }, diff --git a/libs/@guardian/source-foundations/project.json b/libs/@guardian/source-foundations/project.json index 193c662f1..c52299764 100644 --- a/libs/@guardian/source-foundations/project.json +++ b/libs/@guardian/source-foundations/project.json @@ -72,6 +72,14 @@ "cwd": "libs/@guardian/source-foundations", "color": true } + }, + "build-type-presets": { + "executor": "nx:run-commands", + "options": { + "command": "tsx ./scripts/build-type-presets.ts", + "cwd": "libs/@guardian/source-foundations", + "color": true + } } }, "tags": [] From 228268ef48dcc2a05217e099348cb4a80081dd0e Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:37:53 +0000 Subject: [PATCH 04/18] Add presets to exports and export tests --- .../source-foundations/src/index.test.ts | 97 +++ .../@guardian/source-foundations/src/index.ts | 1 + .../src/typography/presets.ts | 779 ++++++++++++++++++ 3 files changed, 877 insertions(+) create mode 100644 libs/@guardian/source-foundations/src/typography/presets.ts diff --git a/libs/@guardian/source-foundations/src/index.test.ts b/libs/@guardian/source-foundations/src/index.test.ts index 61bad2f44..a165ff9b5 100644 --- a/libs/@guardian/source-foundations/src/index.test.ts +++ b/libs/@guardian/source-foundations/src/index.test.ts @@ -27,6 +27,14 @@ it('Should have exactly these exports', () => { expect(Object.keys(pkgExports).sort()).toEqual([ 'FocusStyleManager', 'appearance', + 'article15', + 'article17', + 'articleBold15', + 'articleBold17', + 'articleBoldItalic15', + 'articleBoldItalic17', + 'articleItalic15', + 'articleItalic17', 'background', 'between', 'body', @@ -55,10 +63,60 @@ it('Should have exactly these exports', () => { 'from', 'generateSourceId', 'headline', + 'headlineBold14', + 'headlineBold17', + 'headlineBold20', + 'headlineBold24', + 'headlineBold28', + 'headlineBold34', + 'headlineBold42', + 'headlineBold50', + 'headlineBold70', + 'headlineLight14', + 'headlineLight17', + 'headlineLight20', + 'headlineLight24', + 'headlineLight28', + 'headlineLight34', + 'headlineLight42', + 'headlineLight50', + 'headlineLight70', + 'headlineLightItalic14', + 'headlineLightItalic17', + 'headlineLightItalic20', + 'headlineLightItalic24', + 'headlineLightItalic28', + 'headlineLightItalic34', + 'headlineLightItalic42', + 'headlineLightItalic50', + 'headlineLightItalic70', + 'headlineMedium14', + 'headlineMedium17', + 'headlineMedium20', + 'headlineMedium24', + 'headlineMedium28', + 'headlineMedium34', + 'headlineMedium42', + 'headlineMedium50', + 'headlineMedium70', + 'headlineMediumItalic14', + 'headlineMediumItalic17', + 'headlineMediumItalic20', + 'headlineMediumItalic24', + 'headlineMediumItalic28', + 'headlineMediumItalic34', + 'headlineMediumItalic42', + 'headlineMediumItalic50', + 'headlineMediumItalic70', 'headlineObjectStyles', 'headlineSizes', 'height', 'iconSize', + 'kicker14', + 'kicker17', + 'kicker20', + 'kicker24', + 'kicker34', 'labs', 'lifestyle', 'line', @@ -84,10 +142,49 @@ it('Should have exactly these exports', () => { 'success', 'svgBackgroundImage', 'text', + 'textEgyptian14', + 'textEgyptian15', + 'textEgyptian17', + 'textEgyptianBold14', + 'textEgyptianBold15', + 'textEgyptianBold17', + 'textEgyptianBoldItalic14', + 'textEgyptianBoldItalic15', + 'textEgyptianBoldItalic17', + 'textEgyptianItalic14', + 'textEgyptianItalic15', + 'textEgyptianItalic17', 'textSans', + 'textSans12', + 'textSans14', + 'textSans15', + 'textSans17', + 'textSans20', + 'textSans24', + 'textSans28', + 'textSans34', + 'textSansBold12', + 'textSansBold14', + 'textSansBold15', + 'textSansBold17', + 'textSansBold20', + 'textSansBold24', + 'textSansBold28', + 'textSansBold34', + 'textSansItalic12', + 'textSansItalic14', + 'textSansItalic15', + 'textSansItalic17', + 'textSansItalic20', + 'textSansItalic24', + 'textSansItalic28', + 'textSansItalic34', 'textSansObjectStyles', 'textSansSizes', 'titlepiece', + 'titlepiece42', + 'titlepiece50', + 'titlepiece70', 'titlepieceObjectStyles', 'titlepieceSizes', 'transitions', diff --git a/libs/@guardian/source-foundations/src/index.ts b/libs/@guardian/source-foundations/src/index.ts index aac8c94cb..492522ebd 100644 --- a/libs/@guardian/source-foundations/src/index.ts +++ b/libs/@guardian/source-foundations/src/index.ts @@ -72,6 +72,7 @@ export { export { space, remSpace } from './space/space'; // typography +export * from './typography/presets'; export { titlepiece, headline, diff --git a/libs/@guardian/source-foundations/src/typography/presets.ts b/libs/@guardian/source-foundations/src/typography/presets.ts new file mode 100644 index 000000000..1e1663efa --- /dev/null +++ b/libs/@guardian/source-foundations/src/typography/presets.ts @@ -0,0 +1,779 @@ +// Typography presets +// Auto-generated by scripts/build-type-presets.ts +// DO NOT EDIT + +export const article15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 400; + font-style: normal; + `; + +export const article17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 400; + font-style: normal; + `; + +export const articleBold15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: normal; + `; + +export const articleBold17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 700; + font-style: normal; + `; + +export const articleBoldItalic15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: italic; + `; + +export const articleBoldItalic17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 700; + font-style: italic; + `; + +export const articleItalic15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 400; + font-style: italic; + `; + +export const articleItalic17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 400; + font-style: italic; + `; + +export const headlineBold14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold28 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold42 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold50 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineBold70 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const headlineLight14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight28 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight42 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight50 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLight70 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `; + +export const headlineLightItalic14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic28 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic42 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic50 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineLightItalic70 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `; + +export const headlineMedium14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium28 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium42 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium50 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMedium70 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `; + +export const headlineMediumItalic14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic28 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic42 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic50 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `; + +export const headlineMediumItalic70 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: italic; + `; + +export const kicker14 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const kicker17 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const kicker20 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const kicker24 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const kicker34 = ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const textEgyptian14 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textEgyptian15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textEgyptian17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textEgyptianBold14 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textEgyptianBold15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textEgyptianBold17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textEgyptianBoldItalic14 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 700; + font-style: italic; + `; + +export const textEgyptianBoldItalic15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 700; + font-style: italic; + `; + +export const textEgyptianBoldItalic17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: italic; + `; + +export const textEgyptianItalic14 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textEgyptianItalic15 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textEgyptianItalic17 = ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSans12 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans14 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans15 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans17 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans20 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans24 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans28 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSans34 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `; + +export const textSansBold12 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold14 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold15 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold17 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold20 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold24 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold28 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansBold34 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `; + +export const textSansItalic12 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic14 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: Italic; + `; + +export const textSansItalic15 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic17 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic20 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic24 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic28 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const textSansItalic34 = ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `; + +export const titlepiece42 = ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const titlepiece50 = ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; + +export const titlepiece70 = ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `; From 064d63468f879f99677c60303a86af108183c175 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 16:13:18 +0000 Subject: [PATCH 05/18] Strip additional whitespace and tabs from output --- .../scripts/build-type-presets.ts | 44 +- .../src/typography/presets.ts | 1164 ++++++++--------- 2 files changed, 602 insertions(+), 606 deletions(-) diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts index 54fd11116..c8410963c 100644 --- a/libs/@guardian/source-foundations/scripts/build-type-presets.ts +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -1,37 +1,33 @@ import fs from 'node:fs'; -import prettierConfig from '@guardian/prettier'; -import { format } from 'prettier'; import { tokens } from '@guardian/design-tokens'; import { fontArrayToString } from '../src/utils/convert-value'; const { presets } = tokens.typography; +const outputPath = `${process.cwd()}/src/typography/presets.ts`; -const presetOutputPath = `${process.cwd()}/src/typography/presets.ts`; +const STRIP_WHITESPACE = /^\s+/gm; +const STRIP_TABS = /^\t{3}|\t{2}/gm; -let output = ` +const banner = ` // Typography presets // Auto-generated by scripts/build-type-presets.ts // DO NOT EDIT -`; +`.replace(STRIP_WHITESPACE, ''); -for (const [preset, properties] of Object.entries(presets)) { - output += ` - export const ${preset} = \` - font-family: ${fontArrayToString(properties.fontFamily)}; - font-size: ${properties.fontSize}; - line-height: ${properties.lineHeight}; - font-weight: ${properties.fontWeight}; - font-style: ${properties.fontStyle}; - \`; - `; -} +const css = Object.entries(presets) + .map( + ([preset, properties]) => ` + export const ${preset} = \` + font-family: ${fontArrayToString(properties.fontFamily)}; + font-size: ${properties.fontSize}; + line-height: ${properties.lineHeight}; + font-weight: ${properties.fontWeight}; + font-style: ${properties.fontStyle}; + \`; + `, + ) + .join('') + .replace(STRIP_TABS, ''); console.log('Writing typography presets.'); - -(async () => { - const formattedOutput = await format(output, { - parser: 'typescript', - ...prettierConfig, - }); - fs.writeFileSync(presetOutputPath, formattedOutput); -})(); +fs.writeFileSync(outputPath, banner + css); diff --git a/libs/@guardian/source-foundations/src/typography/presets.ts b/libs/@guardian/source-foundations/src/typography/presets.ts index 1e1663efa..b5952481f 100644 --- a/libs/@guardian/source-foundations/src/typography/presets.ts +++ b/libs/@guardian/source-foundations/src/typography/presets.ts @@ -3,777 +3,777 @@ // DO NOT EDIT export const article15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.4; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 400; + font-style: normal; +`; export const article17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.4; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 400; + font-style: normal; +`; export const articleBold15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.4; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: normal; +`; export const articleBold17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.4; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 700; + font-style: normal; +`; export const articleBoldItalic15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.4; - font-weight: 700; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: italic; +`; export const articleBoldItalic17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.4; - font-weight: 700; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 700; + font-style: italic; +`; export const articleItalic15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.4; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 400; + font-style: italic; +`; export const articleItalic17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.4; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.4; + font-weight: 400; + font-style: italic; +`; export const headlineBold14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold28 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold42 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold50 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineBold70 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const headlineLight14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight28 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight42 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight50 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLight70 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 300; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 300; + font-style: normal; +`; export const headlineLightItalic14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic28 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic42 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic50 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineLightItalic70 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 300; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 300; + font-style: italic; +`; export const headlineMedium14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium28 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium42 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium50 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMedium70 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 500; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 500; + font-style: normal; +`; export const headlineMediumItalic14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic28 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 28px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic42 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic50 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 500; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 500; + font-style: italic; +`; export const headlineMediumItalic70 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 700; - font-style: italic; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: italic; +`; export const kicker14 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const kicker17 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const kicker20 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const kicker24 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 24px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const kicker34 = ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 34px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const textEgyptian14 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textEgyptian15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textEgyptian17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textEgyptianBold14 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textEgyptianBold15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textEgyptianBold17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textEgyptianBoldItalic14 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.3; - font-weight: 700; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 700; + font-style: italic; +`; export const textEgyptianBoldItalic15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.3; - font-weight: 700; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 700; + font-style: italic; +`; export const textEgyptianBoldItalic17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.3; - font-weight: 700; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: italic; +`; export const textEgyptianItalic14 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 14px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textEgyptianItalic15 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textEgyptianItalic17 = ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSans12 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans14 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans15 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans17 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans20 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans24 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans28 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSans34 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; +`; export const textSansBold12 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold14 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold15 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold17 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold20 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold24 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold28 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansBold34 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 700; - font-style: normal; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; +`; export const textSansItalic12 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic14 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: Italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: Italic; +`; export const textSansItalic15 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic17 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic20 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic24 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic28 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const textSansItalic34 = ` - font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; - line-height: 1.3; - font-weight: 400; - font-style: italic; - `; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; +`; export const titlepiece42 = ` - font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 42px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const titlepiece50 = ` - font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 50px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; export const titlepiece70 = ` - font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 70px; - line-height: 1.15; - font-weight: 700; - font-style: normal; - `; + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 70px; + line-height: 1.15; + font-weight: 700; + font-style: normal; +`; From 025a7040aaa1bea18197db55ebe137c2e90a9401 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:06:33 +0000 Subject: [PATCH 06/18] Add building presets as dependency to build task --- libs/@guardian/source-foundations/project.json | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/@guardian/source-foundations/project.json b/libs/@guardian/source-foundations/project.json index c52299764..bd9487332 100644 --- a/libs/@guardian/source-foundations/project.json +++ b/libs/@guardian/source-foundations/project.json @@ -5,6 +5,7 @@ "projectType": "library", "targets": { "build": { + "dependsOn": ["build-type-presets"], "executor": "@csnx/npm-package:build", "outputs": ["{options.outputPath}"], "options": { From 179cc744ca6969b0da6d7cd85a5874e0364fdd79 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:07:30 +0000 Subject: [PATCH 07/18] Update incorrect font sizes in Text Sans presets --- libs/@guardian/design-tokens/src/tokens.json | 42 ++++++++++---------- libs/@guardian/design-tokens/tokens.d.ts | 42 ++++++++++---------- libs/@guardian/design-tokens/tokens.js | 42 ++++++++++---------- libs/@guardian/design-tokens/variables.css | 42 ++++++++++---------- 4 files changed, 84 insertions(+), 84 deletions(-) diff --git a/libs/@guardian/design-tokens/src/tokens.json b/libs/@guardian/design-tokens/src/tokens.json index c1bcf1e2d..bc78e11dc 100644 --- a/libs/@guardian/design-tokens/src/tokens.json +++ b/libs/@guardian/design-tokens/src/tokens.json @@ -1372,7 +1372,7 @@ "textSans14": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.14}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1381,7 +1381,7 @@ "textSans15": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.15}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1390,7 +1390,7 @@ "textSans17": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.17}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1399,7 +1399,7 @@ "textSans20": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.20}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1408,7 +1408,7 @@ "textSans24": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.24}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1417,7 +1417,7 @@ "textSans28": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.28}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1426,7 +1426,7 @@ "textSans34": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.34}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "normal" @@ -1444,7 +1444,7 @@ "textSansBold14": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.14}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1453,7 +1453,7 @@ "textSansBold15": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.15}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1462,7 +1462,7 @@ "textSansBold17": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.17}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1471,7 +1471,7 @@ "textSansBold20": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.20}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1480,7 +1480,7 @@ "textSansBold24": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.24}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1489,7 +1489,7 @@ "textSansBold28": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.28}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1498,7 +1498,7 @@ "textSansBold34": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.34}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.bold}", "fontStyle": "normal" @@ -1516,7 +1516,7 @@ "textSansItalic14": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.14}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "Italic" @@ -1525,7 +1525,7 @@ "textSansItalic15": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.15}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" @@ -1534,7 +1534,7 @@ "textSansItalic17": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.17}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" @@ -1543,7 +1543,7 @@ "textSansItalic20": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.20}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" @@ -1552,7 +1552,7 @@ "textSansItalic24": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.24}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" @@ -1561,7 +1561,7 @@ "textSansItalic28": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.28}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" @@ -1570,7 +1570,7 @@ "textSansItalic34": { "$value": { "fontFamily": "{typography.fontFamily.textSans}", - "fontSize": "{typography.fontSize.12}", + "fontSize": "{typography.fontSize.34}", "lineHeight": "{typography.lineHeight.regular}", "fontWeight": "{typography.fontWeight.regular}", "fontStyle": "italic" diff --git a/libs/@guardian/design-tokens/tokens.d.ts b/libs/@guardian/design-tokens/tokens.d.ts index ca50c4813..c1a8c2b89 100644 --- a/libs/@guardian/design-tokens/tokens.d.ts +++ b/libs/@guardian/design-tokens/tokens.d.ts @@ -1201,7 +1201,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '14px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1216,7 +1216,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '15px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1231,7 +1231,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '17px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1246,7 +1246,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '20px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1261,7 +1261,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '24px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1276,7 +1276,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '28px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1291,7 +1291,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '34px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'normal'; @@ -1321,7 +1321,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '14px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1336,7 +1336,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '15px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1351,7 +1351,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '17px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1366,7 +1366,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '20px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1381,7 +1381,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '24px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1396,7 +1396,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '28px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1411,7 +1411,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '34px'; readonly lineHeight: 1.3; readonly fontWeight: 700; readonly fontStyle: 'normal'; @@ -1441,7 +1441,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '14px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'Italic'; @@ -1456,7 +1456,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '15px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; @@ -1471,7 +1471,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '17px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; @@ -1486,7 +1486,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '20px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; @@ -1501,7 +1501,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '24px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; @@ -1516,7 +1516,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '28px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; @@ -1531,7 +1531,7 @@ export declare const tokens: { 'Lucida Grande', 'sans-serif', ]; - readonly fontSize: '12px'; + readonly fontSize: '34px'; readonly lineHeight: 1.3; readonly fontWeight: 400; readonly fontStyle: 'italic'; diff --git a/libs/@guardian/design-tokens/tokens.js b/libs/@guardian/design-tokens/tokens.js index 4f5dcff51..0d4777411 100644 --- a/libs/@guardian/design-tokens/tokens.js +++ b/libs/@guardian/design-tokens/tokens.js @@ -1197,7 +1197,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '14px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1212,7 +1212,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '15px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1227,7 +1227,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '17px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1242,7 +1242,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '20px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1257,7 +1257,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '24px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1272,7 +1272,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '28px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1287,7 +1287,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '34px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'normal', @@ -1317,7 +1317,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '14px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1332,7 +1332,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '15px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1347,7 +1347,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '17px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1362,7 +1362,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '20px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1377,7 +1377,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '24px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1392,7 +1392,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '28px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1407,7 +1407,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '34px', lineHeight: 1.3, fontWeight: 700, fontStyle: 'normal', @@ -1437,7 +1437,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '14px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'Italic', @@ -1452,7 +1452,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '15px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', @@ -1467,7 +1467,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '17px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', @@ -1482,7 +1482,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '20px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', @@ -1497,7 +1497,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '24px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', @@ -1512,7 +1512,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '28px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', @@ -1527,7 +1527,7 @@ export const tokens = { 'Lucida Grande', 'sans-serif', ], - fontSize: '12px', + fontSize: '34px', lineHeight: 1.3, fontWeight: 400, fontStyle: 'italic', diff --git a/libs/@guardian/design-tokens/variables.css b/libs/@guardian/design-tokens/variables.css index 7d722f9cd..29cf43670 100644 --- a/libs/@guardian/design-tokens/variables.css +++ b/libs/@guardian/design-tokens/variables.css @@ -1200,7 +1200,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans14-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-14 ); --source-typography-presets-textSans14-font-style: normal; --source-typography-presets-textSans14-font-weight: var( @@ -1213,7 +1213,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans15-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-15 ); --source-typography-presets-textSans15-font-style: normal; --source-typography-presets-textSans15-font-weight: var( @@ -1226,7 +1226,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans17-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-17 ); --source-typography-presets-textSans17-font-style: normal; --source-typography-presets-textSans17-font-weight: var( @@ -1239,7 +1239,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans20-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-20 ); --source-typography-presets-textSans20-font-style: normal; --source-typography-presets-textSans20-font-weight: var( @@ -1252,7 +1252,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans24-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-24 ); --source-typography-presets-textSans24-font-style: normal; --source-typography-presets-textSans24-font-weight: var( @@ -1265,7 +1265,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans28-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-28 ); --source-typography-presets-textSans28-font-style: normal; --source-typography-presets-textSans28-font-weight: var( @@ -1278,7 +1278,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSans34-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-34 ); --source-typography-presets-textSans34-font-style: normal; --source-typography-presets-textSans34-font-weight: var( @@ -1304,7 +1304,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold14-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-14 ); --source-typography-presets-textSansBold14-font-style: normal; --source-typography-presets-textSansBold14-font-weight: var( @@ -1317,7 +1317,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold15-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-15 ); --source-typography-presets-textSansBold15-font-style: normal; --source-typography-presets-textSansBold15-font-weight: var( @@ -1330,7 +1330,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold17-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-17 ); --source-typography-presets-textSansBold17-font-style: normal; --source-typography-presets-textSansBold17-font-weight: var( @@ -1343,7 +1343,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold20-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-20 ); --source-typography-presets-textSansBold20-font-style: normal; --source-typography-presets-textSansBold20-font-weight: var( @@ -1356,7 +1356,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold24-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-24 ); --source-typography-presets-textSansBold24-font-style: normal; --source-typography-presets-textSansBold24-font-weight: var( @@ -1369,7 +1369,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold28-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-28 ); --source-typography-presets-textSansBold28-font-style: normal; --source-typography-presets-textSansBold28-font-weight: var( @@ -1382,7 +1382,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansBold34-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-34 ); --source-typography-presets-textSansBold34-font-style: normal; --source-typography-presets-textSansBold34-font-weight: var( @@ -1408,7 +1408,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic14-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-14 ); --source-typography-presets-textSansItalic14-font-style: Italic; --source-typography-presets-textSansItalic14-font-weight: var( @@ -1421,7 +1421,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic15-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-15 ); --source-typography-presets-textSansItalic15-font-style: italic; --source-typography-presets-textSansItalic15-font-weight: var( @@ -1434,7 +1434,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic17-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-17 ); --source-typography-presets-textSansItalic17-font-style: italic; --source-typography-presets-textSansItalic17-font-weight: var( @@ -1447,7 +1447,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic20-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-20 ); --source-typography-presets-textSansItalic20-font-style: italic; --source-typography-presets-textSansItalic20-font-weight: var( @@ -1460,7 +1460,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic24-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-24 ); --source-typography-presets-textSansItalic24-font-style: italic; --source-typography-presets-textSansItalic24-font-weight: var( @@ -1473,7 +1473,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic28-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-28 ); --source-typography-presets-textSansItalic28-font-style: italic; --source-typography-presets-textSansItalic28-font-weight: var( @@ -1486,7 +1486,7 @@ --source-typography-fontFamily-textSans ); --source-typography-presets-textSansItalic34-font-size: var( - --source-typography-fontSize-12 + --source-typography-fontSize-34 ); --source-typography-presets-textSansItalic34-font-style: italic; --source-typography-presets-textSansItalic34-font-weight: var( From 6e85ad402c43b814200847e697c45b991e39c1b2 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 18:03:18 +0000 Subject: [PATCH 08/18] Add preset examples to tests --- .../source-foundations/src/tokens.test.ts | 146 ++++++++++++++++++ 1 file changed, 146 insertions(+) diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index b19b58f53..e52c59679 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -43,6 +43,7 @@ import { titlepieceSizes, underlineThickness, } from './typography/data'; +import * as presets from './typography/presets'; import { bodyObjectStyles, headlineObjectStyles, @@ -903,6 +904,151 @@ describe('Typography API object style output', () => { }); }); +describe('Typography preset CSS output', () => { + it('should match expected output', () => { + expect(presets.article15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.articleBold15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.articleBoldItalic15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 15px; + line-height: 1.4; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineBold50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 50px; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.kicker20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 20px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptian17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBold17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBoldItalic17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 17px; + line-height: 1.3; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSans12).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold12).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic12).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 12px; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.titlepiece42).toMatchCSS( + ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + }); +}); + /** * Deprecated tokens */ From f9d8ff0749b342f679d30cc4f884d243402ca10a Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 18:16:08 +0000 Subject: [PATCH 09/18] Convert px font sizes to rems --- .../scripts/build-type-presets.ts | 4 +- .../source-foundations/src/tokens.test.ts | 28 +-- .../src/typography/presets.ts | 194 +++++++++--------- .../src/utils/convert-value.test.ts | 13 +- .../src/utils/convert-value.ts | 2 + 5 files changed, 126 insertions(+), 115 deletions(-) diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts index c8410963c..776512c57 100644 --- a/libs/@guardian/source-foundations/scripts/build-type-presets.ts +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -1,6 +1,6 @@ import fs from 'node:fs'; import { tokens } from '@guardian/design-tokens'; -import { fontArrayToString } from '../src/utils/convert-value'; +import { fontArrayToString, pxStringToRem } from '../src/utils/convert-value'; const { presets } = tokens.typography; const outputPath = `${process.cwd()}/src/typography/presets.ts`; @@ -19,7 +19,7 @@ const css = Object.entries(presets) ([preset, properties]) => ` export const ${preset} = \` font-family: ${fontArrayToString(properties.fontFamily)}; - font-size: ${properties.fontSize}; + font-size: ${pxStringToRem(properties.fontSize)}rem; line-height: ${properties.lineHeight}; font-weight: ${properties.fontWeight}; font-style: ${properties.fontStyle}; diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index e52c59679..f25fab983 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -909,7 +909,7 @@ describe('Typography preset CSS output', () => { expect(presets.article15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 400; font-style: normal; @@ -919,7 +919,7 @@ describe('Typography preset CSS output', () => { expect(presets.articleBold15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 700; font-style: normal; @@ -929,7 +929,7 @@ describe('Typography preset CSS output', () => { expect(presets.articleBoldItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 700; font-style: italic; @@ -939,7 +939,7 @@ describe('Typography preset CSS output', () => { expect(presets.headlineBold50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -949,7 +949,7 @@ describe('Typography preset CSS output', () => { expect(presets.headlineLight50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -959,7 +959,7 @@ describe('Typography preset CSS output', () => { expect(presets.headlineLightItalic50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -969,7 +969,7 @@ describe('Typography preset CSS output', () => { expect(presets.kicker20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -979,7 +979,7 @@ describe('Typography preset CSS output', () => { expect(presets.textEgyptian17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -989,7 +989,7 @@ describe('Typography preset CSS output', () => { expect(presets.textEgyptianBold17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -999,7 +999,7 @@ describe('Typography preset CSS output', () => { expect(presets.textEgyptianBoldItalic17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-style: italic; @@ -1009,7 +1009,7 @@ describe('Typography preset CSS output', () => { expect(presets.textSans12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -1019,7 +1019,7 @@ describe('Typography preset CSS output', () => { expect(presets.textSansBold12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -1029,7 +1029,7 @@ describe('Typography preset CSS output', () => { expect(presets.textSansItalic12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -1039,7 +1039,7 @@ describe('Typography preset CSS output', () => { expect(presets.titlepiece42).toMatchCSS( ` font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 700; font-style: normal; diff --git a/libs/@guardian/source-foundations/src/typography/presets.ts b/libs/@guardian/source-foundations/src/typography/presets.ts index b5952481f..8e16f321f 100644 --- a/libs/@guardian/source-foundations/src/typography/presets.ts +++ b/libs/@guardian/source-foundations/src/typography/presets.ts @@ -4,7 +4,7 @@ export const article15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 400; font-style: normal; @@ -12,7 +12,7 @@ export const article15 = ` export const article17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.4; font-weight: 400; font-style: normal; @@ -20,7 +20,7 @@ export const article17 = ` export const articleBold15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 700; font-style: normal; @@ -28,7 +28,7 @@ export const articleBold15 = ` export const articleBold17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.4; font-weight: 700; font-style: normal; @@ -36,7 +36,7 @@ export const articleBold17 = ` export const articleBoldItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 700; font-style: italic; @@ -44,7 +44,7 @@ export const articleBoldItalic15 = ` export const articleBoldItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.4; font-weight: 700; font-style: italic; @@ -52,7 +52,7 @@ export const articleBoldItalic17 = ` export const articleItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.4; font-weight: 400; font-style: italic; @@ -60,7 +60,7 @@ export const articleItalic15 = ` export const articleItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.4; font-weight: 400; font-style: italic; @@ -68,7 +68,7 @@ export const articleItalic17 = ` export const headlineBold14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -76,7 +76,7 @@ export const headlineBold14 = ` export const headlineBold17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -84,7 +84,7 @@ export const headlineBold17 = ` export const headlineBold20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -92,7 +92,7 @@ export const headlineBold20 = ` export const headlineBold24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -100,7 +100,7 @@ export const headlineBold24 = ` export const headlineBold28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; + font-size: 1.75rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -108,7 +108,7 @@ export const headlineBold28 = ` export const headlineBold34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -116,7 +116,7 @@ export const headlineBold34 = ` export const headlineBold42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -124,7 +124,7 @@ export const headlineBold42 = ` export const headlineBold50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -132,7 +132,7 @@ export const headlineBold50 = ` export const headlineBold70 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -140,7 +140,7 @@ export const headlineBold70 = ` export const headlineLight14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -148,7 +148,7 @@ export const headlineLight14 = ` export const headlineLight17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -156,7 +156,7 @@ export const headlineLight17 = ` export const headlineLight20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -164,7 +164,7 @@ export const headlineLight20 = ` export const headlineLight24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -172,7 +172,7 @@ export const headlineLight24 = ` export const headlineLight28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; + font-size: 1.75rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -180,7 +180,7 @@ export const headlineLight28 = ` export const headlineLight34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -188,7 +188,7 @@ export const headlineLight34 = ` export const headlineLight42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -196,7 +196,7 @@ export const headlineLight42 = ` export const headlineLight50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -204,7 +204,7 @@ export const headlineLight50 = ` export const headlineLight70 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 300; font-style: normal; @@ -212,7 +212,7 @@ export const headlineLight70 = ` export const headlineLightItalic14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -220,7 +220,7 @@ export const headlineLightItalic14 = ` export const headlineLightItalic17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -228,7 +228,7 @@ export const headlineLightItalic17 = ` export const headlineLightItalic20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -236,7 +236,7 @@ export const headlineLightItalic20 = ` export const headlineLightItalic24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -244,7 +244,7 @@ export const headlineLightItalic24 = ` export const headlineLightItalic28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; + font-size: 1.75rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -252,7 +252,7 @@ export const headlineLightItalic28 = ` export const headlineLightItalic34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -260,7 +260,7 @@ export const headlineLightItalic34 = ` export const headlineLightItalic42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -268,7 +268,7 @@ export const headlineLightItalic42 = ` export const headlineLightItalic50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -276,7 +276,7 @@ export const headlineLightItalic50 = ` export const headlineLightItalic70 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 300; font-style: italic; @@ -284,7 +284,7 @@ export const headlineLightItalic70 = ` export const headlineMedium14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -292,7 +292,7 @@ export const headlineMedium14 = ` export const headlineMedium17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -300,7 +300,7 @@ export const headlineMedium17 = ` export const headlineMedium20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -308,7 +308,7 @@ export const headlineMedium20 = ` export const headlineMedium24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -316,7 +316,7 @@ export const headlineMedium24 = ` export const headlineMedium28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; + font-size: 1.75rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -324,7 +324,7 @@ export const headlineMedium28 = ` export const headlineMedium34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -332,7 +332,7 @@ export const headlineMedium34 = ` export const headlineMedium42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -340,7 +340,7 @@ export const headlineMedium42 = ` export const headlineMedium50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -348,7 +348,7 @@ export const headlineMedium50 = ` export const headlineMedium70 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 500; font-style: normal; @@ -356,7 +356,7 @@ export const headlineMedium70 = ` export const headlineMediumItalic14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -364,7 +364,7 @@ export const headlineMediumItalic14 = ` export const headlineMediumItalic17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -372,7 +372,7 @@ export const headlineMediumItalic17 = ` export const headlineMediumItalic20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -380,7 +380,7 @@ export const headlineMediumItalic20 = ` export const headlineMediumItalic24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -388,7 +388,7 @@ export const headlineMediumItalic24 = ` export const headlineMediumItalic28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 28px; + font-size: 1.75rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -396,7 +396,7 @@ export const headlineMediumItalic28 = ` export const headlineMediumItalic34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -404,7 +404,7 @@ export const headlineMediumItalic34 = ` export const headlineMediumItalic42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -412,7 +412,7 @@ export const headlineMediumItalic42 = ` export const headlineMediumItalic50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 500; font-style: italic; @@ -420,7 +420,7 @@ export const headlineMediumItalic50 = ` export const headlineMediumItalic70 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 700; font-style: italic; @@ -428,7 +428,7 @@ export const headlineMediumItalic70 = ` export const kicker14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -436,7 +436,7 @@ export const kicker14 = ` export const kicker17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -444,7 +444,7 @@ export const kicker17 = ` export const kicker20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 20px; + font-size: 1.25rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -452,7 +452,7 @@ export const kicker20 = ` export const kicker24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 24px; + font-size: 1.5rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -460,7 +460,7 @@ export const kicker24 = ` export const kicker34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 34px; + font-size: 2.125rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -468,7 +468,7 @@ export const kicker34 = ` export const textEgyptian14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -476,7 +476,7 @@ export const textEgyptian14 = ` export const textEgyptian15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -484,7 +484,7 @@ export const textEgyptian15 = ` export const textEgyptian17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -492,7 +492,7 @@ export const textEgyptian17 = ` export const textEgyptianBold14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -500,7 +500,7 @@ export const textEgyptianBold14 = ` export const textEgyptianBold15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -508,7 +508,7 @@ export const textEgyptianBold15 = ` export const textEgyptianBold17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -516,7 +516,7 @@ export const textEgyptianBold17 = ` export const textEgyptianBoldItalic14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.3; font-weight: 700; font-style: italic; @@ -524,7 +524,7 @@ export const textEgyptianBoldItalic14 = ` export const textEgyptianBoldItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 700; font-style: italic; @@ -532,7 +532,7 @@ export const textEgyptianBoldItalic15 = ` export const textEgyptianBoldItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-style: italic; @@ -540,7 +540,7 @@ export const textEgyptianBoldItalic17 = ` export const textEgyptianItalic14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 14px; + font-size: 0.875rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -548,7 +548,7 @@ export const textEgyptianItalic14 = ` export const textEgyptianItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 15px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -556,7 +556,7 @@ export const textEgyptianItalic15 = ` export const textEgyptianItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 17px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -564,7 +564,7 @@ export const textEgyptianItalic17 = ` export const textSans12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -572,7 +572,7 @@ export const textSans12 = ` export const textSans14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.875rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -580,7 +580,7 @@ export const textSans14 = ` export const textSans15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -588,7 +588,7 @@ export const textSans15 = ` export const textSans17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -596,7 +596,7 @@ export const textSans17 = ` export const textSans20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.25rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -604,7 +604,7 @@ export const textSans20 = ` export const textSans24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.5rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -612,7 +612,7 @@ export const textSans24 = ` export const textSans28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.75rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -620,7 +620,7 @@ export const textSans28 = ` export const textSans34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 2.125rem; line-height: 1.3; font-weight: 400; font-style: normal; @@ -628,7 +628,7 @@ export const textSans34 = ` export const textSansBold12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -636,7 +636,7 @@ export const textSansBold12 = ` export const textSansBold14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.875rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -644,7 +644,7 @@ export const textSansBold14 = ` export const textSansBold15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -652,7 +652,7 @@ export const textSansBold15 = ` export const textSansBold17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -660,7 +660,7 @@ export const textSansBold17 = ` export const textSansBold20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.25rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -668,7 +668,7 @@ export const textSansBold20 = ` export const textSansBold24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.5rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -676,7 +676,7 @@ export const textSansBold24 = ` export const textSansBold28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.75rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -684,7 +684,7 @@ export const textSansBold28 = ` export const textSansBold34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 2.125rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -692,7 +692,7 @@ export const textSansBold34 = ` export const textSansItalic12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.75rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -700,7 +700,7 @@ export const textSansItalic12 = ` export const textSansItalic14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.875rem; line-height: 1.3; font-weight: 400; font-style: Italic; @@ -708,7 +708,7 @@ export const textSansItalic14 = ` export const textSansItalic15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 0.9375rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -716,7 +716,7 @@ export const textSansItalic15 = ` export const textSansItalic17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.0625rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -724,7 +724,7 @@ export const textSansItalic17 = ` export const textSansItalic20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.25rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -732,7 +732,7 @@ export const textSansItalic20 = ` export const textSansItalic24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.5rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -740,7 +740,7 @@ export const textSansItalic24 = ` export const textSansItalic28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 1.75rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -748,7 +748,7 @@ export const textSansItalic28 = ` export const textSansItalic34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 12px; + font-size: 2.125rem; line-height: 1.3; font-weight: 400; font-style: italic; @@ -756,7 +756,7 @@ export const textSansItalic34 = ` export const titlepiece42 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 42px; + font-size: 2.625rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -764,7 +764,7 @@ export const titlepiece42 = ` export const titlepiece50 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 50px; + font-size: 3.125rem; line-height: 1.15; font-weight: 700; font-style: normal; @@ -772,7 +772,7 @@ export const titlepiece50 = ` export const titlepiece70 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; - font-size: 70px; + font-size: 4.375rem; line-height: 1.15; font-weight: 700; font-style: normal; diff --git a/libs/@guardian/source-foundations/src/utils/convert-value.test.ts b/libs/@guardian/source-foundations/src/utils/convert-value.test.ts index 099699487..b5c59ce0b 100644 --- a/libs/@guardian/source-foundations/src/utils/convert-value.test.ts +++ b/libs/@guardian/source-foundations/src/utils/convert-value.test.ts @@ -1,15 +1,15 @@ import { fontArrayToString, pxStringToNumber, + pxStringToRem, pxToRem, - rootPixelFontSize, } from './convert-value'; describe('pxToRem', () => { it('should calculate a rem equivalent of a pixel value', () => { const value = 17; const result = pxToRem(value); - expect(result).toBe(value / rootPixelFontSize); + expect(result).toBe(1.0625); }); }); @@ -22,6 +22,15 @@ describe('pxStringToNumber', () => { }); }); +describe('pxStringToRem', () => { + it('should convert a value with a px unit to rem equivalent', () => { + const value = '20px'; + const result = pxStringToRem(value); + expect(result).toBe(1.25); + expect(typeof result).toBe('number'); + }); +}); + describe('fontArrayToString', () => { it('should convert an array of font names to a valid `font-family` value', () => { const value = ['GuardianTextEgyptian', 'Georgia', 'serif']; diff --git a/libs/@guardian/source-foundations/src/utils/convert-value.ts b/libs/@guardian/source-foundations/src/utils/convert-value.ts index c836fc87a..f581a503f 100644 --- a/libs/@guardian/source-foundations/src/utils/convert-value.ts +++ b/libs/@guardian/source-foundations/src/utils/convert-value.ts @@ -1,5 +1,7 @@ export const rootPixelFontSize = 16; export const pxToRem = (px: number): number => px / rootPixelFontSize; export const pxStringToNumber = (px: string): number => Number(px.slice(0, -2)); +export const pxStringToRem = (px: string): number => + pxToRem(pxStringToNumber(px)); export const fontArrayToString = (fonts: readonly string[]): string => fonts.map((name) => (name.includes(' ') ? `"${name}"` : name)).join(', '); From 4630706813e78f23623af155dc71d1568156a3c8 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Wed, 6 Mar 2024 18:21:48 +0000 Subject: [PATCH 10/18] Update build script messaging --- .../source-foundations/scripts/build-type-presets.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts index 776512c57..290ade40f 100644 --- a/libs/@guardian/source-foundations/scripts/build-type-presets.ts +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -2,12 +2,15 @@ import fs from 'node:fs'; import { tokens } from '@guardian/design-tokens'; import { fontArrayToString, pxStringToRem } from '../src/utils/convert-value'; -const { presets } = tokens.typography; -const outputPath = `${process.cwd()}/src/typography/presets.ts`; +console.log('Building typography presets…'); const STRIP_WHITESPACE = /^\s+/gm; const STRIP_TABS = /^\t{3}|\t{2}/gm; +const { presets } = tokens.typography; +const presetTotal = Object.keys(presets).length; +const outputPath = `${process.cwd()}/src/typography/presets.ts`; + const banner = ` // Typography presets // Auto-generated by scripts/build-type-presets.ts @@ -29,5 +32,5 @@ const css = Object.entries(presets) .join('') .replace(STRIP_TABS, ''); -console.log('Writing typography presets.'); fs.writeFileSync(outputPath, banner + css); +console.log(`✓ ${presetTotal} presets built`); From eb03cd5c853a9787f8be86f2eff4d5a50b22ff81 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Mon, 11 Mar 2024 12:58:38 +0000 Subject: [PATCH 11/18] Add complete set of tests for all presets --- .../source-foundations/src/tokens.test.ts | 904 +++++++++++++++++- 1 file changed, 867 insertions(+), 37 deletions(-) diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index f25fab983..f7f4a5cd0 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -916,110 +916,850 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); + expect(presets.article17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.4; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); expect(presets.articleBold15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 0.9375rem; - line-height: 1.4; + font-size: 0.9375rem; + line-height: 1.4; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.articleBold17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.4; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.articleBoldItalic15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.9375rem; + line-height: 1.4; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.articleBoldItalic17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.4; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.articleItalic15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.9375rem; + line-height: 1.4; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.articleItalic17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.4; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineBold14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold28).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.75rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold42).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.625rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineBold70).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight28).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.75rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight42).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.625rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLight70).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 300; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic28).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.75rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic42).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.625rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineLightItalic70).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 300; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium28).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.75rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium42).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.625rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMedium70).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 500; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic28).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.75rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic42).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.625rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic50).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 500; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.headlineMediumItalic70).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.kicker14).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.kicker17).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.kicker20).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.25rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.kicker24).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 1.5rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.kicker34).toMatchCSS( + ` + font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-size: 2.125rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptian14).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptian15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptian17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBold14).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBold15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBold17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.3; font-weight: 700; font-style: normal; `, { isFragment: true }, ); - expect(presets.articleBoldItalic15).toMatchCSS( + expect(presets.textEgyptianBoldItalic14).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianBoldItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; - line-height: 1.4; + line-height: 1.3; font-weight: 700; font-style: italic; `, { isFragment: true }, ); - expect(presets.headlineBold50).toMatchCSS( + expect(presets.textEgyptianBoldItalic17).toMatchCSS( ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 3.125rem; - line-height: 1.15; + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.3; font-weight: 700; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianItalic14).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianItalic15).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textEgyptianItalic17).toMatchCSS( + ` + font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-size: 1.0625rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSans12).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.75rem; + line-height: 1.3; + font-weight: 400; font-style: normal; `, { isFragment: true }, ); - expect(presets.headlineLight50).toMatchCSS( + expect(presets.textSans14).toMatchCSS( ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 3.125rem; - line-height: 1.15; - font-weight: 300; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 400; font-style: normal; `, { isFragment: true }, ); - expect(presets.headlineLightItalic50).toMatchCSS( + expect(presets.textSans15).toMatchCSS( ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; - font-size: 3.125rem; - line-height: 1.15; - font-weight: 300; - font-style: italic; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; `, { isFragment: true }, ); - expect(presets.kicker20).toMatchCSS( + expect(presets.textSans17).toMatchCSS( ` - font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.0625rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSans20).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; - line-height: 1.15; - font-weight: 700; + line-height: 1.3; + font-weight: 400; font-style: normal; `, { isFragment: true }, ); - expect(presets.textEgyptian17).toMatchCSS( + expect(presets.textSans24).toMatchCSS( ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 1.0625rem; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.5rem; line-height: 1.3; font-weight: 400; font-style: normal; `, { isFragment: true }, ); - expect(presets.textEgyptianBold17).toMatchCSS( + expect(presets.textSans28).toMatchCSS( ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; - font-size: 1.0625rem; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.75rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSans34).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 2.125rem; + line-height: 1.3; + font-weight: 400; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold12).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.75rem; line-height: 1.3; font-weight: 700; font-style: normal; `, { isFragment: true }, ); - expect(presets.textEgyptianBoldItalic17).toMatchCSS( + expect(presets.textSansBold14).toMatchCSS( ` - font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold15).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold17).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; - font-style: italic; + font-style: normal; `, { isFragment: true }, ); - expect(presets.textSans12).toMatchCSS( + expect(presets.textSansBold20).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 0.75rem; + font-size: 1.25rem; line-height: 1.3; - font-weight: 400; + font-weight: 700; font-style: normal; `, { isFragment: true }, ); - expect(presets.textSansBold12).toMatchCSS( + expect(presets.textSansBold24).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 0.75rem; + font-size: 1.5rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold28).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.75rem; + line-height: 1.3; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.textSansBold34).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 2.125rem; line-height: 1.3; font-weight: 700; font-style: normal; @@ -1036,6 +1776,76 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); + expect(presets.textSansItalic14).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.875rem; + line-height: 1.3; + font-weight: 400; + font-style: Italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic15).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 0.9375rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic17).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.0625rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic20).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.25rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic24).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.5rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic28).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 1.75rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); + expect(presets.textSansItalic34).toMatchCSS( + ` + font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 2.125rem; + line-height: 1.3; + font-weight: 400; + font-style: italic; + `, + { isFragment: true }, + ); expect(presets.titlepiece42).toMatchCSS( ` font-family: "GT Guardian Titlepiece", Georgia, serif; @@ -1046,6 +1856,26 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); + expect(presets.titlepiece50).toMatchCSS( + ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 3.125rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); + expect(presets.titlepiece70).toMatchCSS( + ` + font-family: "GT Guardian Titlepiece", Georgia, serif; + font-size: 4.375rem; + line-height: 1.15; + font-weight: 700; + font-style: normal; + `, + { isFragment: true }, + ); }); }); From c64629da7f743889e9ba499cd37447b371422036 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:06:45 +0000 Subject: [PATCH 12/18] Add typography presets and examples to Storybook --- .../src/typography/storybookTypeSpecimen.tsx | 37 +++ .../storybookTypographyRenderers.tsx | 122 --------- .../src/typography/typography.stories.mdx | 249 ++++-------------- 3 files changed, 85 insertions(+), 323 deletions(-) create mode 100644 libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx delete mode 100644 libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx new file mode 100644 index 000000000..c207fe48b --- /dev/null +++ b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx @@ -0,0 +1,37 @@ +import { css } from '@emotion/react'; +import * as presets from './presets'; +import { space } from '../space/space'; +import { palette } from '../colour/palette'; + +const listCss = css` + list-style: none; + padding: 0; + li + li { + margin-top: ${space[4]}px; + padding-top: ${space[4]}px; + border-top: 1px solid ${palette.neutral[86]}; + } +`; + +export const TypographyPresets = () => ( + +); diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx deleted file mode 100644 index 9794d95c7..000000000 --- a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { - bodyObjectStyles, - fontWeights, - headlineObjectStyles, - textSansObjectStyles, -} from '../index'; -import type { Category, FontScaleFunction, FontWeight } from './types'; - -type FontFunctions = { - [key in Category]: FontScaleFunction; -}; - -interface FontStylesRendererProps { - fontName: string; - fontStyles: FontFunctions; -} - -export const FontStylesRenderer = ({ - fontName, - fontStyles, -}: FontStylesRendererProps) => { - return ( - - ); -}; - -interface LineHeightRendererProps { - getFontStyles: FontScaleFunction; -} - -export const LineHeightRenderer = ({ - getFontStyles, -}: LineHeightRendererProps) => { - const fontStyles = getFontStyles({ unit: 'px' }); - return ( -

- The quick brown fox jumps over the lazy dogs -

- ); -}; - -export const FontWeightRenderer = () => ( - -); - -export const ItalicsRenderer = () => ( - -); diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index a4d1843bd..db17c0996 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -1,16 +1,5 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { - headlineObjectStyles, - bodyObjectStyles, - textSansObjectStyles, - titlepieceObjectStyles, -} from '@guardian/source-foundations'; -import { - FontStylesRenderer, - LineHeightRenderer, - FontWeightRenderer, - ItalicsRenderer, -} from './storybookTypographyRenderers'; +import { TypographyPresets } from './storybookTypeSpecimen'; - - - - +The Guardian has four bespoke typefaces, which were created for different +purposes. When used effectively, they create contrast and alter the tone in +which text is read. -#### Line height +### Where do we use web typography presets? -The default for headline is `tight`. This maps to `1.15 (115%)`. +Any content in a web browser or a webview in the app uses web typography +presets. - - - - - +- _Browser_ — All [theguardian.com](https://www.theguardian.com) content + (front and article pages) and supporter revenue pages. +- _App webview_ — Article pages, sign-in and registration pages -### Body +#### Guardian Headline -```css -font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif'; -``` +Use for headlines, headings and any short form text like pull quotes, bylines +and titles. - - - - - +#### Kicker — Guardian Headline -#### Line height +Use for a kicker in the fronts card. -The default for body is `loose`. This maps to `1.40 (140%)`. +#### Guardian Text Sans -This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation). +Use for interactive page elements like buttons and text input fields and for +meta information like datelines, image captions and data visualisations. - - - - - +_Note:_ Text Sans is used across the board on paid content templates to help +differentiate from editorial content. -### Text sans - -```css -font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'; -``` - - - - - - - -#### Line height - -The default for text-sans is `regular`. This maps to `1.3 (130%)`. - - - - - - - -### Titlepiece - -```css -font-family: 'GT Guardian Titlepiece, Georgia, serif'; -``` - - - - - - - -#### Line height - -The default for titlepiece is `tight`. This maps to `1.15 (115%)`. - - - - - - - -### Options - -Each method may receive an `options` object. Missing options are merged with sensible defaults for each font family. - -#### Line height - -The available options for line height are documented in the table below. - - - - - - - - - - - - - - - - - - -
Alias in SourceLine height
loose140% (1.4)
regular130% (1.30)
tight115% (1.15)
- -We calculate the final line height based on the font size using the following formula: - -```ts -// line-height is defined as a unitless value, so we multiply -// by the element's font-size in px to get the px value -const finalLineHeight = `${lineHeight * fontSizeInPx}px`; -``` +#### Guardian Titlepiece -And a worked example: - -```ts -const lineHeight = - 1.15 * // line-height: tight (unitless) - 30; // font-size: small (px) - -// lineHeight === 34.5px -``` - -#### Font weight - -```tsx -headline.medium({ fontWeight: 'bold' }); -``` - - - - - - - -The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts. - -The default for headline is `medium`. The `regular` font-weight is not available for this font. - -The default and only font-weight for titlepiece is `bold`. - -#### Font style - -```tsx -headline.medium({ fontStyle: 'italic' }); -``` - -`normal` (default) is available for all fonts. - -`italic` is available for the following fonts: - - - - - - - -#### Unit - -```tsx -headline.medium({ unit: 'px' }); -``` +Use for impact. Ideal for marketing messages, page headers and numerals. Use +sparingly and at large sizes only. -Specifies units for the font-size and line-height values. +_Note:_ this font is not available on [theguardian.com](https://theguardian.com) -By default, font-size is expressed in `rem`, and line-height is expressed as a [unitless value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values). +### Specimen -You can override this behaviour by setting the `unit` option to `px`. As a result, both font-size and line-height will be expressed in `px` values. + From c7b86b59683ae9631a15bd1c26cfdfe8a1bd06c1 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 12:47:25 +0000 Subject: [PATCH 13/18] Show type properties alongside examples --- .../src/typography/storybookTypeSpecimen.tsx | 81 ++++++++++++++----- 1 file changed, 63 insertions(+), 18 deletions(-) diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx index c207fe48b..8ffb7ee13 100644 --- a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx +++ b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx @@ -1,8 +1,12 @@ +import { tokens } from '@guardian/design-tokens'; import { css } from '@emotion/react'; import * as presets from './presets'; import { space } from '../space/space'; import { palette } from '../colour/palette'; +const presetTokens = tokens.typography.presets; +type Preset = keyof typeof presetTokens; + const listCss = css` list-style: none; padding: 0; @@ -13,25 +17,66 @@ const listCss = css` } `; +const presetNameCss = css` + display: block; + font-weight: 700; +`; + +const specimenCss = css` + display: flex; + gap: ${space[8]}px; +`; + +const propertiesCss = css` + display: flex; + gap: ${space[4]}px; + dt { + ${presets.textSans12} + color: ${palette.neutral[38]}; + margin: 0; + padding: 0; + } + dd { + ${presets.textSans14} + margin: 0; + padding: 0; + } +`; + export const TypographyPresets = () => ( ); From abd1577aba579f0f7d88d8432d8d74bc65c71b06 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:03:51 +0000 Subject: [PATCH 14/18] Add Story block so presets are available as separate story --- .../source-foundations/src/typography/typography.stories.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index db17c0996..9c270b453 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -96,4 +96,6 @@ _Note:_ this font is not available on [theguardian.com](https://theguardian.com) ### Specimen - + + + From 20c99c61b8205e1e5553ff4082392aa8dad19535 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:05:15 +0000 Subject: [PATCH 15/18] Fix invalid markup --- .../src/typography/storybookTypeSpecimen.tsx | 12 ++++++------ .../src/typography/typography.stories.mdx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx index 8ffb7ee13..bc6b341b3 100644 --- a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx +++ b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx @@ -52,20 +52,20 @@ export const TypographyPresets = () => ( {preset}
- +
Family
{token.fontFamily[0]} ({token.fontWeight})
- - +
+
Size
{token.fontSize}
- - +
+
Line height
{token.lineHeight}
- +
+ From 807c80595f115c9dd87aad69a4755307d2066c81 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:46:47 +0000 Subject: [PATCH 16/18] Reinstate typography API docs and mark as deprecated --- .../storybookTypographyRenderers.tsx | 122 +++++++++ .../src/typography/typography.stories.mdx | 247 ++++++++++++++++++ 2 files changed, 369 insertions(+) create mode 100644 libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx new file mode 100644 index 000000000..9794d95c7 --- /dev/null +++ b/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx @@ -0,0 +1,122 @@ +import { + bodyObjectStyles, + fontWeights, + headlineObjectStyles, + textSansObjectStyles, +} from '../index'; +import type { Category, FontScaleFunction, FontWeight } from './types'; + +type FontFunctions = { + [key in Category]: FontScaleFunction; +}; + +interface FontStylesRendererProps { + fontName: string; + fontStyles: FontFunctions; +} + +export const FontStylesRenderer = ({ + fontName, + fontStyles, +}: FontStylesRendererProps) => { + return ( +
    + {Object.entries(fontStyles).map(([name, getFontStyles]) => { + const fontStyles = getFontStyles({ unit: 'px' }); + + return ( +
  • + {fontName}.{name} {'->'} {fontStyles.fontSize}px +
    • + ); + })} +
+ ); +}; + +interface LineHeightRendererProps { + getFontStyles: FontScaleFunction; +} + +export const LineHeightRenderer = ({ + getFontStyles, +}: LineHeightRendererProps) => { + const fontStyles = getFontStyles({ unit: 'px' }); + return ( +

+ The quick brown fox jumps over the lazy dogs +

+ ); +}; + +export const FontWeightRenderer = () => ( +
    + {Object.entries(fontWeights).map(([fontWeight, value]) => ( +
  • + {fontWeight} {'->'} {value} +
    • + ))} +
+); + +export const ItalicsRenderer = () => ( +
    +
  • + headline light +
    • +
  • + headline medium +
    • +
  • + body regular +
    • +
  • + body bold +
    • +
  • + textSans regular +
    • +
+); diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index f37c0e3e5..642147498 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -1,5 +1,17 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { + headlineObjectStyles, + bodyObjectStyles, + textSansObjectStyles, + titlepieceObjectStyles, +} from '@guardian/source-foundations'; import { TypographyPresets } from './storybookTypeSpecimen'; +import { + FontStylesRenderer, + LineHeightRenderer, + FontWeightRenderer, + ItalicsRenderer, +} from './storybookTypographyRenderers'; + +
+ +### Typography API (deprecated) + +The typography API is deprecated and will be removed in a future release. + +### Example + +```tsx +import { headline, body, textSans } from '@guardian/source-foundations'; + +const h1 = css` + ${headline.large()}; +`; + +const p = css` + ${body.medium()}; +`; + +const copyright = css` + ${textSans.xsmall()}; +`; +``` + +You can also use the [object style syntax](https://emotion.sh/docs/object-styles): + +```tsx +import { headlineObjectStyles } from '@guardian/source-foundations'; + +const h1 = { + ...headlineObjectStyles.large(), +}; +``` + +### Where can I find The Guardian's fonts? + +The canonical source of fonts is https://github.com/guardian/fonts + +They should be loaded from the locations specified in [font-faces.css](https://github.com/guardian/fonts/blob/main/fonts/web/font-faces.css). This optimises for consistency and performance across The Guardian's digital products. + +### API + +Each font family has an associated import, exposing methods that return snippets +of CSS depending on the desired font size. + +A range of font sizes are available for each font family. The `medium` font size +should be considered the default. + +Pixel values are given below for ease of understanding. By default the +typography API assigns font size in rems. + +#### Headline + +```css +font-family: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif'; +``` + + + + + + + +#### Line height + +The default for headline is `tight`. This maps to `1.15 (115%)`. + + + + + + + +### Body + +```css +font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif'; +``` + + + + + + + +##### Line height + +The default for body is `loose`. This maps to `1.40 (140%)`. + +This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation). + + + + + + + +#### Text sans + +```css +font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'; +``` + + + + + + + +##### Line height + +The default for text-sans is `regular`. This maps to `1.3 (130%)`. + + + + + + + +#### Titlepiece + +```css +font-family: 'GT Guardian Titlepiece, Georgia, serif'; +``` + + + + + + + +##### Line height + +The default for titlepiece is `tight`. This maps to `1.15 (115%)`. + + + + + + + +#### Options + +Each method may receive an `options` object. Missing options are merged with sensible defaults for each font family. + +##### Line height + +The available options for line height are documented in the table below. + + + + + + + + + + + + + + + + + + +
Alias in SourceLine height
loose140% (1.4)
regular130% (1.30)
tight115% (1.15)
+ +We calculate the final line height based on the font size using the following formula: + +```ts +// line-height is defined as a unitless value, so we multiply +// by the element's font-size in px to get the px value +const finalLineHeight = `${lineHeight * fontSizeInPx}px`; +``` + +And a worked example: + +```ts +const lineHeight = + 1.15 * // line-height: tight (unitless) + 30; // font-size: small (px) + +// lineHeight === 34.5px +``` + +##### Font weight + +```tsx +headline.medium({ fontWeight: 'bold' }); +``` + + + + + + + +The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts. + +The default for headline is `medium`. The `regular` font-weight is not available for this font. + +The default and only font-weight for titlepiece is `bold`. + +##### Font style + +```tsx +headline.medium({ fontStyle: 'italic' }); +``` + +`normal` (default) is available for all fonts. + +`italic` is available for the following fonts: + + + + + + + +##### Unit + +```tsx +headline.medium({ unit: 'px' }); +``` + +Specifies units for the font-size and line-height values. + +By default, font-size is expressed in `rem`, and line-height is expressed as a [unitless value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values). + +You can override this behaviour by setting the `unit` option to `px`. As a result, both font-size and line-height will be expressed in `px` values. From 9a878176f5972dac6b266cb71e5688c6fccb009b Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:49:13 +0000 Subject: [PATCH 17/18] Rename preset specimen renderer --- ...storybookTypeSpecimen.tsx => storybookTypographyPresets.tsx} | 0 .../source-foundations/src/typography/typography.stories.mdx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename libs/@guardian/source-foundations/src/typography/{storybookTypeSpecimen.tsx => storybookTypographyPresets.tsx} (100%) diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx similarity index 100% rename from libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx rename to libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index 642147498..a8bf71c84 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -5,7 +5,7 @@ import { textSansObjectStyles, titlepieceObjectStyles, } from '@guardian/source-foundations'; -import { TypographyPresets } from './storybookTypeSpecimen'; +import { TypographyPresets } from './storybookTypographyPresets'; import { FontStylesRenderer, LineHeightRenderer, From 222865842287911af2be8d310695432b80ede5c8 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Thu, 14 Mar 2024 10:35:16 +0000 Subject: [PATCH 18/18] Move deprecated typography API docs to separate story --- .../src/typography/typography.stories.mdx | 247 ----------------- .../typographyDeprecated.stories.mdx | 255 ++++++++++++++++++ 2 files changed, 255 insertions(+), 247 deletions(-) create mode 100644 libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.mdx diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index a8bf71c84..584f21aec 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -1,17 +1,5 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { - headlineObjectStyles, - bodyObjectStyles, - textSansObjectStyles, - titlepieceObjectStyles, -} from '@guardian/source-foundations'; import { TypographyPresets } from './storybookTypographyPresets'; -import { - FontStylesRenderer, - LineHeightRenderer, - FontWeightRenderer, - ItalicsRenderer, -} from './storybookTypographyRenderers'; - -
- -### Typography API (deprecated) - -The typography API is deprecated and will be removed in a future release. - -### Example - -```tsx -import { headline, body, textSans } from '@guardian/source-foundations'; - -const h1 = css` - ${headline.large()}; -`; - -const p = css` - ${body.medium()}; -`; - -const copyright = css` - ${textSans.xsmall()}; -`; -``` - -You can also use the [object style syntax](https://emotion.sh/docs/object-styles): - -```tsx -import { headlineObjectStyles } from '@guardian/source-foundations'; - -const h1 = { - ...headlineObjectStyles.large(), -}; -``` - -### Where can I find The Guardian's fonts? - -The canonical source of fonts is https://github.com/guardian/fonts - -They should be loaded from the locations specified in [font-faces.css](https://github.com/guardian/fonts/blob/main/fonts/web/font-faces.css). This optimises for consistency and performance across The Guardian's digital products. - -### API - -Each font family has an associated import, exposing methods that return snippets -of CSS depending on the desired font size. - -A range of font sizes are available for each font family. The `medium` font size -should be considered the default. - -Pixel values are given below for ease of understanding. By default the -typography API assigns font size in rems. - -#### Headline - -```css -font-family: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif'; -``` - - - - - - - -#### Line height - -The default for headline is `tight`. This maps to `1.15 (115%)`. - - - - - - - -### Body - -```css -font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif'; -``` - - - - - - - -##### Line height - -The default for body is `loose`. This maps to `1.40 (140%)`. - -This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation). - - - - - - - -#### Text sans - -```css -font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'; -``` - - - - - - - -##### Line height - -The default for text-sans is `regular`. This maps to `1.3 (130%)`. - - - - - - - -#### Titlepiece - -```css -font-family: 'GT Guardian Titlepiece, Georgia, serif'; -``` - - - - - - - -##### Line height - -The default for titlepiece is `tight`. This maps to `1.15 (115%)`. - - - - - - - -#### Options - -Each method may receive an `options` object. Missing options are merged with sensible defaults for each font family. - -##### Line height - -The available options for line height are documented in the table below. - - - - - - - - - - - - - - - - - - -
Alias in SourceLine height
loose140% (1.4)
regular130% (1.30)
tight115% (1.15)
- -We calculate the final line height based on the font size using the following formula: - -```ts -// line-height is defined as a unitless value, so we multiply -// by the element's font-size in px to get the px value -const finalLineHeight = `${lineHeight * fontSizeInPx}px`; -``` - -And a worked example: - -```ts -const lineHeight = - 1.15 * // line-height: tight (unitless) - 30; // font-size: small (px) - -// lineHeight === 34.5px -``` - -##### Font weight - -```tsx -headline.medium({ fontWeight: 'bold' }); -``` - - - - - - - -The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts. - -The default for headline is `medium`. The `regular` font-weight is not available for this font. - -The default and only font-weight for titlepiece is `bold`. - -##### Font style - -```tsx -headline.medium({ fontStyle: 'italic' }); -``` - -`normal` (default) is available for all fonts. - -`italic` is available for the following fonts: - - - - - - - -##### Unit - -```tsx -headline.medium({ unit: 'px' }); -``` - -Specifies units for the font-size and line-height values. - -By default, font-size is expressed in `rem`, and line-height is expressed as a [unitless value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values). - -You can override this behaviour by setting the `unit` option to `px`. As a result, both font-size and line-height will be expressed in `px` values. diff --git a/libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.mdx b/libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.mdx new file mode 100644 index 000000000..e22303855 --- /dev/null +++ b/libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.mdx @@ -0,0 +1,255 @@ +import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { + headlineObjectStyles, + bodyObjectStyles, + textSansObjectStyles, + titlepieceObjectStyles, +} from '@guardian/source-foundations'; +import { + FontStylesRenderer, + LineHeightRenderer, + FontWeightRenderer, + ItalicsRenderer, +} from './storybookTypographyRenderers'; + + + +# Typography API (deprecated) + +_Note:_ the typography API is deprecated and will be removed in a future +release. Please use the typography presets in all new code. + +Typographic choices affect how textual content is interpreted; influencing tone, +hierarchy and legibility. + +## Example + +```tsx +import { headline, body, textSans } from '@guardian/source-foundations'; + +const h1 = css` + ${headline.large()}; +`; + +const p = css` + ${body.medium()}; +`; + +const copyright = css` + ${textSans.xsmall()}; +`; +``` + +You can also use the [object style syntax](https://emotion.sh/docs/object-styles): + +```tsx +import { headlineObjectStyles } from '@guardian/source-foundations'; + +const h1 = { + ...headlineObjectStyles.large(), +}; +``` + +## Where can I find The Guardian's fonts? + +The canonical source of fonts is https://github.com/guardian/fonts + +They should be loaded from the locations specified in [font-faces.css](https://github.com/guardian/fonts/blob/main/fonts/web/font-faces.css). This optimises for consistency and performance across The Guardian's digital products. + +## API + +Each font family has an associated import, exposing methods that return snippets +of CSS depending on the desired font size. + +A range of font sizes are available for each font family. The `medium` font size +should be considered the default. + +Pixel values are given below for ease of understanding. By default the +typography API assigns font size in rems. + +### Headline + +```css +font-family: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif'; +``` + + + + + + + +#### Line height + +The default for headline is `tight`. This maps to `1.15 (115%)`. + + + + + + + +### Body + +```css +font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif'; +``` + + + + + + + +#### Line height + +The default for body is `loose`. This maps to `1.40 (140%)`. + +This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation). + + + + + + + +### Text sans + +```css +font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'; +``` + + + + + + + +#### Line height + +The default for text-sans is `regular`. This maps to `1.3 (130%)`. + + + + + + + +### Titlepiece + +```css +font-family: 'GT Guardian Titlepiece, Georgia, serif'; +``` + + + + + + + +#### Line height + +The default for titlepiece is `tight`. This maps to `1.15 (115%)`. + + + + + + + +### Options + +Each method may receive an `options` object. Missing options are merged with sensible defaults for each font family. + +#### Line height + +The available options for line height are documented in the table below. + + + + + + + + + + + + + + + + + + +
Alias in SourceLine height
loose140% (1.4)
regular130% (1.30)
tight115% (1.15)
+ +We calculate the final line height based on the font size using the following formula: + +```ts +// line-height is defined as a unitless value, so we multiply +// by the element's font-size in px to get the px value +const finalLineHeight = `${lineHeight * fontSizeInPx}px`; +``` + +And a worked example: + +```ts +const lineHeight = + 1.15 * // line-height: tight (unitless) + 30; // font-size: small (px) + +// lineHeight === 34.5px +``` + +#### Font weight + +```tsx +headline.medium({ fontWeight: 'bold' }); +``` + + + + + + + +The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts. + +The default for headline is `medium`. The `regular` font-weight is not available for this font. + +The default and only font-weight for titlepiece is `bold`. + +#### Font style + +```tsx +headline.medium({ fontStyle: 'italic' }); +``` + +`normal` (default) is available for all fonts. + +`italic` is available for the following fonts: + + + + + + + +#### Unit + +```tsx +headline.medium({ unit: 'px' }); +``` + +Specifies units for the font-size and line-height values. + +By default, font-size is expressed in `rem`, and line-height is expressed as a [unitless value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values). + +You can override this behaviour by setting the `unit` option to `px`. As a result, both font-size and line-height will be expressed in `px` values.