@guardian/src-foundations - npm Package Compare versions

Comparing version 3.10.3 to 3.11.0

dist/cjs/accessibility.js

@@ -8,2 +8,7 @@ "use strict";
 const palette_1 = require("./palette");
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#visually-hidden-elements)
+ *
+ * For elements that need to be hidden from sighted users and displayed to screen reader users.
+ */
 exports.visuallyHidden = `
@@ -17,2 +22,7 @@ position: absolute;
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#focus-halo)
+ *
+ * Provides a clear focus state to support keyboard navigation.
+ */
 exports.focusHalo = `
@@ -24,2 +34,16 @@ outline: 0;
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#description-id)
+ *
+ * Takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the `aria-describedby` attribute on the first element.
+ *
+ * @param {string} id - ID of an element
+ * @returns {string} ID of an element that describes the first element
+ *
+ * @example
+ *		<form>
+ *			<input id={id} type="text" aria-describedby={descriptionId(id)} />
+ *			<p class="error" id={descriptionId(id)} />
+ *		</form>
+ */
 const descriptionId = (id) => `${id}_description`;
@@ -26,0 +50,0 @@ exports.descriptionId = descriptionId;

dist/cjs/breakpoints.js

@@ -7,2 +7,23 @@ "use strict";
 exports.breakpoints = void 0;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#breakpoints) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/41be19-grids)
+ *
+ *	`breakpoints.mobile` -> 320px
+ *
+ *	`breakpoints.mobileMedium` -> 375px
+ *
+ *	`breakpoints.mobileLandscape` -> 480px
+ *
+ *	`breakpoints.phablet` -> 660px
+ *
+ *	`breakpoints.tablet` -> 740px
+ *
+ *	`breakpoints.desktop` -> 980px
+ *
+ *	`breakpoints.leftCol` -> 1140px
+ *
+ *	`breakpoints.wide` -> 1300px
+ *
+ */
 exports.breakpoints = {
@@ -9,0 +30,0 @@ mobile: 320,

dist/cjs/mq/mq.js

@@ -11,3 +11,12 @@ "use strict";
 const minWidthMaxWidth = (from, until) => `@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;
-// e.g. from.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#from)
+ *
+ * @example
+ *	const styles = css`
+ *		${from.mobileLandscape} {
+ *			padding: 0 20px;
+ *		}
+ * `;
+ */
 exports.from = {
@@ -23,3 +32,12 @@ mobile: minWidth(breakpoints_1.breakpoints.mobile),
 };
-// e.g. until.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#until)
+ *
+ * @example
+ *	const styles = css`
+ *		${until.wide} {
+ *			padding: 0 40px;
+ *		}
+ * `;
+ */
 exports.until = {
@@ -35,3 +53,12 @@ mobile: maxWidth(breakpoints_1.breakpoints.mobile),
 };
-// e.g. between.*.and.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#betweenand)
+ *
+ * @example
+ *	const styles = css`
+ *		${between.phablet.and.desktop} {
+ *			padding: 0 32px;
+ *		}
+ * `;
+ */
 exports.between = {
@@ -38,0 +65,0 @@ mobile: {

dist/cjs/palette.js

@@ -102,2 +102,8 @@ "use strict";
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/66411c)
+ *
+ * Our core brand colour – `brand[400]` – and extended brand colours
+ */
 exports.brand = {
@@ -111,2 +117,8 @@ 100: colors.blues[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/32d461)
+ *
+ * Our alternative brand colours
+ */
 exports.brandAlt = {
@@ -117,2 +129,8 @@ 200: colors.yellows[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/70dd5c)
+ *
+ * Neutral colours
+ */
 exports.neutral = {
@@ -130,2 +148,8 @@ 0: colors.grays[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/98b901)
+ *
+ * Error colours
+ */
 exports.error = {
@@ -135,2 +159,8 @@ 400: colors.reds[3],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/82798f)
+ *
+ * Success colours
+ */
 exports.success = {
@@ -140,2 +170,8 @@ 400: colors.greens[1],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/97d77e)
+ *
+ * News colours
+ */
 exports.news = {
@@ -151,2 +187,8 @@ 100: colors.reds[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/0539ef)
+ *
+ * Opinion colours
+ */
 exports.opinion = {
@@ -162,2 +204,8 @@ 100: colors.oranges[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/957a45)
+ *
+ * Sport colours
+ */
 exports.sport = {
@@ -172,2 +220,8 @@ 100: colors.blues[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/068eb2)
+ *
+ * Culture colours
+ */
 exports.culture = {
@@ -185,2 +239,8 @@ 50: colors.browns[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/2236b4)
+ *
+ * Lifestyle colours
+ */
 exports.lifestyle = {
@@ -195,2 +255,8 @@ 100: colors.pinks[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/59b08c)
+ *
+ * Labs colours
+ */
 exports.labs = {
@@ -201,2 +267,8 @@ 200: colors.greens[3],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/31c634)
+ *
+ * Special report colours
+ */
 exports.specialReport = {
@@ -212,2 +284,8 @@ 100: colors.grays[10],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/188e86)
+ *
+ * Focus state colour
+ */
 exports.focus = {
@@ -218,2 +296,8 @@ 400: colors.blues[13],
 // main palette.
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/9280ee)
+ *
+ * Default theme background colours
+ */
 exports.background = {
@@ -231,2 +315,8 @@ primary: exports.neutral[100],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/63cc10)
+ *
+ * Brand theme background colours
+ */
 exports.brandBackground = {
@@ -241,2 +331,8 @@ primary: exports.brand[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/743232)
+ *
+ * Alternative brand theme background colours
+ */
 exports.brandAltBackground = {
@@ -250,2 +346,8 @@ primary: exports.brandAlt[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/69c92f)
+ *
+ * Default theme border colours
+ */
 exports.border = {
@@ -263,2 +365,8 @@ primary: exports.neutral[60],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/04883b)
+ *
+ * Brand theme border colours
+ */
 exports.brandBorder = {
@@ -274,14 +382,44 @@ primary: exports.brand[600],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/b/21c6cc)
+ *
+ * Alternative brand theme border colours
+ */
 exports.brandAltBorder = {
     ctaTertiary: exports.neutral[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/593cc9)
+ *
+ * Default theme line colours
+ */
 exports.line = {
     primary: exports.neutral[86],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/66455d)
+ *
+ * Brand theme line colours
+ */
 exports.brandLine = {
     primary: exports.brand[600],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/89955e)
+ *
+ * Alternative brand theme line colours
+ */
 exports.brandAltLine = {
     primary: exports.neutral[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/85d3b0)
+ *
+ * Default theme text colours
+ */
 exports.text = {
@@ -299,2 +437,3 @@ primary: exports.neutral[7],
     inputLabel: exports.neutral[7],
+    inputError: exports.neutral[7],
     inputLabelSupporting: exports.neutral[46],
@@ -307,2 +446,8 @@ inputChecked: exports.brand[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/244480)
+ *
+ * Brand theme text colours
+ */
 exports.brandText = {
@@ -322,2 +467,8 @@ primary: exports.neutral[100],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/11d5fd)
+ *
+ * Alternative brand theme text colours
+ */
 exports.brandAltText = {
@@ -324,0 +475,0 @@ primary: exports.neutral[7],

dist/cjs/size/size.js

@@ -8,12 +8,27 @@ "use strict";
 const px_to_rem_1 = require("./utils/px-to-rem");
-/*
-   The size scale is based entirely on the medium, small and
-   xsmall buttons. The medium size meets WCAG 2.1 AAA compliance
-   for touch targets.
-*/
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#global-size-values) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * May be used for call to action buttons and user input fields.
+ *
+ ** `size.medium` -> 44px
+ ** `size.small` -> 36px
+ ** `size.xsmall` -> 24px
+ */
 exports.size = {
     xsmall: 24,
     small: 36,
-    medium: 44,
+    medium: 44, // meets WCAG 2.1 AAA compliance for touch targets.
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#global-size-values) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * May be used for call to action buttons and user input fields.
+ *
+ ** `remSize.medium` -> 2.75rem
+ ** `remSize.small` -> 2.25rem
+ ** `remSize.xsmall` -> 1.5rem
+ */
 const remSize = {
@@ -40,2 +55,17 @@ xsmall: (0, px_to_rem_1.pxToRem)(exports.size.xsmall),
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in px
+ *
+ ** `height.ctaMedium`: call to action buttons and links
+ ** `height.ctaSmall`: secondary calls to action
+ ** `height.ctaXsmall`: calls to action where there is very limited space
+ ** `height.inputMedium`: text input fields, radio and checkbox labels
+ ** `height.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `height.iconMedium`
+ ** `height.iconSmall`
+ ** `height.iconXsmall`
+ */
 exports.height = {
@@ -51,2 +81,17 @@ ctaMedium: exports.size.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in rem
+ *
+ ** `remHeight.ctaMedium`: call to action buttons and links
+ ** `remHeight.ctaSmall`: secondary calls to action
+ ** `remHeight.ctaXsmall`: calls to action where there is very limited space
+ ** `remHeight.inputMedium`: text input fields, radio and checkbox labels
+ ** `remHeight.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remHeight.iconMedium`
+ ** `remHeight.iconSmall`
+ ** `remHeight.iconXsmall`
+ */
 exports.remHeight = {
@@ -62,2 +107,19 @@ ctaMedium: remSize.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in px
+ *
+ ** `width.ctaMedium`: medium height call to action buttons and links
+ ** `width.ctaSmall`: small height call to action buttons and links
+ ** `width.ctaXsmall`: xsmall height call to action buttons and links
+ ** `width.inputMedium`: text input fields, radio and checkbox labels
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.inputMedium`
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.iconMedium`
+ ** `width.iconSmall`
+ ** `width.iconXsmall`
+ */
 exports.width = {
@@ -72,2 +134,19 @@ ctaMedium: exports.size.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in rem
+ *
+ ** `remWidth.ctaMedium`: medium height call to action buttons and links
+ ** `remWidth.ctaSmall`: small height call to action buttons and links
+ ** `remWidth.ctaXsmall`: xsmall height call to action buttons and links
+ ** `remWidth.inputMedium`: text input fields, radio and checkbox labels
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.inputMedium`
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.iconMedium`
+ ** `remWidth.iconSmall`
+ ** `remWidth.iconXsmall`
+ */
 exports.remWidth = {
@@ -74,0 +153,0 @@ ctaMedium: remSize.medium,

dist/cjs/space.js

@@ -9,17 +9,16 @@ "use strict";
 /**
- * Space
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
  *
- * The following units can be applied to margin or padding properties, vertically or horizontally.
- * @see https://theguardian.design/2a1e5182b/p/449bd5-space
+ * Can be applied to margin or padding properties, vertically or horizontally.
  *
- * Space scale
- * 1 -> 4px
- * 2 -> 8px
- * 3 -> 12px
- * 4 -> 16px
- * 5 -> 20px
- * 6 -> 24px
- * 9 -> 36px
- * 12 -> 48px
- * 24 -> 96px
+ ** `space[1]` -> 4px
+ ** `space[2]` -> 8px
+ ** `space[3]` -> 12px
+ ** `space[4]` -> 16px
+ ** `space[5]` -> 20px
+ ** `space[6]` -> 24px
+ ** `space[9]` -> 36px
+ ** `space[12]` -> 48px
+ ** `space[24]` -> 96px
  */
@@ -37,4 +36,18 @@ exports.space = {
 };
-/* TODO: this should be exposed as a number instead of a string,
-   so consumers can perform calculations on it */
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
+ *
+ * Can be applied to margin or padding properties, vertically or horizontally.
+ *
+ ** `remSpace[1]` -> 0.25rem
+ ** `remSpace[2]` -> 0.5rem
+ ** `remSpace[3]` -> 0.75rem
+ ** `remSpace[4]` -> 1rem
+ ** `remSpace[5]` -> 1.25rem
+ ** `remSpace[6]` -> 1.5rem
+ ** `remSpace[9]` -> 2.25rem
+ ** `remSpace[12]` -> 3rem
+ ** `remSpace[24]` -> 6rem
+ */
 exports.remSpace = {
@@ -51,2 +64,4 @@ 1: `${(0, px_to_rem_1.pxToRem)(exports.space[1])}rem`,
 };
+/* TODO: this should be exposed as a number instead of a string,
+   so consumers can perform calculations on it */
 //# sourceMappingURL=space.js.map

dist/cjs/themes/text-input.js

@@ -11,3 +11,3 @@ "use strict";
         textLabelSupporting: palette_1.text.supporting,
-        textError: palette_1.text.error,
+        textError: palette_1.text.inputError,
         textSuccess: palette_1.text.success,
@@ -14,0 +14,0 @@ backgroundInput: palette_1.background.input,

dist/cjs/utils/resets.js

@@ -110,2 +110,7 @@ "use strict";
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-css-reset--page)
+ *
+ * `resets.resetCSS`: sensible default CSS rules to provide a base for a consistent environment across projects and browsers.
+ */
 exports.resets = {
@@ -112,0 +117,0 @@ legend,

dist/esm/accessibility.js

@@ -5,2 +5,7 @@ // FYI
 import { border } from './palette';
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#visually-hidden-elements)
+ *
+ * For elements that need to be hidden from sighted users and displayed to screen reader users.
+ */
 export const visuallyHidden = `
@@ -14,2 +19,7 @@ position: absolute;
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#focus-halo)
+ *
+ * Provides a clear focus state to support keyboard navigation.
+ */
 export const focusHalo = `
@@ -21,2 +31,16 @@ outline: 0;
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#description-id)
+ *
+ * Takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the `aria-describedby` attribute on the first element.
+ *
+ * @param {string} id - ID of an element
+ * @returns {string} ID of an element that describes the first element
+ *
+ * @example
+ *		<form>
+ *			<input id={id} type="text" aria-describedby={descriptionId(id)} />
+ *			<p class="error" id={descriptionId(id)} />
+ *		</form>
+ */
 export const descriptionId = (id) => `${id}_description`;
@@ -23,0 +47,0 @@ let sourceIdIndex = 0;

dist/esm/breakpoints.js

 // FYI
 // packages/@guardian/src-foundations/src/breakpoints.ts SYMLINKS TO
 // packages/@guardian/source-foundations/src/breakpoints.ts
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#breakpoints) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/41be19-grids)
+ *
+ *	`breakpoints.mobile` -> 320px
+ *
+ *	`breakpoints.mobileMedium` -> 375px
+ *
+ *	`breakpoints.mobileLandscape` -> 480px
+ *
+ *	`breakpoints.phablet` -> 660px
+ *
+ *	`breakpoints.tablet` -> 740px
+ *
+ *	`breakpoints.desktop` -> 980px
+ *
+ *	`breakpoints.leftCol` -> 1140px
+ *
+ *	`breakpoints.wide` -> 1300px
+ *
+ */
 export const breakpoints = {
@@ -5,0 +26,0 @@ mobile: 320,

dist/esm/mq/mq.js

@@ -8,3 +8,12 @@ // FYI
 const minWidthMaxWidth = (from, until) => `@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;
-// e.g. from.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#from)
+ *
+ * @example
+ *	const styles = css`
+ *		${from.mobileLandscape} {
+ *			padding: 0 20px;
+ *		}
+ * `;
+ */
 export const from = {
@@ -20,3 +29,12 @@ mobile: minWidth(breakpoints.mobile),
 };
-// e.g. until.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#until)
+ *
+ * @example
+ *	const styles = css`
+ *		${until.wide} {
+ *			padding: 0 40px;
+ *		}
+ * `;
+ */
 export const until = {
@@ -32,3 +50,12 @@ mobile: maxWidth(breakpoints.mobile),
 };
-// e.g. between.*.and.*
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#betweenand)
+ *
+ * @example
+ *	const styles = css`
+ *		${between.phablet.and.desktop} {
+ *			padding: 0 32px;
+ *		}
+ * `;
+ */
 export const between = {
@@ -35,0 +62,0 @@ mobile: {

dist/esm/palette.js

@@ -99,2 +99,8 @@ // FYI
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/66411c)
+ *
+ * Our core brand colour – `brand[400]` – and extended brand colours
+ */
 export const brand = {
@@ -108,2 +114,8 @@ 100: colors.blues[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/32d461)
+ *
+ * Our alternative brand colours
+ */
 export const brandAlt = {
@@ -114,2 +126,8 @@ 200: colors.yellows[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/70dd5c)
+ *
+ * Neutral colours
+ */
 export const neutral = {
@@ -127,2 +145,8 @@ 0: colors.grays[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/98b901)
+ *
+ * Error colours
+ */
 export const error = {
@@ -132,2 +156,8 @@ 400: colors.reds[3],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/82798f)
+ *
+ * Success colours
+ */
 export const success = {
@@ -137,2 +167,8 @@ 400: colors.greens[1],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/97d77e)
+ *
+ * News colours
+ */
 export const news = {
@@ -148,2 +184,8 @@ 100: colors.reds[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/0539ef)
+ *
+ * Opinion colours
+ */
 export const opinion = {
@@ -159,2 +201,8 @@ 100: colors.oranges[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/957a45)
+ *
+ * Sport colours
+ */
 export const sport = {
@@ -169,2 +217,8 @@ 100: colors.blues[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/068eb2)
+ *
+ * Culture colours
+ */
 export const culture = {
@@ -182,2 +236,8 @@ 50: colors.browns[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/2236b4)
+ *
+ * Lifestyle colours
+ */
 export const lifestyle = {
@@ -192,2 +252,8 @@ 100: colors.pinks[0],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/59b08c)
+ *
+ * Labs colours
+ */
 export const labs = {
@@ -198,2 +264,8 @@ 200: colors.greens[3],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/31c634)
+ *
+ * Special report colours
+ */
 export const specialReport = {
@@ -209,2 +281,8 @@ 100: colors.grays[10],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/188e86)
+ *
+ * Focus state colour
+ */
 export const focus = {
@@ -215,2 +293,8 @@ 400: colors.blues[13],
 // main palette.
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/9280ee)
+ *
+ * Default theme background colours
+ */
 export const background = {
@@ -228,2 +312,8 @@ primary: neutral[100],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/63cc10)
+ *
+ * Brand theme background colours
+ */
 export const brandBackground = {
@@ -238,2 +328,8 @@ primary: brand[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/743232)
+ *
+ * Alternative brand theme background colours
+ */
 export const brandAltBackground = {
@@ -247,2 +343,8 @@ primary: brandAlt[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/69c92f)
+ *
+ * Default theme border colours
+ */
 export const border = {
@@ -260,2 +362,8 @@ primary: neutral[60],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/04883b)
+ *
+ * Brand theme border colours
+ */
 export const brandBorder = {
@@ -271,14 +379,44 @@ primary: brand[600],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/b/21c6cc)
+ *
+ * Alternative brand theme border colours
+ */
 export const brandAltBorder = {
     ctaTertiary: neutral[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/593cc9)
+ *
+ * Default theme line colours
+ */
 export const line = {
     primary: neutral[86],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/66455d)
+ *
+ * Brand theme line colours
+ */
 export const brandLine = {
     primary: brand[600],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/89955e)
+ *
+ * Alternative brand theme line colours
+ */
 export const brandAltLine = {
     primary: neutral[7],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/85d3b0)
+ *
+ * Default theme text colours
+ */
 export const text = {
@@ -296,2 +434,3 @@ primary: neutral[7],
     inputLabel: neutral[7],
+    inputError: neutral[7],
     inputLabelSupporting: neutral[46],
@@ -304,2 +443,8 @@ inputChecked: brand[400],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/244480)
+ *
+ * Brand theme text colours
+ */
 export const brandText = {
@@ -319,2 +464,8 @@ primary: neutral[100],
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/11d5fd)
+ *
+ * Alternative brand theme text colours
+ */
 export const brandAltText = {
@@ -321,0 +472,0 @@ primary: neutral[7],

dist/esm/size/size.js

@@ -5,12 +5,27 @@ // FYI
 import { pxToRem } from './utils/px-to-rem';
-/*
-   The size scale is based entirely on the medium, small and
-   xsmall buttons. The medium size meets WCAG 2.1 AAA compliance
-   for touch targets.
-*/
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#global-size-values) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * May be used for call to action buttons and user input fields.
+ *
+ ** `size.medium` -> 44px
+ ** `size.small` -> 36px
+ ** `size.xsmall` -> 24px
+ */
 export const size = {
     xsmall: 24,
     small: 36,
-    medium: 44,
+    medium: 44, // meets WCAG 2.1 AAA compliance for touch targets.
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#global-size-values) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * May be used for call to action buttons and user input fields.
+ *
+ ** `remSize.medium` -> 2.75rem
+ ** `remSize.small` -> 2.25rem
+ ** `remSize.xsmall` -> 1.5rem
+ */
 const remSize = {
@@ -37,2 +52,17 @@ xsmall: pxToRem(size.xsmall),
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in px
+ *
+ ** `height.ctaMedium`: call to action buttons and links
+ ** `height.ctaSmall`: secondary calls to action
+ ** `height.ctaXsmall`: calls to action where there is very limited space
+ ** `height.inputMedium`: text input fields, radio and checkbox labels
+ ** `height.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `height.iconMedium`
+ ** `height.iconSmall`
+ ** `height.iconXsmall`
+ */
 export const height = {
@@ -48,2 +78,17 @@ ctaMedium: size.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in rem
+ *
+ ** `remHeight.ctaMedium`: call to action buttons and links
+ ** `remHeight.ctaSmall`: secondary calls to action
+ ** `remHeight.ctaXsmall`: calls to action where there is very limited space
+ ** `remHeight.inputMedium`: text input fields, radio and checkbox labels
+ ** `remHeight.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remHeight.iconMedium`
+ ** `remHeight.iconSmall`
+ ** `remHeight.iconXsmall`
+ */
 export const remHeight = {
@@ -59,2 +104,19 @@ ctaMedium: remSize.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in px
+ *
+ ** `width.ctaMedium`: medium height call to action buttons and links
+ ** `width.ctaSmall`: small height call to action buttons and links
+ ** `width.ctaXsmall`: xsmall height call to action buttons and links
+ ** `width.inputMedium`: text input fields, radio and checkbox labels
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.inputMedium`
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.iconMedium`
+ ** `width.iconSmall`
+ ** `width.iconXsmall`
+ */
 export const width = {
@@ -69,2 +131,19 @@ ctaMedium: size.medium,
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in rem
+ *
+ ** `remWidth.ctaMedium`: medium height call to action buttons and links
+ ** `remWidth.ctaSmall`: small height call to action buttons and links
+ ** `remWidth.ctaXsmall`: xsmall height call to action buttons and links
+ ** `remWidth.inputMedium`: text input fields, radio and checkbox labels
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.inputMedium`
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.iconMedium`
+ ** `remWidth.iconSmall`
+ ** `remWidth.iconXsmall`
+ */
 export const remWidth = {
@@ -71,0 +150,0 @@ ctaMedium: remSize.medium,

dist/esm/space.js

@@ -6,17 +6,16 @@ // FYI
 /**
- * Space
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
  *
- * The following units can be applied to margin or padding properties, vertically or horizontally.
- * @see https://theguardian.design/2a1e5182b/p/449bd5-space
+ * Can be applied to margin or padding properties, vertically or horizontally.
  *
- * Space scale
- * 1 -> 4px
- * 2 -> 8px
- * 3 -> 12px
- * 4 -> 16px
- * 5 -> 20px
- * 6 -> 24px
- * 9 -> 36px
- * 12 -> 48px
- * 24 -> 96px
+ ** `space[1]` -> 4px
+ ** `space[2]` -> 8px
+ ** `space[3]` -> 12px
+ ** `space[4]` -> 16px
+ ** `space[5]` -> 20px
+ ** `space[6]` -> 24px
+ ** `space[9]` -> 36px
+ ** `space[12]` -> 48px
+ ** `space[24]` -> 96px
  */
@@ -34,4 +33,18 @@ export const space = {
 };
-/* TODO: this should be exposed as a number instead of a string,
-   so consumers can perform calculations on it */
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
+ *
+ * Can be applied to margin or padding properties, vertically or horizontally.
+ *
+ ** `remSpace[1]` -> 0.25rem
+ ** `remSpace[2]` -> 0.5rem
+ ** `remSpace[3]` -> 0.75rem
+ ** `remSpace[4]` -> 1rem
+ ** `remSpace[5]` -> 1.25rem
+ ** `remSpace[6]` -> 1.5rem
+ ** `remSpace[9]` -> 2.25rem
+ ** `remSpace[12]` -> 3rem
+ ** `remSpace[24]` -> 6rem
+ */
 export const remSpace = {
@@ -48,2 +61,4 @@ 1: `${pxToRem(space[1])}rem`,
 };
+/* TODO: this should be exposed as a number instead of a string,
+   so consumers can perform calculations on it */
 //# sourceMappingURL=space.js.map

dist/esm/themes/text-input.js

@@ -8,3 +8,3 @@ import { text, background, border } from '@guardian/src-foundations/palette';
         textLabelSupporting: text.supporting,
-        textError: text.error,
+        textError: text.inputError,
         textSuccess: text.success,
@@ -11,0 +11,0 @@ backgroundInput: background.input,

dist/esm/utils/resets.js

@@ -107,2 +107,7 @@ // FYI
 `;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-css-reset--page)
+ *
+ * `resets.resetCSS`: sensible default CSS rules to provide a base for a consistent environment across projects and browsers.
+ */
 export const resets = {
@@ -109,0 +114,0 @@ legend,

dist/types/accessibility.d.ts

@@ -0,4 +1,28 @@
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#visually-hidden-elements)
+ *
+ * For elements that need to be hidden from sighted users and displayed to screen reader users.
+ */
 export declare const visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#focus-halo)
+ *
+ * Provides a clear focus state to support keyboard navigation.
+ */
 export declare const focusHalo: string;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-accessibility-helpers--page#description-id)
+ *
+ * Takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the `aria-describedby` attribute on the first element.
+ *
+ * @param {string} id - ID of an element
+ * @returns {string} ID of an element that describes the first element
+ *
+ * @example
+ *		<form>
+ *			<input id={id} type="text" aria-describedby={descriptionId(id)} />
+ *			<p class="error" id={descriptionId(id)} />
+ *		</form>
+ */
 export declare const descriptionId: (id: string) => string;
 export declare const generateSourceId: () => string;

dist/types/breakpoints.d.ts

 export declare type Breakpoint = 'mobile' | 'mobileMedium' | 'mobileLandscape' | 'phablet' | 'tablet' | 'desktop' | 'leftCol' | 'wide';
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#breakpoints) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/41be19-grids)
+ *
+ *	`breakpoints.mobile` -> 320px
+ *
+ *	`breakpoints.mobileMedium` -> 375px
+ *
+ *	`breakpoints.mobileLandscape` -> 480px
+ *
+ *	`breakpoints.phablet` -> 660px
+ *
+ *	`breakpoints.tablet` -> 740px
+ *
+ *	`breakpoints.desktop` -> 980px
+ *
+ *	`breakpoints.leftCol` -> 1140px
+ *
+ *	`breakpoints.wide` -> 1300px
+ *
+ */
 export declare const breakpoints: {
@@ -3,0 +24,0 @@ mobile: number;

dist/types/index.d.ts

@@ -45,2 +45,3 @@ export * from './animation';
         inputLabel: string;
+        inputError: string;
         inputLabelSupporting: string;
@@ -47,0 +48,0 @@ inputChecked: string;

dist/types/mq/mq.d.ts

@@ -5,4 +5,34 @@ import type { Breakpoint } from './breakpoints';
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#from)
+ *
+ * @example
+ *	const styles = css`
+ *		${from.mobileLandscape} {
+ *			padding: 0 20px;
+ *		}
+ * `;
+ */
 export declare const from: BreakpointMap;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#until)
+ *
+ * @example
+ *	const styles = css`
+ *		${until.wide} {
+ *			padding: 0 40px;
+ *		}
+ * `;
+ */
 export declare const until: BreakpointMap;
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-media-queries--page#betweenand)
+ *
+ * @example
+ *	const styles = css`
+ *		${between.phablet.and.desktop} {
+ *			padding: 0 32px;
+ *		}
+ * `;
+ */
 export declare const between: {
@@ -9,0 +39,0 @@ mobile: {

dist/types/palette.d.ts

@@ -0,1 +1,7 @@
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/66411c)
+ *
+ * Our core brand colour – `brand[400]` – and extended brand colours
+ */
 export declare const brand: {
@@ -9,2 +15,8 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/32d461)
+ *
+ * Our alternative brand colours
+ */
 export declare const brandAlt: {
@@ -15,2 +27,8 @@ 200: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/70dd5c)
+ *
+ * Neutral colours
+ */
 export declare const neutral: {
@@ -28,2 +46,8 @@ 0: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/98b901)
+ *
+ * Error colours
+ */
 export declare const error: {
@@ -33,2 +57,8 @@ 400: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/82798f)
+ *
+ * Success colours
+ */
 export declare const success: {
@@ -38,2 +68,8 @@ 400: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/97d77e)
+ *
+ * News colours
+ */
 export declare const news: {
@@ -49,2 +85,8 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/0539ef)
+ *
+ * Opinion colours
+ */
 export declare const opinion: {
@@ -60,2 +102,8 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/957a45)
+ *
+ * Sport colours
+ */
 export declare const sport: {
@@ -70,2 +118,8 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/068eb2)
+ *
+ * Culture colours
+ */
 export declare const culture: {
@@ -83,2 +137,8 @@ 50: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/2236b4)
+ *
+ * Lifestyle colours
+ */
 export declare const lifestyle: {
@@ -93,2 +153,8 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/59b08c)
+ *
+ * Labs colours
+ */
 export declare const labs: {
@@ -99,2 +165,8 @@ 200: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/31c634)
+ *
+ * Special report colours
+ */
 export declare const specialReport: {
@@ -110,5 +182,17 @@ 100: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/492a30-light-palette/t/188e86)
+ *
+ * Focus state colour
+ */
 export declare const focus: {
     400: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/9280ee)
+ *
+ * Default theme background colours
+ */
 export declare const background: {
@@ -126,2 +210,8 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/63cc10)
+ *
+ * Brand theme background colours
+ */
 export declare const brandBackground: {
@@ -136,2 +226,8 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/743232)
+ *
+ * Alternative brand theme background colours
+ */
 export declare const brandAltBackground: {
@@ -145,2 +241,8 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/69c92f)
+ *
+ * Default theme border colours
+ */
 export declare const border: {
@@ -158,2 +260,8 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/04883b)
+ *
+ * Brand theme border colours
+ */
 export declare const brandBorder: {
@@ -169,14 +277,44 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/b/21c6cc)
+ *
+ * Alternative brand theme border colours
+ */
 export declare const brandAltBorder: {
     ctaTertiary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/593cc9)
+ *
+ * Default theme line colours
+ */
 export declare const line: {
     primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/66455d)
+ *
+ * Brand theme line colours
+ */
 export declare const brandLine: {
     primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/89955e)
+ *
+ * Alternative brand theme line colours
+ */
 export declare const brandAltLine: {
     primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/85d3b0)
+ *
+ * Default theme text colours
+ */
 export declare const text: {
@@ -194,2 +332,3 @@ primary: string;
     inputLabel: string;
+    inputError: string;
     inputLabelSupporting: string;
@@ -202,2 +341,8 @@ inputChecked: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/244480)
+ *
+ * Brand theme text colours
+ */
 export declare const brandText: {
@@ -217,2 +362,8 @@ primary: string;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-colour--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/1377a6-tokens/t/11d5fd)
+ *
+ * Alternative brand theme text colours
+ */
 export declare const brandAltText: {
@@ -219,0 +370,0 @@ primary: string;

dist/types/size/size.d.ts

@@ -0,1 +1,11 @@
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#global-size-values) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * May be used for call to action buttons and user input fields.
+ *
+ ** `size.medium` -> 44px
+ ** `size.small` -> 36px
+ ** `size.xsmall` -> 24px
+ */
 export declare const size: {
@@ -11,2 +21,17 @@ xsmall: number;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in px
+ *
+ ** `height.ctaMedium`: call to action buttons and links
+ ** `height.ctaSmall`: secondary calls to action
+ ** `height.ctaXsmall`: calls to action where there is very limited space
+ ** `height.inputMedium`: text input fields, radio and checkbox labels
+ ** `height.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `height.iconMedium`
+ ** `height.iconSmall`
+ ** `height.iconXsmall`
+ */
 export declare const height: {
@@ -22,2 +47,17 @@ ctaMedium: number;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/24a3ec-size/t/329aef)
+ *
+ * Height tokens expressed in rem
+ *
+ ** `remHeight.ctaMedium`: call to action buttons and links
+ ** `remHeight.ctaSmall`: secondary calls to action
+ ** `remHeight.ctaXsmall`: calls to action where there is very limited space
+ ** `remHeight.inputMedium`: text input fields, radio and checkbox labels
+ ** `remHeight.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remHeight.iconMedium`
+ ** `remHeight.iconSmall`
+ ** `remHeight.iconXsmall`
+ */
 export declare const remHeight: {
@@ -33,2 +73,19 @@ ctaMedium: number;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in px
+ *
+ ** `width.ctaMedium`: medium height call to action buttons and links
+ ** `width.ctaSmall`: small height call to action buttons and links
+ ** `width.ctaXsmall`: xsmall height call to action buttons and links
+ ** `width.inputMedium`: text input fields, radio and checkbox labels
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.inputMedium`
+ ** `width.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `width.iconMedium`
+ ** `width.iconSmall`
+ ** `width.iconXsmall`
+ */
 export declare const width: {
@@ -43,2 +100,19 @@ ctaMedium: number;
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-size--page#tokens) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/00ddcb-tokens/t/797660)
+ *
+ * Width tokens expressed in rem
+ *
+ ** `remWidth.ctaMedium`: medium height call to action buttons and links
+ ** `remWidth.ctaSmall`: small height call to action buttons and links
+ ** `remWidth.ctaXsmall`: xsmall height call to action buttons and links
+ ** `remWidth.inputMedium`: text input fields, radio and checkbox labels
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.inputMedium`
+ ** `remWidth.inputXsmall`: checkables such as checkboxes or radio buttons
+ ** `remWidth.iconMedium`
+ ** `remWidth.iconSmall`
+ ** `remWidth.iconXsmall`
+ */
 export declare const remWidth: {
@@ -45,0 +119,0 @@ ctaMedium: number;

dist/types/space.d.ts

 /**
- * Space
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
  *
- * The following units can be applied to margin or padding properties, vertically or horizontally.
- * @see https://theguardian.design/2a1e5182b/p/449bd5-space
+ * Can be applied to margin or padding properties, vertically or horizontally.
  *
- * Space scale
- * 1 -> 4px
- * 2 -> 8px
- * 3 -> 12px
- * 4 -> 16px
- * 5 -> 20px
- * 6 -> 24px
- * 9 -> 36px
- * 12 -> 48px
- * 24 -> 96px
+ ** `space[1]` -> 4px
+ ** `space[2]` -> 8px
+ ** `space[3]` -> 12px
+ ** `space[4]` -> 16px
+ ** `space[5]` -> 20px
+ ** `space[6]` -> 24px
+ ** `space[9]` -> 36px
+ ** `space[12]` -> 48px
+ ** `space[24]` -> 96px
  */
@@ -29,4 +28,20 @@ export declare const space: {
 };
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-space--page) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/05f835-space)
+ *
+ * Can be applied to margin or padding properties, vertically or horizontally.
+ *
+ ** `remSpace[1]` -> 0.25rem
+ ** `remSpace[2]` -> 0.5rem
+ ** `remSpace[3]` -> 0.75rem
+ ** `remSpace[4]` -> 1rem
+ ** `remSpace[5]` -> 1.25rem
+ ** `remSpace[6]` -> 1.5rem
+ ** `remSpace[9]` -> 2.25rem
+ ** `remSpace[12]` -> 3rem
+ ** `remSpace[24]` -> 6rem
+ */
 export declare const remSpace: {
     [K in keyof typeof space]: string;
 };

dist/types/utils/resets.d.ts

@@ -0,1 +1,6 @@
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-v4-source-foundations-css-reset--page)
+ *
+ * `resets.resetCSS`: sensible default CSS rules to provide a base for a consistent environment across projects and browsers.
+ */
 export declare const resets: {
@@ -2,0 +7,0 @@ legend: string;

package.json

 {
   "name": "@guardian/src-foundations",
-  "version": "3.10.3",
+  "version": "3.11.0",
   "repository": {
@@ -46,3 +46,3 @@ "type": "git",
   },
-  "gitHead": "47921d3e5ab5f145cf172e2f9e7d6c196c80a58e"
+  "gitHead": "d0aa66212e76f2b4c34f5894a6a02328ba810cfd"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

297780

increased by14.94%

Lines of code

5299

increased by22.27%

No dependency changes