diff --git a/.changeset/silver-games-remember.md b/.changeset/silver-games-remember.md new file mode 100644 index 000000000..afbe4569c --- /dev/null +++ b/.changeset/silver-games-remember.md @@ -0,0 +1,7 @@ +--- +'@guardian/source': patch +--- + +Moves design tokens into `@guardian/source` itself. + +Allows us to calculate `@guardian/source/foundations` values during build, rather than at the point of consumption, which relieves user's devices of this overhead and means the design tokens JSON will no longer be included in consumer's bundles. diff --git a/Makefile b/Makefile index 6bf479f19..0fcf0298f 100644 --- a/Makefile +++ b/Makefile @@ -269,22 +269,6 @@ install: check-node-version @guardian/core-web-vitals\:verify-dist: env @corepack pnpm --filter @guardian/core-web-vitals verify-dist -.PHONY: @guardian/design-tokens\:build -@guardian/design-tokens\:build: env - @corepack pnpm --filter @guardian/design-tokens build - -.PHONY: @guardian/design-tokens\:fix -@guardian/design-tokens\:fix: env - @corepack pnpm --filter @guardian/design-tokens fix - -.PHONY: @guardian/design-tokens\:lint -@guardian/design-tokens\:lint: env - @corepack pnpm --filter @guardian/design-tokens lint - -.PHONY: @guardian/design-tokens\:tsc -@guardian/design-tokens\:tsc: env - @corepack pnpm --filter @guardian/design-tokens tsc - .PHONY: @guardian/eslint-config\:fix @guardian/eslint-config\:fix: env @corepack pnpm --filter @guardian/eslint-config fix @@ -441,14 +425,14 @@ install: check-node-version @guardian/source\:build: env @corepack pnpm --filter @guardian/source build +.PHONY: @guardian/source\:build-generated +@guardian/source\:build-generated: env + @corepack pnpm --filter @guardian/source build-generated + .PHONY: @guardian/source\:build-storybook @guardian/source\:build-storybook: env @corepack pnpm --filter @guardian/source build-storybook -.PHONY: @guardian/source\:build-type-presets -@guardian/source\:build-type-presets: env - @corepack pnpm --filter @guardian/source build-type-presets - .PHONY: @guardian/source\:create-icons @guardian/source\:create-icons: env @corepack pnpm --filter @guardian/source create-icons diff --git a/README.md b/README.md index f442469b3..2f8fe3ee1 100644 --- a/README.md +++ b/README.md @@ -116,13 +116,6 @@ Project-specific tasks are defined as `scripts` in their `package.json`, and can - `make @guardian/core-web-vitals:tsc` - `make @guardian/core-web-vitals:verify-dist` -#### @guardian/design-tokens - -- `make @guardian/design-tokens:build` -- `make @guardian/design-tokens:fix` -- `make @guardian/design-tokens:lint` -- `make @guardian/design-tokens:tsc` - #### @guardian/eslint-config - `make @guardian/eslint-config:fix` @@ -185,8 +178,8 @@ Project-specific tasks are defined as `scripts` in their `package.json`, and can #### @guardian/source - `make @guardian/source:build` +- `make @guardian/source:build-generated` - `make @guardian/source:build-storybook` -- `make @guardian/source:build-type-presets` - `make @guardian/source:create-icons` - `make @guardian/source:dev` - `make @guardian/source:fix` diff --git a/configs/rollup/rollup.config.js b/configs/rollup/rollup.config.js index 2ef583ce4..12ac47df3 100644 --- a/configs/rollup/rollup.config.js +++ b/configs/rollup/rollup.config.js @@ -11,7 +11,7 @@ import { nodeExternals } from 'rollup-plugin-node-externals'; /** @type {Input} */ const defaultInput = { index: 'src/index.ts' }; -/** @type {import("rollup").RollupOptions.output} */ +/** @type {import("rollup").RollupOptions["output"]} */ const output = { dir: 'dist', format: 'esm', @@ -31,8 +31,8 @@ const defaultPlugins = [ /** * @param {object} param0 - * @param {Plugins} param0.plugins - * @param {Input} param0.input + * @param {Plugins} [param0.plugins] + * @param {Input} [param0.input] * @returns {import("rollup").RollupOptions[]} */ export default ({ input = defaultInput, plugins = [] } = {}) => [ diff --git a/libs/@guardian/design-tokens/.eslintrc.cjs b/libs/@guardian/design-tokens/.eslintrc.cjs deleted file mode 100644 index 19aac8ed5..000000000 --- a/libs/@guardian/design-tokens/.eslintrc.cjs +++ /dev/null @@ -1,23 +0,0 @@ -module.exports = { - extends: ['../../../.eslintrc.cjs'], - ignorePatterns: [ - '!**/*', - 'node_modules', - 'jest.dist.*', // depends on build output, so don't lint it - 'dist', - '.wireit', - ], - overrides: [ - { - files: ['tokens.d.ts'], - parserOptions: { - tsconfigRootDir: __dirname, - }, - rules: {}, - }, - { - files: ['*.js', '*.mjs'], - rules: {}, - }, - ], -}; diff --git a/libs/@guardian/design-tokens/CHANGELOG.md b/libs/@guardian/design-tokens/CHANGELOG.md deleted file mode 100644 index d85ab837e..000000000 --- a/libs/@guardian/design-tokens/CHANGELOG.md +++ /dev/null @@ -1,7 +0,0 @@ -# @guardian/design-tokens - -## 0.2.0 - -### Minor Changes - -- 11c62af: Adds `headlineBold15`, `headlineLight15`, `headlineLightItalic15`, `headlineMedium15` and `headlineMediumItalic15` to the typography presets diff --git a/libs/@guardian/design-tokens/README.md b/libs/@guardian/design-tokens/README.md deleted file mode 100644 index b16ef08b1..000000000 --- a/libs/@guardian/design-tokens/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# @guardian/design-tokens - -Experimental Design Tokens package for internal use. - -## Usage - -### Editing Tokens - -To modify or update design tokens, you need to edit the `tokens.json` file. This file currently serves as the source of truth for our design-token values. - -### Recreating Output Files - -Once changes are made to the `tokens.json` file, the next step is to generate the output files that will be consumed by our projects. - -To do this, run the following command. - -```sh -make @guardian/design-tokens:build -``` - -This command triggers the token generation process, which compiles the tokens.json file into different formats (like CSS, SCSS, JavaScript, TypeScript). diff --git a/libs/@guardian/design-tokens/__generated__/tokens.d.ts b/libs/@guardian/design-tokens/__generated__/tokens.d.ts deleted file mode 100644 index f576d01c1..000000000 --- a/libs/@guardian/design-tokens/__generated__/tokens.d.ts +++ /dev/null @@ -1,1742 +0,0 @@ -/** - * Design Tokens - * Autogenerated from tokens.json. - * DO NOT EDIT! - */ - -export declare const breakpoint: { - readonly desktop: '980px'; - readonly leftCol: '1140px'; - readonly mobile: '320px'; - readonly mobileLandscape: '480px'; - readonly mobileMedium: '375px'; - readonly phablet: '660px'; - readonly tablet: '740px'; - readonly wide: '1300px'; -}; -export declare const height: { - readonly ctaMedium: '44px'; - readonly ctaSmall: '36px'; - readonly ctaXSmall: '24px'; - readonly iconMedium: '30px'; - readonly iconSmall: '26px'; - readonly iconXSmall: '20px'; - readonly inputMedium: '44px'; - readonly inputXSmall: '24px'; -}; -export declare const palette: { - readonly brand: { - readonly '100': '#001536'; - readonly '300': '#041F4A'; - readonly '400': '#052962'; - readonly '500': '#0077B6'; - readonly '600': '#506991'; - readonly '800': '#C1D8FC'; - }; - readonly brandAlt: { - readonly '200': '#F3C100'; - readonly '300': '#FFD900'; - readonly '400': '#FFE500'; - }; - readonly culture: { - readonly '50': '#2B2625'; - readonly '100': '#3E3323'; - readonly '200': '#574835'; - readonly '300': '#6B5840'; - readonly '350': '#866D50'; - readonly '400': '#866D50'; - readonly '450': '#A1845C'; - readonly '500': '#EACCA0'; - readonly '600': '#E7D4B9'; - readonly '700': '#EFE8DD'; - readonly '800': '#FBF6EF'; - }; - readonly error: { - readonly '400': '#C70000'; - readonly '500': '#FF9081'; - }; - readonly focus: { - readonly '400': '#0077B6'; - }; - readonly labs: { - readonly '200': '#0C7A73'; - readonly '300': '#65A897'; - readonly '400': '#69D1CA'; - }; - readonly lifestyle: { - readonly '100': '#510043'; - readonly '200': '#650054'; - readonly '300': '#7D0068'; - readonly '400': '#BB3B80'; - readonly '450': '#F37ABC'; - readonly '500': '#FFABDB'; - readonly '600': '#FEC8D3'; - readonly '800': '#FEEEF7'; - }; - readonly neutral: { - readonly '0': '#000000'; - readonly '7': '#121212'; - readonly '10': '#1A1A1A'; - readonly '20': '#333333'; - readonly '38': '#545454'; - readonly '46': '#707070'; - readonly '60': '#999999'; - readonly '73': '#BABABA'; - readonly '86': '#DCDCDC'; - readonly '93': '#EDEDED'; - readonly '97': '#F6F6F6'; - readonly '100': '#FFFFFF'; - }; - readonly news: { - readonly '100': '#660505'; - readonly '200': '#8B0000'; - readonly '300': '#AB0613'; - readonly '400': '#C70000'; - readonly '500': '#FF5943'; - readonly '550': '#FF9081'; - readonly '600': '#FFBAC8'; - readonly '800': '#FFF4F2'; - }; - readonly opinion: { - readonly '100': '#672005'; - readonly '200': '#8D2700'; - readonly '300': '#C74600'; - readonly '400': '#C74600'; - readonly '450': '#E05E00'; - readonly '500': '#FF7F0F'; - readonly '550': '#FF9941'; - readonly '600': '#F9B376'; - readonly '800': '#FEF9F5'; - }; - readonly specialReport: { - readonly '100': '#222527'; - readonly '200': '#303538'; - readonly '300': '#3F464A'; - readonly '400': '#595C5F'; - readonly '450': '#9DA0A2'; - readonly '500': '#ABC2C9'; - readonly '700': '#E4E5E8'; - readonly '800': '#EFF1F2'; - }; - readonly specialReportAlt: { - readonly '100': '#2B2B2A'; - readonly '200': '#B9300A'; - readonly '300': '#FF663D'; - readonly '700': '#EBE6E1'; - readonly '800': '#F5F0EB'; - }; - readonly sport: { - readonly '100': '#003C60'; - readonly '200': '#004E7C'; - readonly '300': '#005689'; - readonly '400': '#0077B6'; - readonly '500': '#00B2FF'; - readonly '600': '#90DCFF'; - readonly '800': '#F1F8FC'; - }; - readonly success: { - readonly '300': '#185E36'; - readonly '400': '#22874D'; - readonly '500': '#58D08B'; - }; -}; -export declare const size: { - readonly icon: { - readonly medium: '30px'; - readonly small: '26px'; - readonly xSmall: '20px'; - }; - readonly medium: '44px'; - readonly small: '36px'; - readonly xSmall: '24px'; -}; -export declare const space: { - readonly '0': '2px'; - readonly '1': '4px'; - readonly '2': '8px'; - readonly '3': '12px'; - readonly '4': '16px'; - readonly '5': '20px'; - readonly '6': '24px'; - readonly '8': '32px'; - readonly '9': '36px'; - readonly '10': '40px'; - readonly '12': '48px'; - readonly '14': '56px'; - readonly '16': '64px'; - readonly '18': '72px'; - readonly '24': '96px'; -}; -export declare const typography: { - readonly body: { - readonly medium: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - }; - readonly small: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - }; - readonly xSmall: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - }; - }; - readonly fontFamily: { - readonly body: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly headline: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly textSans: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly titlepiece: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - }; - readonly fontSize: { - readonly '12': '12px'; - readonly '14': '14px'; - readonly '15': '15px'; - readonly '17': '17px'; - readonly '20': '20px'; - readonly '24': '24px'; - readonly '28': '28px'; - readonly '34': '34px'; - readonly '42': '42px'; - readonly '50': '50px'; - readonly '64': '64px'; - readonly '70': '70px'; - }; - readonly fontWeight: { - readonly bold: 700; - readonly light: 300; - readonly medium: 500; - readonly regular: 400; - }; - readonly headline: { - readonly large: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly medium: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly small: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly xLarge: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly xSmall: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly xxSmall: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - readonly xxxSmall: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - }; - }; - readonly lineHeight: { - readonly loose: 1.4; - readonly regular: 1.3; - readonly tight: 1.15; - }; - readonly textDecorationThicknessForFontSize: { - readonly '12': '2px'; - readonly '14': '2px'; - readonly '15': '2px'; - readonly '17': '2px'; - readonly '20': '3px'; - readonly '24': '3px'; - readonly '28': '3px'; - readonly '34': '4px'; - readonly '42': '5px'; - readonly '50': '6px'; - readonly '64': '6px'; - readonly '70': '6px'; - }; - readonly textSans: { - readonly large: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly medium: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly small: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly xLarge: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly xSmall: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly xxLarge: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly xxSmall: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '12px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - readonly xxxLarge: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - }; - }; - readonly titlepiece: { - readonly large: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '70px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - }; - readonly medium: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - }; - readonly small: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - }; - }; -}; -export declare const typographyPresets: { - readonly article15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly article17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly articleBold15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.4; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly articleBold17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.4; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly articleBoldItalic15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.4; - readonly fontWeight: 700; - readonly fontStyle: 'italic'; - }; - readonly articleBoldItalic17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.4; - readonly fontWeight: 700; - readonly fontStyle: 'italic'; - }; - readonly articleItalic15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly articleItalic17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.4; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly headlineBold14: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold15: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold17: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold20: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold24: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold28: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold34: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold42: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold50: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineBold64: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '64px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly headlineLight14: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight15: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight17: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight20: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight24: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight28: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight34: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight42: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight50: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLight64: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '64px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'normal'; - }; - readonly headlineLightItalic14: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic15: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic17: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic20: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic24: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic28: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic34: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic42: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic50: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineLightItalic64: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '64px'; - readonly lineHeight: 1.15; - readonly fontWeight: 300; - readonly fontStyle: 'italic'; - }; - readonly headlineMedium14: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium15: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium17: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium20: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium24: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium28: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium34: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium42: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium50: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMedium64: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '64px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'normal'; - }; - readonly headlineMediumItalic14: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic15: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic17: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic20: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic24: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic28: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic34: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic42: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic50: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly headlineMediumItalic64: { - readonly fontFamily: readonly [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '64px'; - readonly lineHeight: 1.15; - readonly fontWeight: 500; - readonly fontStyle: 'italic'; - }; - readonly textEgyptian14: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textEgyptian15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textEgyptian17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textEgyptianBold14: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textEgyptianBold15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textEgyptianBold17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textEgyptianBoldItalic14: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'italic'; - }; - readonly textEgyptianBoldItalic15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'italic'; - }; - readonly textEgyptianBoldItalic17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'italic'; - }; - readonly textEgyptianItalic14: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textEgyptianItalic15: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textEgyptianItalic17: { - readonly fontFamily: readonly [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSans12: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '12px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans14: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans15: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans17: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans20: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans24: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans28: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSans34: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'normal'; - }; - readonly textSansBold12: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '12px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold14: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold15: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold17: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold20: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold24: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold28: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansBold34: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.3; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly textSansItalic12: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '12px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic14: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '14px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic15: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '15px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic17: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '17px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic20: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '20px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic24: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '24px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic28: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '28px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly textSansItalic34: { - readonly fontFamily: readonly [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - readonly fontSize: '34px'; - readonly lineHeight: 1.3; - readonly fontWeight: 400; - readonly fontStyle: 'italic'; - }; - readonly titlepiece42: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '42px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly titlepiece50: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '50px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; - readonly titlepiece70: { - readonly fontFamily: readonly [ - 'GT Guardian Titlepiece', - 'Georgia', - 'serif', - ]; - readonly fontSize: '70px'; - readonly lineHeight: 1.15; - readonly fontWeight: 700; - readonly fontStyle: 'normal'; - }; -}; -export declare const width: { - readonly ctaMedium: '44px'; - readonly ctaSmall: '36px'; - readonly ctaXSmall: '24px'; - readonly iconMedium: '30px'; - readonly iconSmall: '26px'; - readonly iconXSmall: '20px'; - readonly inputXSmall: '24px'; -}; diff --git a/libs/@guardian/design-tokens/__generated__/tokens.js b/libs/@guardian/design-tokens/__generated__/tokens.js deleted file mode 100644 index f5055cf69..000000000 --- a/libs/@guardian/design-tokens/__generated__/tokens.js +++ /dev/null @@ -1,1714 +0,0 @@ -/** - * Design Tokens - * Autogenerated from tokens.json. - * DO NOT EDIT! - */ - -export const breakpoint = { - desktop: '980px', - leftCol: '1140px', - mobile: '320px', - mobileLandscape: '480px', - mobileMedium: '375px', - phablet: '660px', - tablet: '740px', - wide: '1300px', -}; -export const height = { - ctaMedium: '44px', - ctaSmall: '36px', - ctaXSmall: '24px', - iconMedium: '30px', - iconSmall: '26px', - iconXSmall: '20px', - inputMedium: '44px', - inputXSmall: '24px', -}; -export const palette = { - brand: { - 100: '#001536', - 300: '#041F4A', - 400: '#052962', - 500: '#0077B6', - 600: '#506991', - 800: '#C1D8FC', - }, - brandAlt: { - 200: '#F3C100', - 300: '#FFD900', - 400: '#FFE500', - }, - culture: { - 50: '#2B2625', - 100: '#3E3323', - 200: '#574835', - 300: '#6B5840', - 350: '#866D50', - 400: '#866D50', - 450: '#A1845C', - 500: '#EACCA0', - 600: '#E7D4B9', - 700: '#EFE8DD', - 800: '#FBF6EF', - }, - error: { - 400: '#C70000', - 500: '#FF9081', - }, - focus: { - 400: '#0077B6', - }, - labs: { - 200: '#0C7A73', - 300: '#65A897', - 400: '#69D1CA', - }, - lifestyle: { - 100: '#510043', - 200: '#650054', - 300: '#7D0068', - 400: '#BB3B80', - 450: '#F37ABC', - 500: '#FFABDB', - 600: '#FEC8D3', - 800: '#FEEEF7', - }, - neutral: { - 0: '#000000', - 7: '#121212', - 10: '#1A1A1A', - 20: '#333333', - 38: '#545454', - 46: '#707070', - 60: '#999999', - 73: '#BABABA', - 86: '#DCDCDC', - 93: '#EDEDED', - 97: '#F6F6F6', - 100: '#FFFFFF', - }, - news: { - 100: '#660505', - 200: '#8B0000', - 300: '#AB0613', - 400: '#C70000', - 500: '#FF5943', - 550: '#FF9081', - 600: '#FFBAC8', - 800: '#FFF4F2', - }, - opinion: { - 100: '#672005', - 200: '#8D2700', - 300: '#C74600', - 400: '#C74600', - 450: '#E05E00', - 500: '#FF7F0F', - 550: '#FF9941', - 600: '#F9B376', - 800: '#FEF9F5', - }, - specialReport: { - 100: '#222527', - 200: '#303538', - 300: '#3F464A', - 400: '#595C5F', - 450: '#9DA0A2', - 500: '#ABC2C9', - 700: '#E4E5E8', - 800: '#EFF1F2', - }, - specialReportAlt: { - 100: '#2B2B2A', - 200: '#B9300A', - 300: '#FF663D', - 700: '#EBE6E1', - 800: '#F5F0EB', - }, - sport: { - 100: '#003C60', - 200: '#004E7C', - 300: '#005689', - 400: '#0077B6', - 500: '#00B2FF', - 600: '#90DCFF', - 800: '#F1F8FC', - }, - success: { - 300: '#185E36', - 400: '#22874D', - 500: '#58D08B', - }, -}; -export const size = { - icon: { - medium: '30px', - small: '26px', - xSmall: '20px', - }, - medium: '44px', - small: '36px', - xSmall: '24px', -}; -export const space = { - 0: '2px', - 1: '4px', - 2: '8px', - 3: '12px', - 4: '16px', - 5: '20px', - 6: '24px', - 8: '32px', - 9: '36px', - 10: '40px', - 12: '48px', - 14: '56px', - 16: '64px', - 18: '72px', - 24: '96px', -}; -export const typography = { - body: { - medium: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.4, - fontWeight: 400, - }, - small: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.4, - fontWeight: 400, - }, - xSmall: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.4, - fontWeight: 400, - }, - }, - fontFamily: { - body: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - headline: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - textSans: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - titlepiece: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - }, - fontSize: { - 12: '12px', - 14: '14px', - 15: '15px', - 17: '17px', - 20: '20px', - 24: '24px', - 28: '28px', - 34: '34px', - 42: '42px', - 50: '50px', - 64: '64px', - 70: '70px', - }, - fontWeight: { - bold: 700, - light: 300, - medium: 500, - regular: 400, - }, - headline: { - large: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 500, - }, - medium: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 500, - }, - small: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 500, - }, - xLarge: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 500, - }, - xSmall: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 500, - }, - xxSmall: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 500, - }, - xxxSmall: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 500, - }, - }, - lineHeight: { - loose: 1.4, - regular: 1.3, - tight: 1.15, - }, - textDecorationThicknessForFontSize: { - 12: '2px', - 14: '2px', - 15: '2px', - 17: '2px', - 20: '3px', - 24: '3px', - 28: '3px', - 34: '4px', - 42: '5px', - 50: '6px', - 64: '6px', - 70: '6px', - }, - textSans: { - large: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '20px', - lineHeight: 1.3, - fontWeight: 400, - }, - medium: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 400, - }, - small: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 400, - }, - xLarge: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '24px', - lineHeight: 1.3, - fontWeight: 400, - }, - xSmall: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 400, - }, - xxLarge: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '28px', - lineHeight: 1.3, - fontWeight: 400, - }, - xxSmall: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '12px', - lineHeight: 1.3, - fontWeight: 400, - }, - xxxLarge: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '34px', - lineHeight: 1.3, - fontWeight: 400, - }, - }, - titlepiece: { - large: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '70px', - lineHeight: 1.15, - fontWeight: 700, - }, - medium: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 700, - }, - small: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 700, - }, - }, -}; -export const typographyPresets = { - article15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'normal', - }, - article17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'normal', - }, - articleBold15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'normal', - }, - articleBold17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'normal', - }, - articleBoldItalic15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'italic', - }, - articleBoldItalic17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'italic', - }, - articleItalic15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'italic', - }, - articleItalic17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'italic', - }, - headlineBold14: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold15: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold17: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold20: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold24: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold28: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold34: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold42: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold50: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineBold64: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '64px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - headlineLight14: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight15: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight17: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight20: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight24: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight28: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight34: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight42: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight50: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLight64: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '64px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', - }, - headlineLightItalic14: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic15: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic17: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic20: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic24: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic28: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic34: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic42: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic50: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineLightItalic64: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '64px', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', - }, - headlineMedium14: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium15: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium17: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium20: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium24: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium28: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium34: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium42: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium50: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMedium64: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '64px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', - }, - headlineMediumItalic14: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic15: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic17: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic20: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '20px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic24: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '24px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic28: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '28px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic34: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '34px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic42: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic50: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - headlineMediumItalic64: { - fontFamily: [ - 'GH Guardian Headline', - 'Guardian Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '64px', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', - }, - textEgyptian14: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textEgyptian15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textEgyptian17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textEgyptianBold14: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textEgyptianBold15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textEgyptianBold17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textEgyptianBoldItalic14: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', - }, - textEgyptianBoldItalic15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', - }, - textEgyptianBoldItalic17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', - }, - textEgyptianItalic14: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textEgyptianItalic15: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textEgyptianItalic17: { - fontFamily: [ - 'GuardianTextEgyptian', - 'Guardian Text Egyptian Web', - 'Georgia', - 'serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSans12: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '12px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans14: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans15: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans17: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans20: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '20px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans24: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '24px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans28: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '28px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSans34: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '34px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', - }, - textSansBold12: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '12px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold14: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold15: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold17: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold20: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '20px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold24: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '24px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold28: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '28px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansBold34: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '34px', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', - }, - textSansItalic12: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '12px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic14: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '14px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic15: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '15px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic17: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '17px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic20: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '20px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic24: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '24px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic28: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '28px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - textSansItalic34: { - fontFamily: [ - 'GuardianTextSans', - 'Guardian Text Sans Web', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ], - fontSize: '34px', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', - }, - titlepiece42: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '42px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - titlepiece50: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '50px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, - titlepiece70: { - fontFamily: ['GT Guardian Titlepiece', 'Georgia', 'serif'], - fontSize: '70px', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', - }, -}; -export const width = { - ctaMedium: '44px', - ctaSmall: '36px', - ctaXSmall: '24px', - iconMedium: '30px', - iconSmall: '26px', - iconXSmall: '20px', - inputXSmall: '24px', -}; diff --git a/libs/@guardian/design-tokens/package.json b/libs/@guardian/design-tokens/package.json deleted file mode 100644 index 63f7d61c2..000000000 --- a/libs/@guardian/design-tokens/package.json +++ /dev/null @@ -1,76 +0,0 @@ -{ - "name": "@guardian/design-tokens", - "version": "0.2.0", - "private": true, - "type": "module", - "main": "__generated__/tokens.js", - "types": "__generated__/tokens.d.ts", - "files": [ - "__generated__" - ], - "scripts": { - "build": "wireit", - "fix": "wireit", - "lint": "wireit", - "tsc": "wireit" - }, - "devDependencies": { - "@cobalt-ui/cli": "1.11.0", - "@cobalt-ui/core": "1.11.0", - "@cobalt-ui/plugin-css": "1.7.0", - "@guardian/cobalt-plugin-ts": "workspace:*", - "wireit": "0.14.4" - }, - "peerDependencies": { - "tslib": "^2.5.3" - }, - "wireit": { - "build": { - "command": "co build && prettier --write __generated__/**", - "files": [ - "src/**", - "tokens.config.js", - "package.json" - ], - "output": [ - "__generated__" - ] - }, - "fix": { - "command": "eslint --cache --color . --fix", - "files": [ - "**", - "../../../.eslint*", - "!(dist)/**", - "!.eslintcache" - ], - "clean": false, - "output": [ - "." - ] - }, - "lint": { - "command": "eslint --cache --color .", - "files": [ - "**", - "../../../.eslint*", - "!(dist)/**", - "!.eslintcache" - ], - "output": [] - }, - "tsc": { - "command": "tsc --pretty", - "files": [ - "**", - "tsconfig.json", - "../tsconfig/tsconfig.json", - "../../../@types/**", - "../../../tsconfig.base.json", - "!(dist)/**", - "!.eslintcache" - ], - "output": [] - } - } -} diff --git a/libs/@guardian/design-tokens/tsconfig.json b/libs/@guardian/design-tokens/tsconfig.json deleted file mode 100644 index 90e6c8bcc..000000000 --- a/libs/@guardian/design-tokens/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "include": ["**/*"], - "exclude": ["node_modules", "dist", ".wireit"] -} diff --git a/libs/@guardian/source/package.json b/libs/@guardian/source/package.json index 9d767a102..908a9126b 100644 --- a/libs/@guardian/source/package.json +++ b/libs/@guardian/source/package.json @@ -23,8 +23,8 @@ ], "scripts": { "build": "wireit", + "build-generated": "wireit", "build-storybook": "wireit", - "build-type-presets": "wireit", "create-icons": "tsx scripts/create-icons/index.ts", "dev": "jest --watch", "fix": "wireit", @@ -39,8 +39,12 @@ }, "devDependencies": { "@babel/core": "7.25.2", + "@cobalt-ui/cli": "1.11.0", + "@cobalt-ui/core": "1.11.0", + "@cobalt-ui/plugin-css": "1.7.0", + "@cobalt-ui/plugin-js": "1.4.3", + "@cobalt-ui/utils": "1.2.2", "@emotion/react": "11.11.3", - "@guardian/design-tokens": "workspace:*", "@guardian/libs": "18.0.0", "@storybook/manager-api": "8.2.7", "@storybook/react": "8.2.7", @@ -90,16 +94,11 @@ } }, "wireit": { - "__deps__": { - "dependencies": [ - "../design-tokens:build", - "../libs:build" - ] - }, "build": { "command": "rollup -c", "dependencies": [ - "__deps__" + "../libs:build", + "build-generated" ], "files": [ "src/**", @@ -112,6 +111,15 @@ "dist" ] }, + "build-generated": { + "command": "co build --config src/design-tokens/tokens.config.js && prettier --write src/foundations/__generated__/**", + "files": [ + "./src/design-tokens/**" + ], + "output": [ + "./src/foundations/__generated__" + ] + }, "build-storybook": { "command": "NODE_ENV=production storybook build --webpack-stats-json", "dependencies": [ @@ -128,23 +136,10 @@ "storybook-static" ] }, - "build-type-presets": { - "command": "tsx ./scripts/build-type-presets.ts", - "dependencies": [ - "__deps__" - ], - "files": [ - "./scripts/build-type-presets.ts", - "./src/foundations/utils/convert-value.ts" - ], - "output": [ - "src/__generated__/typography" - ] - }, "fix": { "command": "eslint --cache --color . --fix", "dependencies": [ - "__deps__" + "build" ], "files": [ "**", @@ -159,7 +154,7 @@ }, "lint": { "dependencies": [ - "__deps__" + "build" ], "command": "eslint --cache --color .", "files": [ @@ -173,7 +168,7 @@ "test": { "command": "jest", "dependencies": [ - "__deps__" + "build" ], "files": [ "**", diff --git a/libs/@guardian/source/scripts/build-type-presets.ts b/libs/@guardian/source/scripts/build-type-presets.ts deleted file mode 100644 index 801ee7499..000000000 --- a/libs/@guardian/source/scripts/build-type-presets.ts +++ /dev/null @@ -1,69 +0,0 @@ -import fs from 'node:fs'; -import { typography, typographyPresets } from '@guardian/design-tokens'; -import { - fontArrayToString, - pxStringToRem, -} from '../src/foundations/utils/convert-value'; - -const STRIP_WHITESPACE = /^\s+/gm; -const STRIP_TABS = /^\t{3}|\t{2}/gm; - -const { fontSize, textDecorationThicknessForFontSize } = typography; - -type FontSize = keyof typeof fontSize; - -const textDecorationThickness = (size: string) => - textDecorationThicknessForFontSize[size.slice(0, -2) as FontSize]; - -console.log('Building typography presets…'); - -const presetTotal = Object.keys(typographyPresets).length; - -const outputPath = `${process.cwd()}/src/foundations/__generated__/typography`; -fs.mkdirSync(outputPath, { recursive: true }); - -const cssOutputPath = `${outputPath}/css.ts`; -const objectOutputPath = `${outputPath}/objects.ts`; - -const banner = ` - // Typography presets - // Auto-generated by scripts/build-type-presets.ts - // DO NOT EDIT -`.replace(STRIP_WHITESPACE, ''); - -// Generate CSS representation of presets as a string -const css = Object.entries(typographyPresets) - .map( - ([preset, properties]) => ` - export const ${preset} = \` - font-family: ${fontArrayToString(properties.fontFamily)}; - font-size: ${pxStringToRem(properties.fontSize)}rem; - line-height: ${properties.lineHeight}; - font-weight: ${properties.fontWeight}; - font-style: ${properties.fontStyle}; - --source-text-decoration-thickness: ${textDecorationThickness(properties.fontSize)}; - \`; - `, - ) - .join('') - .replace(STRIP_TABS, ''); - -// Generate object literal representation of presets -const object = Object.entries(typographyPresets) - .map( - ([preset, properties]) => ` - export const ${preset}Object = { - fontFamily: '${fontArrayToString(properties.fontFamily)}', - fontSize: '${pxStringToRem(properties.fontSize)}rem', - lineHeight: ${properties.lineHeight}, - fontWeight: ${properties.fontWeight}, - fontStyle: '${properties.fontStyle}', - } as const; - `, - ) - .join('') - .replace(STRIP_TABS, ''); - -fs.writeFileSync(cssOutputPath, banner + css); -fs.writeFileSync(objectOutputPath, banner + object); -console.log(`✓ ${presetTotal} presets built`); diff --git a/libs/@guardian/source/src/design-tokens/README.md b/libs/@guardian/source/src/design-tokens/README.md new file mode 100644 index 000000000..026ee7123 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/README.md @@ -0,0 +1,7 @@ +# Source Design Tokens + +`tokens.json` contains the design tokens for Source, which are used to auto-generate values that are exported from `@guardian/source/foundations`. + +## Development + +Edit `tokens.json` and run `make build` to update the code in `../foundations/__generated__`, then include those changes in your commit. diff --git a/libs/@guardian/source/src/design-tokens/cobalt-plugins/breakpoints.js b/libs/@guardian/source/src/design-tokens/cobalt-plugins/breakpoints.js new file mode 100644 index 000000000..18cebb977 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/cobalt-plugins/breakpoints.js @@ -0,0 +1,76 @@ +/* eslint-disable import/no-default-export -- cobalt plugins do this */ + +// @ts-check + +import { defaultTransformer, serializeJS } from '@cobalt-ui/plugin-js'; +import { set } from '@cobalt-ui/utils'; +import { pxStringToNumber } from '../lib/convert-value.js'; +import { getCommentId } from '../lib/get-comment-id.js'; +import { template } from '../lib/template.js'; + +/** + * @param {{ filename: string; }} options + * @returns {import('@cobalt-ui/core').Plugin} + */ +export default function pluginBreakpoints(options) { + return { + name: 'plugin-breakpoints', + + config(/* config */) {}, + async build({ tokens, rawSchema /*, metadata */ }) { + const TOKEN_GROUP = 'breakpoint'; + + const description = rawSchema[TOKEN_GROUP]?.$description; + + const breakpointTokens = tokens.filter((token) => + token.id.startsWith(TOKEN_GROUP), + ); + + /** + * this is where we'll store the transformed tokens + * @type {Object.} + */ + const transformedTokens = {}; + + /** @type {Object.} */ + const jsDoc = {}; + + // we can re-use the default transformer from `@cobalt-ui/plugin-js` + for (const token of breakpointTokens) { + set( + transformedTokens, + token.id, + pxStringToNumber(defaultTransformer(token).toString()), + ); + if (token.$description) { + jsDoc[getCommentId(token.id)] = token.$description; + } + } + + const serialisedJS = Object.values(transformedTokens) + .map((breakpointToken) => + serializeJS(breakpointToken, { comments: jsDoc }), + ) + .join('') + .replace(/;$/, ''); + + const typescriptSource = []; + + if (description) { + typescriptSource.push(`/** ${description} */`); + } + + typescriptSource.push( + `export const breakpoints = ${serialisedJS} as const;`, + `export type Breakpoint = keyof typeof breakpoints;`, + ); + + return [ + { + filename: options.filename, + contents: template(import.meta.filename, typescriptSource.join('\n')), + }, + ]; + }, + }; +} diff --git a/libs/@guardian/source/src/design-tokens/cobalt-plugins/palette.js b/libs/@guardian/source/src/design-tokens/cobalt-plugins/palette.js new file mode 100644 index 000000000..afa252edf --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/cobalt-plugins/palette.js @@ -0,0 +1,67 @@ +/* eslint-disable import/no-default-export -- cobalt plugins do this */ + +// @ts-check + +import { defaultTransformer, serializeJS } from '@cobalt-ui/plugin-js'; +import { set } from '@cobalt-ui/utils'; +import { getCommentId } from '../lib/get-comment-id.js'; +import { template } from '../lib/template.js'; + +/** + * @param {{ filename: string; }} options + * @returns {import('@cobalt-ui/core').Plugin} + */ +export default function pluginPalette(options) { + return { + name: 'plugin-palette', + + config(/* config */) {}, + async build({ tokens, rawSchema /*, metadata */ }) { + const TOKEN_GROUP = 'palette'; + + const description = rawSchema[TOKEN_GROUP]?.$description; + + // this is where we'll store the transformed tokens + /** @type {Object.} */ + const transformedTokens = {}; + + /** @type {Object.} */ + const jsDoc = {}; + + const paletteTokens = tokens.filter((token) => + token.id.startsWith(TOKEN_GROUP), + ); + + // we can re-use the default transformer from `@cobalt-ui/plugin-js` + for (const token of paletteTokens) { + set(transformedTokens, token.id, defaultTransformer(token)); + if (token.$description) { + jsDoc[getCommentId(token.id)] = token.$description; + } + } + + const typescriptSource = []; + + for (const [group, tokens] of Object.entries(transformedTokens)) { + const serialisedJS = serializeJS(tokens, { + comments: jsDoc, + }).trim(); + + if (description) { + typescriptSource.push(`/** ${description} */`); + } + + typescriptSource.push( + `\nexport const ${group} = ${serialisedJS.replace(/;$/, '')} as const;`, + ); + } + + return [ + { + filename: options.filename, + contents: template(import.meta.filename, typescriptSource.join('\n')), + }, + ]; + }, + }; +} diff --git a/libs/@guardian/source/src/design-tokens/cobalt-plugins/size.js b/libs/@guardian/source/src/design-tokens/cobalt-plugins/size.js new file mode 100644 index 000000000..124b1bfdd --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/cobalt-plugins/size.js @@ -0,0 +1,95 @@ +/* eslint-disable import/no-default-export -- cobalt plugins do this */ + +// @ts-check + +import { defaultTransformer, serializeJS } from '@cobalt-ui/plugin-js'; +import { set } from '@cobalt-ui/utils'; +import { capitalise } from '../lib/capitalise.js'; +import { numberToRem, pxStringToNumber } from '../lib/convert-value.js'; +import { getCommentId } from '../lib/get-comment-id.js'; +import { template } from '../lib/template.js'; + +/** + * @param {{ filename: string; }} options + * @returns {import('@cobalt-ui/core').Plugin} + */ +export default function pluginSpace(options) { + return { + name: 'plugin-size', + + config(/* config */) {}, + async build({ tokens, rawSchema /*, metadata */ }) { + const TOKEN_GROUP = ['size', 'height', 'width', 'iconSize']; + + /** @type {Object.} */ + const description = {}; + + for (const group of TOKEN_GROUP) { + description[group] = rawSchema[group]?.$description ?? ''; + } + + /** @type {Object.} */ + let numberTokens = {}; + + /** @type {Object.} */ + let remTokens = {}; + + /** @type {Object.} */ + const jsDoc = {}; + + const sizeTokens = tokens.filter((token) => { + const [group] = token.id.split('.'); + return TOKEN_GROUP.includes(group ?? ''); + }); + + // we can re-use the default transformer from `@cobalt-ui/plugin-js` + for (const token of sizeTokens) { + const value = Number( + pxStringToNumber(defaultTransformer(token).toString()), + ); + set(numberTokens, token.id, value); + set(remTokens, token.id, numberToRem(value)); + if (token.$description) { + jsDoc[getCommentId(token.id)] = token.$description; + } + } + + const typescriptSource = []; + + for (const tokenGroup of Object.keys(numberTokens)) { + const serialisedJS = serializeJS(numberTokens[tokenGroup], { + comments: jsDoc, + }).trim(); + + if (description[tokenGroup]) { + typescriptSource.push(`/** ${description[tokenGroup]} */`); + } + + typescriptSource.push( + `export const ${tokenGroup} = ${serialisedJS.replace(/;$/, '')} as const;`, + ); + } + + for (const tokenGroup of Object.keys(remTokens)) { + const serialisedJS = serializeJS(remTokens[tokenGroup], { + comments: jsDoc, + }).trim(); + + if (description[tokenGroup]) { + typescriptSource.push(`/** ${description[tokenGroup]} */`); + } + + typescriptSource.push( + `export const rem${capitalise(tokenGroup)} = ${serialisedJS.replace(/;$/, '')} as const;`, + ); + } + + return [ + { + filename: options.filename, + contents: template(import.meta.filename, typescriptSource.join('\n')), + }, + ]; + }, + }; +} diff --git a/libs/@guardian/source/src/design-tokens/cobalt-plugins/space.js b/libs/@guardian/source/src/design-tokens/cobalt-plugins/space.js new file mode 100644 index 000000000..9f287caee --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/cobalt-plugins/space.js @@ -0,0 +1,78 @@ +/* eslint-disable import/no-default-export -- cobalt plugins do this */ + +// @ts-check + +import { defaultTransformer, serializeJS } from '@cobalt-ui/plugin-js'; +import { set } from '@cobalt-ui/utils'; +import { numberToRem, pxStringToNumber } from '../lib/convert-value.js'; +import { getCommentId } from '../lib/get-comment-id.js'; +import { template } from '../lib/template.js'; + +/** + * @param {{ filename: string; }} options + * @returns {import('@cobalt-ui/core').Plugin} + */ +export default function pluginSpace(options) { + return { + name: 'plugin-space', + config(/* config */) {}, + async build({ tokens, rawSchema /*, metadata */ }) { + const TOKEN_GROUP = 'space'; + + const description = rawSchema[TOKEN_GROUP]?.$description ?? ''; + + const spaceTokens = tokens.filter((token) => + token.id.startsWith(TOKEN_GROUP), + ); + + /** @type {Object.} */ + const numberTokens = {}; + + /** @type {Object.} */ + const remTokens = {}; + + /** @type {Object.} */ + const jsDoc = {}; + + // we can re-use the default transformer from `@cobalt-ui/plugin-js` + for (const token of spaceTokens) { + const value = Number( + pxStringToNumber(defaultTransformer(token).toString()), + ); + set(numberTokens, token.id, value); + set(remTokens, token.id, numberToRem(value)); + if (token.$description) { + jsDoc[getCommentId(token.id)] = token.$description; + } + } + + const typescriptSource = []; + + const exports = [ + { varName: 'space', tokens: numberTokens }, + { varName: 'remSpace', tokens: remTokens }, + ]; + for (const { varName, tokens } of exports) { + const serialisedJS = serializeJS(tokens['space'], { + comments: jsDoc, + }).trim(); + + if (description) { + typescriptSource.push(`/** ${description} */`); + } + + typescriptSource.push( + `export const ${varName} = ${serialisedJS.replace(/;$/, '').replace(/'([0-9]{1,3})'/gm, '$1')} as const;`, + '', + ); + } + + return [ + { + filename: options.filename, + contents: template(import.meta.filename, typescriptSource.join('\n')), + }, + ]; + }, + }; +} diff --git a/libs/@guardian/source/src/design-tokens/cobalt-plugins/typography.js b/libs/@guardian/source/src/design-tokens/cobalt-plugins/typography.js new file mode 100644 index 000000000..a8eb3f859 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/cobalt-plugins/typography.js @@ -0,0 +1,114 @@ +/* eslint-disable import/no-default-export -- cobalt plugins do this */ + +// @ts-check + +import { defaultTransformer } from '@cobalt-ui/plugin-js'; +import { set } from '@cobalt-ui/utils'; +import { fontArrayToString, pxStringToRem } from '../lib/convert-value.js'; +import { getCommentId } from '../lib/get-comment-id.js'; +import { template } from '../lib/template.js'; + +const GROUP_PREFIX = 'typographyPresets.'; + +/** @param {string} fontSize */ +const textDecorationThickness = (fontSize) => { + switch (fontSize) { + case '20px': + case '24px': + case '28px': + return '3px'; + case '34px': + return '4px'; + case '42px': + return '5px'; + case '50px': + case '64px': + case '70px': + return '6px'; + default: + return '2px'; + } +}; + +/** + * @typedef {Object} TypographyPreset + * @property {string[]} fontFamily + * @property {string} fontSize + * @property {number} lineHeight + * @property {number} fontWeight + * @property {string} fontStyle + */ + +/** + * + * @param {string} preset + * @param {TypographyPreset} properties + */ +const presetTemplate = (preset, properties) => ` +export const ${preset} = \` + font-family: ${fontArrayToString(properties.fontFamily)}; + font-size: ${pxStringToRem(properties.fontSize)}; + line-height: ${properties.lineHeight}; + font-weight: ${properties.fontWeight}; + font-style: ${properties.fontStyle}; + --source-text-decoration-thickness: ${textDecorationThickness(properties.fontSize)}; +\`; + +export const ${preset}Object = { + fontFamily: '${fontArrayToString(properties.fontFamily)}', + fontSize: '${pxStringToRem(properties.fontSize)}', + lineHeight: ${properties.lineHeight}, + fontWeight: ${properties.fontWeight}, + fontStyle: '${properties.fontStyle}', +} as const; +`; + +/** + * @param {{ filename: string; }} options + * @returns {import('@cobalt-ui/core').Plugin} + */ +export default function pluginBreakpoints(options) { + return { + name: 'plugin-typography', + + config(/* config */) {}, + async build({ tokens /* metadata, rawSchema */ }) { + // this is where we'll store the transformed tokens + /** @type {Object.} */ + const transformedTokens = {}; + + /** @type {Object.} */ + const comments = {}; + + const typographyTokens = tokens.filter((token) => + token.id.startsWith(GROUP_PREFIX), + ); + + // we can re-use the default transformer from `@cobalt-ui/plugin-js` + for (const token of typographyTokens) { + set(transformedTokens, token.id, defaultTransformer(token)); + if (token.$description) { + comments[getCommentId(token.id)] = token.$description; + } + } + + /** @type {Object.} */ + const typographyPresets = transformedTokens.typographyPresets; + const typescriptSource = Object.entries(typographyPresets) + .map(([preset, properties]) => { + const output = presetTemplate(preset, properties); + return comments[preset] + ? `\n/** ${comments[preset]} */${output}` + : output; + }) + .join(''); + + return [ + { + filename: options.filename, + contents: template(import.meta.filename, typescriptSource), + }, + ]; + }, + }; +} diff --git a/libs/@guardian/source/src/design-tokens/lib/capitalise.js b/libs/@guardian/source/src/design-tokens/lib/capitalise.js new file mode 100644 index 000000000..00b37415f --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/lib/capitalise.js @@ -0,0 +1,4 @@ +// @ts-check + +/** @param {string} str */ +export const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1); diff --git a/libs/@guardian/source/src/design-tokens/lib/convert-value.js b/libs/@guardian/source/src/design-tokens/lib/convert-value.js new file mode 100644 index 000000000..147092478 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/lib/convert-value.js @@ -0,0 +1,19 @@ +// @ts-check + +const rootPixelFontSize = 16; + +/** @param {number} n */ +export const numberToRem = (n) => n / rootPixelFontSize + 'rem'; + +/** @param {number} n */ +export const numberToRemNumber = (n) => n / rootPixelFontSize; + +/** @param {string} px */ +export const pxStringToRem = (px) => numberToRem(pxStringToNumber(px)); + +/** @param {string} px */ +export const pxStringToNumber = (px) => Number(px.slice(0, -2)); + +/** @param {string[]} fonts */ +export const fontArrayToString = (fonts) => + fonts.map((name) => (name.includes(' ') ? `"${name}"` : name)).join(', '); diff --git a/libs/@guardian/source/src/design-tokens/lib/convert-value.test.js b/libs/@guardian/source/src/design-tokens/lib/convert-value.test.js new file mode 100644 index 000000000..5c688e96c --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/lib/convert-value.test.js @@ -0,0 +1,57 @@ +// @ts-check + +import { + fontArrayToString, + numberToRem, + pxStringToNumber, + pxStringToRem, +} from './convert-value'; + +describe('numberToRem', () => { + it('should calculate a value with a rem unit from a pixel value', () => { + const value = 17; + const result = numberToRem(value); + expect(result).toBe('1.0625rem'); + }); +}); + +describe('pxStringToNumber', () => { + it('should convert a value with a px unit to a unitless number', () => { + const value = '16px'; + const result = pxStringToNumber(value); + expect(result).toBe(16); + expect(typeof result).toBe('number'); + }); +}); + +describe('pxStringToRem', () => { + it('should convert a value with a px unit to a value with a rem unit', () => { + const value = '20px'; + const result = pxStringToRem(value); + expect(result).toBe('1.25rem'); + expect(typeof result).toBe('string'); + }); +}); + +describe('fontArrayToString', () => { + it('should convert an array of font names to a valid `font-family` value', () => { + const value = ['GuardianTextEgyptian', 'Georgia', 'serif']; + const result = fontArrayToString(value); + expect(result).toBe('GuardianTextEgyptian, Georgia, serif'); + }); + + it('should quote any font names containing spaces', () => { + const value = [ + 'GuardianTextSans', + 'Helvetica Neue', + 'Helvetica', + 'Arial', + 'Lucida Grande', + 'sans-serif', + ]; + const result = fontArrayToString(value); + expect(result).toBe( + 'GuardianTextSans, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + ); + }); +}); diff --git a/libs/@guardian/source/src/design-tokens/lib/get-comment-id.js b/libs/@guardian/source/src/design-tokens/lib/get-comment-id.js new file mode 100644 index 000000000..cb3e20243 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/lib/get-comment-id.js @@ -0,0 +1,7 @@ +// @ts-check + +/** @param {string} tokenId */ +export const getCommentId = (tokenId) => { + const [, ...commentID] = tokenId.split('.'); + return commentID.join('.'); +}; diff --git a/libs/@guardian/source/src/design-tokens/lib/template.js b/libs/@guardian/source/src/design-tokens/lib/template.js new file mode 100644 index 000000000..0c2874664 --- /dev/null +++ b/libs/@guardian/source/src/design-tokens/lib/template.js @@ -0,0 +1,19 @@ +// @ts-check + +import { basename, join } from 'node:path'; + +/** + * @param {string} plugin + * @param {string} contents + */ +export const template = (plugin, contents) => + `/* +* DO NOT EDIT THIS FILE DIRECTLY! +* +* It was auto-generated by ${join('design-tokens', 'plugins', basename(plugin))}. +* +* Update design-tokens/tokens.json and (re)build @guardian/source instead. +*/ + +${contents} +`; diff --git a/libs/@guardian/design-tokens/tokens.config.js b/libs/@guardian/source/src/design-tokens/tokens.config.js similarity index 55% rename from libs/@guardian/design-tokens/tokens.config.js rename to libs/@guardian/source/src/design-tokens/tokens.config.js index 7f4ae833a..cb2260db8 100644 --- a/libs/@guardian/design-tokens/tokens.config.js +++ b/libs/@guardian/source/src/design-tokens/tokens.config.js @@ -1,9 +1,18 @@ +/** + * Config file for cobalt. + * https://cobalt-ui.pages.dev/guides/getting-started + */ + /* eslint-disable import/no-default-export -- cobalt configs do this */ // @ts-check import pluginCSS, { defaultNameGenerator } from '@cobalt-ui/plugin-css'; -import pluginTS from '@guardian/cobalt-plugin-ts'; +import breakpoints from './cobalt-plugins/breakpoints.js'; +import palette from './cobalt-plugins/palette.js'; +import size from './cobalt-plugins/size.js'; +import space from './cobalt-plugins/space.js'; +import typography from './cobalt-plugins/typography.js'; /** * @param {string} variableId @@ -24,17 +33,19 @@ const pxToRem = (token) => { /** @type {import('@cobalt-ui/core').Config} */ export default { - tokens: 'src/tokens.json', - outDir: '__generated__', + tokens: 'tokens.json', + outDir: '../foundations/__generated__', plugins: [ + palette({ filename: 'palette.ts' }), + breakpoints({ filename: 'breakpoints.ts' }), + typography({ filename: 'typography.ts' }), + space({ filename: 'space.ts' }), + size({ filename: 'size.ts' }), pluginCSS({ p3: false, generateName: prefixCustomProperty, transform: pxToRem, filename: 'variables.css', }), - pluginTS({ - filename: 'tokens.js', - }), ], }; diff --git a/libs/@guardian/design-tokens/src/tokens.json b/libs/@guardian/source/src/design-tokens/tokens.json similarity index 96% rename from libs/@guardian/design-tokens/src/tokens.json rename to libs/@guardian/source/src/design-tokens/tokens.json index d022a69fc..6e92f82e6 100644 --- a/libs/@guardian/design-tokens/src/tokens.json +++ b/libs/@guardian/source/src/design-tokens/tokens.json @@ -1,6 +1,7 @@ { "palette": { "$type": "color", + "$description": "Colour palette organised by type e.g. 'error', or pillar e.g. 'opinion'.", "brand": { "100": { "$value": "#001536" @@ -292,80 +293,93 @@ }, "size": { "$type": "dimension", - "xSmall": { + "$description": "May be used for call to action buttons and user input fields.", + "xsmall": { "$value": "24px" }, "small": { "$value": "36px" }, "medium": { - "$value": "44px" + "$value": "44px", + "$description": "Meets WCAG 2.1 AAA compliance for touch targets." + } + }, + "iconSize": { + "$type": "dimension", + "xsmall": { + "$value": "20px" }, - "icon": { - "xSmall": { - "$value": "20px" - }, - "small": { - "$value": "26px" - }, - "medium": { - "$value": "30px" - } + "small": { + "$value": "26px" + }, + "medium": { + "$value": "30px" } }, "height": { "$type": "dimension", "ctaMedium": { + "$description": "Call to action buttons and links", "$value": "{size.medium}" }, "ctaSmall": { + "$description": "Secondary calls to action", "$value": "{size.small}" }, - "ctaXSmall": { - "$value": "{size.xSmall}" + "ctaXsmall": { + "$description": "Calls to action where there is very limited space", + "$value": "{size.xsmall}" }, "inputMedium": { + "$description": "Text input fields, radio and checkbox labels", "$value": "{size.medium}" }, - "inputXSmall": { - "$value": "{size.xSmall}" + "inputXsmall": { + "$description": "Checkables such as checkboxes or radio buttons", + "$value": "{size.xsmall}" }, "iconMedium": { - "$value": "{size.icon.medium}" + "$value": "{iconSize.medium}" }, "iconSmall": { - "$value": "{size.icon.small}" + "$value": "{iconSize.small}" }, - "iconXSmall": { - "$value": "{size.icon.xSmall}" + "iconXsmall": { + "$value": "{iconSize.xsmall}" } }, "width": { "$type": "dimension", "ctaMedium": { + "$description": "Medium height call to action buttons and links", "$value": "{size.medium}" }, "ctaSmall": { + "$description": "Small height call to action buttons and links", "$value": "{size.small}" }, - "ctaXSmall": { - "$value": "{size.xSmall}" + "ctaXsmall": { + "$description": "Extra small height call to action buttons and links", + "$value": "{size.xsmall}" }, - "inputXSmall": { - "$value": "{size.xSmall}" + "inputXsmall": { + "$value": "{size.xsmall}" }, "iconMedium": { - "$value": "{size.icon.medium}" + "$value": "{iconSize.medium}" }, "iconSmall": { - "$value": "{size.icon.small}" + "$value": "{iconSize.small}" }, - "iconXSmall": { - "$value": "{size.icon.xSmall}" + "iconXsmall": { + "$description": "Checkables such as checkboxes or radio buttons", + "$value": "{iconSize.xsmall}" } }, "space": { "$type": "dimension", + "$description": "Can be applied to margin or padding properties, vertically or horizontally.", "0": { "$value": "2px" }, diff --git a/libs/@guardian/source/src/foundations/__deprecated__/colour/palette.ts b/libs/@guardian/source/src/foundations/__deprecated__/colour/palette.ts index eaabcffd5..bdaaab650 100644 --- a/libs/@guardian/source/src/foundations/__deprecated__/colour/palette.ts +++ b/libs/@guardian/source/src/foundations/__deprecated__/colour/palette.ts @@ -1,4 +1,4 @@ -import { palette } from '../../colour/palette'; +import { palette } from '../../palette/palette'; /** @deprecated Colours should now be imported from the `palette` object */ export const { diff --git a/libs/@guardian/source/src/foundations/__generated__/breakpoints.ts b/libs/@guardian/source/src/foundations/__generated__/breakpoints.ts new file mode 100644 index 000000000..560fb5a39 --- /dev/null +++ b/libs/@guardian/source/src/foundations/__generated__/breakpoints.ts @@ -0,0 +1,19 @@ +/* + * DO NOT EDIT THIS FILE DIRECTLY! + * + * It was auto-generated by design-tokens/plugins/breakpoints.js. + * + * Update design-tokens/tokens.json and (re)build @guardian/source instead. + */ + +export const breakpoints = { + desktop: 980, + leftCol: 1140, + mobile: 320, + mobileLandscape: 480, + mobileMedium: 375, + phablet: 660, + tablet: 740, + wide: 1300, +} as const; +export type Breakpoint = keyof typeof breakpoints; diff --git a/libs/@guardian/source/src/foundations/__generated__/palette.ts b/libs/@guardian/source/src/foundations/__generated__/palette.ts new file mode 100644 index 000000000..ce7188402 --- /dev/null +++ b/libs/@guardian/source/src/foundations/__generated__/palette.ts @@ -0,0 +1,128 @@ +/* + * DO NOT EDIT THIS FILE DIRECTLY! + * + * It was auto-generated by design-tokens/plugins/palette.js. + * + * Update design-tokens/tokens.json and (re)build @guardian/source instead. + */ + +/** Colour palette organised by type e.g. 'error', or pillar e.g. 'opinion'. */ + +export const palette = { + brand: { + '100': '#001536', + '300': '#041F4A', + '400': '#052962', + '500': '#0077B6', + '600': '#506991', + '800': '#C1D8FC', + }, + brandAlt: { + '200': '#F3C100', + '300': '#FFD900', + '400': '#FFE500', + }, + culture: { + '50': '#2B2625', + '100': '#3E3323', + '200': '#574835', + '300': '#6B5840', + /** @deprecated Use palette.culture.400 */ + '350': '#866D50', + '400': '#866D50', + '450': '#A1845C', + '500': '#EACCA0', + '600': '#E7D4B9', + '700': '#EFE8DD', + '800': '#FBF6EF', + }, + error: { + '400': '#C70000', + '500': '#FF9081', + }, + focus: { + '400': '#0077B6', + }, + labs: { + '200': '#0C7A73', + '300': '#65A897', + '400': '#69D1CA', + }, + lifestyle: { + '100': '#510043', + '200': '#650054', + '300': '#7D0068', + '400': '#BB3B80', + '450': '#F37ABC', + '500': '#FFABDB', + '600': '#FEC8D3', + '800': '#FEEEF7', + }, + neutral: { + '0': '#000000', + '7': '#121212', + '10': '#1A1A1A', + '20': '#333333', + '38': '#545454', + '46': '#707070', + '60': '#999999', + '73': '#BABABA', + '86': '#DCDCDC', + '93': '#EDEDED', + '97': '#F6F6F6', + '100': '#FFFFFF', + }, + news: { + '100': '#660505', + '200': '#8B0000', + '300': '#AB0613', + '400': '#C70000', + '500': '#FF5943', + '550': '#FF9081', + '600': '#FFBAC8', + '800': '#FFF4F2', + }, + opinion: { + '100': '#672005', + '200': '#8D2700', + /** @deprecated Use palette.opinion.400 */ + '300': '#C74600', + '400': '#C74600', + '450': '#E05E00', + '500': '#FF7F0F', + '550': '#FF9941', + '600': '#F9B376', + '800': '#FEF9F5', + }, + specialReport: { + '100': '#222527', + '200': '#303538', + '300': '#3F464A', + '400': '#595C5F', + '450': '#9DA0A2', + '500': '#ABC2C9', + '700': '#E4E5E8', + '800': '#EFF1F2', + }, + specialReportAlt: { + '100': '#2B2B2A', + '200': '#B9300A', + '300': '#FF663D', + '700': '#EBE6E1', + '800': '#F5F0EB', + }, + sport: { + '100': '#003C60', + '200': '#004E7C', + '300': '#005689', + '400': '#0077B6', + '500': '#00B2FF', + '600': '#90DCFF', + '800': '#F1F8FC', + }, + success: { + '300': '#185E36', + '400': '#22874D', + '500': '#58D08B', + }, +} as const; diff --git a/libs/@guardian/source/src/foundations/__generated__/size.ts b/libs/@guardian/source/src/foundations/__generated__/size.ts new file mode 100644 index 000000000..9029f66aa --- /dev/null +++ b/libs/@guardian/source/src/foundations/__generated__/size.ts @@ -0,0 +1,97 @@ +/* + * DO NOT EDIT THIS FILE DIRECTLY! + * + * It was auto-generated by design-tokens/plugins/size.js. + * + * Update design-tokens/tokens.json and (re)build @guardian/source instead. + */ + +export const height = { + /** Medium height call to action buttons and links */ + ctaMedium: 44, + /** Small height call to action buttons and links */ + ctaSmall: 36, + /** Extra small height call to action buttons and links */ + ctaXsmall: 24, + iconMedium: 30, + iconSmall: 26, + /** Checkables such as checkboxes or radio buttons */ + iconXsmall: 20, + /** Text input fields, radio and checkbox labels */ + inputMedium: 44, + /** Checkables such as checkboxes or radio buttons */ + inputXsmall: 24, +} as const; +export const iconSize = { + /** Meets WCAG 2.1 AAA compliance for touch targets. */ + medium: 30, + small: 26, + xsmall: 20, +} as const; +/** May be used for call to action buttons and user input fields. */ +export const size = { + /** Meets WCAG 2.1 AAA compliance for touch targets. */ + medium: 44, + small: 36, + xsmall: 24, +} as const; +export const width = { + /** Medium height call to action buttons and links */ + ctaMedium: 44, + /** Small height call to action buttons and links */ + ctaSmall: 36, + /** Extra small height call to action buttons and links */ + ctaXsmall: 24, + iconMedium: 30, + iconSmall: 26, + /** Checkables such as checkboxes or radio buttons */ + iconXsmall: 20, + /** Checkables such as checkboxes or radio buttons */ + inputXsmall: 24, +} as const; +/** */ +export const remHeight = { + /** Medium height call to action buttons and links */ + ctaMedium: '2.75rem', + /** Small height call to action buttons and links */ + ctaSmall: '2.25rem', + /** Extra small height call to action buttons and links */ + ctaXsmall: '1.5rem', + iconMedium: '1.875rem', + iconSmall: '1.625rem', + /** Checkables such as checkboxes or radio buttons */ + iconXsmall: '1.25rem', + /** Text input fields, radio and checkbox labels */ + inputMedium: '2.75rem', + /** Checkables such as checkboxes or radio buttons */ + inputXsmall: '1.5rem', +} as const; +/** */ +export const remIconSize = { + /** Meets WCAG 2.1 AAA compliance for touch targets. */ + medium: '1.875rem', + small: '1.625rem', + xsmall: '1.25rem', +} as const; +/** May be used for call to action buttons and user input fields. */ +export const remSize = { + /** Meets WCAG 2.1 AAA compliance for touch targets. */ + medium: '2.75rem', + small: '2.25rem', + xsmall: '1.5rem', +} as const; +/** */ +export const remWidth = { + /** Medium height call to action buttons and links */ + ctaMedium: '2.75rem', + /** Small height call to action buttons and links */ + ctaSmall: '2.25rem', + /** Extra small height call to action buttons and links */ + ctaXsmall: '1.5rem', + iconMedium: '1.875rem', + iconSmall: '1.625rem', + /** Checkables such as checkboxes or radio buttons */ + iconXsmall: '1.25rem', + /** Checkables such as checkboxes or radio buttons */ + inputXsmall: '1.5rem', +} as const; diff --git a/libs/@guardian/source/src/foundations/__generated__/space.ts b/libs/@guardian/source/src/foundations/__generated__/space.ts new file mode 100644 index 000000000..518843b81 --- /dev/null +++ b/libs/@guardian/source/src/foundations/__generated__/space.ts @@ -0,0 +1,45 @@ +/* + * DO NOT EDIT THIS FILE DIRECTLY! + * + * It was auto-generated by design-tokens/plugins/space.js. + * + * Update design-tokens/tokens.json and (re)build @guardian/source instead. + */ + +/** Can be applied to margin or padding properties, vertically or horizontally. */ +export const space = { + 0: 2, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 14: 56, + 16: 64, + 18: 72, + 24: 96, +} as const; + +/** Can be applied to margin or padding properties, vertically or horizontally. */ +export const remSpace = { + 0: '0.125rem', + 1: '0.25rem', + 2: '0.5rem', + 3: '0.75rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 8: '2rem', + 9: '2.25rem', + 10: '2.5rem', + 12: '3rem', + 14: '3.5rem', + 16: '4rem', + 18: '4.5rem', + 24: '6rem', +} as const; diff --git a/libs/@guardian/source/src/foundations/__generated__/typography/css.ts b/libs/@guardian/source/src/foundations/__generated__/typography.ts similarity index 52% rename from libs/@guardian/source/src/foundations/__generated__/typography/css.ts rename to libs/@guardian/source/src/foundations/__generated__/typography.ts index 874479a54..32054707b 100644 --- a/libs/@guardian/source/src/foundations/__generated__/typography/css.ts +++ b/libs/@guardian/source/src/foundations/__generated__/typography.ts @@ -1,6 +1,10 @@ -// Typography presets -// Auto-generated by scripts/build-type-presets.ts -// DO NOT EDIT +/* + * DO NOT EDIT THIS FILE DIRECTLY! + * + * It was auto-generated by design-tokens/plugins/typography.js. + * + * Update design-tokens/tokens.json and (re)build @guardian/source instead. + */ export const article15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; @@ -11,6 +15,15 @@ export const article15 = ` --source-text-decoration-thickness: 2px; `; +export const article15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.4, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const article17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -20,6 +33,15 @@ export const article17 = ` --source-text-decoration-thickness: 2px; `; +export const article17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.4, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const articleBold15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -29,6 +51,15 @@ export const articleBold15 = ` --source-text-decoration-thickness: 2px; `; +export const articleBold15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.4, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const articleBold17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -38,6 +69,15 @@ export const articleBold17 = ` --source-text-decoration-thickness: 2px; `; +export const articleBold17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.4, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const articleBoldItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -47,6 +87,15 @@ export const articleBoldItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const articleBoldItalic15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.4, + fontWeight: 700, + fontStyle: 'italic', +} as const; + export const articleBoldItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -56,6 +105,15 @@ export const articleBoldItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const articleBoldItalic17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.4, + fontWeight: 700, + fontStyle: 'italic', +} as const; + export const articleItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -65,6 +123,15 @@ export const articleItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const articleItalic15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.4, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const articleItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -74,6 +141,15 @@ export const articleItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const articleItalic17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.4, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const headlineBold14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -83,6 +159,14 @@ export const headlineBold14 = ` --source-text-decoration-thickness: 2px; `; +export const headlineBold14Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold15 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -92,6 +176,14 @@ export const headlineBold15 = ` --source-text-decoration-thickness: 2px; `; +export const headlineBold15Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -101,6 +193,14 @@ export const headlineBold17 = ` --source-text-decoration-thickness: 2px; `; +export const headlineBold17Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -110,6 +210,14 @@ export const headlineBold20 = ` --source-text-decoration-thickness: 3px; `; +export const headlineBold20Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.25rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -119,6 +227,14 @@ export const headlineBold24 = ` --source-text-decoration-thickness: 3px; `; +export const headlineBold24Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.5rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -128,6 +244,14 @@ export const headlineBold28 = ` --source-text-decoration-thickness: 3px; `; +export const headlineBold28Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.75rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -137,6 +261,14 @@ export const headlineBold34 = ` --source-text-decoration-thickness: 4px; `; +export const headlineBold34Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.125rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -146,6 +278,14 @@ export const headlineBold42 = ` --source-text-decoration-thickness: 5px; `; +export const headlineBold42Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -155,6 +295,14 @@ export const headlineBold50 = ` --source-text-decoration-thickness: 6px; `; +export const headlineBold50Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineBold64 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -164,6 +312,14 @@ export const headlineBold64 = ` --source-text-decoration-thickness: 6px; `; +export const headlineBold64Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '4rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const headlineLight14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -173,6 +329,14 @@ export const headlineLight14 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLight14Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight15 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -182,6 +346,14 @@ export const headlineLight15 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLight15Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -191,6 +363,14 @@ export const headlineLight17 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLight17Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -200,6 +380,14 @@ export const headlineLight20 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLight20Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.25rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -209,6 +397,14 @@ export const headlineLight24 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLight24Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.5rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -218,6 +414,14 @@ export const headlineLight28 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLight28Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.75rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -227,6 +431,14 @@ export const headlineLight34 = ` --source-text-decoration-thickness: 4px; `; +export const headlineLight34Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.125rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -236,6 +448,14 @@ export const headlineLight42 = ` --source-text-decoration-thickness: 5px; `; +export const headlineLight42Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -245,6 +465,14 @@ export const headlineLight50 = ` --source-text-decoration-thickness: 6px; `; +export const headlineLight50Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLight64 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -254,6 +482,14 @@ export const headlineLight64 = ` --source-text-decoration-thickness: 6px; `; +export const headlineLight64Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '4rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'normal', +} as const; + export const headlineLightItalic14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -263,6 +499,14 @@ export const headlineLightItalic14 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLightItalic14Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic15 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -272,6 +516,14 @@ export const headlineLightItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLightItalic15Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -281,6 +533,14 @@ export const headlineLightItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const headlineLightItalic17Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -290,6 +550,14 @@ export const headlineLightItalic20 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLightItalic20Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.25rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -299,6 +567,14 @@ export const headlineLightItalic24 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLightItalic24Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.5rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -308,6 +584,14 @@ export const headlineLightItalic28 = ` --source-text-decoration-thickness: 3px; `; +export const headlineLightItalic28Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.75rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -317,6 +601,14 @@ export const headlineLightItalic34 = ` --source-text-decoration-thickness: 4px; `; +export const headlineLightItalic34Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.125rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -326,6 +618,14 @@ export const headlineLightItalic42 = ` --source-text-decoration-thickness: 5px; `; +export const headlineLightItalic42Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -335,6 +635,14 @@ export const headlineLightItalic50 = ` --source-text-decoration-thickness: 6px; `; +export const headlineLightItalic50Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineLightItalic64 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -344,6 +652,14 @@ export const headlineLightItalic64 = ` --source-text-decoration-thickness: 6px; `; +export const headlineLightItalic64Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '4rem', + lineHeight: 1.15, + fontWeight: 300, + fontStyle: 'italic', +} as const; + export const headlineMedium14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -353,6 +669,14 @@ export const headlineMedium14 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMedium14Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium15 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -362,6 +686,14 @@ export const headlineMedium15 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMedium15Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -371,6 +703,14 @@ export const headlineMedium17 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMedium17Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -380,6 +720,14 @@ export const headlineMedium20 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMedium20Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.25rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -389,6 +737,14 @@ export const headlineMedium24 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMedium24Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.5rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -398,6 +754,14 @@ export const headlineMedium28 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMedium28Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.75rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -407,6 +771,14 @@ export const headlineMedium34 = ` --source-text-decoration-thickness: 4px; `; +export const headlineMedium34Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.125rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -416,6 +788,14 @@ export const headlineMedium42 = ` --source-text-decoration-thickness: 5px; `; +export const headlineMedium42Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -425,6 +805,14 @@ export const headlineMedium50 = ` --source-text-decoration-thickness: 6px; `; +export const headlineMedium50Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMedium64 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -434,6 +822,14 @@ export const headlineMedium64 = ` --source-text-decoration-thickness: 6px; `; +export const headlineMedium64Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '4rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'normal', +} as const; + export const headlineMediumItalic14 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -443,6 +839,14 @@ export const headlineMediumItalic14 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMediumItalic14Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic15 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -452,6 +856,14 @@ export const headlineMediumItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMediumItalic15Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic17 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -461,6 +873,14 @@ export const headlineMediumItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const headlineMediumItalic17Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic20 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -470,6 +890,14 @@ export const headlineMediumItalic20 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMediumItalic20Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.25rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic24 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -479,6 +907,14 @@ export const headlineMediumItalic24 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMediumItalic24Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.5rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic28 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -488,6 +924,14 @@ export const headlineMediumItalic28 = ` --source-text-decoration-thickness: 3px; `; +export const headlineMediumItalic28Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '1.75rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic34 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -497,6 +941,14 @@ export const headlineMediumItalic34 = ` --source-text-decoration-thickness: 4px; `; +export const headlineMediumItalic34Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.125rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic42 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -506,6 +958,14 @@ export const headlineMediumItalic42 = ` --source-text-decoration-thickness: 5px; `; +export const headlineMediumItalic42Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic50 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -515,6 +975,14 @@ export const headlineMediumItalic50 = ` --source-text-decoration-thickness: 6px; `; +export const headlineMediumItalic50Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const headlineMediumItalic64 = ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -524,6 +992,14 @@ export const headlineMediumItalic64 = ` --source-text-decoration-thickness: 6px; `; +export const headlineMediumItalic64Object = { + fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', + fontSize: '4rem', + lineHeight: 1.15, + fontWeight: 500, + fontStyle: 'italic', +} as const; + export const textEgyptian14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -533,6 +1009,15 @@ export const textEgyptian14 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptian14Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textEgyptian15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -542,6 +1027,15 @@ export const textEgyptian15 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptian15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textEgyptian17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -551,6 +1045,15 @@ export const textEgyptian17 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptian17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textEgyptianBold14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -560,6 +1063,15 @@ export const textEgyptianBold14 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBold14Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textEgyptianBold15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -569,6 +1081,15 @@ export const textEgyptianBold15 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBold15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textEgyptianBold17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -578,6 +1099,15 @@ export const textEgyptianBold17 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBold17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textEgyptianBoldItalic14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -587,6 +1117,15 @@ export const textEgyptianBoldItalic14 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBoldItalic14Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'italic', +} as const; + export const textEgyptianBoldItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -596,6 +1135,15 @@ export const textEgyptianBoldItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBoldItalic15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'italic', +} as const; + export const textEgyptianBoldItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -605,6 +1153,15 @@ export const textEgyptianBoldItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianBoldItalic17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'italic', +} as const; + export const textEgyptianItalic14 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -614,6 +1171,15 @@ export const textEgyptianItalic14 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianItalic14Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textEgyptianItalic15 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -623,6 +1189,15 @@ export const textEgyptianItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianItalic15Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textEgyptianItalic17 = ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -632,6 +1207,15 @@ export const textEgyptianItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const textEgyptianItalic17Object = { + fontFamily: + 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSans12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -641,6 +1225,15 @@ export const textSans12 = ` --source-text-decoration-thickness: 2px; `; +export const textSans12Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.75rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -650,6 +1243,15 @@ export const textSans14 = ` --source-text-decoration-thickness: 2px; `; +export const textSans14Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -659,6 +1261,15 @@ export const textSans15 = ` --source-text-decoration-thickness: 2px; `; +export const textSans15Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -668,6 +1279,15 @@ export const textSans17 = ` --source-text-decoration-thickness: 2px; `; +export const textSans17Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -677,6 +1297,15 @@ export const textSans20 = ` --source-text-decoration-thickness: 3px; `; +export const textSans20Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.25rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -686,6 +1315,15 @@ export const textSans24 = ` --source-text-decoration-thickness: 3px; `; +export const textSans24Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.5rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -695,6 +1333,15 @@ export const textSans28 = ` --source-text-decoration-thickness: 3px; `; +export const textSans28Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.75rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSans34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -704,6 +1351,15 @@ export const textSans34 = ` --source-text-decoration-thickness: 4px; `; +export const textSans34Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '2.125rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'normal', +} as const; + export const textSansBold12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -713,6 +1369,15 @@ export const textSansBold12 = ` --source-text-decoration-thickness: 2px; `; +export const textSansBold12Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.75rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -722,6 +1387,15 @@ export const textSansBold14 = ` --source-text-decoration-thickness: 2px; `; +export const textSansBold14Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -731,6 +1405,15 @@ export const textSansBold15 = ` --source-text-decoration-thickness: 2px; `; +export const textSansBold15Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -740,6 +1423,15 @@ export const textSansBold17 = ` --source-text-decoration-thickness: 2px; `; +export const textSansBold17Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -749,6 +1441,15 @@ export const textSansBold20 = ` --source-text-decoration-thickness: 3px; `; +export const textSansBold20Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.25rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -758,6 +1459,15 @@ export const textSansBold24 = ` --source-text-decoration-thickness: 3px; `; +export const textSansBold24Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.5rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -767,6 +1477,15 @@ export const textSansBold28 = ` --source-text-decoration-thickness: 3px; `; +export const textSansBold28Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.75rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansBold34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -776,6 +1495,15 @@ export const textSansBold34 = ` --source-text-decoration-thickness: 4px; `; +export const textSansBold34Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '2.125rem', + lineHeight: 1.3, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const textSansItalic12 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -785,6 +1513,15 @@ export const textSansItalic12 = ` --source-text-decoration-thickness: 2px; `; +export const textSansItalic12Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.75rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic14 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -794,6 +1531,15 @@ export const textSansItalic14 = ` --source-text-decoration-thickness: 2px; `; +export const textSansItalic14Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.875rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic15 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -803,6 +1549,15 @@ export const textSansItalic15 = ` --source-text-decoration-thickness: 2px; `; +export const textSansItalic15Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '0.9375rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic17 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -812,6 +1567,15 @@ export const textSansItalic17 = ` --source-text-decoration-thickness: 2px; `; +export const textSansItalic17Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.0625rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic20 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -821,6 +1585,15 @@ export const textSansItalic20 = ` --source-text-decoration-thickness: 3px; `; +export const textSansItalic20Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.25rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic24 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -830,6 +1603,15 @@ export const textSansItalic24 = ` --source-text-decoration-thickness: 3px; `; +export const textSansItalic24Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.5rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic28 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -839,6 +1621,15 @@ export const textSansItalic28 = ` --source-text-decoration-thickness: 3px; `; +export const textSansItalic28Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '1.75rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const textSansItalic34 = ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -848,6 +1639,15 @@ export const textSansItalic34 = ` --source-text-decoration-thickness: 4px; `; +export const textSansItalic34Object = { + fontFamily: + 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', + fontSize: '2.125rem', + lineHeight: 1.3, + fontWeight: 400, + fontStyle: 'italic', +} as const; + export const titlepiece42 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 2.625rem; @@ -857,6 +1657,14 @@ export const titlepiece42 = ` --source-text-decoration-thickness: 5px; `; +export const titlepiece42Object = { + fontFamily: '"GT Guardian Titlepiece", Georgia, serif', + fontSize: '2.625rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const titlepiece50 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 3.125rem; @@ -866,6 +1674,14 @@ export const titlepiece50 = ` --source-text-decoration-thickness: 6px; `; +export const titlepiece50Object = { + fontFamily: '"GT Guardian Titlepiece", Georgia, serif', + fontSize: '3.125rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; + export const titlepiece70 = ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 4.375rem; @@ -874,3 +1690,11 @@ export const titlepiece70 = ` font-style: normal; --source-text-decoration-thickness: 6px; `; + +export const titlepiece70Object = { + fontFamily: '"GT Guardian Titlepiece", Georgia, serif', + fontSize: '4.375rem', + lineHeight: 1.15, + fontWeight: 700, + fontStyle: 'normal', +} as const; diff --git a/libs/@guardian/source/src/foundations/__generated__/typography/objects.ts b/libs/@guardian/source/src/foundations/__generated__/typography/objects.ts deleted file mode 100644 index 53d5a903c..000000000 --- a/libs/@guardian/source/src/foundations/__generated__/typography/objects.ts +++ /dev/null @@ -1,823 +0,0 @@ -// Typography presets -// Auto-generated by scripts/build-type-presets.ts -// DO NOT EDIT - -export const article15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const article17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const articleBold15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const articleBold17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const articleBoldItalic15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'italic', -} as const; - -export const articleBoldItalic17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.4, - fontWeight: 700, - fontStyle: 'italic', -} as const; - -export const articleItalic15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const articleItalic17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.4, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const headlineBold14Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold15Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold17Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold20Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.25rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold24Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.5rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold28Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.75rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold34Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.125rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold42Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold50Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineBold64Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '4rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const headlineLight14Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight15Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight17Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight20Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.25rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight24Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.5rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight28Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.75rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight34Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.125rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight42Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight50Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLight64Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '4rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'normal', -} as const; - -export const headlineLightItalic14Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic15Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic17Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic20Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.25rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic24Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.5rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic28Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.75rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic34Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.125rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic42Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic50Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineLightItalic64Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '4rem', - lineHeight: 1.15, - fontWeight: 300, - fontStyle: 'italic', -} as const; - -export const headlineMedium14Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium15Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium17Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium20Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.25rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium24Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.5rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium28Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.75rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium34Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.125rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium42Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium50Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMedium64Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '4rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'normal', -} as const; - -export const headlineMediumItalic14Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic15Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic17Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic20Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.25rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic24Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.5rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic28Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '1.75rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic34Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.125rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic42Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic50Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const headlineMediumItalic64Object = { - fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', - fontSize: '4rem', - lineHeight: 1.15, - fontWeight: 500, - fontStyle: 'italic', -} as const; - -export const textEgyptian14Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textEgyptian15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textEgyptian17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textEgyptianBold14Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textEgyptianBold15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textEgyptianBold17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textEgyptianBoldItalic14Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', -} as const; - -export const textEgyptianBoldItalic15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', -} as const; - -export const textEgyptianBoldItalic17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'italic', -} as const; - -export const textEgyptianItalic14Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textEgyptianItalic15Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textEgyptianItalic17Object = { - fontFamily: - 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSans12Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.75rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans14Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans15Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans17Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans20Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.25rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans24Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.5rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans28Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.75rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSans34Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '2.125rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'normal', -} as const; - -export const textSansBold12Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.75rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold14Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold15Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold17Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold20Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.25rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold24Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.5rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold28Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.75rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansBold34Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '2.125rem', - lineHeight: 1.3, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const textSansItalic12Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.75rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic14Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.875rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic15Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '0.9375rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic17Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.0625rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic20Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.25rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic24Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.5rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic28Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '1.75rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const textSansItalic34Object = { - fontFamily: - 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - fontSize: '2.125rem', - lineHeight: 1.3, - fontWeight: 400, - fontStyle: 'italic', -} as const; - -export const titlepiece42Object = { - fontFamily: '"GT Guardian Titlepiece", Georgia, serif', - fontSize: '2.625rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const titlepiece50Object = { - fontFamily: '"GT Guardian Titlepiece", Georgia, serif', - fontSize: '3.125rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; - -export const titlepiece70Object = { - fontFamily: '"GT Guardian Titlepiece", Georgia, serif', - fontSize: '4.375rem', - lineHeight: 1.15, - fontWeight: 700, - fontStyle: 'normal', -} as const; diff --git a/libs/@guardian/design-tokens/__generated__/variables.css b/libs/@guardian/source/src/foundations/__generated__/variables.css similarity index 99% rename from libs/@guardian/design-tokens/__generated__/variables.css rename to libs/@guardian/source/src/foundations/__generated__/variables.css index ef6368d89..b2ee43c78 100644 --- a/libs/@guardian/design-tokens/__generated__/variables.css +++ b/libs/@guardian/source/src/foundations/__generated__/variables.css @@ -15,12 +15,15 @@ --source-breakpoint-wide: 81.25rem; --source-height-ctaMedium: 2.75rem; --source-height-ctaSmall: 2.25rem; - --source-height-ctaXSmall: 1.5rem; + --source-height-ctaXsmall: 1.5rem; --source-height-iconMedium: 1.875rem; --source-height-iconSmall: 1.625rem; - --source-height-iconXSmall: 1.25rem; + --source-height-iconXsmall: 1.25rem; --source-height-inputMedium: 2.75rem; - --source-height-inputXSmall: 1.5rem; + --source-height-inputXsmall: 1.5rem; + --source-iconSize-medium: 1.875rem; + --source-iconSize-small: 1.625rem; + --source-iconSize-xsmall: 1.25rem; --source-palette-brand-100: #001536; --source-palette-brand-300: #041f4a; --source-palette-brand-400: #052962; @@ -107,12 +110,9 @@ --source-palette-success-300: #185e36; --source-palette-success-400: #22874d; --source-palette-success-500: #58d08b; - --source-size-icon-medium: 1.875rem; - --source-size-icon-small: 1.625rem; - --source-size-icon-xSmall: 1.25rem; --source-size-medium: 2.75rem; --source-size-small: 2.25rem; - --source-size-xSmall: 1.5rem; + --source-size-xsmall: 1.5rem; --source-space-0: 0.125rem; --source-space-1: 0.25rem; --source-space-2: 0.5rem; @@ -1683,9 +1683,9 @@ ); --source-width-ctaMedium: 2.75rem; --source-width-ctaSmall: 2.25rem; - --source-width-ctaXSmall: 1.5rem; + --source-width-ctaXsmall: 1.5rem; --source-width-iconMedium: 1.875rem; --source-width-iconSmall: 1.625rem; - --source-width-iconXSmall: 1.25rem; - --source-width-inputXSmall: 1.5rem; + --source-width-iconXsmall: 1.25rem; + --source-width-inputXsmall: 1.5rem; } diff --git a/libs/@guardian/source/src/foundations/accessibility/focus-halo.ts b/libs/@guardian/source/src/foundations/accessibility/focus-halo.ts index b81ff8d81..867d6b452 100644 --- a/libs/@guardian/source/src/foundations/accessibility/focus-halo.ts +++ b/libs/@guardian/source/src/foundations/accessibility/focus-halo.ts @@ -1,4 +1,4 @@ -import { palette } from '../colour/palette'; +import { palette } from '../palette/palette'; /** * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-focushalo--page) diff --git a/libs/@guardian/source/src/foundations/breakpoints/breakpoints.ts b/libs/@guardian/source/src/foundations/breakpoints/breakpoints.ts index f392e5723..46a7354c4 100644 --- a/libs/@guardian/source/src/foundations/breakpoints/breakpoints.ts +++ b/libs/@guardian/source/src/foundations/breakpoints/breakpoints.ts @@ -1,27 +1,2 @@ -import { breakpoint } from '@guardian/design-tokens'; -import { pxStringToNumber } from '../utils/convert-value'; - -export type Breakpoint = - | 'mobile' - | 'mobileMedium' - | 'mobileLandscape' - | 'phablet' - | 'tablet' - | 'desktop' - | 'leftCol' - | 'wide'; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-media-queries--page) • - * [Design System](https://theguardian.design/2a1e5182b/p/41be19-grids) - */ -export const breakpoints = { - mobile: pxStringToNumber(breakpoint.mobile), - mobileMedium: pxStringToNumber(breakpoint.mobileMedium), - mobileLandscape: pxStringToNumber(breakpoint.mobileLandscape), - phablet: pxStringToNumber(breakpoint.phablet), - tablet: pxStringToNumber(breakpoint.tablet), - desktop: pxStringToNumber(breakpoint.desktop), - leftCol: pxStringToNumber(breakpoint.leftCol), - wide: pxStringToNumber(breakpoint.wide), -} as const; +export { breakpoints } from '../__generated__/breakpoints'; +export type { Breakpoint } from '../__generated__/breakpoints'; diff --git a/libs/@guardian/source/src/foundations/colour/palette.ts b/libs/@guardian/source/src/foundations/colour/palette.ts deleted file mode 100644 index 0a6bfd90a..000000000 --- a/libs/@guardian/source/src/foundations/colour/palette.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { palette as tokens } from '@guardian/design-tokens'; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-palette--palette) • - * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette) - * - * Colour palette organised by type e.g. 'error', or pillar e.g. 'opinion' - */ -export const palette = { - brand: tokens.brand, - brandAlt: tokens.brandAlt, - neutral: tokens.neutral, - error: tokens.error, - success: tokens.success, - news: tokens.news, - opinion: tokens.opinion, - sport: tokens.sport, - culture: tokens.culture, - lifestyle: tokens.lifestyle, - labs: tokens.labs, - specialReport: tokens.specialReport, - specialReportAlt: tokens.specialReportAlt, - focus: tokens.focus, -} as const; diff --git a/libs/@guardian/source/src/foundations/index.ts b/libs/@guardian/source/src/foundations/index.ts index 36342fc8c..0e339167a 100644 --- a/libs/@guardian/source/src/foundations/index.ts +++ b/libs/@guardian/source/src/foundations/index.ts @@ -17,7 +17,7 @@ export { breakpoints } from './breakpoints/breakpoints'; export { between, from, until } from './mq/mq'; // palette -export { palette } from './colour/palette'; +export { palette } from './palette/palette'; // size export { @@ -33,8 +33,7 @@ export { export { space, remSpace } from './space/space'; // typography -export * from './__generated__/typography/css'; -export * from './__generated__/typography/objects'; +export * from './typography/typography'; // utils export { appearance } from './utils/supports-queries'; diff --git a/libs/@guardian/source/src/foundations/colour/palette.mdx b/libs/@guardian/source/src/foundations/palette/palette.mdx similarity index 100% rename from libs/@guardian/source/src/foundations/colour/palette.mdx rename to libs/@guardian/source/src/foundations/palette/palette.mdx diff --git a/libs/@guardian/source/src/foundations/colour/palette.stories.tsx b/libs/@guardian/source/src/foundations/palette/palette.stories.tsx similarity index 100% rename from libs/@guardian/source/src/foundations/colour/palette.stories.tsx rename to libs/@guardian/source/src/foundations/palette/palette.stories.tsx diff --git a/libs/@guardian/source/src/foundations/palette/palette.ts b/libs/@guardian/source/src/foundations/palette/palette.ts new file mode 100644 index 000000000..332c54221 --- /dev/null +++ b/libs/@guardian/source/src/foundations/palette/palette.ts @@ -0,0 +1 @@ +export { palette } from '../__generated__/palette'; diff --git a/libs/@guardian/source/src/foundations/colour/storybookColorPalette.tsx b/libs/@guardian/source/src/foundations/palette/storybookColorPalette.tsx similarity index 100% rename from libs/@guardian/source/src/foundations/colour/storybookColorPalette.tsx rename to libs/@guardian/source/src/foundations/palette/storybookColorPalette.tsx diff --git a/libs/@guardian/source/src/foundations/size/size.ts b/libs/@guardian/source/src/foundations/size/size.ts index ef2553182..86c263807 100644 --- a/libs/@guardian/source/src/foundations/size/size.ts +++ b/libs/@guardian/source/src/foundations/size/size.ts @@ -1,29 +1,11 @@ -import { size as tokens } from '@guardian/design-tokens'; -import { pxStringToNumber, pxToRem } from '../utils/convert-value'; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#global-size-values) • - * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef) - * - * May be used for call to action buttons and user input fields. - */ -export const size = { - xsmall: pxStringToNumber(tokens.xSmall), - small: pxStringToNumber(tokens.small), - medium: pxStringToNumber(tokens.medium), // meets WCAG 2.1 AAA compliance for touch targets. -} as const; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#global-size-values) • - * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef) - * - * May be used for call to action buttons and user input fields. - */ -const remSize = { - xsmall: pxToRem(size.xsmall), - small: pxToRem(size.small), - medium: pxToRem(size.medium), -} as const; +export { + height, + remHeight, + remSize, + remWidth, + size, + width, +} from '../__generated__/size'; /* We attempt to use these values for icons within Source components. @@ -31,114 +13,4 @@ const remSize = { above. They are based on the size of icons used within the button component. */ -export const iconSize = { - xsmall: pxStringToNumber(tokens.icon.xSmall), - small: pxStringToNumber(tokens.icon.small), - medium: pxStringToNumber(tokens.icon.medium), -} as const; - -const remIconSize = { - xsmall: pxToRem(iconSize.xsmall), - small: pxToRem(iconSize.small), - medium: pxToRem(iconSize.medium), -} as const; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#tokens) • - * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef) - * - * Height tokens expressed in px - * - ** `height.ctaMedium`: call to action buttons and links - ** `height.ctaSmall`: secondary calls to action - ** `height.ctaXsmall`: calls to action where there is very limited space - ** `height.inputMedium`: text input fields, radio and checkbox labels - ** `height.inputXsmall`: checkables such as checkboxes or radio buttons - ** `height.iconMedium` - ** `height.iconSmall` - ** `height.iconXsmall` - */ -export const height = { - ctaMedium: size.medium, - ctaSmall: size.small, - ctaXsmall: size.xsmall, - inputMedium: size.medium, - inputXsmall: size.xsmall, - iconMedium: iconSize.medium, - iconSmall: iconSize.small, - iconXsmall: iconSize.xsmall, -} as const; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#tokens) • - * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef) - * - * Height tokens expressed in rem - * - ** `remHeight.ctaMedium`: call to action buttons and links - ** `remHeight.ctaSmall`: secondary calls to action - ** `remHeight.ctaXsmall`: calls to action where there is very limited space - ** `remHeight.inputMedium`: text input fields, radio and checkbox labels - ** `remHeight.inputXsmall`: checkables such as checkboxes or radio buttons - ** `remHeight.iconMedium` - ** `remHeight.iconSmall` - ** `remHeight.iconXsmall` - */ -export const remHeight = { - ctaMedium: remSize.medium, - ctaSmall: remSize.small, - ctaXsmall: remSize.xsmall, - inputMedium: remSize.medium, - inputXsmall: remSize.xsmall, - iconMedium: remIconSize.medium, - iconSmall: remIconSize.small, - iconXsmall: remIconSize.xsmall, -} as const; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#tokens) • - * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660) - * - * Width tokens expressed in px - * - ** `width.ctaMedium`: medium height call to action buttons and links - ** `width.ctaSmall`: small height call to action buttons and links - ** `width.ctaXsmall`: xsmall height call to action buttons and links - ** `width.inputXsmall`: checkables such as checkboxes or radio buttons - ** `width.iconMedium` - ** `width.iconSmall` - ** `width.iconXsmall` - */ -export const width = { - ctaMedium: size.medium, - ctaSmall: size.small, - ctaXsmall: size.xsmall, - inputXsmall: size.xsmall, - iconMedium: iconSize.medium, - iconSmall: iconSize.small, - iconXsmall: iconSize.xsmall, -} as const; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-size--page#tokens) • - * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660) - * - * Width tokens expressed in rem - * - ** `remWidth.ctaMedium`: medium height call to action buttons and links - ** `remWidth.ctaSmall`: small height call to action buttons and links - ** `remWidth.ctaXsmall`: xsmall height call to action buttons and links - ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons - ** `remWidth.iconMedium` - ** `remWidth.iconSmall` - ** `remWidth.iconXsmall` - */ -export const remWidth = { - ctaMedium: remSize.medium, - ctaSmall: remSize.small, - ctaXsmall: remSize.xsmall, - inputXsmall: remSize.xsmall, - iconMedium: remIconSize.medium, - iconSmall: remIconSize.small, - iconXsmall: remIconSize.xsmall, -} as const; +export { iconSize, remIconSize } from '../__generated__/size'; diff --git a/libs/@guardian/source/src/foundations/space/space.ts b/libs/@guardian/source/src/foundations/space/space.ts index c7e04671b..3049aaecf 100644 --- a/libs/@guardian/source/src/foundations/space/space.ts +++ b/libs/@guardian/source/src/foundations/space/space.ts @@ -1,45 +1 @@ -import { space as tokens } from '@guardian/design-tokens'; -import { pxStringToNumber, pxToRem } from '../utils/convert-value'; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/docs/source_foundations-space--page) • - * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space) - * - * Can be applied to margin or padding properties, vertically or horizontally. - * - */ -export const space = { - 0: pxStringToNumber(tokens[0]), - 1: pxStringToNumber(tokens[1]), - 2: pxStringToNumber(tokens[2]), - 3: pxStringToNumber(tokens[3]), - 4: pxStringToNumber(tokens[4]), - 5: pxStringToNumber(tokens[5]), - 6: pxStringToNumber(tokens[6]), - 8: pxStringToNumber(tokens[8]), - 9: pxStringToNumber(tokens[9]), - 10: pxStringToNumber(tokens[10]), - 12: pxStringToNumber(tokens[12]), - 14: pxStringToNumber(tokens[14]), - 16: pxStringToNumber(tokens[16]), - 18: pxStringToNumber(tokens[18]), - 24: pxStringToNumber(tokens[24]), -} as const; - -export const remSpace = { - 0: pxToRem(space[0]), - 1: pxToRem(space[1]), - 2: pxToRem(space[2]), - 3: pxToRem(space[3]), - 4: pxToRem(space[4]), - 5: pxToRem(space[5]), - 6: pxToRem(space[6]), - 8: pxToRem(space[8]), - 9: pxToRem(space[9]), - 10: pxToRem(space[10]), - 12: pxToRem(space[12]), - 14: pxToRem(space[14]), - 16: pxToRem(space[16]), - 18: pxToRem(space[18]), - 24: pxToRem(space[24]), -} as const; +export { space, remSpace } from '../__generated__/space'; diff --git a/libs/@guardian/source/src/foundations/tokens.test.ts b/libs/@guardian/source/src/foundations/tokens.test.ts index fa8e98d86..0e6a4d806 100644 --- a/libs/@guardian/source/src/foundations/tokens.test.ts +++ b/libs/@guardian/source/src/foundations/tokens.test.ts @@ -12,11 +12,10 @@ import { line, text, } from './__deprecated__/colour/palette'; -import * as typePresetCss from './__generated__/typography/css'; -import * as typePresetObject from './__generated__/typography/objects'; +import * as typePreset from './__generated__/typography'; import { transitions } from './animation/transitions'; import { breakpoints } from './breakpoints/breakpoints'; -import { palette } from './colour/palette'; +import { palette } from './palette/palette'; import { height, iconSize, @@ -267,7 +266,7 @@ describe('Space tokens', () => { describe('Typography preset CSS output', () => { it('should match expected output', () => { - expect(typePresetCss.article15).toMatchCSS( + expect(typePreset.article15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -278,7 +277,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.article17).toMatchCSS( + expect(typePreset.article17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -289,7 +288,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleBold15).toMatchCSS( + expect(typePreset.articleBold15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -300,7 +299,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleBold17).toMatchCSS( + expect(typePreset.articleBold17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -311,7 +310,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleBoldItalic15).toMatchCSS( + expect(typePreset.articleBoldItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -322,7 +321,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleBoldItalic17).toMatchCSS( + expect(typePreset.articleBoldItalic17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -333,7 +332,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleItalic15).toMatchCSS( + expect(typePreset.articleItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -344,7 +343,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.articleItalic17).toMatchCSS( + expect(typePreset.articleItalic17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -355,7 +354,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold14).toMatchCSS( + expect(typePreset.headlineBold14).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -366,7 +365,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold15).toMatchCSS( + expect(typePreset.headlineBold15).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -377,7 +376,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold17).toMatchCSS( + expect(typePreset.headlineBold17).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -388,7 +387,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold20).toMatchCSS( + expect(typePreset.headlineBold20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -399,7 +398,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold24).toMatchCSS( + expect(typePreset.headlineBold24).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -410,7 +409,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold28).toMatchCSS( + expect(typePreset.headlineBold28).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -421,7 +420,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold34).toMatchCSS( + expect(typePreset.headlineBold34).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -432,7 +431,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold42).toMatchCSS( + expect(typePreset.headlineBold42).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -443,7 +442,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold50).toMatchCSS( + expect(typePreset.headlineBold50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -454,7 +453,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineBold64).toMatchCSS( + expect(typePreset.headlineBold64).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -465,7 +464,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight14).toMatchCSS( + expect(typePreset.headlineLight14).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -476,7 +475,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight15).toMatchCSS( + expect(typePreset.headlineLight15).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -487,7 +486,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight17).toMatchCSS( + expect(typePreset.headlineLight17).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -498,7 +497,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight20).toMatchCSS( + expect(typePreset.headlineLight20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -509,7 +508,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight24).toMatchCSS( + expect(typePreset.headlineLight24).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -520,7 +519,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight28).toMatchCSS( + expect(typePreset.headlineLight28).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -531,7 +530,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight34).toMatchCSS( + expect(typePreset.headlineLight34).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -542,7 +541,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight42).toMatchCSS( + expect(typePreset.headlineLight42).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -553,7 +552,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight50).toMatchCSS( + expect(typePreset.headlineLight50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -564,7 +563,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLight64).toMatchCSS( + expect(typePreset.headlineLight64).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -575,7 +574,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic14).toMatchCSS( + expect(typePreset.headlineLightItalic14).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -586,7 +585,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic15).toMatchCSS( + expect(typePreset.headlineLightItalic15).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -597,7 +596,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic17).toMatchCSS( + expect(typePreset.headlineLightItalic17).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -608,7 +607,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic20).toMatchCSS( + expect(typePreset.headlineLightItalic20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -619,7 +618,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic24).toMatchCSS( + expect(typePreset.headlineLightItalic24).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -630,7 +629,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic28).toMatchCSS( + expect(typePreset.headlineLightItalic28).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -641,7 +640,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic34).toMatchCSS( + expect(typePreset.headlineLightItalic34).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -652,7 +651,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic42).toMatchCSS( + expect(typePreset.headlineLightItalic42).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -663,7 +662,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic50).toMatchCSS( + expect(typePreset.headlineLightItalic50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -674,7 +673,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineLightItalic64).toMatchCSS( + expect(typePreset.headlineLightItalic64).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -685,7 +684,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium14).toMatchCSS( + expect(typePreset.headlineMedium14).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -696,7 +695,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium15).toMatchCSS( + expect(typePreset.headlineMedium15).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -707,7 +706,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium17).toMatchCSS( + expect(typePreset.headlineMedium17).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -718,7 +717,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium20).toMatchCSS( + expect(typePreset.headlineMedium20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -729,7 +728,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium24).toMatchCSS( + expect(typePreset.headlineMedium24).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -740,7 +739,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium28).toMatchCSS( + expect(typePreset.headlineMedium28).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -751,7 +750,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium34).toMatchCSS( + expect(typePreset.headlineMedium34).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -762,7 +761,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium42).toMatchCSS( + expect(typePreset.headlineMedium42).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -773,7 +772,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium50).toMatchCSS( + expect(typePreset.headlineMedium50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -784,7 +783,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMedium64).toMatchCSS( + expect(typePreset.headlineMedium64).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -795,7 +794,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic14).toMatchCSS( + expect(typePreset.headlineMediumItalic14).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -806,7 +805,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic15).toMatchCSS( + expect(typePreset.headlineMediumItalic15).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -817,7 +816,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic17).toMatchCSS( + expect(typePreset.headlineMediumItalic17).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -828,7 +827,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic20).toMatchCSS( + expect(typePreset.headlineMediumItalic20).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.25rem; @@ -839,7 +838,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic24).toMatchCSS( + expect(typePreset.headlineMediumItalic24).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.5rem; @@ -850,7 +849,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic28).toMatchCSS( + expect(typePreset.headlineMediumItalic28).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 1.75rem; @@ -861,7 +860,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic34).toMatchCSS( + expect(typePreset.headlineMediumItalic34).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.125rem; @@ -872,7 +871,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic42).toMatchCSS( + expect(typePreset.headlineMediumItalic42).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 2.625rem; @@ -883,7 +882,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic50).toMatchCSS( + expect(typePreset.headlineMediumItalic50).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 3.125rem; @@ -894,7 +893,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.headlineMediumItalic64).toMatchCSS( + expect(typePreset.headlineMediumItalic64).toMatchCSS( ` font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; font-size: 4rem; @@ -905,7 +904,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptian14).toMatchCSS( + expect(typePreset.textEgyptian14).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -916,7 +915,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptian15).toMatchCSS( + expect(typePreset.textEgyptian15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -927,7 +926,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptian17).toMatchCSS( + expect(typePreset.textEgyptian17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -938,7 +937,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBold14).toMatchCSS( + expect(typePreset.textEgyptianBold14).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -949,7 +948,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBold15).toMatchCSS( + expect(typePreset.textEgyptianBold15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -960,7 +959,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBold17).toMatchCSS( + expect(typePreset.textEgyptianBold17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -971,7 +970,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBoldItalic14).toMatchCSS( + expect(typePreset.textEgyptianBoldItalic14).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -982,7 +981,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBoldItalic15).toMatchCSS( + expect(typePreset.textEgyptianBoldItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -993,7 +992,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianBoldItalic17).toMatchCSS( + expect(typePreset.textEgyptianBoldItalic17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -1004,7 +1003,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianItalic14).toMatchCSS( + expect(typePreset.textEgyptianItalic14).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.875rem; @@ -1015,7 +1014,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianItalic15).toMatchCSS( + expect(typePreset.textEgyptianItalic15).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 0.9375rem; @@ -1026,7 +1025,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textEgyptianItalic17).toMatchCSS( + expect(typePreset.textEgyptianItalic17).toMatchCSS( ` font-family: GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif; font-size: 1.0625rem; @@ -1037,7 +1036,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans12).toMatchCSS( + expect(typePreset.textSans12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -1048,7 +1047,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans14).toMatchCSS( + expect(typePreset.textSans14).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -1059,7 +1058,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans15).toMatchCSS( + expect(typePreset.textSans15).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -1070,7 +1069,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans17).toMatchCSS( + expect(typePreset.textSans17).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -1081,7 +1080,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans20).toMatchCSS( + expect(typePreset.textSans20).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -1092,7 +1091,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans24).toMatchCSS( + expect(typePreset.textSans24).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -1103,7 +1102,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans28).toMatchCSS( + expect(typePreset.textSans28).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -1114,7 +1113,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSans34).toMatchCSS( + expect(typePreset.textSans34).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -1125,7 +1124,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold12).toMatchCSS( + expect(typePreset.textSansBold12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -1136,7 +1135,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold14).toMatchCSS( + expect(typePreset.textSansBold14).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -1147,7 +1146,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold15).toMatchCSS( + expect(typePreset.textSansBold15).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -1158,7 +1157,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold17).toMatchCSS( + expect(typePreset.textSansBold17).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -1169,7 +1168,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold20).toMatchCSS( + expect(typePreset.textSansBold20).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -1180,7 +1179,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold24).toMatchCSS( + expect(typePreset.textSansBold24).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -1191,7 +1190,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold28).toMatchCSS( + expect(typePreset.textSansBold28).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -1202,7 +1201,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansBold34).toMatchCSS( + expect(typePreset.textSansBold34).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -1213,7 +1212,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic12).toMatchCSS( + expect(typePreset.textSansItalic12).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.75rem; @@ -1224,7 +1223,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic14).toMatchCSS( + expect(typePreset.textSansItalic14).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.875rem; @@ -1235,7 +1234,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic15).toMatchCSS( + expect(typePreset.textSansItalic15).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.9375rem; @@ -1246,7 +1245,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic17).toMatchCSS( + expect(typePreset.textSansItalic17).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.0625rem; @@ -1257,7 +1256,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic20).toMatchCSS( + expect(typePreset.textSansItalic20).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.25rem; @@ -1268,7 +1267,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic24).toMatchCSS( + expect(typePreset.textSansItalic24).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.5rem; @@ -1279,7 +1278,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic28).toMatchCSS( + expect(typePreset.textSansItalic28).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.75rem; @@ -1290,7 +1289,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.textSansItalic34).toMatchCSS( + expect(typePreset.textSansItalic34).toMatchCSS( ` font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 2.125rem; @@ -1301,7 +1300,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.titlepiece42).toMatchCSS( + expect(typePreset.titlepiece42).toMatchCSS( ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 2.625rem; @@ -1312,7 +1311,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.titlepiece50).toMatchCSS( + expect(typePreset.titlepiece50).toMatchCSS( ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 3.125rem; @@ -1323,7 +1322,7 @@ describe('Typography preset CSS output', () => { `, { isFragment: true }, ); - expect(typePresetCss.titlepiece70).toMatchCSS( + expect(typePreset.titlepiece70).toMatchCSS( ` font-family: "GT Guardian Titlepiece", Georgia, serif; font-size: 4.375rem; @@ -1339,7 +1338,7 @@ describe('Typography preset CSS output', () => { describe('Typography preset object output', () => { it('should match expected output', () => { - expect(typePresetObject.headlineBold14Object).toEqual({ + expect(typePreset.headlineBold14Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1347,7 +1346,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold15Object).toEqual({ + expect(typePreset.headlineBold15Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1355,7 +1354,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold17Object).toEqual({ + expect(typePreset.headlineBold17Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1363,7 +1362,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold20Object).toEqual({ + expect(typePreset.headlineBold20Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.25rem', @@ -1371,7 +1370,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold24Object).toEqual({ + expect(typePreset.headlineBold24Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.5rem', @@ -1379,7 +1378,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold28Object).toEqual({ + expect(typePreset.headlineBold28Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.75rem', @@ -1387,7 +1386,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold34Object).toEqual({ + expect(typePreset.headlineBold34Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.125rem', @@ -1395,7 +1394,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold42Object).toEqual({ + expect(typePreset.headlineBold42Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.625rem', @@ -1403,7 +1402,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold50Object).toEqual({ + expect(typePreset.headlineBold50Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '3.125rem', @@ -1411,7 +1410,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineBold64Object).toEqual({ + expect(typePreset.headlineBold64Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '4rem', @@ -1419,7 +1418,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight14Object).toEqual({ + expect(typePreset.headlineLight14Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1427,7 +1426,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight15Object).toEqual({ + expect(typePreset.headlineLight15Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1435,7 +1434,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight17Object).toEqual({ + expect(typePreset.headlineLight17Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1443,7 +1442,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight20Object).toEqual({ + expect(typePreset.headlineLight20Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.25rem', @@ -1451,7 +1450,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight24Object).toEqual({ + expect(typePreset.headlineLight24Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.5rem', @@ -1459,7 +1458,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight28Object).toEqual({ + expect(typePreset.headlineLight28Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.75rem', @@ -1467,7 +1466,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight34Object).toEqual({ + expect(typePreset.headlineLight34Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.125rem', @@ -1475,7 +1474,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight42Object).toEqual({ + expect(typePreset.headlineLight42Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.625rem', @@ -1483,7 +1482,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight50Object).toEqual({ + expect(typePreset.headlineLight50Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '3.125rem', @@ -1491,7 +1490,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLight64Object).toEqual({ + expect(typePreset.headlineLight64Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '4rem', @@ -1499,7 +1498,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'normal', }); - expect(typePresetObject.headlineLightItalic14Object).toEqual({ + expect(typePreset.headlineLightItalic14Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1507,7 +1506,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic15Object).toEqual({ + expect(typePreset.headlineLightItalic15Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1515,7 +1514,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic17Object).toEqual({ + expect(typePreset.headlineLightItalic17Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1523,7 +1522,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic20Object).toEqual({ + expect(typePreset.headlineLightItalic20Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.25rem', @@ -1531,7 +1530,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic24Object).toEqual({ + expect(typePreset.headlineLightItalic24Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.5rem', @@ -1539,7 +1538,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic28Object).toEqual({ + expect(typePreset.headlineLightItalic28Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.75rem', @@ -1547,7 +1546,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic34Object).toEqual({ + expect(typePreset.headlineLightItalic34Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.125rem', @@ -1555,7 +1554,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic42Object).toEqual({ + expect(typePreset.headlineLightItalic42Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.625rem', @@ -1563,7 +1562,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic50Object).toEqual({ + expect(typePreset.headlineLightItalic50Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '3.125rem', @@ -1571,7 +1570,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineLightItalic64Object).toEqual({ + expect(typePreset.headlineLightItalic64Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '4rem', @@ -1579,7 +1578,7 @@ describe('Typography preset object output', () => { fontWeight: 300, fontStyle: 'italic', }); - expect(typePresetObject.headlineMedium14Object).toEqual({ + expect(typePreset.headlineMedium14Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1587,7 +1586,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium15Object).toEqual({ + expect(typePreset.headlineMedium15Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1595,7 +1594,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium17Object).toEqual({ + expect(typePreset.headlineMedium17Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1603,7 +1602,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium20Object).toEqual({ + expect(typePreset.headlineMedium20Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.25rem', @@ -1611,7 +1610,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium24Object).toEqual({ + expect(typePreset.headlineMedium24Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.5rem', @@ -1619,7 +1618,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium28Object).toEqual({ + expect(typePreset.headlineMedium28Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.75rem', @@ -1627,7 +1626,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium34Object).toEqual({ + expect(typePreset.headlineMedium34Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.125rem', @@ -1635,7 +1634,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium42Object).toEqual({ + expect(typePreset.headlineMedium42Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.625rem', @@ -1643,7 +1642,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium50Object).toEqual({ + expect(typePreset.headlineMedium50Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '3.125rem', @@ -1651,7 +1650,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMedium64Object).toEqual({ + expect(typePreset.headlineMedium64Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '4rem', @@ -1659,7 +1658,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'normal', }); - expect(typePresetObject.headlineMediumItalic14Object).toEqual({ + expect(typePreset.headlineMediumItalic14Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1667,7 +1666,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic15Object).toEqual({ + expect(typePreset.headlineMediumItalic15Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1675,7 +1674,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic17Object).toEqual({ + expect(typePreset.headlineMediumItalic17Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1683,7 +1682,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic20Object).toEqual({ + expect(typePreset.headlineMediumItalic20Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.25rem', @@ -1691,7 +1690,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic24Object).toEqual({ + expect(typePreset.headlineMediumItalic24Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.5rem', @@ -1699,7 +1698,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic28Object).toEqual({ + expect(typePreset.headlineMediumItalic28Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '1.75rem', @@ -1707,7 +1706,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic34Object).toEqual({ + expect(typePreset.headlineMediumItalic34Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.125rem', @@ -1715,7 +1714,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic42Object).toEqual({ + expect(typePreset.headlineMediumItalic42Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '2.625rem', @@ -1723,7 +1722,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic50Object).toEqual({ + expect(typePreset.headlineMediumItalic50Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '3.125rem', @@ -1731,7 +1730,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.headlineMediumItalic64Object).toEqual({ + expect(typePreset.headlineMediumItalic64Object).toEqual({ fontFamily: '"GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif', fontSize: '4rem', @@ -1739,7 +1738,7 @@ describe('Typography preset object output', () => { fontWeight: 500, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptian14Object).toEqual({ + expect(typePreset.textEgyptian14Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1747,7 +1746,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptian15Object).toEqual({ + expect(typePreset.textEgyptian15Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1755,7 +1754,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptian17Object).toEqual({ + expect(typePreset.textEgyptian17Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1763,7 +1762,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptianBold14Object).toEqual({ + expect(typePreset.textEgyptianBold14Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1771,7 +1770,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptianBold15Object).toEqual({ + expect(typePreset.textEgyptianBold15Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1779,7 +1778,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptianBold17Object).toEqual({ + expect(typePreset.textEgyptianBold17Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1787,7 +1786,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textEgyptianBoldItalic14Object).toEqual({ + expect(typePreset.textEgyptianBoldItalic14Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1795,7 +1794,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptianBoldItalic15Object).toEqual({ + expect(typePreset.textEgyptianBoldItalic15Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1803,7 +1802,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptianBoldItalic17Object).toEqual({ + expect(typePreset.textEgyptianBoldItalic17Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1811,7 +1810,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptianItalic14Object).toEqual({ + expect(typePreset.textEgyptianItalic14Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.875rem', @@ -1819,7 +1818,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptianItalic15Object).toEqual({ + expect(typePreset.textEgyptianItalic15Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '0.9375rem', @@ -1827,7 +1826,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textEgyptianItalic17Object).toEqual({ + expect(typePreset.textEgyptianItalic17Object).toEqual({ fontFamily: 'GuardianTextEgyptian, "Guardian Text Egyptian Web", Georgia, serif', fontSize: '1.0625rem', @@ -1835,7 +1834,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSans12Object).toEqual({ + expect(typePreset.textSans12Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.75rem', @@ -1843,7 +1842,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans14Object).toEqual({ + expect(typePreset.textSans14Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.875rem', @@ -1851,7 +1850,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans15Object).toEqual({ + expect(typePreset.textSans15Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.9375rem', @@ -1859,7 +1858,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans17Object).toEqual({ + expect(typePreset.textSans17Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.0625rem', @@ -1867,7 +1866,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans20Object).toEqual({ + expect(typePreset.textSans20Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.25rem', @@ -1875,7 +1874,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans24Object).toEqual({ + expect(typePreset.textSans24Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.5rem', @@ -1883,7 +1882,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans28Object).toEqual({ + expect(typePreset.textSans28Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.75rem', @@ -1891,7 +1890,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSans34Object).toEqual({ + expect(typePreset.textSans34Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '2.125rem', @@ -1899,7 +1898,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold12Object).toEqual({ + expect(typePreset.textSansBold12Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.75rem', @@ -1907,7 +1906,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold14Object).toEqual({ + expect(typePreset.textSansBold14Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.875rem', @@ -1915,7 +1914,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold15Object).toEqual({ + expect(typePreset.textSansBold15Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.9375rem', @@ -1923,7 +1922,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold17Object).toEqual({ + expect(typePreset.textSansBold17Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.0625rem', @@ -1931,7 +1930,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold20Object).toEqual({ + expect(typePreset.textSansBold20Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.25rem', @@ -1939,7 +1938,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold24Object).toEqual({ + expect(typePreset.textSansBold24Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.5rem', @@ -1947,7 +1946,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold28Object).toEqual({ + expect(typePreset.textSansBold28Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.75rem', @@ -1955,7 +1954,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansBold34Object).toEqual({ + expect(typePreset.textSansBold34Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '2.125rem', @@ -1963,7 +1962,7 @@ describe('Typography preset object output', () => { fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.textSansItalic12Object).toEqual({ + expect(typePreset.textSansItalic12Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.75rem', @@ -1971,7 +1970,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic14Object).toEqual({ + expect(typePreset.textSansItalic14Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.875rem', @@ -1979,7 +1978,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic15Object).toEqual({ + expect(typePreset.textSansItalic15Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '0.9375rem', @@ -1987,7 +1986,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic17Object).toEqual({ + expect(typePreset.textSansItalic17Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.0625rem', @@ -1995,7 +1994,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic20Object).toEqual({ + expect(typePreset.textSansItalic20Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.25rem', @@ -2003,7 +2002,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic24Object).toEqual({ + expect(typePreset.textSansItalic24Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.5rem', @@ -2011,7 +2010,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic28Object).toEqual({ + expect(typePreset.textSansItalic28Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '1.75rem', @@ -2019,7 +2018,7 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.textSansItalic34Object).toEqual({ + expect(typePreset.textSansItalic34Object).toEqual({ fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', fontSize: '2.125rem', @@ -2027,21 +2026,21 @@ describe('Typography preset object output', () => { fontWeight: 400, fontStyle: 'italic', }); - expect(typePresetObject.titlepiece42Object).toEqual({ + expect(typePreset.titlepiece42Object).toEqual({ fontFamily: '"GT Guardian Titlepiece", Georgia, serif', fontSize: '2.625rem', lineHeight: 1.15, fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.titlepiece50Object).toEqual({ + expect(typePreset.titlepiece50Object).toEqual({ fontFamily: '"GT Guardian Titlepiece", Georgia, serif', fontSize: '3.125rem', lineHeight: 1.15, fontWeight: 700, fontStyle: 'normal', }); - expect(typePresetObject.titlepiece70Object).toEqual({ + expect(typePreset.titlepiece70Object).toEqual({ fontFamily: '"GT Guardian Titlepiece", Georgia, serif', fontSize: '4.375rem', lineHeight: 1.15, diff --git a/libs/@guardian/source/src/foundations/typography/stories/TypographyPresets.tsx b/libs/@guardian/source/src/foundations/typography/stories/TypographyPresets.tsx index c842caddf..7f3025f41 100644 --- a/libs/@guardian/source/src/foundations/typography/stories/TypographyPresets.tsx +++ b/libs/@guardian/source/src/foundations/typography/stories/TypographyPresets.tsx @@ -1,11 +1,8 @@ import { css } from '@emotion/react'; -import { typographyPresets } from '@guardian/design-tokens'; -import * as presets from '../../__generated__/typography/css'; -import { palette } from '../../colour/palette'; +import * as presets from '../../__generated__/typography'; +import { palette } from '../../palette/palette'; import { space } from '../../space/space'; -type Preset = keyof typeof typographyPresets; - const listCss = css` list-style: none; padding: 0; @@ -42,10 +39,24 @@ const propertiesCss = css` } `; +// Filter out object style versions of presets +const filteredPresets = Object.entries(presets).filter( + ([preset]) => !preset.endsWith('Object'), +); + export const TypographyPresets = () => (
    - {Object.entries(presets).map(([preset, styles], index) => { - const token = typographyPresets[preset as Preset]; + {filteredPresets.map(([preset, styles], index) => { + const presetStyles = styles as string; + + const fontFamily = presetStyles + .match(/font-family: (.+);/)?.[1] + ?.replace(/"/g, '') + .split(',')[0]; + const fontWeight = presetStyles.match(/font-weight: (\d+);/)?.[1]; + const fontSize = presetStyles.match(/font-size: (.+)rem;/)?.[1] ?? 0; + const lineHeight = presetStyles.match(/line-height: (.+);/)?.[1] ?? 0; + return (
  • {preset} @@ -54,16 +65,16 @@ export const TypographyPresets = () => (
    Family
    - {token.fontFamily[0]} ({token.fontWeight}) + {fontFamily} ({fontWeight})
    Size
    -
    {token.fontSize}
    +
    {(fontSize as number) * 16}px
    Line height
    -
    {token.lineHeight}
    +
    {lineHeight}
    { it('should calculate a value with a rem unit from a pixel value', () => { @@ -12,44 +7,3 @@ describe('pxToRem', () => { expect(result).toBe('1.0625rem'); }); }); - -describe('pxStringToNumber', () => { - it('should convert a value with a px unit to a unitless number', () => { - const value = '16px'; - const result = pxStringToNumber(value); - expect(result).toBe(16); - expect(typeof result).toBe('number'); - }); -}); - -describe('pxStringToRem', () => { - it('should convert a value with a px unit to a value with a rem unit', () => { - const value = '20px'; - const result = pxStringToRem(value); - expect(result).toBe('1.25rem'); - expect(typeof result).toBe('string'); - }); -}); - -describe('fontArrayToString', () => { - it('should convert an array of font names to a valid `font-family` value', () => { - const value = ['GuardianTextEgyptian', 'Georgia', 'serif']; - const result = fontArrayToString(value); - expect(result).toBe('GuardianTextEgyptian, Georgia, serif'); - }); - - it('should quote any font names containing spaces', () => { - const value = [ - 'GuardianTextSans', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - 'Lucida Grande', - 'sans-serif', - ]; - const result = fontArrayToString(value); - expect(result).toBe( - 'GuardianTextSans, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif', - ); - }); -}); diff --git a/libs/@guardian/source/src/foundations/utils/convert-value.ts b/libs/@guardian/source/src/foundations/utils/convert-value.ts index 4ec2f9576..f1baa2e39 100644 --- a/libs/@guardian/source/src/foundations/utils/convert-value.ts +++ b/libs/@guardian/source/src/foundations/utils/convert-value.ts @@ -1,16 +1,4 @@ -export type RemString = `${N}rem`; -export type PxString = `${N}px`; - export const rootPixelFontSize = 16; -export const pxToRem = (px: number): RemString => +export const pxToRem = (px: number): `${number}rem` => `${px / rootPixelFontSize}rem`; - -export const pxStringToRem = (px: PxString): RemString => - pxToRem(pxStringToNumber(px)); - -export const pxStringToNumber = (px: PxString): N => - Number(px.slice(0, -2)) as N; - -export const fontArrayToString = (fonts: readonly string[]): string => - fonts.map((name) => (name.includes(' ') ? `"${name}"` : name)).join(', '); diff --git a/libs/@guardian/source/src/foundations/utils/resets.ts b/libs/@guardian/source/src/foundations/utils/resets.ts index 47ad824da..090906288 100644 --- a/libs/@guardian/source/src/foundations/utils/resets.ts +++ b/libs/@guardian/source/src/foundations/utils/resets.ts @@ -1,4 +1,4 @@ -import { palette } from '../colour/palette'; +import { palette } from '../palette/palette'; //////////////////////////// // Element specific resets diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6e515417e..be87543a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -360,28 +360,6 @@ importers: specifier: 0.14.4 version: 0.14.4 - libs/@guardian/design-tokens: - dependencies: - tslib: - specifier: ^2.5.3 - version: 2.6.2 - devDependencies: - '@cobalt-ui/cli': - specifier: 1.11.0 - version: 1.11.0 - '@cobalt-ui/core': - specifier: 1.11.0 - version: 1.11.0 - '@cobalt-ui/plugin-css': - specifier: 1.7.0 - version: 1.7.0(@cobalt-ui/cli@1.11.0) - '@guardian/cobalt-plugin-ts': - specifier: workspace:* - version: link:../cobalt-plugin-ts - wireit: - specifier: 0.14.4 - version: 0.14.4 - libs/@guardian/eslint-config: dependencies: eslint-config-prettier: @@ -585,12 +563,24 @@ importers: '@babel/core': specifier: 7.25.2 version: 7.25.2 + '@cobalt-ui/cli': + specifier: 1.11.0 + version: 1.11.0 + '@cobalt-ui/core': + specifier: 1.11.0 + version: 1.11.0 + '@cobalt-ui/plugin-css': + specifier: 1.7.0 + version: 1.7.0(@cobalt-ui/cli@1.11.0) + '@cobalt-ui/plugin-js': + specifier: 1.4.3 + version: 1.4.3(@cobalt-ui/cli@1.11.0) + '@cobalt-ui/utils': + specifier: 1.2.2 + version: 1.2.2 '@emotion/react': specifier: 11.11.3 version: 11.11.3(@types/react@18.2.11)(react@18.2.0) - '@guardian/design-tokens': - specifier: workspace:* - version: link:../design-tokens '@guardian/libs': specifier: 18.0.0 version: link:../libs