@guardian/src-foundations - npm Package Compare versions

Comparing version 2.8.1 to 3.0.0-rc.0

accessibility/cjs/index.d.ts

 declare const visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
 declare const focusHalo: string;
 declare const descriptionId: (id: string) => string;
-export { visuallyHidden, focusHalo, descriptionId };
+declare const generateSourceId: () => string;
+export { visuallyHidden, focusHalo, descriptionId, generateSourceId };

accessibility/cjs/index.js

@@ -14,4 +14,11 @@ 'use strict';
 
+var sourceIdIndex = 0;
+
+var generateSourceId = function generateSourceId() {
+  return "src-component-".concat(sourceIdIndex++);
+};
+
 exports.descriptionId = descriptionId;
 exports.focusHalo = focusHalo;
+exports.generateSourceId = generateSourceId;
 exports.visuallyHidden = visuallyHidden;

accessibility/index.d.ts

 declare const visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
 declare const focusHalo: string;
 declare const descriptionId: (id: string) => string;
-export { visuallyHidden, focusHalo, descriptionId };
+declare const generateSourceId: () => string;
+export { visuallyHidden, focusHalo, descriptionId, generateSourceId };

accessibility/index.js

@@ -10,2 +10,8 @@ import { border } from '@guardian/src-foundations/palette';
 
-export { descriptionId, focusHalo, visuallyHidden };
+var sourceIdIndex = 0;
+
+var generateSourceId = function generateSourceId() {
+  return "src-component-".concat(sourceIdIndex++);
+};
+
+export { descriptionId, focusHalo, generateSourceId, visuallyHidden };

foundations.esm.js

@@ -37,3 +37,4 @@ // The theme file is based on the specification at https://system-ui.com/theme
   ],
-  browns: ["#3E3323", //culture-100
+  browns: ["#2B2625", //culture-50
+  "#3E3323", //culture-100
   "#574835", //culture-200
@@ -44,2 +45,3 @@ "#6B5840", //culture-300
   "#E7D4B9", //culture-600
+  "#EFE8DD", //culture-700
   "#FBF6EF" //culture-800
@@ -79,5 +81,6 @@ ],
   "#3F464A", //specialReport-300
-  "#63717A", //specialReport-400
+  "#595C5F", //specialReport-400
+  "#9DA0A2", //specialReport-450
   "#ABC2C9", //specialReport-500
-  "#33393D", //dynamo-400
+  "#E4E5E8", //specialReport-700
   "#EFF1F2" //specialReport-800
@@ -174,9 +177,11 @@ ]
 var culture = {
-  100: colors.browns[0],
-  200: colors.browns[1],
-  300: colors.browns[2],
-  400: colors.browns[3],
-  500: colors.browns[4],
-  600: colors.browns[5],
-  800: colors.browns[6]
+  50: colors.browns[0],
+  100: colors.browns[1],
+  200: colors.browns[2],
+  300: colors.browns[3],
+  400: colors.browns[4],
+  500: colors.browns[5],
+  600: colors.browns[6],
+  700: colors.browns[7],
+  800: colors.browns[8]
 };
@@ -202,9 +207,6 @@ var lifestyle = {
   400: colors.grays[13],
-  500: colors.grays[14],
-  800: colors.grays[16]
-}; // Deprecated - please do not use
-// TODO: remove in v3.0.0
-
-var dynamo = {
-  400: colors.grays[15]
+  450: colors.grays[14],
+  500: colors.grays[15],
+  700: colors.grays[16],
+  800: colors.grays[17]
 };
@@ -391,2 +393,2 @@
 
-export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, breakpoints$1 as breakpoints, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, palette, remSpace, space$1 as space, specialReport, sport, success, text, transitions$1 as transitions };
+export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, breakpoints$1 as breakpoints, culture, error, labs, lifestyle, line, neutral, news, opinion, palette, remSpace, space$1 as space, specialReport, sport, success, text, transitions$1 as transitions };

foundations.js

@@ -41,3 +41,4 @@ 'use strict';
   ],
-  browns: ["#3E3323", //culture-100
+  browns: ["#2B2625", //culture-50
+  "#3E3323", //culture-100
   "#574835", //culture-200
@@ -48,2 +49,3 @@ "#6B5840", //culture-300
   "#E7D4B9", //culture-600
+  "#EFE8DD", //culture-700
   "#FBF6EF" //culture-800
@@ -83,5 +85,6 @@ ],
   "#3F464A", //specialReport-300
-  "#63717A", //specialReport-400
+  "#595C5F", //specialReport-400
+  "#9DA0A2", //specialReport-450
   "#ABC2C9", //specialReport-500
-  "#33393D", //dynamo-400
+  "#E4E5E8", //specialReport-700
   "#EFF1F2" //specialReport-800
@@ -178,9 +181,11 @@ ]
 var culture = {
-  100: colors.browns[0],
-  200: colors.browns[1],
-  300: colors.browns[2],
-  400: colors.browns[3],
-  500: colors.browns[4],
-  600: colors.browns[5],
-  800: colors.browns[6]
+  50: colors.browns[0],
+  100: colors.browns[1],
+  200: colors.browns[2],
+  300: colors.browns[3],
+  400: colors.browns[4],
+  500: colors.browns[5],
+  600: colors.browns[6],
+  700: colors.browns[7],
+  800: colors.browns[8]
 };
@@ -206,9 +211,6 @@ var lifestyle = {
   400: colors.grays[13],
-  500: colors.grays[14],
-  800: colors.grays[16]
-}; // Deprecated - please do not use
-// TODO: remove in v3.0.0
-
-var dynamo = {
-  400: colors.grays[15]
+  450: colors.grays[14],
+  500: colors.grays[15],
+  700: colors.grays[16],
+  800: colors.grays[17]
 };
@@ -409,3 +411,2 @@
 exports.culture = culture;
-exports.dynamo = dynamo;
 exports.error = error;
@@ -412,0 +413,0 @@ exports.labs = labs;

index.d.ts

@@ -172,2 +172,3 @@ export * from "./animation";
     culture: {
+        50: string;
         100: string;
@@ -179,2 +180,3 @@ 200: string;
         600: string;
+        700: string;
         800: string;
@@ -181,0 +183,0 @@ };

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "2.8.1",
+	"version": "3.0.0-rc.0",
 	"license": "Apache-2.0",
@@ -5,0 +5,0 @@ "main": "foundations.js",

palette/cjs/global.d.ts

@@ -63,2 +63,3 @@ export declare const brand: {
 export declare const culture: {
+    50: string;
     100: string;
@@ -70,2 +71,3 @@ 200: string;
     600: string;
+    700: string;
     800: string;
@@ -92,7 +94,6 @@ };
     400: string;
+    450: string;
     500: string;
+    700: string;
     800: string;
 };
-export declare const dynamo: {
-    400: string;
-};

palette/cjs/index.js

@@ -41,3 +41,4 @@ 'use strict';
   ],
-  browns: ["#3E3323", //culture-100
+  browns: ["#2B2625", //culture-50
+  "#3E3323", //culture-100
   "#574835", //culture-200
@@ -48,2 +49,3 @@ "#6B5840", //culture-300
   "#E7D4B9", //culture-600
+  "#EFE8DD", //culture-700
   "#FBF6EF" //culture-800
@@ -83,5 +85,6 @@ ],
   "#3F464A", //specialReport-300
-  "#63717A", //specialReport-400
+  "#595C5F", //specialReport-400
+  "#9DA0A2", //specialReport-450
   "#ABC2C9", //specialReport-500
-  "#33393D", //dynamo-400
+  "#E4E5E8", //specialReport-700
   "#EFF1F2" //specialReport-800
@@ -154,9 +157,11 @@ ]
 var culture = {
-  100: colors.browns[0],
-  200: colors.browns[1],
-  300: colors.browns[2],
-  400: colors.browns[3],
-  500: colors.browns[4],
-  600: colors.browns[5],
-  800: colors.browns[6]
+  50: colors.browns[0],
+  100: colors.browns[1],
+  200: colors.browns[2],
+  300: colors.browns[3],
+  400: colors.browns[4],
+  500: colors.browns[5],
+  600: colors.browns[6],
+  700: colors.browns[7],
+  800: colors.browns[8]
 };
@@ -182,9 +187,6 @@ var lifestyle = {
   400: colors.grays[13],
-  500: colors.grays[14],
-  800: colors.grays[16]
-}; // Deprecated - please do not use
-// TODO: remove in v3.0.0
-
-var dynamo = {
-  400: colors.grays[15]
+  450: colors.grays[14],
+  500: colors.grays[15],
+  700: colors.grays[16],
+  800: colors.grays[17]
 };
@@ -323,3 +325,2 @@
 exports.culture = culture;
-exports.dynamo = dynamo;
 exports.error = error;
@@ -326,0 +327,0 @@ exports.labs = labs;

palette/global.d.ts

@@ -63,2 +63,3 @@ export declare const brand: {
 export declare const culture: {
+    50: string;
     100: string;
@@ -70,2 +71,3 @@ 200: string;
     600: string;
+    700: string;
     800: string;
@@ -92,7 +94,6 @@ };
     400: string;
+    450: string;
     500: string;
+    700: string;
     800: string;
 };
-export declare const dynamo: {
-    400: string;
-};

palette/index.js

@@ -37,3 +37,4 @@ // The theme file is based on the specification at https://system-ui.com/theme
   ],
-  browns: ["#3E3323", //culture-100
+  browns: ["#2B2625", //culture-50
+  "#3E3323", //culture-100
   "#574835", //culture-200
@@ -44,2 +45,3 @@ "#6B5840", //culture-300
   "#E7D4B9", //culture-600
+  "#EFE8DD", //culture-700
   "#FBF6EF" //culture-800
@@ -79,5 +81,6 @@ ],
   "#3F464A", //specialReport-300
-  "#63717A", //specialReport-400
+  "#595C5F", //specialReport-400
+  "#9DA0A2", //specialReport-450
   "#ABC2C9", //specialReport-500
-  "#33393D", //dynamo-400
+  "#E4E5E8", //specialReport-700
   "#EFF1F2" //specialReport-800
@@ -150,9 +153,11 @@ ]
 var culture = {
-  100: colors.browns[0],
-  200: colors.browns[1],
-  300: colors.browns[2],
-  400: colors.browns[3],
-  500: colors.browns[4],
-  600: colors.browns[5],
-  800: colors.browns[6]
+  50: colors.browns[0],
+  100: colors.browns[1],
+  200: colors.browns[2],
+  300: colors.browns[3],
+  400: colors.browns[4],
+  500: colors.browns[5],
+  600: colors.browns[6],
+  700: colors.browns[7],
+  800: colors.browns[8]
 };
@@ -178,9 +183,6 @@ var lifestyle = {
   400: colors.grays[13],
-  500: colors.grays[14],
-  800: colors.grays[16]
-}; // Deprecated - please do not use
-// TODO: remove in v3.0.0
-
-var dynamo = {
-  400: colors.grays[15]
+  450: colors.grays[14],
+  500: colors.grays[15],
+  700: colors.grays[16],
+  800: colors.grays[17]
 };
@@ -306,2 +308,2 @@
 
-export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, specialReport, sport, success, text };
+export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, culture, error, labs, lifestyle, line, neutral, news, opinion, specialReport, sport, success, text };

src/accessibility/index.ts

@@ -21,2 +21,6 @@ import { border } from "@guardian/src-foundations/palette"
 
-export { visuallyHidden, focusHalo, descriptionId }
+let sourceIdIndex = 0
+
+const generateSourceId = () => `src-component-${sourceIdIndex++}`
+
+export { visuallyHidden, focusHalo, descriptionId, generateSourceId }

src/palette/global.ts

@@ -86,9 +86,11 @@ // Global colour names that correspond to https://www.theguardian.design/2a1e5182b/p/938810-colour/b/587ef3
 export const culture = {
-	100: colors.browns[0],
-	200: colors.browns[1],
-	300: colors.browns[2],
-	400: colors.browns[3],
-	500: colors.browns[4],
-	600: colors.browns[5],
-	800: colors.browns[6],
+	50: colors.browns[0],
+	100: colors.browns[1],
+	200: colors.browns[2],
+	300: colors.browns[3],
+	400: colors.browns[4],
+	500: colors.browns[5],
+	600: colors.browns[6],
+	700: colors.browns[7],
+	800: colors.browns[8],
 }
@@ -115,10 +117,6 @@ export const lifestyle = {
 	400: colors.grays[13],
-	500: colors.grays[14],
-	800: colors.grays[16],
+	450: colors.grays[14],
+	500: colors.grays[15],
+	700: colors.grays[16],
+	800: colors.grays[17],
 }
-
-// Deprecated - please do not use
-// TODO: remove in v3.0.0
-export const dynamo = {
-	400: colors.grays[15],
-}

src/theme.ts

@@ -25,3 +25,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
 
-const fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70]
+const fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70]
 
@@ -81,2 +81,3 @@ const fonts = {
 	browns: [
+		"#2B2625", //culture-50
 		"#3E3323", //culture-100
@@ -88,2 +89,3 @@ "#574835", //culture-200
 		"#E7D4B9", //culture-600
+		"#EFE8DD", //culture-700
 		"#FBF6EF", //culture-800
@@ -127,5 +129,6 @@ ],
 		"#3F464A", //specialReport-300
-		"#63717A", //specialReport-400
+		"#595C5F", //specialReport-400
+		"#9DA0A2", //specialReport-450
 		"#ABC2C9", //specialReport-500
-		"#33393D", //dynamo-400
+		"#E4E5E8", //specialReport-700
 		"#EFF1F2", //specialReport-800
@@ -132,0 +135,0 @@ ],

src/themes/accordion.ts

 import { text, border } from "@guardian/src-foundations/palette"
 
-export type AccordionTheme = {
-	textPrimary: string
-	borderPrimary: string
-}
-
-export const accordionDefault: { accordion: AccordionTheme } = {
+export const accordionDefault = {
 	accordion: {
@@ -10,0 +5,0 @@ textPrimary: text.primary,

src/themes/checkbox.ts

@@ -9,25 +9,6 @@ import {
 } from "@guardian/src-foundations/palette"
-import {
-	userFeedbackDefault,
-	userFeedbackBrand,
-	UserFeedbackTheme,
-} from "./user-feedback"
-import { labelDefault, labelBrand, LabelTheme } from "./label"
+import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
+import { labelDefault, labelBrand } from "./label"
 
-export type CheckboxTheme = {
-	border: string
-	borderHover: string
-	borderChecked: string
-	borderError: string
-	backgroundChecked: string
-	textLabel: string
-	textLabelSupporting: string
-	textIndeterminate: string
-}
-
-export const checkboxDefault: {
-	checkbox: CheckboxTheme
-	userFeedback: UserFeedbackTheme
-	label: LabelTheme
-} = {
+export const checkboxDefault = {
 	checkbox: {
@@ -47,6 +28,3 @@ border: border.input,
 
-export const checkboxBrand: {
-	checkbox: CheckboxTheme
-	userFeedback: UserFeedbackTheme
-} = {
+export const checkboxBrand = {
 	checkbox: {
@@ -53,0 +31,0 @@ border: brandBorder.input,

src/themes/choice-card.ts

 import { border, text, background } from "@guardian/src-foundations/palette"
-import { UserFeedbackTheme, userFeedbackDefault } from "./user-feedback"
+import { userFeedbackDefault } from "./user-feedback"
 
-export type ChoiceCardTheme = {
-	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
-}
-
-export const choiceCardDefault: {
-	choiceCard: ChoiceCardTheme
-	userFeedback: UserFeedbackTheme
-} = {
+export const choiceCardDefault = {
 	choiceCard: {
@@ -25,0 +6,0 @@ textLabel: text.supporting,

src/themes/footer.ts

@@ -7,13 +7,3 @@ import {
 
-export type FooterTheme = {
-	border: string
-	background: string
-	text: string
-	anchor: string
-	anchorHover: string
-}
-
-export const footerBrand: {
-	footer: FooterTheme
-} = {
+export const footerBrand = {
 	footer: {
@@ -20,0 +10,0 @@ border: brandBorder.primary,

src/themes/index.ts

@@ -6,3 +6,2 @@ export * from "./accordion"
 export * from "./footer"
-export * from "./inline-error"
 export * from "./label"
@@ -19,3 +18,2 @@ export * from "./link"
 import { footerBrand } from "./footer"
-import { inlineErrorBrand, inlineErrorDefault } from "./inline-error"
 import { labelDefault, labelBrand } from "./label"
@@ -31,3 +29,2 @@ import { linkBrand, linkDefault, linkBrandAlt } from "./link"
 	...choiceCardDefault,
-	...inlineErrorDefault,
 	...labelDefault,
@@ -44,3 +41,2 @@ ...linkDefault,
 	...footerBrand,
-	...inlineErrorBrand,
 	...labelBrand,
@@ -47,0 +43,0 @@ ...linkBrand,

src/themes/label.ts

 import { text, brandText } from "@guardian/src-foundations/palette"
 
-export type LabelTheme = {
-	textLabel: string
-	textOptional: string
-	textSupporting: string
-	textError: string
-	textSuccess: string
-}
-
-export const labelDefault: {
-	label: LabelTheme
-} = {
+export const labelDefault = {
 	label: {
@@ -23,5 +13,3 @@ textLabel: text.inputLabel,
 
-export const labelBrand: {
-	label: LabelTheme
-} = {
+export const labelBrand = {
 	label: {
@@ -28,0 +16,0 @@ textLabel: brandText.inputLabel,

src/themes/radio.ts

@@ -9,23 +9,6 @@ import {
 } from "@guardian/src-foundations/palette"
-import {
-	userFeedbackDefault,
-	userFeedbackBrand,
-	UserFeedbackTheme,
-} from "./user-feedback"
-import { labelDefault, labelBrand, LabelTheme } from "./label"
+import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
+import { labelDefault, labelBrand } from "./label"
 
-export type RadioTheme = {
-	borderHover: string
-	border: string
-	backgroundChecked: string
-	textLabel: string
-	textLabelSupporting: string
-	borderError: string
-}
-
-export const radioDefault: {
-	radio: RadioTheme
-	userFeedback: UserFeedbackTheme
-	label: LabelTheme
-} = {
+export const radioDefault = {
 	radio: {
@@ -43,7 +26,3 @@ borderHover: border.inputHover,
 
-export const radioBrand: {
-	radio: RadioTheme
-	userFeedback: UserFeedbackTheme
-	label: LabelTheme
-} = {
+export const radioBrand = {
 	radio: {
@@ -50,0 +29,0 @@ borderHover: brandBorder.inputHover,

src/themes/select.ts

 import { text, background, border } from "@guardian/src-foundations/palette"
-import { userFeedbackDefault, UserFeedbackTheme } from "./user-feedback"
+import { userFeedbackDefault } from "./user-feedback"
 
-export type SelectTheme = {
-	textUserInput: string
-	textLabel: string
-	textLabelOptional: string
-	textLabelSupporting: string
-	textError: string
-	textSuccess: string
-	backgroundInput: string
-	border: string
-	borderActive: string
-	borderError: string
-	borderSuccess: string
-}
-
-export const selectDefault: {
-	select: SelectTheme
-	userFeedback: UserFeedbackTheme
-} = {
+export const selectDefault = {
 	select: {
@@ -23,0 +6,0 @@ textUserInput: text.userInput,

src/themes/text-input.ts

 import { text, background, border } from "@guardian/src-foundations/palette"
-import { userFeedbackDefault, UserFeedbackTheme } from "./user-feedback"
+import { userFeedbackDefault } from "./user-feedback"
 
-export type TextInputTheme = {
-	textUserInput: string
-	textLabel: string
-	textLabelOptional: string
-	textLabelSupporting: string
-	textError: string
-	textSuccess: string
-	backgroundInput: string
-	border: string
-	borderActive: string
-	borderError: string
-	borderSuccess: string
-}
-
-export const textInputDefault: {
-	textInput: TextInputTheme
-	userFeedback: UserFeedbackTheme
-} = {
+export const textInputDefault = {
 	textInput: {
@@ -23,0 +6,0 @@ textUserInput: text.userInput,

src/themes/user-feedback.ts

 import { text, brandText } from "@guardian/src-foundations/palette"
 
-export type UserFeedbackTheme = {
-	textSuccess: string
-	textError: string
-}
-
-export const userFeedbackDefault: { userFeedback: UserFeedbackTheme } = {
+export const userFeedbackDefault = {
 	userFeedback: {
@@ -15,3 +10,3 @@ textSuccess: text.success,
 
-export const userFeedbackBrand: { userFeedback: UserFeedbackTheme } = {
+export const userFeedbackBrand = {
 	userFeedback: {
@@ -18,0 +13,0 @@ textSuccess: brandText.success,

src/typography/api.ts

@@ -92,2 +92,4 @@ import {
 export const textSans: TextSansFunctions = {
+	xxsmall: (options?: FontScaleArgs) =>
+		textSansFs("xxsmall", Object.assign({}, textSansDefaults, options)),
 	xsmall: (options?: FontScaleArgs) =>
@@ -94,0 +96,0 @@ textSansFs("xsmall", Object.assign({}, textSansDefaults, options)),

src/typography/data.ts

@@ -16,30 +16,31 @@ import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
 const titlepieceSizes: TitlepieceSizes = {
-	small: fontSizes[7], //42px
-	medium: fontSizes[8], //50px
-	large: fontSizes[9], //70px
+	small: fontSizes[8], //42px
+	medium: fontSizes[9], //50px
+	large: fontSizes[10], //70px
 }
 
 const headlineSizes: HeadlineSizes = {
-	xxxsmall: fontSizes[2], //17px
-	xxsmall: fontSizes[3], //20px
-	xsmall: fontSizes[4], //24px
-	small: fontSizes[5], //28px
-	medium: fontSizes[6], //34px
-	large: fontSizes[7], //42px
-	xlarge: fontSizes[8], //50px
+	xxxsmall: fontSizes[3], //17px
+	xxsmall: fontSizes[4], //20px
+	xsmall: fontSizes[5], //24px
+	small: fontSizes[6], //28px
+	medium: fontSizes[7], //34px
+	large: fontSizes[8], //42px
+	xlarge: fontSizes[9], //50px
 }
 
 const bodySizes: BodySizes = {
-	small: fontSizes[1], //15px
-	medium: fontSizes[2], //17px
+	small: fontSizes[2], //15px
+	medium: fontSizes[3], //17px
 }
 
 const textSansSizes: TextSansSizes = {
-	xsmall: fontSizes[0], //12px
-	small: fontSizes[1], //15px
-	medium: fontSizes[2], //17px
-	large: fontSizes[3], //20px
-	xlarge: fontSizes[4], //24px
-	xxlarge: fontSizes[5], //28px
-	xxxlarge: fontSizes[6], //34px
+	xxsmall: fontSizes[0], //12px
+	xsmall: fontSizes[1], //14px
+	small: fontSizes[2], //15px
+	medium: fontSizes[3], //17px
+	large: fontSizes[4], //20px
+	xlarge: fontSizes[5], //24px
+	xxlarge: fontSizes[6], //28px
+	xxxlarge: fontSizes[7], //34px
 }
@@ -59,30 +60,31 @@
 const remTitlepieceSizes: TitlepieceSizes = {
-	small: remFontSizes[7], //42px
-	medium: remFontSizes[8], //50px
-	large: remFontSizes[9], //70px
+	small: remFontSizes[8], //42px
+	medium: remFontSizes[9], //50px
+	large: remFontSizes[10], //70px
 }
 
 const remHeadlineSizes: HeadlineSizes = {
-	xxxsmall: remFontSizes[2], //17px
-	xxsmall: remFontSizes[3], //20px
-	xsmall: remFontSizes[4], //24px
-	small: remFontSizes[5], //28px
-	medium: remFontSizes[6], //34px
-	large: remFontSizes[7], //42px
-	xlarge: remFontSizes[8], //50px
+	xxxsmall: remFontSizes[3], //17px
+	xxsmall: remFontSizes[4], //20px
+	xsmall: remFontSizes[5], //24px
+	small: remFontSizes[6], //28px
+	medium: remFontSizes[7], //34px
+	large: remFontSizes[8], //42px
+	xlarge: remFontSizes[9], //50px
 }
 
 const remBodySizes: BodySizes = {
-	small: remFontSizes[1], //15px
-	medium: remFontSizes[2], //17px
+	small: remFontSizes[2], //15px
+	medium: remFontSizes[3], //17px
 }
 
 const remTextSansSizes: TextSansSizes = {
-	xsmall: remFontSizes[0], //12px
-	small: remFontSizes[1], //15px
-	medium: remFontSizes[2], //17px
-	large: remFontSizes[3], //20px
-	xlarge: remFontSizes[4], //24px
-	xxlarge: remFontSizes[5], //28px
-	xxxlarge: remFontSizes[6], //34px
+	xxsmall: remFontSizes[0], //12px
+	xsmall: remFontSizes[1], //14px
+	small: remFontSizes[2], //15px
+	medium: remFontSizes[3], //17px
+	large: remFontSizes[4], //20px
+	xlarge: remFontSizes[5], //24px
+	xxlarge: remFontSizes[6], //28px
+	xxxlarge: remFontSizes[7], //34px
 }
@@ -89,0 +91,0 @@

src/typography/types.ts

@@ -40,2 +40,3 @@ export type ScaleUnit = "rem" | "px"
 export interface TextSansSizes extends TypographySizes {
+	xxsmall: number
 	xsmall: number
@@ -42,0 +43,0 @@ small: number

themes/accordion.d.ts

@@ -1,7 +0,6 @@
-export declare type AccordionTheme = {
-    textPrimary: string;
-    borderPrimary: string;
-};
 export declare const accordionDefault: {
-    accordion: AccordionTheme;
+    accordion: {
+        textPrimary: string;
+        borderPrimary: string;
+    };
 };

themes/checkbox.d.ts

@@ -1,21 +0,46 @@
-import { UserFeedbackTheme } from "./user-feedback";
-import { LabelTheme } from "./label";
-export declare type CheckboxTheme = {
-    border: string;
-    borderHover: string;
-    borderChecked: string;
-    borderError: string;
-    backgroundChecked: string;
-    textLabel: string;
-    textLabelSupporting: string;
-    textIndeterminate: string;
-};
 export declare const checkboxDefault: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
 };
 export declare const checkboxBrand: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
 };

themes/choice-card.d.ts

@@ -1,20 +0,21 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type ChoiceCardTheme = {
-    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;
-};
 export declare const choiceCardDefault: {
-    choiceCard: ChoiceCardTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: 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;
+    };
 };

themes/cjs/accordion.d.ts

@@ -1,7 +0,6 @@
-export declare type AccordionTheme = {
-    textPrimary: string;
-    borderPrimary: string;
-};
 export declare const accordionDefault: {
-    accordion: AccordionTheme;
+    accordion: {
+        textPrimary: string;
+        borderPrimary: string;
+    };
 };

themes/cjs/checkbox.d.ts

@@ -1,21 +0,46 @@
-import { UserFeedbackTheme } from "./user-feedback";
-import { LabelTheme } from "./label";
-export declare type CheckboxTheme = {
-    border: string;
-    borderHover: string;
-    borderChecked: string;
-    borderError: string;
-    backgroundChecked: string;
-    textLabel: string;
-    textLabelSupporting: string;
-    textIndeterminate: string;
-};
 export declare const checkboxDefault: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
 };
 export declare const checkboxBrand: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
 };

themes/cjs/choice-card.d.ts

@@ -1,20 +0,21 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type ChoiceCardTheme = {
-    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;
-};
 export declare const choiceCardDefault: {
-    choiceCard: ChoiceCardTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: 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;
+    };
 };

themes/cjs/footer.d.ts

@@ -1,10 +0,9 @@
-export declare type FooterTheme = {
-    border: string;
-    background: string;
-    text: string;
-    anchor: string;
-    anchorHover: string;
-};
 export declare const footerBrand: {
-    footer: FooterTheme;
+    footer: {
+        border: string;
+        background: string;
+        text: string;
+        anchor: string;
+        anchorHover: string;
+    };
 };

themes/cjs/index.d.ts

@@ -6,3 +6,2 @@ export * from "./accordion";
 export * from "./footer";
-export * from "./inline-error";
 export * from "./label";
@@ -15,20 +14,100 @@ export * from "./link";
 export declare const defaultTheme: {
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    textInput: import("./text-input").TextInputTheme;
-    radio: import("./radio").RadioTheme;
-    label: import("./label").LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    textInput: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
     link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
+    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;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
     button: import("./button").ButtonTheme;
 };
 export declare const brand: {
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    radio: import("./radio").RadioTheme;
-    label: import("./label").LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
     link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    footer: import("./footer").FooterTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
+    footer: {
+        border: string;
+        background: string;
+        text: string;
+        anchor: string;
+        anchorHover: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
     button: import("./button").ButtonTheme;
@@ -35,0 +114,0 @@ };

themes/cjs/index.js

@@ -191,13 +191,2 @@ 'use strict';
 
-var inlineErrorDefault = {
-  inlineError: {
-    text: palette.text.error
-  }
-};
-var inlineErrorBrand = {
-  inlineError: {
-    text: palette.brandText.error
-  }
-};
-
 var linkDefault = {
@@ -277,4 +266,4 @@ link: {
 
-var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), labelDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
-var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), inlineErrorBrand), labelBrand), linkBrand), radioBrand), userFeedbackBrand);
+var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), labelDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
+var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), labelBrand), linkBrand), radioBrand), userFeedbackBrand);
 var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
@@ -293,4 +282,2 @@
 exports.footerBrand = footerBrand;
-exports.inlineErrorBrand = inlineErrorBrand;
-exports.inlineErrorDefault = inlineErrorDefault;
 exports.labelBrand = labelBrand;
@@ -297,0 +284,0 @@ exports.labelDefault = labelDefault;

themes/cjs/label.d.ts

@@ -1,13 +0,18 @@
-export declare type LabelTheme = {
-    textLabel: string;
-    textOptional: string;
-    textSupporting: string;
-    textError: string;
-    textSuccess: string;
-};
 export declare const labelDefault: {
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
 };
 export declare const labelBrand: {
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
 };

themes/cjs/radio.d.ts

@@ -1,20 +0,42 @@
-import { UserFeedbackTheme } from "./user-feedback";
-import { LabelTheme } from "./label";
-export declare type RadioTheme = {
-    borderHover: string;
-    border: string;
-    backgroundChecked: string;
-    textLabel: string;
-    textLabelSupporting: string;
-    borderError: string;
-};
 export declare const radioDefault: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
 };
 export declare const radioBrand: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
 };

themes/cjs/select.d.ts

@@ -1,18 +0,19 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type SelectTheme = {
-    textUserInput: string;
-    textLabel: string;
-    textLabelOptional: string;
-    textLabelSupporting: string;
-    textError: string;
-    textSuccess: string;
-    backgroundInput: string;
-    border: string;
-    borderActive: string;
-    borderError: string;
-    borderSuccess: string;
-};
 export declare const selectDefault: {
-    select: SelectTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    select: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
 };

themes/cjs/text-input.d.ts

@@ -1,18 +0,19 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type TextInputTheme = {
-    textUserInput: string;
-    textLabel: string;
-    textLabelOptional: string;
-    textLabelSupporting: string;
-    textError: string;
-    textSuccess: string;
-    backgroundInput: string;
-    border: string;
-    borderActive: string;
-    borderError: string;
-    borderSuccess: string;
-};
 export declare const textInputDefault: {
-    textInput: TextInputTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    textInput: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
 };

themes/cjs/user-feedback.d.ts

@@ -1,10 +0,12 @@
-export declare type UserFeedbackTheme = {
-    textSuccess: string;
-    textError: string;
-};
 export declare const userFeedbackDefault: {
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
 };
 export declare const userFeedbackBrand: {
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
 };

themes/footer.d.ts

@@ -1,10 +0,9 @@
-export declare type FooterTheme = {
-    border: string;
-    background: string;
-    text: string;
-    anchor: string;
-    anchorHover: string;
-};
 export declare const footerBrand: {
-    footer: FooterTheme;
+    footer: {
+        border: string;
+        background: string;
+        text: string;
+        anchor: string;
+        anchorHover: string;
+    };
 };

themes/index.d.ts

@@ -6,3 +6,2 @@ export * from "./accordion";
 export * from "./footer";
-export * from "./inline-error";
 export * from "./label";
@@ -15,20 +14,100 @@ export * from "./link";
 export declare const defaultTheme: {
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    textInput: import("./text-input").TextInputTheme;
-    radio: import("./radio").RadioTheme;
-    label: import("./label").LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    textInput: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
     link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
+    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;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
     button: import("./button").ButtonTheme;
 };
 export declare const brand: {
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    radio: import("./radio").RadioTheme;
-    label: import("./label").LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
     link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    footer: import("./footer").FooterTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
+    footer: {
+        border: string;
+        background: string;
+        text: string;
+        anchor: string;
+        anchorHover: string;
+    };
+    checkbox: {
+        border: string;
+        borderHover: string;
+        borderChecked: string;
+        borderError: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        textIndeterminate: string;
+    };
     button: import("./button").ButtonTheme;
@@ -35,0 +114,0 @@ };

themes/index.js

@@ -187,13 +187,2 @@ import { text, border, background, brandText, brandBackground, brandBorder, brandAltText, brandAltBackground, brandAltBorder } from '@guardian/src-foundations/palette';
 
-var inlineErrorDefault = {
-  inlineError: {
-    text: text.error
-  }
-};
-var inlineErrorBrand = {
-  inlineError: {
-    text: brandText.error
-  }
-};
-
 var linkDefault = {
@@ -273,6 +262,6 @@ link: {
 
-var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), labelDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
-var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), inlineErrorBrand), labelBrand), linkBrand), radioBrand), userFeedbackBrand);
+var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), labelDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
+var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), labelBrand), linkBrand), radioBrand), userFeedbackBrand);
 var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
 
-export { accordionDefault, brand, brandAlt, buttonBrand, buttonBrandAlt, buttonDefault, checkboxBrand, checkboxDefault, choiceCardDefault, defaultTheme, footerBrand, inlineErrorBrand, inlineErrorDefault, labelBrand, labelDefault, linkBrand, linkBrandAlt, linkDefault, radioBrand, radioDefault, selectDefault, textInputDefault, userFeedbackBrand, userFeedbackDefault };
+export { accordionDefault, brand, brandAlt, buttonBrand, buttonBrandAlt, buttonDefault, checkboxBrand, checkboxDefault, choiceCardDefault, defaultTheme, footerBrand, labelBrand, labelDefault, linkBrand, linkBrandAlt, linkDefault, radioBrand, radioDefault, selectDefault, textInputDefault, userFeedbackBrand, userFeedbackDefault };

themes/label.d.ts

@@ -1,13 +0,18 @@
-export declare type LabelTheme = {
-    textLabel: string;
-    textOptional: string;
-    textSupporting: string;
-    textError: string;
-    textSuccess: string;
-};
 export declare const labelDefault: {
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
 };
 export declare const labelBrand: {
-    label: LabelTheme;
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
 };

themes/radio.d.ts

@@ -1,20 +0,42 @@
-import { UserFeedbackTheme } from "./user-feedback";
-import { LabelTheme } from "./label";
-export declare type RadioTheme = {
-    borderHover: string;
-    border: string;
-    backgroundChecked: string;
-    textLabel: string;
-    textLabelSupporting: string;
-    borderError: string;
-};
 export declare const radioDefault: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
 };
 export declare const radioBrand: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-    label: LabelTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    label: {
+        textLabel: string;
+        textOptional: string;
+        textSupporting: string;
+        textError: string;
+        textSuccess: string;
+    };
+    radio: {
+        borderHover: string;
+        border: string;
+        backgroundChecked: string;
+        textLabel: string;
+        textLabelSupporting: string;
+        borderError: string;
+    };
 };

themes/select.d.ts

@@ -1,18 +0,19 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type SelectTheme = {
-    textUserInput: string;
-    textLabel: string;
-    textLabelOptional: string;
-    textLabelSupporting: string;
-    textError: string;
-    textSuccess: string;
-    backgroundInput: string;
-    border: string;
-    borderActive: string;
-    borderError: string;
-    borderSuccess: string;
-};
 export declare const selectDefault: {
-    select: SelectTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    select: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
 };

themes/text-input.d.ts

@@ -1,18 +0,19 @@
-import { UserFeedbackTheme } from "./user-feedback";
-export declare type TextInputTheme = {
-    textUserInput: string;
-    textLabel: string;
-    textLabelOptional: string;
-    textLabelSupporting: string;
-    textError: string;
-    textSuccess: string;
-    backgroundInput: string;
-    border: string;
-    borderActive: string;
-    borderError: string;
-    borderSuccess: string;
-};
 export declare const textInputDefault: {
-    textInput: TextInputTheme;
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
+    textInput: {
+        textUserInput: string;
+        textLabel: string;
+        textLabelOptional: string;
+        textLabelSupporting: string;
+        textError: string;
+        textSuccess: string;
+        backgroundInput: string;
+        border: string;
+        borderActive: string;
+        borderError: string;
+        borderSuccess: string;
+    };
 };

themes/user-feedback.d.ts

@@ -1,10 +0,12 @@
-export declare type UserFeedbackTheme = {
-    textSuccess: string;
-    textError: string;
-};
 export declare const userFeedbackDefault: {
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
 };
 export declare const userFeedbackBrand: {
-    userFeedback: UserFeedbackTheme;
+    userFeedback: {
+        textSuccess: string;
+        textError: string;
+    };
 };

typography/cjs/index.d.ts

@@ -26,2 +26,3 @@ import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "./data";
     [x: string]: FontScaleFunctionStr;
+    xxsmall: FontScaleFunctionStr;
     xsmall: FontScaleFunctionStr;
@@ -28,0 +29,0 @@ small: FontScaleFunctionStr;

typography/cjs/index.js

@@ -84,3 +84,3 @@ 'use strict';
 // - Exporting a new object or array
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+var fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var fonts = {
@@ -101,45 +101,47 @@ titlepiece: "GT Guardian Titlepiece, Georgia, serif",
 var titlepieceSizes = {
-  small: fontSizes[7],
+  small: fontSizes[8],
   //42px
-  medium: fontSizes[8],
+  medium: fontSizes[9],
   //50px
-  large: fontSizes[9] //70px
+  large: fontSizes[10] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizes[2],
+  xxxsmall: fontSizes[3],
   //17px
-  xxsmall: fontSizes[3],
+  xxsmall: fontSizes[4],
   //20px
-  xsmall: fontSizes[4],
+  xsmall: fontSizes[5],
   //24px
-  small: fontSizes[5],
+  small: fontSizes[6],
   //28px
-  medium: fontSizes[6],
+  medium: fontSizes[7],
   //34px
-  large: fontSizes[7],
+  large: fontSizes[8],
   //42px
-  xlarge: fontSizes[8] //50px
+  xlarge: fontSizes[9] //50px
 
 };
 var bodySizes = {
-  small: fontSizes[1],
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2] //17px
+  medium: fontSizes[3] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizes[0],
+  xxsmall: fontSizes[0],
   //12px
-  small: fontSizes[1],
+  xsmall: fontSizes[1],
+  //14px
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2],
+  medium: fontSizes[3],
   //17px
-  large: fontSizes[3],
+  large: fontSizes[4],
   //20px
-  xlarge: fontSizes[4],
+  xlarge: fontSizes[5],
   //24px
-  xxlarge: fontSizes[5],
+  xxlarge: fontSizes[6],
   //28px
-  xxxlarge: fontSizes[6] //34px
+  xxxlarge: fontSizes[7] //34px
 
@@ -157,45 +159,47 @@ };
 var remTitlepieceSizes = {
-  small: remFontSizes[7],
+  small: remFontSizes[8],
   //42px
-  medium: remFontSizes[8],
+  medium: remFontSizes[9],
   //50px
-  large: remFontSizes[9] //70px
+  large: remFontSizes[10] //70px
 
 };
 var remHeadlineSizes = {
-  xxxsmall: remFontSizes[2],
+  xxxsmall: remFontSizes[3],
   //17px
-  xxsmall: remFontSizes[3],
+  xxsmall: remFontSizes[4],
   //20px
-  xsmall: remFontSizes[4],
+  xsmall: remFontSizes[5],
   //24px
-  small: remFontSizes[5],
+  small: remFontSizes[6],
   //28px
-  medium: remFontSizes[6],
+  medium: remFontSizes[7],
   //34px
-  large: remFontSizes[7],
+  large: remFontSizes[8],
   //42px
-  xlarge: remFontSizes[8] //50px
+  xlarge: remFontSizes[9] //50px
 
 };
 var remBodySizes = {
-  small: remFontSizes[1],
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2] //17px
+  medium: remFontSizes[3] //17px
 
 };
 var remTextSansSizes = {
-  xsmall: remFontSizes[0],
+  xxsmall: remFontSizes[0],
   //12px
-  small: remFontSizes[1],
+  xsmall: remFontSizes[1],
+  //14px
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2],
+  medium: remFontSizes[3],
   //17px
-  large: remFontSizes[3],
+  large: remFontSizes[4],
   //20px
-  xlarge: remFontSizes[4],
+  xlarge: remFontSizes[5],
   //24px
-  xxlarge: remFontSizes[5],
+  xxlarge: remFontSizes[6],
   //28px
-  xxxlarge: remFontSizes[6] //34px
+  xxxlarge: remFontSizes[7] //34px
 
@@ -387,2 +391,5 @@ };
 var textSans = {
+  xxsmall: function xxsmall(options) {
+    return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
+  },
   xsmall: function xsmall(options) {
@@ -389,0 +396,0 @@ return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));

typography/cjs/types.d.ts

@@ -39,2 +39,3 @@ export declare type ScaleUnit = "rem" | "px";
 export interface TextSansSizes extends TypographySizes {
+    xxsmall: number;
     xsmall: number;
@@ -41,0 +42,0 @@ small: number;

typography/index.d.ts

@@ -26,2 +26,3 @@ import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "./data";
     [x: string]: FontScaleFunctionStr;
+    xxsmall: FontScaleFunctionStr;
     xsmall: FontScaleFunctionStr;
@@ -28,0 +29,0 @@ small: FontScaleFunctionStr;

typography/index.js

@@ -80,3 +80,3 @@ function _slicedToArray(arr, i) {
 // - Exporting a new object or array
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+var fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var fonts = {
@@ -97,45 +97,47 @@ titlepiece: "GT Guardian Titlepiece, Georgia, serif",
 var titlepieceSizes = {
-  small: fontSizes[7],
+  small: fontSizes[8],
   //42px
-  medium: fontSizes[8],
+  medium: fontSizes[9],
   //50px
-  large: fontSizes[9] //70px
+  large: fontSizes[10] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizes[2],
+  xxxsmall: fontSizes[3],
   //17px
-  xxsmall: fontSizes[3],
+  xxsmall: fontSizes[4],
   //20px
-  xsmall: fontSizes[4],
+  xsmall: fontSizes[5],
   //24px
-  small: fontSizes[5],
+  small: fontSizes[6],
   //28px
-  medium: fontSizes[6],
+  medium: fontSizes[7],
   //34px
-  large: fontSizes[7],
+  large: fontSizes[8],
   //42px
-  xlarge: fontSizes[8] //50px
+  xlarge: fontSizes[9] //50px
 
 };
 var bodySizes = {
-  small: fontSizes[1],
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2] //17px
+  medium: fontSizes[3] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizes[0],
+  xxsmall: fontSizes[0],
   //12px
-  small: fontSizes[1],
+  xsmall: fontSizes[1],
+  //14px
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2],
+  medium: fontSizes[3],
   //17px
-  large: fontSizes[3],
+  large: fontSizes[4],
   //20px
-  xlarge: fontSizes[4],
+  xlarge: fontSizes[5],
   //24px
-  xxlarge: fontSizes[5],
+  xxlarge: fontSizes[6],
   //28px
-  xxxlarge: fontSizes[6] //34px
+  xxxlarge: fontSizes[7] //34px
 
@@ -153,45 +155,47 @@ };
 var remTitlepieceSizes = {
-  small: remFontSizes[7],
+  small: remFontSizes[8],
   //42px
-  medium: remFontSizes[8],
+  medium: remFontSizes[9],
   //50px
-  large: remFontSizes[9] //70px
+  large: remFontSizes[10] //70px
 
 };
 var remHeadlineSizes = {
-  xxxsmall: remFontSizes[2],
+  xxxsmall: remFontSizes[3],
   //17px
-  xxsmall: remFontSizes[3],
+  xxsmall: remFontSizes[4],
   //20px
-  xsmall: remFontSizes[4],
+  xsmall: remFontSizes[5],
   //24px
-  small: remFontSizes[5],
+  small: remFontSizes[6],
   //28px
-  medium: remFontSizes[6],
+  medium: remFontSizes[7],
   //34px
-  large: remFontSizes[7],
+  large: remFontSizes[8],
   //42px
-  xlarge: remFontSizes[8] //50px
+  xlarge: remFontSizes[9] //50px
 
 };
 var remBodySizes = {
-  small: remFontSizes[1],
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2] //17px
+  medium: remFontSizes[3] //17px
 
 };
 var remTextSansSizes = {
-  xsmall: remFontSizes[0],
+  xxsmall: remFontSizes[0],
   //12px
-  small: remFontSizes[1],
+  xsmall: remFontSizes[1],
+  //14px
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2],
+  medium: remFontSizes[3],
   //17px
-  large: remFontSizes[3],
+  large: remFontSizes[4],
   //20px
-  xlarge: remFontSizes[4],
+  xlarge: remFontSizes[5],
   //24px
-  xxlarge: remFontSizes[5],
+  xxlarge: remFontSizes[6],
   //28px
-  xxxlarge: remFontSizes[6] //34px
+  xxxlarge: remFontSizes[7] //34px
 
@@ -383,2 +387,5 @@ };
 var textSans = {
+  xxsmall: function xxsmall(options) {
+    return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
+  },
   xsmall: function xsmall(options) {
@@ -385,0 +392,0 @@ return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));

typography/obj/cjs/index.js

@@ -28,3 +28,3 @@ 'use strict';
 // - Exporting a new object or array
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+var fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var fonts = {
@@ -45,45 +45,47 @@ titlepiece: "GT Guardian Titlepiece, Georgia, serif",
 var titlepieceSizes = {
-  small: fontSizes[7],
+  small: fontSizes[8],
   //42px
-  medium: fontSizes[8],
+  medium: fontSizes[9],
   //50px
-  large: fontSizes[9] //70px
+  large: fontSizes[10] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizes[2],
+  xxxsmall: fontSizes[3],
   //17px
-  xxsmall: fontSizes[3],
+  xxsmall: fontSizes[4],
   //20px
-  xsmall: fontSizes[4],
+  xsmall: fontSizes[5],
   //24px
-  small: fontSizes[5],
+  small: fontSizes[6],
   //28px
-  medium: fontSizes[6],
+  medium: fontSizes[7],
   //34px
-  large: fontSizes[7],
+  large: fontSizes[8],
   //42px
-  xlarge: fontSizes[8] //50px
+  xlarge: fontSizes[9] //50px
 
 };
 var bodySizes = {
-  small: fontSizes[1],
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2] //17px
+  medium: fontSizes[3] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizes[0],
+  xxsmall: fontSizes[0],
   //12px
-  small: fontSizes[1],
+  xsmall: fontSizes[1],
+  //14px
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2],
+  medium: fontSizes[3],
   //17px
-  large: fontSizes[3],
+  large: fontSizes[4],
   //20px
-  xlarge: fontSizes[4],
+  xlarge: fontSizes[5],
   //24px
-  xxlarge: fontSizes[5],
+  xxlarge: fontSizes[6],
   //28px
-  xxxlarge: fontSizes[6] //34px
+  xxxlarge: fontSizes[7] //34px
 
@@ -101,45 +103,47 @@ };
 var remTitlepieceSizes = {
-  small: remFontSizes[7],
+  small: remFontSizes[8],
   //42px
-  medium: remFontSizes[8],
+  medium: remFontSizes[9],
   //50px
-  large: remFontSizes[9] //70px
+  large: remFontSizes[10] //70px
 
 };
 var remHeadlineSizes = {
-  xxxsmall: remFontSizes[2],
+  xxxsmall: remFontSizes[3],
   //17px
-  xxsmall: remFontSizes[3],
+  xxsmall: remFontSizes[4],
   //20px
-  xsmall: remFontSizes[4],
+  xsmall: remFontSizes[5],
   //24px
-  small: remFontSizes[5],
+  small: remFontSizes[6],
   //28px
-  medium: remFontSizes[6],
+  medium: remFontSizes[7],
   //34px
-  large: remFontSizes[7],
+  large: remFontSizes[8],
   //42px
-  xlarge: remFontSizes[8] //50px
+  xlarge: remFontSizes[9] //50px
 
 };
 var remBodySizes = {
-  small: remFontSizes[1],
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2] //17px
+  medium: remFontSizes[3] //17px
 
 };
 var remTextSansSizes = {
-  xsmall: remFontSizes[0],
+  xxsmall: remFontSizes[0],
   //12px
-  small: remFontSizes[1],
+  xsmall: remFontSizes[1],
+  //14px
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2],
+  medium: remFontSizes[3],
   //17px
-  large: remFontSizes[3],
+  large: remFontSizes[4],
   //20px
-  xlarge: remFontSizes[4],
+  xlarge: remFontSizes[5],
   //24px
-  xxlarge: remFontSizes[5],
+  xxlarge: remFontSizes[6],
   //28px
-  xxxlarge: remFontSizes[6] //34px
+  xxxlarge: remFontSizes[7] //34px
 
@@ -331,2 +335,5 @@ };
 var textSans = {
+  xxsmall: function xxsmall(options) {
+    return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
+  },
   xsmall: function xsmall(options) {
@@ -333,0 +340,0 @@ return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));

typography/obj/index.js

@@ -24,3 +24,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
 // - Exporting a new object or array
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+var fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var fonts = {
@@ -41,45 +41,47 @@ titlepiece: "GT Guardian Titlepiece, Georgia, serif",
 var titlepieceSizes = {
-  small: fontSizes[7],
+  small: fontSizes[8],
   //42px
-  medium: fontSizes[8],
+  medium: fontSizes[9],
   //50px
-  large: fontSizes[9] //70px
+  large: fontSizes[10] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizes[2],
+  xxxsmall: fontSizes[3],
   //17px
-  xxsmall: fontSizes[3],
+  xxsmall: fontSizes[4],
   //20px
-  xsmall: fontSizes[4],
+  xsmall: fontSizes[5],
   //24px
-  small: fontSizes[5],
+  small: fontSizes[6],
   //28px
-  medium: fontSizes[6],
+  medium: fontSizes[7],
   //34px
-  large: fontSizes[7],
+  large: fontSizes[8],
   //42px
-  xlarge: fontSizes[8] //50px
+  xlarge: fontSizes[9] //50px
 
 };
 var bodySizes = {
-  small: fontSizes[1],
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2] //17px
+  medium: fontSizes[3] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizes[0],
+  xxsmall: fontSizes[0],
   //12px
-  small: fontSizes[1],
+  xsmall: fontSizes[1],
+  //14px
+  small: fontSizes[2],
   //15px
-  medium: fontSizes[2],
+  medium: fontSizes[3],
   //17px
-  large: fontSizes[3],
+  large: fontSizes[4],
   //20px
-  xlarge: fontSizes[4],
+  xlarge: fontSizes[5],
   //24px
-  xxlarge: fontSizes[5],
+  xxlarge: fontSizes[6],
   //28px
-  xxxlarge: fontSizes[6] //34px
+  xxxlarge: fontSizes[7] //34px
 
@@ -97,45 +99,47 @@ };
 var remTitlepieceSizes = {
-  small: remFontSizes[7],
+  small: remFontSizes[8],
   //42px
-  medium: remFontSizes[8],
+  medium: remFontSizes[9],
   //50px
-  large: remFontSizes[9] //70px
+  large: remFontSizes[10] //70px
 
 };
 var remHeadlineSizes = {
-  xxxsmall: remFontSizes[2],
+  xxxsmall: remFontSizes[3],
   //17px
-  xxsmall: remFontSizes[3],
+  xxsmall: remFontSizes[4],
   //20px
-  xsmall: remFontSizes[4],
+  xsmall: remFontSizes[5],
   //24px
-  small: remFontSizes[5],
+  small: remFontSizes[6],
   //28px
-  medium: remFontSizes[6],
+  medium: remFontSizes[7],
   //34px
-  large: remFontSizes[7],
+  large: remFontSizes[8],
   //42px
-  xlarge: remFontSizes[8] //50px
+  xlarge: remFontSizes[9] //50px
 
 };
 var remBodySizes = {
-  small: remFontSizes[1],
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2] //17px
+  medium: remFontSizes[3] //17px
 
 };
 var remTextSansSizes = {
-  xsmall: remFontSizes[0],
+  xxsmall: remFontSizes[0],
   //12px
-  small: remFontSizes[1],
+  xsmall: remFontSizes[1],
+  //14px
+  small: remFontSizes[2],
   //15px
-  medium: remFontSizes[2],
+  medium: remFontSizes[3],
   //17px
-  large: remFontSizes[3],
+  large: remFontSizes[4],
   //20px
-  xlarge: remFontSizes[4],
+  xlarge: remFontSizes[5],
   //24px
-  xxlarge: remFontSizes[5],
+  xxlarge: remFontSizes[6],
   //28px
-  xxxlarge: remFontSizes[6] //34px
+  xxxlarge: remFontSizes[7] //34px
 
@@ -327,2 +331,5 @@ };
 var textSans = {
+  xxsmall: function xxsmall(options) {
+    return textSansFs("xxsmall", Object.assign({}, textSansDefaults, options));
+  },
   xsmall: function xsmall(options) {
@@ -329,0 +336,0 @@ return textSansFs("xsmall", Object.assign({}, textSansDefaults, options));

typography/types.d.ts

@@ -39,2 +39,3 @@ export declare type ScaleUnit = "rem" | "px";
 export interface TextSansSizes extends TypographySizes {
+    xxsmall: number;
     xsmall: number;
@@ -41,0 +42,0 @@ small: number;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

227260

increased by1.56%

Lines of code

7898

increased by2.03%

Worsened metrics

Number of package files

172

decreased by-1.71%

Number of low quality alerts

2

increased by100%

No dependency changes