New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@guardian/src-foundations

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@guardian/src-foundations - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0-rc.0

breakpoints.d.ts

		@@ -1,2 +0,2 @@
		export declare type Breakpoint = "mobile" \| "mobileMedium" \| "mobileLandscape" \| "phablet" \| "tablet" \| "desktop" \| "leftCol" \| "wide";
		export declare type Breakpoint = 'mobile' \| 'mobileMedium' \| 'mobileLandscape' \| 'phablet' \| 'tablet' \| 'desktop' \| 'leftCol' \| 'wide';
		export declare const breakpoints: {
		@@ -3,0 +3,0 @@ mobile: number;

160

foundations.esm.js

		@@ -6,80 +6,80 @@ // The theme file is based on the specification at https://system-ui.com/theme
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -93,3 +93,3 @@ };
		var tweakpoints = [320, 375, 480, 660];
		var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
		var transitions = ['.2s cubic-bezier(.64, .57, .67, 1.53)', '.3s ease-in-out', '.65s ease-in-out'];

		@@ -216,6 +216,6 @@ var transitions$1 = {
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -229,5 +229,5 @@ inputChecked: brand[500]
		ctaPrimary: neutral[100],
		ctaPrimaryHover: "#E0E0E0",
		ctaPrimaryHover: '#E0E0E0',
		ctaSecondary: brand[600],
		ctaSecondaryHover: "#234B8A",
		ctaSecondaryHover: '#234B8A',
		ctaTertiaryHover: brand[300]
		@@ -239,6 +239,6 @@ };
		ctaPrimary: neutral[7],
		ctaPrimaryHover: "#454545",
		ctaPrimaryHover: '#454545',
		ctaSecondary: brandAlt[200],
		ctaSecondaryHover: "#F2AE00",
		ctaTertiaryHover: "#FFD213"
		ctaSecondaryHover: '#F2AE00',
		ctaTertiaryHover: '#FFD213'
		};
		@@ -245,0 +245,0 @@

160

foundations.js

		@@ -10,80 +10,80 @@ 'use strict';
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -97,3 +97,3 @@ };
		var tweakpoints = [320, 375, 480, 660];
		var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
		var transitions = ['.2s cubic-bezier(.64, .57, .67, 1.53)', '.3s ease-in-out', '.65s ease-in-out'];

		@@ -220,6 +220,6 @@ var transitions$1 = {
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -233,5 +233,5 @@ inputChecked: brand[500]
		ctaPrimary: neutral[100],
		ctaPrimaryHover: "#E0E0E0",
		ctaPrimaryHover: '#E0E0E0',
		ctaSecondary: brand[600],
		ctaSecondaryHover: "#234B8A",
		ctaSecondaryHover: '#234B8A',
		ctaTertiaryHover: brand[300]
		@@ -243,6 +243,6 @@ };
		ctaPrimary: neutral[7],
		ctaPrimaryHover: "#454545",
		ctaPrimaryHover: '#454545',
		ctaSecondary: brandAlt[200],
		ctaSecondaryHover: "#F2AE00",
		ctaTertiaryHover: "#FFD213"
		ctaSecondaryHover: '#F2AE00',
		ctaTertiaryHover: '#FFD213'
		};
		@@ -249,0 +249,0 @@

index.d.ts

		@@ -1,5 +0,5 @@
		export * from "./animation";
		export * from "./breakpoints";
		export * from "./palette";
		export * from "./space";
		export * from './animation';
		export * from './breakpoints';
		export * from './palette';
		export * from './space';
		export declare const palette: {
		@@ -6,0 +6,0 @@ background: {

mq/cjs/index.d.ts

		@@ -1,3 +0,3 @@
		import { breakpoints } from "../index";
		declare type Breakpoint = "mobile" \| "mobileMedium" \| "mobileLandscape" \| "phablet" \| "tablet" \| "desktop" \| "leftCol" \| "wide";
		import { breakpoints } from '../index';
		declare type Breakpoint = 'mobile' \| 'mobileMedium' \| 'mobileLandscape' \| 'phablet' \| 'tablet' \| 'desktop' \| 'leftCol' \| 'wide';
		declare type BreakpointMap = {
		@@ -4,0 +4,0 @@ [key in Breakpoint]: string;

mq/index.d.ts

		@@ -1,3 +0,3 @@
		import { breakpoints } from "../index";
		declare type Breakpoint = "mobile" \| "mobileMedium" \| "mobileLandscape" \| "phablet" \| "tablet" \| "desktop" \| "leftCol" \| "wide";
		import { breakpoints } from '../index';
		declare type Breakpoint = 'mobile' \| 'mobileMedium' \| 'mobileLandscape' \| 'phablet' \| 'tablet' \| 'desktop' \| 'leftCol' \| 'wide';
		declare type BreakpointMap = {
		@@ -4,0 +4,0 @@ [key in Breakpoint]: string;

120

package.json

		{
		"name": "@guardian/src-foundations",
		"version": "3.1.0",
		"license": "Apache-2.0",
		"main": "foundations.js",
		"module": "foundations.esm.js",
		"repository": {
		"type": "git",
		"url": "https://github.com/guardian/source.git"
		},
		"scripts": {
		"build": "yarn clean && tsc && rollup --config && yarn copy:types",
		"watch": "yarn clean && tsc && rollup --config --watch",
		"clean": "rm -rf accessibility mq palette size themes typography utils foundations.js foundations.esm.js .d.ts tsconfig.tsbuildinfo src/.d.ts",
		"copy:types": "ts-node --script-mode scripts/copy-type-definitions --esModuleInterop",
		"publish:public": "yarn publish --access public",
		"prepublishOnly": "yarn build",
		"verbump:major": "yarn version --major --no-git-tag-version",
		"verbump:minor": "yarn version --minor --no-git-tag-version",
		"verbump:preminor": "yarn version --preminor --preid rc --no-git-tag-version",
		"verbump:premajor": "yarn version --premajor --preid rc --no-git-tag-version",
		"verbump:patch": "yarn version --patch --no-git-tag-version",
		"verbump:prerelease": "yarn version --prerelease --preid rc --no-git-tag-version"
		},
		"files": [
		"mq/**",
		"accessibility/**",
		"palette/**",
		"size/**",
		"themes/**",
		"types/**",
		"typography/**",
		"utils/**",
		"*.d.ts",
		"foundations.esm.js",
		"src/animation.ts",
		"src/breakpoints.ts",
		"src/index.ts",
		"src/size.ts",
		"src/space.ts",
		"src/theme.ts",
		"src/accessibility/index.ts",
		"src/mq/index.ts",
		"src/palette/**",
		"src/size/**",
		"src/themes/**",
		"src/typography/**",
		"src/utils/**"
		],
		"devDependencies": {
		"@babel/core": "^7.12.3",
		"@babel/plugin-proposal-class-properties": "^7.12.1",
		"@babel/preset-env": "^7.10.0",
		"@babel/preset-react": "^7.10.0",
		"@babel/preset-typescript": "^7.9.0",
		"cpy": "^8.1.1",
		"rollup": "^1.19.4",
		"rollup-plugin-babel": "^4.3.3",
		"rollup-plugin-node-resolve": "^5.2.0",
		"typescript": "^4.1.3"
		}
		"name": "@guardian/src-foundations",
		"version": "3.2.0-rc.0",
		"repository": {
		"type": "git",
		"url": "https://github.com/guardian/source.git"
		},
		"license": "Apache-2.0",
		"main": "foundations.js",
		"module": "foundations.esm.js",
		"files": [
		"mq/**",
		"accessibility/**",
		"palette/**",
		"size/**",
		"themes/**",
		"types/**",
		"typography/**",
		"utils/**",
		"*.d.ts",
		"foundations.esm.js",
		"src/animation.ts",
		"src/breakpoints.ts",
		"src/index.ts",
		"src/size.ts",
		"src/space.ts",
		"src/theme.ts",
		"src/accessibility/index.ts",
		"src/mq/index.ts",
		"src/palette/**",
		"src/size/**",
		"src/themes/**",
		"src/typography/**",
		"src/utils/**"
		],
		"scripts": {
		"build": "yarn clean && tsc && rollup --config && yarn copy:types",
		"clean": "rm -rf accessibility mq palette size themes typography utils foundations.js foundations.esm.js .d.ts tsconfig.tsbuildinfo src/.d.ts",
		"copy:types": "ts-node --script-mode scripts/copy-type-definitions --esModuleInterop",
		"prepublishOnly": "yarn build",
		"publish:public": "yarn publish --access public",
		"verbump:major": "yarn version --major --no-git-tag-version",
		"verbump:minor": "yarn version --minor --no-git-tag-version",
		"verbump:patch": "yarn version --patch --no-git-tag-version",
		"verbump:premajor": "yarn version --premajor --preid rc --no-git-tag-version",
		"verbump:preminor": "yarn version --preminor --preid rc --no-git-tag-version",
		"verbump:prerelease": "yarn version --prerelease --preid rc --no-git-tag-version",
		"watch": "yarn clean && tsc && rollup --config --watch"
		},
		"devDependencies": {
		"@babel/core": "^7.12.10",
		"@babel/plugin-proposal-class-properties": "^7.12.1",
		"@babel/preset-env": "^7.10.0",
		"@babel/preset-react": "^7.10.0",
		"@babel/preset-typescript": "^7.9.0",
		"cpy": "^8.1.1",
		"rollup": "^1.19.4",
		"rollup-plugin-babel": "^4.3.3",
		"rollup-plugin-node-resolve": "^5.2.0",
		"typescript": "^4.1.3"
		}
		}

palette/background/index.d.ts

		@@ -1,3 +0,3 @@
		export { background } from "./default";
		export { brandBackground } from "./brand";
		export { brandAltBackground } from "./brand-alt";
		export { background } from './default';
		export { brandBackground } from './brand';
		export { brandAltBackground } from './brand-alt';

palette/border/index.d.ts

		@@ -1,3 +0,3 @@
		export { border } from "./default";
		export { brandBorder } from "./brand";
		export { brandAltBorder } from "./brand-alt";
		export { border } from './default';
		export { brandBorder } from './brand';
		export { brandAltBorder } from './brand-alt';

palette/cjs/background/index.d.ts

		@@ -1,3 +0,3 @@
		export { background } from "./default";
		export { brandBackground } from "./brand";
		export { brandAltBackground } from "./brand-alt";
		export { background } from './default';
		export { brandBackground } from './brand';
		export { brandAltBackground } from './brand-alt';

palette/cjs/border/index.d.ts

		@@ -1,3 +0,3 @@
		export { border } from "./default";
		export { brandBorder } from "./brand";
		export { brandAltBorder } from "./brand-alt";
		export { border } from './default';
		export { brandBorder } from './brand';
		export { brandAltBorder } from './brand-alt';

palette/cjs/index.d.ts

		@@ -1,5 +0,5 @@
		export * from "./global";
		export { background, brandBackground, brandAltBackground } from "./background";
		export { border, brandBorder, brandAltBorder } from "./border";
		export { line, brandLine, brandAltLine } from "./line";
		export { text, brandText, brandAltText } from "./text";
		export * from './global';
		export { background, brandBackground, brandAltBackground } from './background';
		export { border, brandBorder, brandAltBorder } from './border';
		export { line, brandLine, brandAltLine } from './line';
		export { text, brandText, brandAltText } from './text';

158

palette/cjs/index.js

		@@ -10,80 +10,80 @@ 'use strict';
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -195,6 +195,6 @@ };
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -208,5 +208,5 @@ inputChecked: brand[500]
		ctaPrimary: neutral[100],
		ctaPrimaryHover: "#E0E0E0",
		ctaPrimaryHover: '#E0E0E0',
		ctaSecondary: brand[600],
		ctaSecondaryHover: "#234B8A",
		ctaSecondaryHover: '#234B8A',
		ctaTertiaryHover: brand[300]
		@@ -218,6 +218,6 @@ };
		ctaPrimary: neutral[7],
		ctaPrimaryHover: "#454545",
		ctaPrimaryHover: '#454545',
		ctaSecondary: brandAlt[200],
		ctaSecondaryHover: "#F2AE00",
		ctaTertiaryHover: "#FFD213"
		ctaSecondaryHover: '#F2AE00',
		ctaTertiaryHover: '#FFD213'
		};
		@@ -224,0 +224,0 @@

palette/cjs/line/index.d.ts

		@@ -1,3 +0,3 @@
		export { line } from "./default";
		export { brandLine } from "./brand";
		export { brandAltLine } from "./brand-alt";
		export { line } from './default';
		export { brandLine } from './brand';
		export { brandAltLine } from './brand-alt';

palette/cjs/text/index.d.ts

		@@ -1,3 +0,3 @@
		export { text } from "./default";
		export { brandText } from "./brand";
		export { brandAltText } from "./brand-alt";
		export { text } from './default';
		export { brandText } from './brand';
		export { brandAltText } from './brand-alt';

palette/index.d.ts

		@@ -1,5 +0,5 @@
		export * from "./global";
		export { background, brandBackground, brandAltBackground } from "./background";
		export { border, brandBorder, brandAltBorder } from "./border";
		export { line, brandLine, brandAltLine } from "./line";
		export { text, brandText, brandAltText } from "./text";
		export * from './global';
		export { background, brandBackground, brandAltBackground } from './background';
		export { border, brandBorder, brandAltBorder } from './border';
		export { line, brandLine, brandAltLine } from './line';
		export { text, brandText, brandAltText } from './text';

158

palette/index.js

		@@ -6,80 +6,80 @@ // The theme file is based on the specification at https://system-ui.com/theme
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -191,6 +191,6 @@ };
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -204,5 +204,5 @@ inputChecked: brand[500]
		ctaPrimary: neutral[100],
		ctaPrimaryHover: "#E0E0E0",
		ctaPrimaryHover: '#E0E0E0',
		ctaSecondary: brand[600],
		ctaSecondaryHover: "#234B8A",
		ctaSecondaryHover: '#234B8A',
		ctaTertiaryHover: brand[300]
		@@ -214,6 +214,6 @@ };
		ctaPrimary: neutral[7],
		ctaPrimaryHover: "#454545",
		ctaPrimaryHover: '#454545',
		ctaSecondary: brandAlt[200],
		ctaSecondaryHover: "#F2AE00",
		ctaTertiaryHover: "#FFD213"
		ctaSecondaryHover: '#F2AE00',
		ctaTertiaryHover: '#FFD213'
		};
		@@ -220,0 +220,0 @@

palette/line/index.d.ts

		@@ -1,3 +0,3 @@
		export { line } from "./default";
		export { brandLine } from "./brand";
		export { brandAltLine } from "./brand-alt";
		export { line } from './default';
		export { brandLine } from './brand';
		export { brandAltLine } from './brand-alt';

palette/text/index.d.ts

		@@ -1,3 +0,3 @@
		export { text } from "./default";
		export { brandText } from "./brand";
		export { brandAltText } from "./brand-alt";
		export { text } from './default';
		export { brandText } from './brand';
		export { brandAltText } from './brand-alt';

README.md

		@@ -16,7 +16,7 @@ # Foundations
		```ts
		import { background } from "@guardian/src-foundations/palette"
		import { background } from '@guardian/src-foundations/palette';

		const backgroundColor = css`
		background-color: ${background.primary};
		`
		`;
		```
		@@ -27,15 +27,15 @@
		```ts
		import { headline, body, textSans } from "@guardian/src-foundations/typography"
		import { headline, body, textSans } from '@guardian/src-foundations/typography';

		const h1 = css`
		${headline.large({ fontWeight: "bold" })};
		`
		${headline.large({ fontWeight: 'bold' })};
		`;

		const p = css`
		${body.main()};
		`
		`;

		const copyright = css`
		${textSans.xsmall()};
		`
		`;
		```
		@@ -46,3 +46,3 @@
		```ts
		import { from, until, between } from "@guardian/src-foundations/mq"
		import { from, until, between } from '@guardian/src-foundations/mq';

		@@ -63,3 +63,3 @@ const styles = css`
		}
		`
		`;
		```
		@@ -70,3 +70,3 @@
		```ts
		import { width, height } from "@guardian/src-foundations/size"
		import { width, height } from '@guardian/src-foundations/size';

		@@ -76,3 +76,3 @@ const checkbox = css`
		height: ${height.inputXsmall}px;
		`
		`;
		```
		@@ -85,7 +85,7 @@
		```ts
		import { visuallyHidden } from "@guardian/src-foundations/accessibility"
		import { visuallyHidden } from '@guardian/src-foundations/accessibility';

		const label = css`
		${visuallyHidden};
		`
		`;
		```
		@@ -98,3 +98,3 @@
		```ts
		import { focusHalo } from "@guardian/src-foundations/accessibility"
		import { focusHalo } from '@guardian/src-foundations/accessibility';

		@@ -105,3 +105,3 @@ const input = css`
		height: 44px;
		`
		`;
		```
		@@ -116,6 +116,6 @@
		```tsx
		import { descriptionId } from "@guardian/src-foundations/accessibility"
		import { descriptionId } from '@guardian/src-foundations/accessibility';

		const Form = () => {
		const id = "first_name"
		const id = 'first_name';
		return (
		@@ -126,4 +126,4 @@ <form>
		</form>
		)
		}
		);
		};
		```

size/cjs/index.d.ts

		@@ -1,2 +0,2 @@
		import { size, iconSize } from "./global";
		import { size, iconSize } from './global';
		declare const height: {
		@@ -3,0 +3,0 @@ ctaMedium: number;

size/index.d.ts

		@@ -1,2 +0,2 @@
		import { size, iconSize } from "./global";
		import { size, iconSize } from './global';
		declare const height: {
		@@ -3,0 +3,0 @@ ctaMedium: number;

src/accessibility/index.ts

		@@ -1,2 +0,2 @@
		import { border } from "@guardian/src-foundations/palette"
		import { border } from '@guardian/src-foundations/palette';

		@@ -10,3 +10,3 @@ const visuallyHidden = `
		left: 0;
		`
		`;

		@@ -18,10 +18,10 @@ const focusHalo = `
		}
		`
		`;

		const descriptionId = (id: string) => `${id}_description`
		const descriptionId = (id: string) => `${id}_description`;

		let sourceIdIndex = 0
		let sourceIdIndex = 0;

		const generateSourceId = () => `src-component-${sourceIdIndex++}`
		const generateSourceId = () => `src-component-${sourceIdIndex++}`;

		export { visuallyHidden, focusHalo, descriptionId, generateSourceId }
		export { visuallyHidden, focusHalo, descriptionId, generateSourceId };

src/animation.ts

		@@ -1,2 +0,2 @@
		import { transitions as _transitions } from "./theme"
		import { transitions as _transitions } from './theme';

		@@ -7,4 +7,4 @@ const transitions = {
		long: _transitions[2],
		}
		};

		export { transitions }
		export { transitions };

src/breakpoints.ts

		@@ -1,12 +0,12 @@
		import { breakpoints as _breakpoints, tweakpoints } from "./theme"
		import { breakpoints as _breakpoints, tweakpoints } from './theme';

		export type Breakpoint =
		\| "mobile"
		\| "mobileMedium"
		\| "mobileLandscape"
		\| "phablet"
		\| "tablet"
		\| "desktop"
		\| "leftCol"
		\| "wide"
		\| 'mobile'
		\| 'mobileMedium'
		\| 'mobileLandscape'
		\| 'phablet'
		\| 'tablet'
		\| 'desktop'
		\| 'leftCol'
		\| 'wide';

		@@ -22,2 +22,2 @@ export const breakpoints = {
		wide: _breakpoints[3],
		}
		};

src/index.ts

		@@ -1,5 +0,5 @@
		export * from "./animation"
		export * from "./breakpoints"
		export * from "./palette"
		export * from "./space"
		export * from './animation';
		export * from './breakpoints';
		export * from './palette';
		export * from './space';

		@@ -42,3 +42,3 @@ // Avoid importing the entire palette directly in your application. Prefer using the named exports
		labs,
		} from "./palette"
		} from './palette';

		@@ -73,2 +73,2 @@ export const palette = {
		labs,
		}
		};

src/mq/index.ts

		@@ -1,2 +0,2 @@
		import { breakpoints } from "../index"
		import { breakpoints } from '../index';

		@@ -6,22 +6,22 @@ // Duplicated from breakpoints.ts because of some issue importing directly
		type Breakpoint =
		\| "mobile"
		\| "mobileMedium"
		\| "mobileLandscape"
		\| "phablet"
		\| "tablet"
		\| "desktop"
		\| "leftCol"
		\| "wide"
		\| 'mobile'
		\| 'mobileMedium'
		\| 'mobileLandscape'
		\| 'phablet'
		\| 'tablet'
		\| 'desktop'
		\| 'leftCol'
		\| 'wide';

		type BreakpointMap = {
		[key in Breakpoint]: string
		}
		[key in Breakpoint]: string;
		};

		const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`
		const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`;

		const maxWidth = (until: number): string =>
		`@media (max-width: ${`${until - 1}px`})`
		`@media (max-width: ${`${until - 1}px`})`;

		const minWidthMaxWidth = (from: number, until: number): string =>
		`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`
		`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;

		@@ -38,3 +38,3 @@ // e.g. from.*
		wide: minWidth(breakpoints.wide),
		}
		};

		@@ -51,3 +51,3 @@ // e.g. until.*
		wide: maxWidth(breakpoints.wide),
		}
		};

		@@ -148,4 +148,4 @@ // e.g. between..and.
		},
		}
		};

		export { from, until, between, breakpoints, Breakpoint }
		export { from, until, between, breakpoints, Breakpoint };

src/palette/background/brand-alt.ts

		@@ -1,2 +0,2 @@
		import { neutral, brandAlt } from "../global"
		import { neutral, brandAlt } from '../global';

		@@ -6,6 +6,6 @@ export const brandAltBackground = {
		ctaPrimary: neutral[7],
		ctaPrimaryHover: "#454545",
		ctaPrimaryHover: '#454545',
		ctaSecondary: brandAlt[200],
		ctaSecondaryHover: "#F2AE00",
		ctaTertiaryHover: "#FFD213",
		}
		ctaSecondaryHover: '#F2AE00',
		ctaTertiaryHover: '#FFD213',
		};

src/palette/background/brand.ts

		@@ -1,2 +0,2 @@
		import { neutral, brand } from "../global"
		import { neutral, brand } from '../global';

		@@ -7,6 +7,6 @@ export const brandBackground = {
		ctaPrimary: neutral[100],
		ctaPrimaryHover: "#E0E0E0",
		ctaPrimaryHover: '#E0E0E0',
		ctaSecondary: brand[600],
		ctaSecondaryHover: "#234B8A",
		ctaSecondaryHover: '#234B8A',
		ctaTertiaryHover: brand[300],
		}
		};

src/palette/background/default.ts

		@@ -1,2 +0,2 @@
		import { neutral, brand } from "../global"
		import { neutral, brand } from '../global';

		@@ -8,8 +8,8 @@ export const background = {
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		inputChecked: brand[500],
		}
		};

src/palette/background/index.ts

		@@ -1,3 +0,3 @@
		export { background } from "./default"
		export { brandBackground } from "./brand"
		export { brandAltBackground } from "./brand-alt"
		export { background } from './default';
		export { brandBackground } from './brand';
		export { brandAltBackground } from './brand-alt';

src/palette/border/brand-alt.ts

		@@ -1,5 +0,5 @@
		import { neutral } from "../global"
		import { neutral } from '../global';

		export const brandAltBorder = {
		ctaTertiary: neutral[7],
		}
		};

src/palette/border/brand.ts

		@@ -1,2 +0,7 @@
		import { neutral, success as _success, error as _error, brand } from "../global"
		import {
		neutral,
		success as _success,
		error as _error,
		brand,
		} from '../global';

		@@ -12,2 +17,2 @@ export const brandBorder = {
		inputHover: neutral[100],
		}
		};

src/palette/border/default.ts

		@@ -7,3 +7,3 @@ import {
		sport,
		} from "../global"
		} from '../global';

		@@ -21,2 +21,2 @@ export const border = {
		focusHalo: sport[500],
		}
		};

src/palette/border/index.ts

		@@ -1,3 +0,3 @@
		export { border } from "./default"
		export { brandBorder } from "./brand"
		export { brandAltBorder } from "./brand-alt"
		export { border } from './default';
		export { brandBorder } from './brand';
		export { brandAltBorder } from './brand-alt';

src/palette/global.ts

		@@ -22,3 +22,3 @@ // Global colour names that correspond to https://www.theguardian.design/2a1e5182b/p/938810-colour/b/587ef3

		import { colors } from "../theme"
		import { colors } from '../theme';

		@@ -32,3 +32,3 @@ export const brand = {
		800: colors.blues[12],
		}
		};
		export const brandAlt = {
		@@ -38,3 +38,3 @@ 200: colors.yellows[0],
		400: colors.yellows[2],
		}
		};
		export const neutral = {
		@@ -51,11 +51,11 @@ 0: colors.grays[0],
		100: colors.grays[9],
		}
		};
		export const error = {
		400: colors.reds[3],
		500: colors.reds[5],
		}
		};
		export const success = {
		400: colors.greens[1],
		500: colors.greens[2],
		}
		};
		export const news = {
		@@ -70,3 +70,3 @@ 100: colors.reds[0],
		800: colors.reds[7],
		}
		};
		export const opinion = {
		@@ -80,3 +80,3 @@ 100: colors.oranges[0],
		800: colors.oranges[6],
		}
		};
		export const sport = {
		@@ -90,3 +90,3 @@ 100: colors.blues[0],
		800: colors.blues[6],
		}
		};
		export const culture = {
		@@ -102,3 +102,3 @@ 50: colors.browns[0],
		800: colors.browns[8],
		}
		};
		export const lifestyle = {
		@@ -112,3 +112,3 @@ 100: colors.pinks[0],
		800: colors.pinks[6],
		}
		};
		export const labs = {
		@@ -118,3 +118,3 @@ 200: colors.greens[3],
		400: colors.greens[5],
		}
		};

		@@ -130,2 +130,2 @@ export const specialReport = {
		800: colors.grays[17],
		}
		};

src/palette/index.ts

		@@ -1,5 +0,5 @@
		export * from "./global"
		export { background, brandBackground, brandAltBackground } from "./background"
		export { border, brandBorder, brandAltBorder } from "./border"
		export { line, brandLine, brandAltLine } from "./line"
		export { text, brandText, brandAltText } from "./text"
		export * from './global';
		export { background, brandBackground, brandAltBackground } from './background';
		export { border, brandBorder, brandAltBorder } from './border';
		export { line, brandLine, brandAltLine } from './line';
		export { text, brandText, brandAltText } from './text';

src/palette/line/brand-alt.ts

		@@ -1,5 +0,5 @@
		import { neutral } from "../global"
		import { neutral } from '../global';

		export const brandAltLine = {
		primary: neutral[7],
		}
		};

src/palette/line/brand.ts

		@@ -1,5 +0,5 @@
		import { brand } from "../global"
		import { brand } from '../global';

		export const brandLine = {
		primary: brand[600],
		}
		};

src/palette/line/default.ts

		@@ -1,5 +0,5 @@
		import { neutral } from "../global"
		import { neutral } from '../global';

		export const line = {
		primary: neutral[86],
		}
		};

src/palette/line/index.ts

		@@ -1,3 +0,3 @@
		export { line } from "./default"
		export { brandLine } from "./brand"
		export { brandAltLine } from "./brand-alt"
		export { line } from './default';
		export { brandLine } from './brand';
		export { brandAltLine } from './brand-alt';

src/palette/text/brand-alt.ts

		@@ -1,2 +0,2 @@
		import { neutral } from "../global"
		import { neutral } from '../global';

		@@ -10,2 +10,2 @@ export const brandAltText = {
		anchorPrimary: neutral[7],
		}
		};

src/palette/text/brand.ts

		@@ -7,3 +7,3 @@ import {
		brandAlt,
		} from "../global"
		} from '../global';

		@@ -23,2 +23,2 @@ export const brandText = {
		inputLabelSupporting: brand[800],
		}
		};

src/palette/text/default.ts

		@@ -7,3 +7,3 @@ import {
		news,
		} from "../global"
		} from '../global';

		@@ -28,2 +28,2 @@ export const text = {
		newsInverse: news[550],
		}
		};

src/palette/text/index.ts

		@@ -1,3 +0,3 @@
		export { text } from "./default"
		export { brandText } from "./brand"
		export { brandAltText } from "./brand-alt"
		export { text } from './default';
		export { brandText } from './brand';
		export { brandAltText } from './brand-alt';

src/size/global.ts

		@@ -1,3 +0,3 @@
		import { size as _size } from "../theme"
		import { pxToRem } from "../utils"
		import { size as _size } from '../theme';
		import { pxToRem } from '../utils';

		@@ -13,3 +13,3 @@ /*
		medium: _size[2],
		}
		};

		@@ -20,3 +20,3 @@ const remSize: { [K in keyof typeof size]: number } = {
		medium: pxToRem(_size[2]),
		}
		};

		@@ -33,3 +33,3 @@ /*
		medium: 30,
		}
		};

		@@ -40,4 +40,4 @@ const remIconSize: { [K in keyof typeof iconSize]: number } = {
		medium: pxToRem(30),
		}
		};

		export { size, remSize, iconSize, remIconSize }
		export { size, remSize, iconSize, remIconSize };

src/size/index.ts

		@@ -1,2 +0,2 @@
		import { size, remSize, iconSize, remIconSize } from "./global"
		import { size, remSize, iconSize, remIconSize } from './global';

		@@ -12,3 +12,3 @@ const height = {
		iconXsmall: iconSize.xsmall,
		}
		};

		@@ -24,3 +24,3 @@ const remHeight = {
		iconXsmall: remIconSize.xsmall,
		}
		};

		@@ -35,3 +35,3 @@ const width = {
		iconXsmall: iconSize.xsmall,
		}
		};

		@@ -46,4 +46,4 @@ const remWidth = {
		iconXsmall: remIconSize.xsmall,
		}
		};

		export { height, remHeight, width, remWidth, size, iconSize }
		export { height, remHeight, width, remWidth, size, iconSize };

src/space.ts

		@@ -1,3 +0,3 @@
		import { space as _space } from "./theme"
		import { pxToRem } from "./utils"
		import { space as _space } from './theme';
		import { pxToRem } from './utils';

		@@ -14,3 +14,3 @@ const space = {
		24: _space[9],
		}
		};

		@@ -29,4 +29,4 @@ /* TODO: this should be exposed as a number instead of a string,
		24: `${pxToRem(space[24])}rem`,
		}
		};

		export { space, remSpace }
		export { space, remSpace };

178

src/theme.ts

		@@ -25,17 +25,17 @@ // The theme file is based on the specification at https://system-ui.com/theme

		const fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70]
		const fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];

		const fonts = {
		titlepiece: "GT Guardian Titlepiece, Georgia, serif",
		titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
		headlineSerif:
		"GH Guardian Headline, Guardian Egyptian Web, Georgia, serif",
		'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
		bodySerif:
		"GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif",
		'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
		bodySans:
		"GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif",
		}
		'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
		};

		const lineHeights = [1.15, 1.35, 1.5]
		const lineHeights = [1.15, 1.35, 1.5];

		const fontWeights = [300, 400, 500, 700]
		const fontWeights = [300, 400, 500, 700];

		@@ -47,95 +47,95 @@ // Arrays of colours should have pillar colors first
		reds: [
		"#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2", //news-800
		'#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2', //news-800
		],
		oranges: [
		"#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5", //opinion-800
		'#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5', //opinion-800
		],
		blues: [
		"#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC", //brand-800
		'#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC', //brand-800
		],
		browns: [
		"#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF", //culture-800
		'#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF', //culture-800
		],
		pinks: [
		"#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7", //lifestyle-800
		'#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7', //lifestyle-800
		],
		yellows: [
		"#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500", //brandAlt-400
		'#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500', //brandAlt-400
		],
		greens: [
		"#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA", //labs-400
		'#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA', //labs-400
		],
		grays: [
		"#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2", //specialReport-800
		'#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2', //specialReport-800
		],
		}
		};

		const space = [0, 4, 8, 12, 16, 20, 24, 36, 48, 96]
		const space = [0, 4, 8, 12, 16, 20, 24, 36, 48, 96];

		const size = [24, 36, 44]
		const size = [24, 36, 44];

		const breakpoints = [740, 980, 1140, 1300]
		const breakpoints = [740, 980, 1140, 1300];

		@@ -145,9 +145,9 @@ // Diverges from https://system-ui.com
		// fluid grid on mobile devices
		const tweakpoints = [320, 375, 480, 660]
		const tweakpoints = [320, 375, 480, 660];

		const transitions = [
		".2s cubic-bezier(.64, .57, .67, 1.53)",
		".3s ease-in-out",
		".65s ease-in-out",
		]
		'.2s cubic-bezier(.64, .57, .67, 1.53)',
		'.3s ease-in-out',
		'.65s ease-in-out',
		];

		@@ -165,2 +165,2 @@ export {
		transitions,
		}
		};

src/themes/accordion.ts

		@@ -1,2 +0,2 @@
		import { text, border } from "@guardian/src-foundations/palette"
		import { text, border } from '@guardian/src-foundations/palette';

		@@ -8,2 +8,2 @@ export const accordionDefault = {
		},
		}
		};

src/themes/button.ts

		@@ -11,16 +11,16 @@ import {
		brandAltBorder,
		} from "@guardian/src-foundations/palette"
		} from '@guardian/src-foundations/palette';

		export type ButtonTheme = {
		textPrimary: string
		backgroundPrimary: string
		backgroundPrimaryHover: string
		textSecondary?: string
		backgroundSecondary?: string
		backgroundSecondaryHover?: string
		textTertiary?: string
		backgroundTertiaryHover?: string
		borderTertiary?: string
		textSubdued?: string
		}
		textPrimary: string;
		backgroundPrimary: string;
		backgroundPrimaryHover: string;
		textSecondary?: string;
		backgroundSecondary?: string;
		backgroundSecondaryHover?: string;
		textTertiary?: string;
		backgroundTertiaryHover?: string;
		borderTertiary?: string;
		textSubdued?: string;
		};

		@@ -40,3 +40,3 @@ export const buttonDefault: { button: ButtonTheme } = {
		},
		}
		};

		@@ -56,3 +56,3 @@ export const buttonBrand: { button: ButtonTheme } = {
		},
		}
		};

		@@ -72,2 +72,2 @@ export const buttonBrandAlt: { button: ButtonTheme } = {
		},
		}
		};

src/themes/checkbox.ts

		@@ -8,5 +8,5 @@ import {
		brandText,
		} from "@guardian/src-foundations/palette"
		import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
		import { labelDefault, labelBrand } from "./label"
		} from '@guardian/src-foundations/palette';
		import { userFeedbackDefault, userFeedbackBrand } from './user-feedback';
		import { labelDefault, labelBrand } from './label';

		@@ -26,3 +26,3 @@ export const checkboxDefault = {
		...labelDefault,
		}
		};

		@@ -42,2 +42,2 @@ export const checkboxBrand = {
		...labelBrand,
		}
		};

src/themes/choice-card.ts

		@@ -1,3 +0,3 @@
		import { border, text, background } from "@guardian/src-foundations/palette"
		import { userFeedbackDefault } from "./user-feedback"
		import { border, text, background } from '@guardian/src-foundations/palette';
		import { userFeedbackDefault } from './user-feedback';

		@@ -12,3 +12,3 @@ export const choiceCardDefault = {
		textChecked: text.inputChecked,
		backgroundChecked: "#E3F6FF",
		backgroundChecked: '#E3F6FF',
		backgroundTick: background.inputChecked,
		@@ -22,2 +22,2 @@ borderChecked: border.inputChecked,
		...userFeedbackDefault,
		}
		};

src/themes/footer.ts

		@@ -5,3 +5,3 @@ import {
		brandText,
		} from "@guardian/src-foundations/palette"
		} from '@guardian/src-foundations/palette';

		@@ -16,2 +16,2 @@ export const footerBrand = {
		},
		}
		};

src/themes/index.ts

		@@ -1,22 +0,22 @@
		export * from "./accordion"
		export * from "./button"
		export * from "./checkbox"
		export * from "./choice-card"
		export * from "./footer"
		export * from "./label"
		export * from "./link"
		export * from "./radio"
		export * from "./select"
		export * from "./text-input"
		export * from "./user-feedback"
		export * from './accordion';
		export * from './button';
		export * from './checkbox';
		export * from './choice-card';
		export * from './footer';
		export * from './label';
		export * from './link';
		export * from './radio';
		export * from './select';
		export * from './text-input';
		export * from './user-feedback';

		import { buttonBrand, buttonDefault, buttonBrandAlt } from "./button"
		import { checkboxBrand, checkboxDefault } from "./checkbox"
		import { choiceCardDefault } from "./choice-card"
		import { footerBrand } from "./footer"
		import { labelDefault, labelBrand } from "./label"
		import { linkBrand, linkDefault, linkBrandAlt } from "./link"
		import { radioBrand, radioDefault } from "./radio"
		import { textInputDefault } from "./text-input"
		import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
		import { buttonBrand, buttonDefault, buttonBrandAlt } from './button';
		import { checkboxBrand, checkboxDefault } from './checkbox';
		import { choiceCardDefault } from './choice-card';
		import { footerBrand } from './footer';
		import { labelDefault, labelBrand } from './label';
		import { linkBrand, linkDefault, linkBrandAlt } from './link';
		import { radioBrand, radioDefault } from './radio';
		import { textInputDefault } from './text-input';
		import { userFeedbackDefault, userFeedbackBrand } from './user-feedback';

		@@ -32,3 +32,3 @@ export const defaultTheme = {
		...userFeedbackDefault,
		}
		};

		@@ -43,3 +43,3 @@ export const brand = {
		...userFeedbackBrand,
		}
		};

		@@ -49,2 +49,2 @@ export const brandAlt = {
		...linkBrandAlt,
		}
		};

src/themes/label.ts

		@@ -1,2 +0,2 @@
		import { text, brandText } from "@guardian/src-foundations/palette"
		import { text, brandText } from '@guardian/src-foundations/palette';

		@@ -11,3 +11,3 @@ export const labelDefault = {
		},
		}
		};

		@@ -22,2 +22,2 @@ export const labelBrand = {
		},
		}
		};

src/themes/link.ts

		@@ -5,10 +5,10 @@ import {
		brandAltText,
		} from "@guardian/src-foundations/palette"
		} from '@guardian/src-foundations/palette';

		export type LinkTheme = {
		textPrimary: string
		textPrimaryHover: string
		textSecondary?: string
		textSecondaryHover?: string
		}
		textPrimary: string;
		textPrimaryHover: string;
		textSecondary?: string;
		textSecondaryHover?: string;
		};

		@@ -22,3 +22,3 @@ export const linkDefault: { link: LinkTheme } = {
		},
		}
		};

		@@ -30,3 +30,3 @@ export const linkBrand: { link: LinkTheme } = {
		},
		}
		};

		@@ -38,2 +38,2 @@ export const linkBrandAlt: { link: LinkTheme } = {
		},
		}
		};

src/themes/radio.ts

		@@ -8,5 +8,5 @@ import {
		brandText,
		} from "@guardian/src-foundations/palette"
		import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
		import { labelDefault, labelBrand } from "./label"
		} from '@guardian/src-foundations/palette';
		import { userFeedbackDefault, userFeedbackBrand } from './user-feedback';
		import { labelDefault, labelBrand } from './label';

		@@ -24,3 +24,3 @@ export const radioDefault = {
		...userFeedbackDefault,
		}
		};

		@@ -38,2 +38,2 @@ export const radioBrand = {
		...userFeedbackBrand,
		}
		};

src/themes/select.ts

		@@ -1,3 +0,3 @@
		import { text, background, border } from "@guardian/src-foundations/palette"
		import { userFeedbackDefault } from "./user-feedback"
		import { text, background, border } from '@guardian/src-foundations/palette';
		import { userFeedbackDefault } from './user-feedback';

		@@ -19,2 +19,2 @@ export const selectDefault = {
		...userFeedbackDefault,
		}
		};

src/themes/text-input.ts

		@@ -1,3 +0,3 @@
		import { text, background, border } from "@guardian/src-foundations/palette"
		import { userFeedbackDefault } from "./user-feedback"
		import { text, background, border } from '@guardian/src-foundations/palette';
		import { userFeedbackDefault } from './user-feedback';

		@@ -19,2 +19,2 @@ export const textInputDefault = {
		...userFeedbackDefault,
		}
		};

src/themes/user-feedback.ts

		@@ -1,2 +0,2 @@
		import { text, brandText } from "@guardian/src-foundations/palette"
		import { text, brandText } from '@guardian/src-foundations/palette';

		@@ -8,3 +8,3 @@ export const userFeedbackDefault = {
		},
		}
		};

		@@ -16,2 +16,2 @@ export const userFeedbackBrand = {
		},
		}
		};

108

src/typography/api.ts

		@@ -8,102 +8,102 @@ import {
		FontScaleFunction,
		} from "./types"
		import { fs } from "./fs"
		} from './types';
		import { fs } from './fs';

		type TitlepieceFunctions = {
		[key in keyof TitlepieceSizes]: FontScaleFunction
		}
		[key in keyof TitlepieceSizes]: FontScaleFunction;
		};

		const titlepieceDefaults = {
		lineHeight: "tight",
		fontWeight: "bold",
		lineHeight: 'tight',
		fontWeight: 'bold',
		fontStyle: null,
		unit: "rem",
		}
		const titlepieceFs = fs("titlepiece")
		unit: 'rem',
		};
		const titlepieceFs = fs('titlepiece');

		export const titlepiece: TitlepieceFunctions = {
		small: (options?: FontScaleArgs) =>
		titlepieceFs("small", Object.assign({}, titlepieceDefaults, options)),
		titlepieceFs('small', Object.assign({}, titlepieceDefaults, options)),
		medium: (options?: FontScaleArgs) =>
		titlepieceFs("medium", Object.assign({}, titlepieceDefaults, options)),
		titlepieceFs('medium', Object.assign({}, titlepieceDefaults, options)),
		large: (options?: FontScaleArgs) =>
		titlepieceFs("large", Object.assign({}, titlepieceDefaults, options)),
		}
		titlepieceFs('large', Object.assign({}, titlepieceDefaults, options)),
		};

		type HeadlineFunctions = {
		[key in keyof HeadlineSizes]: FontScaleFunction
		}
		[key in keyof HeadlineSizes]: FontScaleFunction;
		};
		const headlineDefaults = {
		lineHeight: "tight",
		fontWeight: "medium",
		lineHeight: 'tight',
		fontWeight: 'medium',
		fontStyle: null,
		unit: "rem",
		}
		const headlineFs = fs("headline")
		unit: 'rem',
		};
		const headlineFs = fs('headline');

		export const headline: HeadlineFunctions = {
		xxxsmall: (options?: FontScaleArgs) =>
		headlineFs("xxxsmall", Object.assign({}, headlineDefaults, options)),
		headlineFs('xxxsmall', Object.assign({}, headlineDefaults, options)),
		xxsmall: (options?: FontScaleArgs) =>
		headlineFs("xxsmall", Object.assign({}, headlineDefaults, options)),
		headlineFs('xxsmall', Object.assign({}, headlineDefaults, options)),
		xsmall: (options?: FontScaleArgs) =>
		headlineFs("xsmall", Object.assign({}, headlineDefaults, options)),
		headlineFs('xsmall', Object.assign({}, headlineDefaults, options)),
		small: (options?: FontScaleArgs) =>
		headlineFs("small", Object.assign({}, headlineDefaults, options)),
		headlineFs('small', Object.assign({}, headlineDefaults, options)),
		medium: (options?: FontScaleArgs) =>
		headlineFs("medium", Object.assign({}, headlineDefaults, options)),
		headlineFs('medium', Object.assign({}, headlineDefaults, options)),
		large: (options?: FontScaleArgs) =>
		headlineFs("large", Object.assign({}, headlineDefaults, options)),
		headlineFs('large', Object.assign({}, headlineDefaults, options)),
		xlarge: (options?: FontScaleArgs) =>
		headlineFs("xlarge", Object.assign({}, headlineDefaults, options)),
		}
		headlineFs('xlarge', Object.assign({}, headlineDefaults, options)),
		};

		type BodyFunctions = {
		[key in keyof BodySizes]: FontScaleFunction
		}
		[key in keyof BodySizes]: FontScaleFunction;
		};

		const bodyDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem",
		}
		const bodyFs = fs("body")
		unit: 'rem',
		};
		const bodyFs = fs('body');

		export const body: BodyFunctions = {
		small: (options?: FontScaleArgs) =>
		bodyFs("small", Object.assign({}, bodyDefaults, options)),
		bodyFs('small', Object.assign({}, bodyDefaults, options)),
		medium: (options?: FontScaleArgs) =>
		bodyFs("medium", Object.assign({}, bodyDefaults, options)),
		}
		bodyFs('medium', Object.assign({}, bodyDefaults, options)),
		};

		type TextSansFunctions = {
		[key in keyof TextSansSizes]: FontScaleFunction
		}
		[key in keyof TextSansSizes]: FontScaleFunction;
		};

		const textSansDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem",
		}
		const textSansFs = fs("textSans")
		unit: 'rem',
		};
		const textSansFs = fs('textSans');

		export const textSans: TextSansFunctions = {
		xxsmall: (options?: FontScaleArgs) =>
		textSansFs("xxsmall", Object.assign({}, textSansDefaults, options)),
		textSansFs('xxsmall', Object.assign({}, textSansDefaults, options)),
		xsmall: (options?: FontScaleArgs) =>
		textSansFs("xsmall", Object.assign({}, textSansDefaults, options)),
		textSansFs('xsmall', Object.assign({}, textSansDefaults, options)),
		small: (options?: FontScaleArgs) =>
		textSansFs("small", Object.assign({}, textSansDefaults, options)),
		textSansFs('small', Object.assign({}, textSansDefaults, options)),
		medium: (options?: FontScaleArgs) =>
		textSansFs("medium", Object.assign({}, textSansDefaults, options)),
		textSansFs('medium', Object.assign({}, textSansDefaults, options)),
		large: (options?: FontScaleArgs) =>
		textSansFs("large", Object.assign({}, textSansDefaults, options)),
		textSansFs('large', Object.assign({}, textSansDefaults, options)),
		xlarge: (options?: FontScaleArgs) =>
		textSansFs("xlarge", Object.assign({}, textSansDefaults, options)),
		textSansFs('xlarge', Object.assign({}, textSansDefaults, options)),
		xxlarge: (options?: FontScaleArgs) =>
		textSansFs("xxlarge", Object.assign({}, textSansDefaults, options)),
		textSansFs('xxlarge', Object.assign({}, textSansDefaults, options)),
		xxxlarge: (options?: FontScaleArgs) =>
		textSansFs("xxxlarge", Object.assign({}, textSansDefaults, options)),
		}
		textSansFs('xxxlarge', Object.assign({}, textSansDefaults, options)),
		};

src/typography/data.ts

		@@ -1,3 +0,3 @@
		import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
		import { pxToRem } from "../utils"
		import { fontSizes, fonts, lineHeights, fontWeights } from '../theme';
		import { pxToRem } from '../utils';
		import {
		@@ -13,3 +13,3 @@ Category,
		TypographySizes,
		} from "./types"
		} from './types';

		@@ -20,3 +20,3 @@ const titlepieceSizes: TitlepieceSizes = {
		large: fontSizes[10], //70px
		}
		};

		@@ -31,3 +31,3 @@ const headlineSizes: HeadlineSizes = {
		xlarge: fontSizes[9], //50px
		}
		};

		@@ -37,3 +37,3 @@ const bodySizes: BodySizes = {
		medium: fontSizes[3], //17px
		}
		};

		@@ -49,6 +49,6 @@ const textSansSizes: TextSansSizes = {
		xxxlarge: fontSizes[7], //34px
		}
		};

		const fontSizeMapping: {
		[cat in Category]: TypographySizes
		[cat in Category]: TypographySizes;
		} = {
		@@ -59,5 +59,5 @@ titlepiece: titlepieceSizes,
		textSans: textSansSizes,
		}
		};

		const remFontSizes = fontSizes.map((fontSize) => pxToRem(fontSize))
		const remFontSizes = fontSizes.map((fontSize) => pxToRem(fontSize));

		@@ -68,3 +68,3 @@ const remTitlepieceSizes: TitlepieceSizes = {
		large: remFontSizes[10], //70px
		}
		};

		@@ -79,3 +79,3 @@ const remHeadlineSizes: HeadlineSizes = {
		xlarge: remFontSizes[9], //50px
		}
		};

		@@ -85,3 +85,3 @@ const remBodySizes: BodySizes = {
		medium: remFontSizes[3], //17px
		}
		};

		@@ -97,6 +97,6 @@ const remTextSansSizes: TextSansSizes = {
		xxxlarge: remFontSizes[7], //34px
		}
		};

		const remFontSizeMapping: {
		[cat in Category]: TypographySizes
		[cat in Category]: TypographySizes;
		} = {
		@@ -107,3 +107,3 @@ titlepiece: remTitlepieceSizes,
		textSans: remTextSansSizes,
		}
		};

		@@ -115,3 +115,3 @@ const fontMapping: { [cat in Category]: string } = {
		textSans: fonts.bodySans,
		}
		};

		@@ -122,3 +122,3 @@ const lineHeightMapping: { [lineHight in LineHeight]: number } = {
		loose: lineHeights[2],
		}
		};

		@@ -130,8 +130,8 @@ const fontWeightMapping: { [fontWeight in FontWeight]: number } = {
		bold: fontWeights[3],
		}
		};

		const availableFonts: {
		[cat in Category]: {
		[fontWeight in FontWeight]?: FontWeightDefinition
		}
		[fontWeight in FontWeight]?: FontWeightDefinition;
		};
		} = {
		@@ -170,17 +170,17 @@ titlepiece: {
		},
		}
		};

		Object.freeze(titlepieceSizes)
		Object.freeze(headlineSizes)
		Object.freeze(bodySizes)
		Object.freeze(textSansSizes)
		Object.freeze(remTitlepieceSizes)
		Object.freeze(remHeadlineSizes)
		Object.freeze(remBodySizes)
		Object.freeze(remTextSansSizes)
		Object.freeze(fontMapping)
		Object.freeze(fontSizeMapping)
		Object.freeze(fontWeightMapping)
		Object.freeze(lineHeightMapping)
		Object.freeze(availableFonts)
		Object.freeze(titlepieceSizes);
		Object.freeze(headlineSizes);
		Object.freeze(bodySizes);
		Object.freeze(textSansSizes);
		Object.freeze(remTitlepieceSizes);
		Object.freeze(remHeadlineSizes);
		Object.freeze(remBodySizes);
		Object.freeze(remTextSansSizes);
		Object.freeze(fontMapping);
		Object.freeze(fontSizeMapping);
		Object.freeze(fontWeightMapping);
		Object.freeze(lineHeightMapping);
		Object.freeze(availableFonts);

		@@ -203,2 +203,2 @@ export {
		availableFonts,
		}
		};

src/typography/fs.ts

		@@ -8,4 +8,4 @@ import {
		availableFonts,
		} from "./data"
		import { Fs, FontWeightDefinition, FontStyle, Option } from "./types"
		} from './data';
		import { Fs, FontWeightDefinition, FontStyle, Option } from './types';

		@@ -17,9 +17,9 @@ function getFontStyle(
		switch (fontStyle) {
		case "italic":
		return font && font.hasItalic ? "italic" : null
		case "normal":
		return "normal"
		case 'italic':
		return font && font.hasItalic ? 'italic' : null;
		case 'normal':
		return 'normal';
		case null:
		default:
		return null
		return null;
		}
		@@ -32,9 +32,9 @@ }
		) => {
		const fontFamilyValue = fontMapping[category]
		const fontFamilyValue = fontMapping[category];
		const fontSizeValue =
		unit === "px"
		unit === 'px'
		? fontSizeMapping[category][level]
		: `${remFontSizeMapping[category][level]}rem`
		: `${remFontSizeMapping[category][level]}rem`;
		const lineHeightValue =
		unit === "px"
		unit === 'px'
		? // line-height is defined as a unitless value, so we multiply
		@@ -46,8 +46,8 @@ // by the element's font-size in px to get the px value
		}px`
		: lineHeightMapping[lineHeight]
		: lineHeightMapping[lineHeight];
		// TODO: consider logging an error in development if a requested
		// font is unavailable
		const requestedFont = availableFonts[category][fontWeight]
		const fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : ""
		const fontStyleValue = getFontStyle(requestedFont, fontStyle)
		const requestedFont = availableFonts[category][fontWeight];
		const fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : '';
		const fontStyleValue = getFontStyle(requestedFont, fontStyle);

		@@ -62,3 +62,3 @@ return Object.assign(
		fontStyleValue ? { fontStyle: fontStyleValue } : {},
		)
		}
		);
		};

src/typography/index.ts

		@@ -6,4 +6,4 @@ import {
		textSans as textSansAsObj,
		} from "./api"
		import { objectStylesToString } from "./object-styles-to-string"
		} from './api';
		import { objectStylesToString } from './object-styles-to-string';
		import {
		@@ -21,3 +21,3 @@ titlepieceSizes,
		lineHeightMapping,
		} from "./data"
		} from './data';
		import {
		@@ -30,3 +30,3 @@ TitlepieceSizes,
		FontScaleFunctionStr,
		} from "./types"
		} from './types';

		@@ -36,3 +36,3 @@ const fromEntries = <Sizes>(
		): {
		[key in keyof Sizes]: FontScaleFunctionStr
		[key in keyof Sizes]: FontScaleFunctionStr;
		} =>
		@@ -42,14 +42,14 @@ entries.reduce(
		acc: {
		[key in keyof Sizes]: FontScaleFunctionStr
		[key in keyof Sizes]: FontScaleFunctionStr;
		},
		[key, value],
		) => {
		acc[key] = value
		acc[key] = value;

		return acc
		return acc;
		},
		{} as {
		[key in keyof Sizes]: FontScaleFunctionStr
		[key in keyof Sizes]: FontScaleFunctionStr;
		},
		)
		);

		@@ -61,5 +61,5 @@ const titlepiece = fromEntries<TitlepieceSizes>(
		(options?: FontScaleArgs) => objectStylesToString(func(options)),
		]
		];
		}),
		)
		);
		const headline = fromEntries<HeadlineSizes>(
		@@ -70,5 +70,5 @@ Object.entries(headlineAsObj).map(([key, func]) => {
		(options?: FontScaleArgs) => objectStylesToString(func(options)),
		]
		];
		}),
		)
		);
		const body = fromEntries<BodySizes>(
		@@ -79,5 +79,5 @@ Object.entries(bodyAsObj).map(([key, func]) => {
		(options?: FontScaleArgs) => objectStylesToString(func(options)),
		]
		];
		}),
		)
		);
		const textSans = fromEntries<TextSansSizes>(
		@@ -88,5 +88,5 @@ Object.entries(textSansAsObj).map(([key, func]) => {
		(options?: FontScaleArgs) => objectStylesToString(func(options)),
		]
		];
		}),
		)
		);

		@@ -109,2 +109,2 @@ export {
		lineHeightMapping as lineHeights,
		}
		};

src/typography/obj/index.ts

		@@ -1,2 +0,2 @@
		import { titlepiece, headline, body, textSans } from "../api"
		import { titlepiece, headline, body, textSans } from '../api';
		import {
		@@ -14,3 +14,3 @@ titlepieceSizes,
		lineHeightMapping,
		} from "../data"
		} from '../data';

		@@ -33,2 +33,2 @@ export {
		lineHeightMapping as lineHeights,
		}
		};

src/typography/obj/typography.obj.test.ts

		@@ -8,58 +8,58 @@ import {
		lineHeights,
		} from "./index"
		} from './index';

		it("should return styles containing the specified font family", () => {
		const mediumHeadlineStyles = headline.medium()
		it('should return styles containing the specified font family', () => {
		const mediumHeadlineStyles = headline.medium();

		expect(mediumHeadlineStyles.fontFamily).toBe(fonts.headline)
		})
		expect(mediumHeadlineStyles.fontFamily).toBe(fonts.headline);
		});

		it("should return styles containing the specified font size", () => {
		const mediumHeadlineStyles = headline.medium()
		it('should return styles containing the specified font size', () => {
		const mediumHeadlineStyles = headline.medium();

		expect(mediumHeadlineStyles.fontSize).toBe(`${remHeadlineSizes.medium}rem`)
		})
		expect(mediumHeadlineStyles.fontSize).toBe(`${remHeadlineSizes.medium}rem`);
		});

		it("should return styles containing the specified font size in px if requested", () => {
		const mediumHeadlineStyles = headline.medium({ unit: "px" })
		it('should return styles containing the specified font size in px if requested', () => {
		const mediumHeadlineStyles = headline.medium({ unit: 'px' });

		expect(mediumHeadlineStyles.fontSize).toBe(headlineSizes.medium)
		})
		expect(mediumHeadlineStyles.fontSize).toBe(headlineSizes.medium);
		});

		it("should return styles containing the specified font weight", () => {
		const mediumHeadlineStyles = headline.medium({ fontWeight: "bold" })
		it('should return styles containing the specified font weight', () => {
		const mediumHeadlineStyles = headline.medium({ fontWeight: 'bold' });

		expect(mediumHeadlineStyles.fontWeight).toBe(fontWeights.bold)
		})
		expect(mediumHeadlineStyles.fontWeight).toBe(fontWeights.bold);
		});

		it("should return styles containing the specified line height", () => {
		const mediumHeadlineStyles = headline.medium({ lineHeight: "tight" })
		it('should return styles containing the specified line height', () => {
		const mediumHeadlineStyles = headline.medium({ lineHeight: 'tight' });

		expect(mediumHeadlineStyles.lineHeight).toBe(lineHeights.tight)
		})
		expect(mediumHeadlineStyles.lineHeight).toBe(lineHeights.tight);
		});

		it("should return styles containing the specified line height in px if requested", () => {
		it('should return styles containing the specified line height in px if requested', () => {
		const mediumHeadlineStyles = headline.medium({
		lineHeight: "tight",
		unit: "px",
		})
		lineHeight: 'tight',
		unit: 'px',
		});

		expect(mediumHeadlineStyles.lineHeight).toBe(
		`${lineHeights.tight * headlineSizes.medium}px`,
		)
		})
		);
		});

		it("should return italic styles if specified", () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: "italic" })
		it('should return italic styles if specified', () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: 'italic' });

		expect(mediumHeadlineStyles.fontStyle).toBe("italic")
		})
		expect(mediumHeadlineStyles.fontStyle).toBe('italic');
		});

		it("should not include italic font style if it is not available for requested font", () => {
		it('should not include italic font style if it is not available for requested font', () => {
		const mediumHeadlineStyles = headline.medium({
		fontWeight: "bold",
		fontStyle: "italic",
		})
		fontWeight: 'bold',
		fontStyle: 'italic',
		});

		expect(mediumHeadlineStyles.fontStyle).toBeUndefined()
		})
		expect(mediumHeadlineStyles.fontStyle).toBeUndefined();
		});

src/typography/object-styles-to-string.ts

		@@ -1,2 +0,2 @@
		import { TypographyStyles } from "./types"
		import { TypographyStyles } from './types';

		@@ -11,6 +11,6 @@ export const objectStylesToString = ({
		font-family: ${fontFamily};
		font-size: ${typeof fontSize === "number" ? `${fontSize}px` : fontSize};
		font-size: ${typeof fontSize === 'number' ? `${fontSize}px` : fontSize};
		line-height: ${lineHeight};
		${fontWeight ? `font-weight: ${fontWeight}` : ""};
		${fontStyle ? `font-style: ${fontStyle}` : ""};
		`
		${fontWeight ? `font-weight: ${fontWeight}` : ''};
		${fontStyle ? `font-style: ${fontStyle}` : ''};
		`;

src/typography/types.ts

		@@ -1,48 +0,48 @@
		export type ScaleUnit = "rem" \| "px"
		export type Category = "titlepiece" \| "headline" \| "body" \| "textSans"
		export type LineHeight = "tight" \| "regular" \| "loose"
		export type FontWeight = "light" \| "regular" \| "medium" \| "bold"
		export type FontStyle = "normal" \| "italic"
		export type FontWeightDefinition = { hasItalic: boolean }
		export type Option<A> = A \| null
		export type ScaleUnit = 'rem' \| 'px';
		export type Category = 'titlepiece' \| 'headline' \| 'body' \| 'textSans';
		export type LineHeight = 'tight' \| 'regular' \| 'loose';
		export type FontWeight = 'light' \| 'regular' \| 'medium' \| 'bold';
		export type FontStyle = 'normal' \| 'italic';
		export type FontWeightDefinition = { hasItalic: boolean };
		export type Option<A> = A \| null;

		export type TypographyStyles = {
		fontFamily: string
		fontSize: string \| number
		lineHeight: string \| number
		fontWeight?: number
		fontStyle?: string
		}
		fontFamily: string;
		fontSize: string \| number;
		lineHeight: string \| number;
		fontWeight?: number;
		fontStyle?: string;
		};
		export type TypographySizes = {
		[key in string]: number
		}
		[key in string]: number;
		};

		export interface TitlepieceSizes extends TypographySizes {
		small: number
		medium: number
		large: number
		small: number;
		medium: number;
		large: number;
		}

		export interface HeadlineSizes extends TypographySizes {
		xxxsmall: number
		xxsmall: number
		xsmall: number
		small: number
		medium: number
		large: number
		xlarge: number
		xxxsmall: number;
		xxsmall: number;
		xsmall: number;
		small: number;
		medium: number;
		large: number;
		xlarge: number;
		}
		export interface BodySizes extends TypographySizes {
		small: number
		medium: number
		small: number;
		medium: number;
		}
		export interface TextSansSizes extends TypographySizes {
		xxsmall: number
		xsmall: number
		small: number
		medium: number
		large: number
		xlarge: number
		xxlarge: number
		xxxlarge: number
		xxsmall: number;
		xsmall: number;
		small: number;
		medium: number;
		large: number;
		xlarge: number;
		xxlarge: number;
		xxxlarge: number;
		}
		@@ -60,19 +60,19 @@
		}: {
		lineHeight: LineHeight
		fontWeight: FontWeight
		fontStyle: Option<FontStyle>
		unit: ScaleUnit
		lineHeight: LineHeight;
		fontWeight: FontWeight;
		fontStyle: Option<FontStyle>;
		unit: ScaleUnit;
		},
		) => TypographyStyles
		) => TypographyStyles;

		export type FontScaleFunction = (options?: FontScaleArgs) => TypographyStyles
		export type FontScaleFunction = (options?: FontScaleArgs) => TypographyStyles;

		// returns styles as a template literal
		export type FontScaleFunctionStr = (options?: FontScaleArgs) => string
		export type FontScaleFunctionStr = (options?: FontScaleArgs) => string;

		export interface FontScaleArgs {
		lineHeight?: LineHeight
		fontWeight?: FontWeight
		fontStyle?: FontStyle
		unit?: ScaleUnit
		lineHeight?: LineHeight;
		fontWeight?: FontWeight;
		fontStyle?: FontStyle;
		unit?: ScaleUnit;
		}

100

src/typography/typography.test.ts

		@@ -8,80 +8,82 @@ import {
		lineHeights,
		} from "./index"
		} from './index';

		it("should return styles containing the specified font family", () => {
		const mediumHeadlineStyles = headline.medium()
		it('should return styles containing the specified font family', () => {
		const mediumHeadlineStyles = headline.medium();

		expect(mediumHeadlineStyles).toContain(`font-family: ${fonts.headline};`)
		})
		expect(mediumHeadlineStyles).toContain(`font-family: ${fonts.headline};`);
		});

		it("should return styles containing the specified font size", () => {
		const mediumHeadlineStyles = headline.medium()
		it('should return styles containing the specified font size', () => {
		const mediumHeadlineStyles = headline.medium();

		expect(mediumHeadlineStyles).toContain(
		`font-size: ${remHeadlineSizes.medium}rem;`,
		)
		})
		);
		});

		it("should return styles containing the specified font size in px if requested", () => {
		const mediumHeadlineStyles = headline.medium({ unit: "px" })
		it('should return styles containing the specified font size in px if requested', () => {
		const mediumHeadlineStyles = headline.medium({ unit: 'px' });

		expect(mediumHeadlineStyles).toContain(
		`font-size: ${headlineSizes.medium}px;`,
		)
		})
		);
		});

		it("should return styles containing the specified font weight", () => {
		const mediumHeadlineStyles = headline.medium({ fontWeight: "bold" })
		it('should return styles containing the specified font weight', () => {
		const mediumHeadlineStyles = headline.medium({ fontWeight: 'bold' });

		expect(mediumHeadlineStyles).toContain(`font-weight: ${fontWeights.bold};`)
		})
		expect(mediumHeadlineStyles).toContain(`font-weight: ${fontWeights.bold};`);
		});

		it("should return styles containing the specified line height", () => {
		const mediumHeadlineStyles = headline.medium({ lineHeight: "tight" })
		it('should return styles containing the specified line height', () => {
		const mediumHeadlineStyles = headline.medium({ lineHeight: 'tight' });

		expect(mediumHeadlineStyles).toContain(`line-height: ${lineHeights.tight};`)
		})
		expect(mediumHeadlineStyles).toContain(
		`line-height: ${lineHeights.tight};`,
		);
		});

		it("should return styles containing the specified line height in px if requested", () => {
		it('should return styles containing the specified line height in px if requested', () => {
		const mediumHeadlineStyles = headline.medium({
		lineHeight: "tight",
		unit: "px",
		})
		lineHeight: 'tight',
		unit: 'px',
		});

		expect(mediumHeadlineStyles).toContain(
		`line-height: ${lineHeights.tight * headlineSizes.medium}px;`,
		)
		})
		);
		});

		it("should return italic styles if specified", () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: "italic" })
		it('should return italic styles if specified', () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: 'italic' });

		expect(mediumHeadlineStyles).toContain("font-style: italic;")
		})
		expect(mediumHeadlineStyles).toContain('font-style: italic;');
		});

		it("should return normal styles if specified", () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: "normal" })
		it('should return normal styles if specified', () => {
		const mediumHeadlineStyles = headline.medium({ fontStyle: 'normal' });

		expect(mediumHeadlineStyles).toContain("font-style: normal;")
		})
		expect(mediumHeadlineStyles).toContain('font-style: normal;');
		});

		it("should not return font styles if unspecified", () => {
		const mediumHeadlineStyles = headline.medium()
		it('should not return font styles if unspecified', () => {
		const mediumHeadlineStyles = headline.medium();

		expect(mediumHeadlineStyles).not.toContain("font-style")
		})
		expect(mediumHeadlineStyles).not.toContain('font-style');
		});

		it("should not include italic font style if it is not available for requested font", () => {
		it('should not include italic font style if it is not available for requested font', () => {
		const mediumHeadlineStyles = headline.medium({
		fontWeight: "bold",
		fontStyle: "italic",
		})
		fontWeight: 'bold',
		fontStyle: 'italic',
		});

		const largeHeadlineStyles = headline.large({
		fontWeight: "bold",
		fontStyle: "italic",
		})
		fontWeight: 'bold',
		fontStyle: 'italic',
		});

		expect(mediumHeadlineStyles).not.toContain("font-style: italic;")
		expect(largeHeadlineStyles).not.toContain("font-style: italic;")
		})
		expect(mediumHeadlineStyles).not.toContain('font-style: italic;');
		expect(largeHeadlineStyles).not.toContain('font-style: italic;');
		});

src/utils/focus-style-manager.ts

		@@ -1,2 +0,2 @@
		const TAB_KEY_CODE = 9
		const TAB_KEY_CODE = 9;

		@@ -12,3 +12,3 @@ /**
		export class InteractionModeEngine {
		private isRunning = false
		private isRunning = false;

		@@ -20,3 +20,3 @@ // tslint:disable-next-line:no-constructor-vars
		public isActive() {
		return this.isRunning
		return this.isRunning;
		}
		@@ -26,4 +26,4 @@
		public start() {
		this.container.addEventListener("mousedown", this.handleMouseDown)
		this.isRunning = true
		this.container.addEventListener('mousedown', this.handleMouseDown);
		this.isRunning = true;
		}
		@@ -33,13 +33,13 @@
		public stop() {
		this.reset()
		this.isRunning = false
		this.reset();
		this.isRunning = false;
		}

		private reset() {
		this.container.classList.remove(this.className)
		this.container.classList.remove(this.className);
		this.container.removeEventListener(
		"keydown",
		'keydown',
		this.handleKeyDown as (evt: Event) => void,
		)
		this.container.removeEventListener("mousedown", this.handleMouseDown)
		);
		this.container.removeEventListener('mousedown', this.handleMouseDown);
		}
		@@ -49,20 +49,20 @@
		if (e.which === TAB_KEY_CODE) {
		this.reset()
		this.container.addEventListener("mousedown", this.handleMouseDown)
		this.reset();
		this.container.addEventListener('mousedown', this.handleMouseDown);
		}
		}
		};

		private handleMouseDown = () => {
		this.reset()
		this.container.classList.add(this.className)
		this.reset();
		this.container.classList.add(this.className);
		this.container.addEventListener(
		"keydown",
		'keydown',
		this.handleKeyDown as (evt: Event) => void,
		)
		}
		);
		};
		}

		const FOCUS_DISABLED = "src-focus-disabled"
		const FOCUS_DISABLED = 'src-focus-disabled';

		let _focusEngine: InteractionModeEngine
		let _focusEngine: InteractionModeEngine;

		@@ -74,6 +74,6 @@ const focusEngine = (): InteractionModeEngine => {
		FOCUS_DISABLED,
		)
		);

		return _focusEngine
		}
		return _focusEngine;
		};

		@@ -84,2 +84,2 @@ export const FocusStyleManager = {
		onlyShowFocusOnTabs: () => focusEngine().start(),
		}
		};

src/utils/index.ts

		@@ -1,3 +0,3 @@
		export { FocusStyleManager } from "./focus-style-manager"
		export { pxToRem, rootPixelFontSize } from "./px-to-rem"
		export { resets } from "./resets"
		export { FocusStyleManager } from './focus-style-manager';
		export { pxToRem, rootPixelFontSize } from './px-to-rem';
		export { resets } from './resets';

src/utils/px-to-rem.test.ts

		@@ -1,7 +0,7 @@
		import { pxToRem, rootPixelFontSize } from "./px-to-rem"
		import { pxToRem, rootPixelFontSize } from './px-to-rem';

		it("should calculate a rem equivalent of a pixel value", () => {
		const value = 17
		const result = pxToRem(value)
		expect(result).toBe(value / rootPixelFontSize)
		})
		it('should calculate a rem equivalent of a pixel value', () => {
		const value = 17;
		const result = pxToRem(value);
		expect(result).toBe(value / rootPixelFontSize);
		});

src/utils/px-to-rem.ts

		@@ -1,2 +0,2 @@
		export const rootPixelFontSize = 16
		export const pxToRem = (px: number): number => px / rootPixelFontSize
		export const rootPixelFontSize = 16;
		export const pxToRem = (px: number): number => px / rootPixelFontSize;

src/utils/resets.ts

		@@ -1,2 +0,2 @@
		import { background, text } from "../palette"
		import { background, text } from '../palette';

		@@ -11,3 +11,3 @@ ////////////////////////////
		padding: 0;
		`
		`;

		@@ -18,3 +18,3 @@ const fieldset = `
		margin: 0;
		`
		`;

		@@ -26,3 +26,3 @@ // remove styling of invalid input elements that gets applied in Firefox
		}
		`
		`;

		@@ -55,3 +55,3 @@ ////////////////////////////
		}
		`
		`;

		@@ -63,2 +63,2 @@ export const resets = {
		defaults,
		}
		};

themes/cjs/index.d.ts

		@@ -1,12 +0,12 @@
		export * from "./accordion";
		export * from "./button";
		export * from "./checkbox";
		export * from "./choice-card";
		export * from "./footer";
		export * from "./label";
		export * from "./link";
		export * from "./radio";
		export * from "./select";
		export * from "./text-input";
		export * from "./user-feedback";
		export * from './accordion';
		export * from './button';
		export * from './checkbox';
		export * from './choice-card';
		export * from './footer';
		export * from './label';
		export * from './link';
		export * from './radio';
		export * from './select';
		export * from './text-input';
		export * from './user-feedback';
		export declare const defaultTheme: {
		@@ -13,0 +13,0 @@ userFeedback: {

themes/cjs/index.js

		@@ -171,3 +171,3 @@ 'use strict';
		textChecked: palette.text.inputChecked,
		backgroundChecked: "#E3F6FF",
		backgroundChecked: '#E3F6FF',
		backgroundTick: palette.background.inputChecked,
		@@ -174,0 +174,0 @@ borderChecked: palette.border.inputChecked,

themes/index.d.ts

		@@ -1,12 +0,12 @@
		export * from "./accordion";
		export * from "./button";
		export * from "./checkbox";
		export * from "./choice-card";
		export * from "./footer";
		export * from "./label";
		export * from "./link";
		export * from "./radio";
		export * from "./select";
		export * from "./text-input";
		export * from "./user-feedback";
		export * from './accordion';
		export * from './button';
		export * from './checkbox';
		export * from './choice-card';
		export * from './footer';
		export * from './label';
		export * from './link';
		export * from './radio';
		export * from './select';
		export * from './text-input';
		export * from './user-feedback';
		export declare const defaultTheme: {
		@@ -13,0 +13,0 @@ userFeedback: {

themes/index.js

		@@ -167,3 +167,3 @@ import { text, border, background, brandText, brandBackground, brandBorder, brandAltText, brandAltBackground, brandAltBorder } from '@guardian/src-foundations/palette';
		textChecked: text.inputChecked,
		backgroundChecked: "#E3F6FF",
		backgroundChecked: '#E3F6FF',
		backgroundTick: background.inputChecked,
		@@ -170,0 +170,0 @@ borderChecked: border.inputChecked,

156

types/themes.d.ts

		@@ -1,91 +0,91 @@
		import "@emotion/react"
		import '@emotion/react';

		declare module "@emotion/react" {
		declare module '@emotion/react' {
		export interface Theme {
		accordion: {
		textPrimary: string
		borderPrimary: string
		}
		button: {}
		textPrimary: string;
		borderPrimary: string;
		};
		button: {};
		checkbox: {
		border: string
		borderHover: string
		borderChecked: string
		borderError: string
		backgroundChecked: string
		textLabel: string
		textLabelSupporting: string
		textIndeterminate: string
		}
		border: string;
		borderHover: string;
		borderChecked: string;
		borderError: string;
		backgroundChecked: string;
		textLabel: string;
		textLabelSupporting: string;
		textIndeterminate: string;
		};
		choiceCard: {
		textLabel: string
		textLabelSupporting: string
		textGroupLabel: string
		textGroupLabelSupporting: string
		border: string
		textChecked: string
		backgroundChecked: string
		backgroundTick: string
		borderChecked: string
		textHover: string
		borderHover: string
		textError: string
		borderError: string
		}
		textLabel: string;
		textLabelSupporting: string;
		textGroupLabel: string;
		textGroupLabelSupporting: string;
		border: string;
		textChecked: string;
		backgroundChecked: string;
		backgroundTick: string;
		borderChecked: string;
		textHover: string;
		borderHover: string;
		textError: string;
		borderError: string;
		};
		footer: {
		border: string
		background: string
		text: string
		anchor: string
		anchorHover: string
		}
		border: string;
		background: string;
		text: string;
		anchor: string;
		anchorHover: string;
		};
		label: {
		textLabel: string
		textOptional: string
		textSupporting: string
		textError: string
		textSuccess: string
		}
		layout: {}
		link: {}
		textLabel: string;
		textOptional: string;
		textSupporting: string;
		textError: string;
		textSuccess: string;
		};
		layout: {};
		link: {};
		radio: {
		borderHover: string
		border: string
		backgroundChecked: string
		textLabel: string
		textLabelSupporting: string
		borderError: string
		}
		borderHover: string;
		border: string;
		backgroundChecked: string;
		textLabel: string;
		textLabelSupporting: string;
		borderError: string;
		};
		select: {
		textUserInput: string
		textLabel: string
		textLabelOptional: string
		textLabelSupporting: string
		textError: string
		textSuccess: string
		backgroundInput: string
		border: string
		borderActive: string
		borderError: string
		borderSuccess: string
		}
		textArea: {}
		textUserInput: string;
		textLabel: string;
		textLabelOptional: string;
		textLabelSupporting: string;
		textError: string;
		textSuccess: string;
		backgroundInput: string;
		border: string;
		borderActive: string;
		borderError: string;
		borderSuccess: string;
		};
		textArea: {};
		textInput: {
		textUserInput: string
		textLabel: string
		textLabelOptional: string
		textLabelSupporting: string
		textError: string
		textSuccess: string
		backgroundInput: string
		border: string
		borderActive: string
		borderError: string
		borderSuccess: string
		}
		textUserInput: string;
		textLabel: string;
		textLabelOptional: string;
		textLabelSupporting: string;
		textError: string;
		textSuccess: string;
		backgroundInput: string;
		border: string;
		borderActive: string;
		borderError: string;
		borderSuccess: string;
		};
		userFeedback: {
		textSuccess: string
		textError: string
		}
		textSuccess: string;
		textError: string;
		};
		}
		}

typography/api.d.ts

		@@ -1,2 +0,2 @@
		import { TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, FontScaleFunction } from "./types";
		import { TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, FontScaleFunction } from './types';
		declare type TitlepieceFunctions = {
		@@ -3,0 +3,0 @@ [key in keyof TitlepieceSizes]: FontScaleFunction;

typography/cjs/api.d.ts

		@@ -1,2 +0,2 @@
		import { TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, FontScaleFunction } from "./types";
		import { TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, FontScaleFunction } from './types';
		declare type TitlepieceFunctions = {
		@@ -3,0 +3,0 @@ [key in keyof TitlepieceSizes]: FontScaleFunction;

typography/cjs/data.d.ts

		@@ -1,2 +0,2 @@
		import { Category, LineHeight, FontWeight, FontWeightDefinition, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, TypographySizes } from "./types";
		import { Category, LineHeight, FontWeight, FontWeightDefinition, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, TypographySizes } from './types';
		declare const titlepieceSizes: TitlepieceSizes;
		@@ -3,0 +3,0 @@ declare const headlineSizes: HeadlineSizes;

typography/cjs/fs.d.ts

		@@ -1,2 +0,2 @@
		import { Fs } from "./types";
		import { Fs } from './types';
		export declare const fs: Fs;

typography/cjs/index.d.ts

		@@ -1,3 +0,3 @@
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "./data";
		import { FontScaleFunctionStr } from "./types";
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from './data';
		import { FontScaleFunctionStr } from './types';
		declare const titlepiece: {
		@@ -4,0 +4,0 @@ [x: string]: FontScaleFunctionStr;

typography/cjs/index.js

		@@ -86,6 +86,6 @@ 'use strict';
		var fonts = {
		titlepiece: "GT Guardian Titlepiece, Georgia, serif",
		headlineSerif: "GH Guardian Headline, Guardian Egyptian Web, Georgia, serif",
		bodySerif: "GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif",
		bodySans: "GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
		titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
		headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
		bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
		bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'
		};
		@@ -278,7 +278,7 @@ var lineHeights = [1.15, 1.35, 1.5];
		switch (fontStyle) {
		case "italic":
		return font && font.hasItalic ? "italic" : null;
		case 'italic':
		return font && font.hasItalic ? 'italic' : null;

		case "normal":
		return "normal";
		case 'normal':
		return 'normal';

		@@ -298,4 +298,4 @@ case null:
		var fontFamilyValue = fontMapping[category];
		var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === "px" ? // line-height is defined as a unitless value, so we multiply
		var fontSizeValue = unit === 'px' ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === 'px' ? // line-height is defined as a unitless value, so we multiply
		// by the element's font-size in px to get the px value
		@@ -306,3 +306,3 @@ "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
		var requestedFont = availableFonts[category][fontWeight];
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : '';
		var fontStyleValue = getFontStyle(requestedFont, fontStyle);
		@@ -322,95 +322,95 @@ return Object.assign({
		var titlepieceDefaults = {
		lineHeight: "tight",
		fontWeight: "bold",
		lineHeight: 'tight',
		fontWeight: 'bold',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var titlepieceFs = fs("titlepiece");
		var titlepieceFs = fs('titlepiece');
		var titlepiece = {
		small: function small(options) {
		return titlepieceFs("small", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('small', Object.assign({}, titlepieceDefaults, options));
		},
		medium: function medium(options) {
		return titlepieceFs("medium", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('medium', Object.assign({}, titlepieceDefaults, options));
		},
		large: function large(options) {
		return titlepieceFs("large", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('large', Object.assign({}, titlepieceDefaults, options));
		}
		};
		var headlineDefaults = {
		lineHeight: "tight",
		fontWeight: "medium",
		lineHeight: 'tight',
		fontWeight: 'medium',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var headlineFs = fs("headline");
		var headlineFs = fs('headline');
		var headline = {
		xxxsmall: function xxxsmall(options) {
		return headlineFs("xxxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxxsmall', Object.assign({}, headlineDefaults, options));
		},
		xxsmall: function xxsmall(options) {
		return headlineFs("xxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxsmall', Object.assign({}, headlineDefaults, options));
		},
		xsmall: function xsmall(options) {
		return headlineFs("xsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xsmall', Object.assign({}, headlineDefaults, options));
		},
		small: function small(options) {
		return headlineFs("small", Object.assign({}, headlineDefaults, options));
		return headlineFs('small', Object.assign({}, headlineDefaults, options));
		},
		medium: function medium(options) {
		return headlineFs("medium", Object.assign({}, headlineDefaults, options));
		return headlineFs('medium', Object.assign({}, headlineDefaults, options));
		},
		large: function large(options) {
		return headlineFs("large", Object.assign({}, headlineDefaults, options));
		return headlineFs('large', Object.assign({}, headlineDefaults, options));
		},
		xlarge: function xlarge(options) {
		return headlineFs("xlarge", Object.assign({}, headlineDefaults, options));
		return headlineFs('xlarge', Object.assign({}, headlineDefaults, options));
		}
		};
		var bodyDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var bodyFs = fs("body");
		var bodyFs = fs('body');
		var body = {
		small: function small(options) {
		return bodyFs("small", Object.assign({}, bodyDefaults, options));
		return bodyFs('small', Object.assign({}, bodyDefaults, options));
		},
		medium: function medium(options) {
		return bodyFs("medium", Object.assign({}, bodyDefaults, options));
		return bodyFs('medium', Object.assign({}, bodyDefaults, options));
		}
		};
		var textSansDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var textSansFs = fs("textSans");
		var textSansFs = fs('textSans');
		var textSans = {
		xxsmall: function xxsmall(options) {
		return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxsmall', Object.assign({}, textSansDefaults, options));
		},
		xsmall: function xsmall(options) {
		return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xsmall', Object.assign({}, textSansDefaults, options));
		},
		small: function small(options) {
		return textSansFs("small", Object.assign({}, textSansDefaults, options));
		return textSansFs('small', Object.assign({}, textSansDefaults, options));
		},
		medium: function medium(options) {
		return textSansFs("medium", Object.assign({}, textSansDefaults, options));
		return textSansFs('medium', Object.assign({}, textSansDefaults, options));
		},
		large: function large(options) {
		return textSansFs("large", Object.assign({}, textSansDefaults, options));
		return textSansFs('large', Object.assign({}, textSansDefaults, options));
		},
		xlarge: function xlarge(options) {
		return textSansFs("xlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xlarge', Object.assign({}, textSansDefaults, options));
		},
		xxlarge: function xxlarge(options) {
		return textSansFs("xxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxlarge', Object.assign({}, textSansDefaults, options));
		},
		xxxlarge: function xxxlarge(options) {
		return textSansFs("xxxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxxlarge', Object.assign({}, textSansDefaults, options));
		}
		@@ -425,3 +425,3 @@ };
		fontStyle = _ref.fontStyle;
		return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
		return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === 'number' ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : '', ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : '', ";\n");
		};
		@@ -428,0 +428,0 @@

typography/cjs/object-styles-to-string.d.ts

		@@ -1,2 +0,2 @@
		import { TypographyStyles } from "./types";
		import { TypographyStyles } from './types';
		export declare const objectStylesToString: ({ fontFamily, fontSize, lineHeight, fontWeight, fontStyle, }: TypographyStyles) => string;

typography/cjs/types.d.ts

		@@ -1,6 +0,6 @@
		export declare type ScaleUnit = "rem" \| "px";
		export declare type Category = "titlepiece" \| "headline" \| "body" \| "textSans";
		export declare type LineHeight = "tight" \| "regular" \| "loose";
		export declare type FontWeight = "light" \| "regular" \| "medium" \| "bold";
		export declare type FontStyle = "normal" \| "italic";
		export declare type ScaleUnit = 'rem' \| 'px';
		export declare type Category = 'titlepiece' \| 'headline' \| 'body' \| 'textSans';
		export declare type LineHeight = 'tight' \| 'regular' \| 'loose';
		export declare type FontWeight = 'light' \| 'regular' \| 'medium' \| 'bold';
		export declare type FontStyle = 'normal' \| 'italic';
		export declare type FontWeightDefinition = {
		@@ -7,0 +7,0 @@ hasItalic: boolean;

typography/data.d.ts

		@@ -1,2 +0,2 @@
		import { Category, LineHeight, FontWeight, FontWeightDefinition, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, TypographySizes } from "./types";
		import { Category, LineHeight, FontWeight, FontWeightDefinition, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, TypographySizes } from './types';
		declare const titlepieceSizes: TitlepieceSizes;
		@@ -3,0 +3,0 @@ declare const headlineSizes: HeadlineSizes;

typography/fs.d.ts

		@@ -1,2 +0,2 @@
		import { Fs } from "./types";
		import { Fs } from './types';
		export declare const fs: Fs;

typography/index.d.ts

		@@ -1,3 +0,3 @@
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "./data";
		import { FontScaleFunctionStr } from "./types";
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from './data';
		import { FontScaleFunctionStr } from './types';
		declare const titlepiece: {
		@@ -4,0 +4,0 @@ [x: string]: FontScaleFunctionStr;

typography/index.js

		@@ -82,6 +82,6 @@ function _slicedToArray(arr, i) {
		var fonts = {
		titlepiece: "GT Guardian Titlepiece, Georgia, serif",
		headlineSerif: "GH Guardian Headline, Guardian Egyptian Web, Georgia, serif",
		bodySerif: "GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif",
		bodySans: "GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
		titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
		headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
		bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
		bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'
		};
		@@ -274,7 +274,7 @@ var lineHeights = [1.15, 1.35, 1.5];
		switch (fontStyle) {
		case "italic":
		return font && font.hasItalic ? "italic" : null;
		case 'italic':
		return font && font.hasItalic ? 'italic' : null;

		case "normal":
		return "normal";
		case 'normal':
		return 'normal';

		@@ -294,4 +294,4 @@ case null:
		var fontFamilyValue = fontMapping[category];
		var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === "px" ? // line-height is defined as a unitless value, so we multiply
		var fontSizeValue = unit === 'px' ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === 'px' ? // line-height is defined as a unitless value, so we multiply
		// by the element's font-size in px to get the px value
		@@ -302,3 +302,3 @@ "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
		var requestedFont = availableFonts[category][fontWeight];
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : '';
		var fontStyleValue = getFontStyle(requestedFont, fontStyle);
		@@ -318,95 +318,95 @@ return Object.assign({
		var titlepieceDefaults = {
		lineHeight: "tight",
		fontWeight: "bold",
		lineHeight: 'tight',
		fontWeight: 'bold',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var titlepieceFs = fs("titlepiece");
		var titlepieceFs = fs('titlepiece');
		var titlepiece = {
		small: function small(options) {
		return titlepieceFs("small", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('small', Object.assign({}, titlepieceDefaults, options));
		},
		medium: function medium(options) {
		return titlepieceFs("medium", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('medium', Object.assign({}, titlepieceDefaults, options));
		},
		large: function large(options) {
		return titlepieceFs("large", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('large', Object.assign({}, titlepieceDefaults, options));
		}
		};
		var headlineDefaults = {
		lineHeight: "tight",
		fontWeight: "medium",
		lineHeight: 'tight',
		fontWeight: 'medium',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var headlineFs = fs("headline");
		var headlineFs = fs('headline');
		var headline = {
		xxxsmall: function xxxsmall(options) {
		return headlineFs("xxxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxxsmall', Object.assign({}, headlineDefaults, options));
		},
		xxsmall: function xxsmall(options) {
		return headlineFs("xxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxsmall', Object.assign({}, headlineDefaults, options));
		},
		xsmall: function xsmall(options) {
		return headlineFs("xsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xsmall', Object.assign({}, headlineDefaults, options));
		},
		small: function small(options) {
		return headlineFs("small", Object.assign({}, headlineDefaults, options));
		return headlineFs('small', Object.assign({}, headlineDefaults, options));
		},
		medium: function medium(options) {
		return headlineFs("medium", Object.assign({}, headlineDefaults, options));
		return headlineFs('medium', Object.assign({}, headlineDefaults, options));
		},
		large: function large(options) {
		return headlineFs("large", Object.assign({}, headlineDefaults, options));
		return headlineFs('large', Object.assign({}, headlineDefaults, options));
		},
		xlarge: function xlarge(options) {
		return headlineFs("xlarge", Object.assign({}, headlineDefaults, options));
		return headlineFs('xlarge', Object.assign({}, headlineDefaults, options));
		}
		};
		var bodyDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var bodyFs = fs("body");
		var bodyFs = fs('body');
		var body = {
		small: function small(options) {
		return bodyFs("small", Object.assign({}, bodyDefaults, options));
		return bodyFs('small', Object.assign({}, bodyDefaults, options));
		},
		medium: function medium(options) {
		return bodyFs("medium", Object.assign({}, bodyDefaults, options));
		return bodyFs('medium', Object.assign({}, bodyDefaults, options));
		}
		};
		var textSansDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var textSansFs = fs("textSans");
		var textSansFs = fs('textSans');
		var textSans = {
		xxsmall: function xxsmall(options) {
		return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxsmall', Object.assign({}, textSansDefaults, options));
		},
		xsmall: function xsmall(options) {
		return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xsmall', Object.assign({}, textSansDefaults, options));
		},
		small: function small(options) {
		return textSansFs("small", Object.assign({}, textSansDefaults, options));
		return textSansFs('small', Object.assign({}, textSansDefaults, options));
		},
		medium: function medium(options) {
		return textSansFs("medium", Object.assign({}, textSansDefaults, options));
		return textSansFs('medium', Object.assign({}, textSansDefaults, options));
		},
		large: function large(options) {
		return textSansFs("large", Object.assign({}, textSansDefaults, options));
		return textSansFs('large', Object.assign({}, textSansDefaults, options));
		},
		xlarge: function xlarge(options) {
		return textSansFs("xlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xlarge', Object.assign({}, textSansDefaults, options));
		},
		xxlarge: function xxlarge(options) {
		return textSansFs("xxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxlarge', Object.assign({}, textSansDefaults, options));
		},
		xxxlarge: function xxxlarge(options) {
		return textSansFs("xxxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxxlarge', Object.assign({}, textSansDefaults, options));
		}
		@@ -421,3 +421,3 @@ };
		fontStyle = _ref.fontStyle;
		return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
		return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === 'number' ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : '', ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : '', ";\n");
		};
		@@ -424,0 +424,0 @@

typography/obj/cjs/index.js

		@@ -30,6 +30,6 @@ 'use strict';
		var fonts = {
		titlepiece: "GT Guardian Titlepiece, Georgia, serif",
		headlineSerif: "GH Guardian Headline, Guardian Egyptian Web, Georgia, serif",
		bodySerif: "GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif",
		bodySans: "GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
		titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
		headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
		bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
		bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'
		};
		@@ -222,7 +222,7 @@ var lineHeights = [1.15, 1.35, 1.5];
		switch (fontStyle) {
		case "italic":
		return font && font.hasItalic ? "italic" : null;
		case 'italic':
		return font && font.hasItalic ? 'italic' : null;

		case "normal":
		return "normal";
		case 'normal':
		return 'normal';

		@@ -242,4 +242,4 @@ case null:
		var fontFamilyValue = fontMapping[category];
		var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === "px" ? // line-height is defined as a unitless value, so we multiply
		var fontSizeValue = unit === 'px' ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === 'px' ? // line-height is defined as a unitless value, so we multiply
		// by the element's font-size in px to get the px value
		@@ -250,3 +250,3 @@ "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
		var requestedFont = availableFonts[category][fontWeight];
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : '';
		var fontStyleValue = getFontStyle(requestedFont, fontStyle);
		@@ -266,95 +266,95 @@ return Object.assign({
		var titlepieceDefaults = {
		lineHeight: "tight",
		fontWeight: "bold",
		lineHeight: 'tight',
		fontWeight: 'bold',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var titlepieceFs = fs("titlepiece");
		var titlepieceFs = fs('titlepiece');
		var titlepiece = {
		small: function small(options) {
		return titlepieceFs("small", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('small', Object.assign({}, titlepieceDefaults, options));
		},
		medium: function medium(options) {
		return titlepieceFs("medium", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('medium', Object.assign({}, titlepieceDefaults, options));
		},
		large: function large(options) {
		return titlepieceFs("large", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('large', Object.assign({}, titlepieceDefaults, options));
		}
		};
		var headlineDefaults = {
		lineHeight: "tight",
		fontWeight: "medium",
		lineHeight: 'tight',
		fontWeight: 'medium',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var headlineFs = fs("headline");
		var headlineFs = fs('headline');
		var headline = {
		xxxsmall: function xxxsmall(options) {
		return headlineFs("xxxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxxsmall', Object.assign({}, headlineDefaults, options));
		},
		xxsmall: function xxsmall(options) {
		return headlineFs("xxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxsmall', Object.assign({}, headlineDefaults, options));
		},
		xsmall: function xsmall(options) {
		return headlineFs("xsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xsmall', Object.assign({}, headlineDefaults, options));
		},
		small: function small(options) {
		return headlineFs("small", Object.assign({}, headlineDefaults, options));
		return headlineFs('small', Object.assign({}, headlineDefaults, options));
		},
		medium: function medium(options) {
		return headlineFs("medium", Object.assign({}, headlineDefaults, options));
		return headlineFs('medium', Object.assign({}, headlineDefaults, options));
		},
		large: function large(options) {
		return headlineFs("large", Object.assign({}, headlineDefaults, options));
		return headlineFs('large', Object.assign({}, headlineDefaults, options));
		},
		xlarge: function xlarge(options) {
		return headlineFs("xlarge", Object.assign({}, headlineDefaults, options));
		return headlineFs('xlarge', Object.assign({}, headlineDefaults, options));
		}
		};
		var bodyDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var bodyFs = fs("body");
		var bodyFs = fs('body');
		var body = {
		small: function small(options) {
		return bodyFs("small", Object.assign({}, bodyDefaults, options));
		return bodyFs('small', Object.assign({}, bodyDefaults, options));
		},
		medium: function medium(options) {
		return bodyFs("medium", Object.assign({}, bodyDefaults, options));
		return bodyFs('medium', Object.assign({}, bodyDefaults, options));
		}
		};
		var textSansDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var textSansFs = fs("textSans");
		var textSansFs = fs('textSans');
		var textSans = {
		xxsmall: function xxsmall(options) {
		return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxsmall', Object.assign({}, textSansDefaults, options));
		},
		xsmall: function xsmall(options) {
		return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xsmall', Object.assign({}, textSansDefaults, options));
		},
		small: function small(options) {
		return textSansFs("small", Object.assign({}, textSansDefaults, options));
		return textSansFs('small', Object.assign({}, textSansDefaults, options));
		},
		medium: function medium(options) {
		return textSansFs("medium", Object.assign({}, textSansDefaults, options));
		return textSansFs('medium', Object.assign({}, textSansDefaults, options));
		},
		large: function large(options) {
		return textSansFs("large", Object.assign({}, textSansDefaults, options));
		return textSansFs('large', Object.assign({}, textSansDefaults, options));
		},
		xlarge: function xlarge(options) {
		return textSansFs("xlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xlarge', Object.assign({}, textSansDefaults, options));
		},
		xxlarge: function xxlarge(options) {
		return textSansFs("xxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxlarge', Object.assign({}, textSansDefaults, options));
		},
		xxxlarge: function xxxlarge(options) {
		return textSansFs("xxxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxxlarge', Object.assign({}, textSansDefaults, options));
		}
		@@ -361,0 +361,0 @@ };

typography/obj/index.d.ts

		@@ -1,3 +0,3 @@
		import { titlepiece, headline, body, textSans } from "../api";
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "../data";
		import { titlepiece, headline, body, textSans } from '../api';
		import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from '../data';
		export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };

typography/obj/index.js

		@@ -26,6 +26,6 @@ // The theme file is based on the specification at https://system-ui.com/theme
		var fonts = {
		titlepiece: "GT Guardian Titlepiece, Georgia, serif",
		headlineSerif: "GH Guardian Headline, Guardian Egyptian Web, Georgia, serif",
		bodySerif: "GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif",
		bodySans: "GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
		titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
		headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
		bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
		bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'
		};
		@@ -218,7 +218,7 @@ var lineHeights = [1.15, 1.35, 1.5];
		switch (fontStyle) {
		case "italic":
		return font && font.hasItalic ? "italic" : null;
		case 'italic':
		return font && font.hasItalic ? 'italic' : null;

		case "normal":
		return "normal";
		case 'normal':
		return 'normal';

		@@ -238,4 +238,4 @@ case null:
		var fontFamilyValue = fontMapping[category];
		var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === "px" ? // line-height is defined as a unitless value, so we multiply
		var fontSizeValue = unit === 'px' ? fontSizeMapping[category][level] : "".concat(remFontSizeMapping[category][level], "rem");
		var lineHeightValue = unit === 'px' ? // line-height is defined as a unitless value, so we multiply
		// by the element's font-size in px to get the px value
		@@ -246,3 +246,3 @@ "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
		var requestedFont = availableFonts[category][fontWeight];
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
		var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : '';
		var fontStyleValue = getFontStyle(requestedFont, fontStyle);
		@@ -262,95 +262,95 @@ return Object.assign({
		var titlepieceDefaults = {
		lineHeight: "tight",
		fontWeight: "bold",
		lineHeight: 'tight',
		fontWeight: 'bold',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var titlepieceFs = fs("titlepiece");
		var titlepieceFs = fs('titlepiece');
		var titlepiece = {
		small: function small(options) {
		return titlepieceFs("small", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('small', Object.assign({}, titlepieceDefaults, options));
		},
		medium: function medium(options) {
		return titlepieceFs("medium", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('medium', Object.assign({}, titlepieceDefaults, options));
		},
		large: function large(options) {
		return titlepieceFs("large", Object.assign({}, titlepieceDefaults, options));
		return titlepieceFs('large', Object.assign({}, titlepieceDefaults, options));
		}
		};
		var headlineDefaults = {
		lineHeight: "tight",
		fontWeight: "medium",
		lineHeight: 'tight',
		fontWeight: 'medium',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var headlineFs = fs("headline");
		var headlineFs = fs('headline');
		var headline = {
		xxxsmall: function xxxsmall(options) {
		return headlineFs("xxxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxxsmall', Object.assign({}, headlineDefaults, options));
		},
		xxsmall: function xxsmall(options) {
		return headlineFs("xxsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xxsmall', Object.assign({}, headlineDefaults, options));
		},
		xsmall: function xsmall(options) {
		return headlineFs("xsmall", Object.assign({}, headlineDefaults, options));
		return headlineFs('xsmall', Object.assign({}, headlineDefaults, options));
		},
		small: function small(options) {
		return headlineFs("small", Object.assign({}, headlineDefaults, options));
		return headlineFs('small', Object.assign({}, headlineDefaults, options));
		},
		medium: function medium(options) {
		return headlineFs("medium", Object.assign({}, headlineDefaults, options));
		return headlineFs('medium', Object.assign({}, headlineDefaults, options));
		},
		large: function large(options) {
		return headlineFs("large", Object.assign({}, headlineDefaults, options));
		return headlineFs('large', Object.assign({}, headlineDefaults, options));
		},
		xlarge: function xlarge(options) {
		return headlineFs("xlarge", Object.assign({}, headlineDefaults, options));
		return headlineFs('xlarge', Object.assign({}, headlineDefaults, options));
		}
		};
		var bodyDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var bodyFs = fs("body");
		var bodyFs = fs('body');
		var body = {
		small: function small(options) {
		return bodyFs("small", Object.assign({}, bodyDefaults, options));
		return bodyFs('small', Object.assign({}, bodyDefaults, options));
		},
		medium: function medium(options) {
		return bodyFs("medium", Object.assign({}, bodyDefaults, options));
		return bodyFs('medium', Object.assign({}, bodyDefaults, options));
		}
		};
		var textSansDefaults = {
		lineHeight: "loose",
		fontWeight: "regular",
		lineHeight: 'loose',
		fontWeight: 'regular',
		fontStyle: null,
		unit: "rem"
		unit: 'rem'
		};
		var textSansFs = fs("textSans");
		var textSansFs = fs('textSans');
		var textSans = {
		xxsmall: function xxsmall(options) {
		return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxsmall', Object.assign({}, textSansDefaults, options));
		},
		xsmall: function xsmall(options) {
		return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));
		return textSansFs('xsmall', Object.assign({}, textSansDefaults, options));
		},
		small: function small(options) {
		return textSansFs("small", Object.assign({}, textSansDefaults, options));
		return textSansFs('small', Object.assign({}, textSansDefaults, options));
		},
		medium: function medium(options) {
		return textSansFs("medium", Object.assign({}, textSansDefaults, options));
		return textSansFs('medium', Object.assign({}, textSansDefaults, options));
		},
		large: function large(options) {
		return textSansFs("large", Object.assign({}, textSansDefaults, options));
		return textSansFs('large', Object.assign({}, textSansDefaults, options));
		},
		xlarge: function xlarge(options) {
		return textSansFs("xlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xlarge', Object.assign({}, textSansDefaults, options));
		},
		xxlarge: function xxlarge(options) {
		return textSansFs("xxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxlarge', Object.assign({}, textSansDefaults, options));
		},
		xxxlarge: function xxxlarge(options) {
		return textSansFs("xxxlarge", Object.assign({}, textSansDefaults, options));
		return textSansFs('xxxlarge', Object.assign({}, textSansDefaults, options));
		}
		@@ -357,0 +357,0 @@ };

typography/object-styles-to-string.d.ts

		@@ -1,2 +0,2 @@
		import { TypographyStyles } from "./types";
		import { TypographyStyles } from './types';
		export declare const objectStylesToString: ({ fontFamily, fontSize, lineHeight, fontWeight, fontStyle, }: TypographyStyles) => string;

typography/types.d.ts

		@@ -1,6 +0,6 @@
		export declare type ScaleUnit = "rem" \| "px";
		export declare type Category = "titlepiece" \| "headline" \| "body" \| "textSans";
		export declare type LineHeight = "tight" \| "regular" \| "loose";
		export declare type FontWeight = "light" \| "regular" \| "medium" \| "bold";
		export declare type FontStyle = "normal" \| "italic";
		export declare type ScaleUnit = 'rem' \| 'px';
		export declare type Category = 'titlepiece' \| 'headline' \| 'body' \| 'textSans';
		export declare type LineHeight = 'tight' \| 'regular' \| 'loose';
		export declare type FontWeight = 'light' \| 'regular' \| 'medium' \| 'bold';
		export declare type FontStyle = 'normal' \| 'italic';
		export declare type FontWeightDefinition = {
		@@ -7,0 +7,0 @@ hasItalic: boolean;

utils/cjs/index.d.ts

		@@ -1,3 +0,3 @@
		export { FocusStyleManager } from "./focus-style-manager";
		export { pxToRem, rootPixelFontSize } from "./px-to-rem";
		export { resets } from "./resets";
		export { FocusStyleManager } from './focus-style-manager';
		export { pxToRem, rootPixelFontSize } from './px-to-rem';
		export { resets } from './resets';

160

utils/cjs/index.js

		@@ -68,3 +68,3 @@ 'use strict';

		_this.container.addEventListener("mousedown", _this.handleMouseDown);
		_this.container.addEventListener('mousedown', _this.handleMouseDown);
		}
		@@ -78,3 +78,3 @@ });

		_this.container.addEventListener("keydown", _this.handleKeyDown);
		_this.container.addEventListener('keydown', _this.handleKeyDown);
		});
		@@ -95,3 +95,3 @@ }
		value: function start() {
		this.container.addEventListener("mousedown", this.handleMouseDown);
		this.container.addEventListener('mousedown', this.handleMouseDown);
		this.isRunning = true;
		@@ -111,4 +111,4 @@ }
		this.container.classList.remove(this.className);
		this.container.removeEventListener("keydown", this.handleKeyDown);
		this.container.removeEventListener("mousedown", this.handleMouseDown);
		this.container.removeEventListener('keydown', this.handleKeyDown);
		this.container.removeEventListener('mousedown', this.handleMouseDown);
		}
		@@ -119,3 +119,3 @@ }]);
		}();
		var FOCUS_DISABLED = "src-focus-disabled";
		var FOCUS_DISABLED = 'src-focus-disabled';

		@@ -151,80 +151,80 @@ var _focusEngine;
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -278,6 +278,6 @@ };
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -284,0 +284,0 @@ inputChecked: brand[500]

utils/index.d.ts

		@@ -1,3 +0,3 @@
		export { FocusStyleManager } from "./focus-style-manager";
		export { pxToRem, rootPixelFontSize } from "./px-to-rem";
		export { resets } from "./resets";
		export { FocusStyleManager } from './focus-style-manager';
		export { pxToRem, rootPixelFontSize } from './px-to-rem';
		export { resets } from './resets';

160

utils/index.js

		@@ -64,3 +64,3 @@ function _classCallCheck(instance, Constructor) {

		_this.container.addEventListener("mousedown", _this.handleMouseDown);
		_this.container.addEventListener('mousedown', _this.handleMouseDown);
		}
		@@ -74,3 +74,3 @@ });

		_this.container.addEventListener("keydown", _this.handleKeyDown);
		_this.container.addEventListener('keydown', _this.handleKeyDown);
		});
		@@ -91,3 +91,3 @@ }
		value: function start() {
		this.container.addEventListener("mousedown", this.handleMouseDown);
		this.container.addEventListener('mousedown', this.handleMouseDown);
		this.isRunning = true;
		@@ -107,4 +107,4 @@ }
		this.container.classList.remove(this.className);
		this.container.removeEventListener("keydown", this.handleKeyDown);
		this.container.removeEventListener("mousedown", this.handleMouseDown);
		this.container.removeEventListener('keydown', this.handleKeyDown);
		this.container.removeEventListener('mousedown', this.handleMouseDown);
		}
		@@ -115,3 +115,3 @@ }]);
		}();
		var FOCUS_DISABLED = "src-focus-disabled";
		var FOCUS_DISABLED = 'src-focus-disabled';

		@@ -147,80 +147,80 @@ var _focusEngine;
		var colors = {
		reds: ["#660505", //news-100
		"#8B0000", //news-200
		"#AB0613", //news-300
		"#C70000", //news-400, error-400
		"#FF5943", //news-500
		"#FF9081", //news-550, error-500
		"#FFBAC8", //news-600
		"#FFF4F2" //news-800
		reds: ['#660505', //news-100
		'#8B0000', //news-200
		'#AB0613', //news-300
		'#C70000', //news-400, error-400
		'#FF5943', //news-500
		'#FF9081', //news-550, error-500
		'#FFBAC8', //news-600
		'#FFF4F2' //news-800
		],
		oranges: ["#672005", //opinion-100
		"#8D2700", //opinion-200
		"#CB4700", //opinion-300
		"#E05E00", //opinion-400
		"#FF7F0F", //opinion-500
		"#F9B376", //opinion-600
		"#FEF9F5" //opinion-800
		oranges: ['#672005', //opinion-100
		'#8D2700', //opinion-200
		'#CB4700', //opinion-300
		'#E05E00', //opinion-400
		'#FF7F0F', //opinion-500
		'#F9B376', //opinion-600
		'#FEF9F5' //opinion-800
		],
		blues: ["#003C60", //sport-100
		"#004E7C", //sport-200
		"#005689", //sport-300
		"#0084C6", //sport-400
		"#00B2FF", //sport-500
		"#90DCFF", //sport-600
		"#F1F8FC", //sport-800
		"#001536", //brand-100
		"#041F4A", //brand-300
		"#052962", //brand-400
		"#007ABC", //brand-500
		"#506991", //brand-600
		"#C1D8FC" //brand-800
		blues: ['#003C60', //sport-100
		'#004E7C', //sport-200
		'#005689', //sport-300
		'#0084C6', //sport-400
		'#00B2FF', //sport-500
		'#90DCFF', //sport-600
		'#F1F8FC', //sport-800
		'#001536', //brand-100
		'#041F4A', //brand-300
		'#052962', //brand-400
		'#007ABC', //brand-500
		'#506991', //brand-600
		'#C1D8FC' //brand-800
		],
		browns: ["#2B2625", //culture-50
		"#3E3323", //culture-100
		"#574835", //culture-200
		"#6B5840", //culture-300
		"#A1845C", //culture-400
		"#EACCA0", //culture-500
		"#E7D4B9", //culture-600
		"#EFE8DD", //culture-700
		"#FBF6EF" //culture-800
		browns: ['#2B2625', //culture-50
		'#3E3323', //culture-100
		'#574835', //culture-200
		'#6B5840', //culture-300
		'#A1845C', //culture-400
		'#EACCA0', //culture-500
		'#E7D4B9', //culture-600
		'#EFE8DD', //culture-700
		'#FBF6EF' //culture-800
		],
		pinks: ["#510043", //lifestyle-100
		"#650054", //lifestyle-200
		"#7D0068", //lifestyle-300
		"#BB3B80", //lifestyle-400
		"#FFABDB", //lifestyle-500
		"#FEC8D3", //lifestyle-600
		"#FEEEF7" //lifestyle-800
		pinks: ['#510043', //lifestyle-100
		'#650054', //lifestyle-200
		'#7D0068', //lifestyle-300
		'#BB3B80', //lifestyle-400
		'#FFABDB', //lifestyle-500
		'#FEC8D3', //lifestyle-600
		'#FEEEF7' //lifestyle-800
		],
		yellows: ["#F3C100", //brandAlt-200
		"#FFD900", //brandAlt-300
		"#FFE500" //brandAlt-400
		yellows: ['#F3C100', //brandAlt-200
		'#FFD900', //brandAlt-300
		'#FFE500' //brandAlt-400
		],
		greens: ["#185E36", //green-300
		"#22874D", //green-400, success-400
		"#58D08B", //green-500, success-500
		"#4B8878", //labs-200
		"#65A897", //labs-300
		"#69D1CA" //labs-400
		greens: ['#185E36', //green-300
		'#22874D', //green-400, success-400
		'#58D08B', //green-500, success-500
		'#4B8878', //labs-200
		'#65A897', //labs-300
		'#69D1CA' //labs-400
		],
		grays: ["#000000", //neutral-0
		"#121212", //neutral-7
		"#1A1A1A", //neutral-10
		"#333333", //neutral-20
		"#767676", //neutral-46
		"#999999", //neutral-60
		"#DCDCDC", //neutral-86
		"#EDEDED", //neutral-93
		"#F6F6F6", //neutral-97
		"#FFFFFF", //neutral-100
		"#222527", //specialReport-100
		"#303538", //specialReport-200
		"#3F464A", //specialReport-300
		"#595C5F", //specialReport-400
		"#9DA0A2", //specialReport-450
		"#ABC2C9", //specialReport-500
		"#E4E5E8", //specialReport-700
		"#EFF1F2" //specialReport-800
		grays: ['#000000', //neutral-0
		'#121212', //neutral-7
		'#1A1A1A', //neutral-10
		'#333333', //neutral-20
		'#767676', //neutral-46
		'#999999', //neutral-60
		'#DCDCDC', //neutral-86
		'#EDEDED', //neutral-93
		'#F6F6F6', //neutral-97
		'#FFFFFF', //neutral-100
		'#222527', //specialReport-100
		'#303538', //specialReport-200
		'#3F464A', //specialReport-300
		'#595C5F', //specialReport-400
		'#9DA0A2', //specialReport-450
		'#ABC2C9', //specialReport-500
		'#E4E5E8', //specialReport-700
		'#EFF1F2' //specialReport-800
		]
		@@ -274,6 +274,6 @@ };
		ctaPrimary: brand[400],
		ctaPrimaryHover: "#234B8A",
		ctaPrimaryHover: '#234B8A',
		ctaSecondary: brand[800],
		ctaSecondaryHover: "#ACC9F7",
		ctaTertiaryHover: "#E5E5E5",
		ctaSecondaryHover: '#ACC9F7',
		ctaTertiaryHover: '#E5E5E5',
		input: neutral[100],
		@@ -280,0 +280,0 @@ inputChecked: brand[500]

@guardian/src-foundations - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics