@guardian/src-foundations - npm Package Compare versions

Comparing version 3.9.0 to 3.9.1-rc.0

dist/cjs/animation.js

 "use strict";
+// FYI
+// src/core/foundations/src/animation.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/animation.ts
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transitions = void 0;
-const theme_1 = require("./theme");
 const transitions = {
-    short: theme_1.transitions[0],
-    medium: theme_1.transitions[1],
-    long: theme_1.transitions[2],
+    short: '.2s cubic-bezier(.64, .57, .67, 1.53)',
+    medium: '.3s ease-in-out',
+    long: '.65s ease-in-out',
 };
 exports.transitions = transitions;
 //# sourceMappingURL=animation.js.map

dist/cjs/breakpoints.js

 "use strict";
+// FYI
+// src/core/foundations/src/breakpoints.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/breakpoints.ts
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breakpoints = void 0;
-const theme_1 = require("./theme");
 exports.breakpoints = {
-    mobile: theme_1.tweakpoints[0],
-    mobileMedium: theme_1.tweakpoints[1],
-    mobileLandscape: theme_1.tweakpoints[2],
-    phablet: theme_1.tweakpoints[3],
-    tablet: theme_1.breakpoints[0],
-    desktop: theme_1.breakpoints[1],
-    leftCol: theme_1.breakpoints[2],
-    wide: theme_1.breakpoints[3],
+    mobile: 320,
+    mobileMedium: 375,
+    mobileLandscape: 480,
+    phablet: 660,
+    tablet: 740,
+    desktop: 980,
+    leftCol: 1140,
+    wide: 1300,
 };
 //# sourceMappingURL=breakpoints.js.map

dist/cjs/mq/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breakpoints = exports.between = exports.until = exports.from = void 0;
-const index_1 = require("../index");
-Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return index_1.breakpoints; } });
-const minWidth = (from) => `@media (min-width: ${`${from}px`})`;
-const maxWidth = (until) => `@media (max-width: ${`${until - 1}px`})`;
-const minWidthMaxWidth = (from, until) => `@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;
-// e.g. from.*
-const from = {
-    mobile: minWidth(index_1.breakpoints.mobile),
-    mobileMedium: minWidth(index_1.breakpoints.mobileMedium),
-    mobileLandscape: minWidth(index_1.breakpoints.mobileLandscape),
-    phablet: minWidth(index_1.breakpoints.phablet),
-    tablet: minWidth(index_1.breakpoints.tablet),
-    desktop: minWidth(index_1.breakpoints.desktop),
-    leftCol: minWidth(index_1.breakpoints.leftCol),
-    wide: minWidth(index_1.breakpoints.wide),
-};
-exports.from = from;
-// e.g. until.*
-const until = {
-    mobile: maxWidth(index_1.breakpoints.mobile),
-    mobileMedium: maxWidth(index_1.breakpoints.mobileMedium),
-    mobileLandscape: maxWidth(index_1.breakpoints.mobileLandscape),
-    phablet: maxWidth(index_1.breakpoints.phablet),
-    tablet: maxWidth(index_1.breakpoints.tablet),
-    desktop: maxWidth(index_1.breakpoints.desktop),
-    leftCol: maxWidth(index_1.breakpoints.leftCol),
-    wide: maxWidth(index_1.breakpoints.wide),
-};
-exports.until = until;
-// e.g. between.*.and.*
-const between = {
-    mobile: {
-        and: {
-            mobileMedium: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.mobileMedium),
-            mobileLandscape: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.mobileLandscape),
-            phablet: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.phablet),
-            tablet: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.tablet),
-            desktop: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.desktop),
-            leftCol: minWidthMaxWidth(index_1.breakpoints.mobile, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.wide),
-        },
-    },
-    mobileMedium: {
-        and: {
-            mobileLandscape: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.mobileLandscape),
-            phablet: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.phablet),
-            tablet: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.tablet),
-            desktop: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.desktop),
-            leftCol: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.mobileMedium, index_1.breakpoints.wide),
-        },
-    },
-    mobileLandscape: {
-        and: {
-            phablet: minWidthMaxWidth(index_1.breakpoints.mobileLandscape, index_1.breakpoints.phablet),
-            tablet: minWidthMaxWidth(index_1.breakpoints.mobileLandscape, index_1.breakpoints.tablet),
-            desktop: minWidthMaxWidth(index_1.breakpoints.mobileLandscape, index_1.breakpoints.desktop),
-            leftCol: minWidthMaxWidth(index_1.breakpoints.mobileLandscape, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.mobileLandscape, index_1.breakpoints.wide),
-        },
-    },
-    phablet: {
-        and: {
-            tablet: minWidthMaxWidth(index_1.breakpoints.phablet, index_1.breakpoints.tablet),
-            desktop: minWidthMaxWidth(index_1.breakpoints.phablet, index_1.breakpoints.desktop),
-            leftCol: minWidthMaxWidth(index_1.breakpoints.phablet, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.phablet, index_1.breakpoints.wide),
-        },
-    },
-    tablet: {
-        and: {
-            desktop: minWidthMaxWidth(index_1.breakpoints.tablet, index_1.breakpoints.desktop),
-            leftCol: minWidthMaxWidth(index_1.breakpoints.tablet, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.tablet, index_1.breakpoints.wide),
-        },
-    },
-    desktop: {
-        and: {
-            leftCol: minWidthMaxWidth(index_1.breakpoints.desktop, index_1.breakpoints.leftCol),
-            wide: minWidthMaxWidth(index_1.breakpoints.desktop, index_1.breakpoints.wide),
-        },
-    },
-    leftCol: {
-        and: {
-            wide: minWidthMaxWidth(index_1.breakpoints.leftCol, index_1.breakpoints.wide),
-        },
-    },
-};
-exports.between = between;
+var mq_1 = require("./mq");
+Object.defineProperty(exports, "from", { enumerable: true, get: function () { return mq_1.from; } });
+Object.defineProperty(exports, "until", { enumerable: true, get: function () { return mq_1.until; } });
+Object.defineProperty(exports, "between", { enumerable: true, get: function () { return mq_1.between; } });
+var breakpoints_1 = require("../breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
 //# sourceMappingURL=index.js.map

dist/cjs/size/global.js

 "use strict";
+// This is a temporary fix to make migration work as remSize and remIconSize were
+// are technically importable from `@guardian/src-foundations/size/global` but not from
+// @guardian/source-foundations
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.remIconSize = exports.iconSize = exports.remSize = exports.size = void 0;
-const theme_1 = require("../theme");
-const utils_1 = require("../utils");
-/*
-   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.
-*/
-const size = {
-    xsmall: theme_1.size[0],
-    small: theme_1.size[1],
-    medium: theme_1.size[2],
+exports.remIconSize = exports.remSize = void 0;
+const size_1 = require("./size");
+const px_to_rem_1 = require("./utils/px-to-rem");
+exports.remSize = {
+    xsmall: px_to_rem_1.pxToRem(size_1.size.xsmall),
+    small: px_to_rem_1.pxToRem(size_1.size.small),
+    medium: px_to_rem_1.pxToRem(size_1.size.medium),
 };
-exports.size = size;
-const remSize = {
-    xsmall: utils_1.pxToRem(theme_1.size[0]),
-    small: utils_1.pxToRem(theme_1.size[1]),
-    medium: utils_1.pxToRem(theme_1.size[2]),
+exports.remIconSize = {
+    xsmall: px_to_rem_1.pxToRem(size_1.iconSize.xsmall),
+    small: px_to_rem_1.pxToRem(size_1.iconSize.small),
+    medium: px_to_rem_1.pxToRem(size_1.iconSize.medium),
 };
-exports.remSize = remSize;
-/*
-   We attempt to use these values for icons within Source components.
-   They are analogous with component heights defined by the size values
-   above. They are based on the size of icons used within the button
-   component.
-*/
-const iconSize = {
-    xsmall: 20,
-    small: 26,
-    medium: 30,
-};
-exports.iconSize = iconSize;
-const remIconSize = {
-    xsmall: utils_1.pxToRem(20),
-    small: utils_1.pxToRem(26),
-    medium: utils_1.pxToRem(30),
-};
-exports.remIconSize = remIconSize;
 //# sourceMappingURL=global.js.map

dist/cjs/size/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconSize = exports.size = exports.remWidth = exports.width = exports.remHeight = exports.height = void 0;
-const global_1 = require("./global");
-Object.defineProperty(exports, "size", { enumerable: true, get: function () { return global_1.size; } });
-Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return global_1.iconSize; } });
-const height = {
-    ctaMedium: global_1.size.medium,
-    ctaSmall: global_1.size.small,
-    ctaXsmall: global_1.size.xsmall,
-    inputMedium: global_1.size.medium,
-    inputXsmall: global_1.size.xsmall,
-    iconMedium: global_1.iconSize.medium,
-    iconSmall: global_1.iconSize.small,
-    iconXsmall: global_1.iconSize.xsmall,
-};
-exports.height = height;
-const remHeight = {
-    ctaMedium: global_1.remSize.medium,
-    ctaSmall: global_1.remSize.small,
-    ctaXsmall: global_1.remSize.xsmall,
-    inputMedium: global_1.remSize.medium,
-    inputXsmall: global_1.remSize.xsmall,
-    iconMedium: global_1.remIconSize.medium,
-    iconSmall: global_1.remIconSize.small,
-    iconXsmall: global_1.remIconSize.xsmall,
-};
-exports.remHeight = remHeight;
-const width = {
-    ctaMedium: global_1.size.medium,
-    ctaSmall: global_1.size.small,
-    ctaXsmall: global_1.size.xsmall,
-    inputXsmall: global_1.size.xsmall,
-    iconMedium: global_1.iconSize.medium,
-    iconSmall: global_1.iconSize.small,
-    iconXsmall: global_1.iconSize.xsmall,
-};
-exports.width = width;
-const remWidth = {
-    ctaMedium: global_1.remSize.medium,
-    ctaSmall: global_1.remSize.small,
-    ctaXsmall: global_1.remSize.xsmall,
-    inputXsmall: global_1.remSize.xsmall,
-    iconMedium: global_1.remIconSize.medium,
-    iconSmall: global_1.remIconSize.small,
-    iconXsmall: global_1.remIconSize.xsmall,
-};
-exports.remWidth = remWidth;
+// This is a temporary fix to make migration work
+// as size is not nested in packages/@guardian/source-foundations
+var size_1 = require("./size");
+Object.defineProperty(exports, "height", { enumerable: true, get: function () { return size_1.height; } });
+Object.defineProperty(exports, "remHeight", { enumerable: true, get: function () { return size_1.remHeight; } });
+Object.defineProperty(exports, "width", { enumerable: true, get: function () { return size_1.width; } });
+Object.defineProperty(exports, "remWidth", { enumerable: true, get: function () { return size_1.remWidth; } });
+Object.defineProperty(exports, "size", { enumerable: true, get: function () { return size_1.size; } });
+Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return size_1.iconSize; } });
 //# sourceMappingURL=index.js.map

dist/cjs/space.js

 "use strict";
+// FYI
+// src/core/foundations/src/space.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/space.ts
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remSpace = exports.space = void 0;
-const theme_1 = require("./theme");
-const utils_1 = require("./utils");
-const space = {
-    1: theme_1.space[1],
-    2: theme_1.space[2],
-    3: theme_1.space[3],
-    4: theme_1.space[4],
-    5: theme_1.space[5],
-    6: theme_1.space[6],
-    9: theme_1.space[7],
-    12: theme_1.space[8],
-    24: theme_1.space[9],
+const px_to_rem_1 = require("./utils/px-to-rem");
+exports.space = {
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    9: 36,
+    12: 48,
+    24: 96,
 };
-exports.space = space;
 /* TODO: this should be exposed as a number instead of a string,
    so consumers can perform calculations on it */
-const remSpace = {
-    1: `${utils_1.pxToRem(space[1])}rem`,
-    2: `${utils_1.pxToRem(space[2])}rem`,
-    3: `${utils_1.pxToRem(space[3])}rem`,
-    4: `${utils_1.pxToRem(space[4])}rem`,
-    5: `${utils_1.pxToRem(space[5])}rem`,
-    6: `${utils_1.pxToRem(space[6])}rem`,
-    9: `${utils_1.pxToRem(space[9])}rem`,
-    12: `${utils_1.pxToRem(space[12])}rem`,
-    24: `${utils_1.pxToRem(space[24])}rem`,
+exports.remSpace = {
+    1: `${px_to_rem_1.pxToRem(exports.space[1])}rem`,
+    2: `${px_to_rem_1.pxToRem(exports.space[2])}rem`,
+    3: `${px_to_rem_1.pxToRem(exports.space[3])}rem`,
+    4: `${px_to_rem_1.pxToRem(exports.space[4])}rem`,
+    5: `${px_to_rem_1.pxToRem(exports.space[5])}rem`,
+    6: `${px_to_rem_1.pxToRem(exports.space[6])}rem`,
+    9: `${px_to_rem_1.pxToRem(exports.space[9])}rem`,
+    12: `${px_to_rem_1.pxToRem(exports.space[12])}rem`,
+    24: `${px_to_rem_1.pxToRem(exports.space[24])}rem`,
 };
-exports.remSpace = remSpace;
 //# sourceMappingURL=space.js.map

dist/cjs/typography/data.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.availableFonts = exports.fontWeightMapping = exports.lineHeightMapping = exports.fontSizeMapping = exports.fontMapping = exports.remFontSizeMapping = exports.remTextSansSizes = exports.remBodySizes = exports.remHeadlineSizes = exports.remTitlepieceSizes = exports.remFontSizes = exports.textSansSizes = exports.bodySizes = exports.headlineSizes = exports.titlepieceSizes = void 0;
-const theme_1 = require("../theme");
-const utils_1 = require("../utils");
+const px_to_rem_1 = require("../utils/px-to-rem");
+const fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+const fonts = {
+    titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
+    headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
+    bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
+    bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
+};
+const lineHeights = [1.15, 1.35, 1.5];
+const fontWeights = [300, 400, 500, 700];
 const titlepieceSizes = {
-    small: theme_1.fontSizes[8],
-    medium: theme_1.fontSizes[9],
-    large: theme_1.fontSizes[10],
+    small: fontSizes[8],
+    medium: fontSizes[9],
+    large: fontSizes[10],
 };
 exports.titlepieceSizes = titlepieceSizes;
 const headlineSizes = {
-    xxxsmall: theme_1.fontSizes[3],
-    xxsmall: theme_1.fontSizes[4],
-    xsmall: theme_1.fontSizes[5],
-    small: theme_1.fontSizes[6],
-    medium: theme_1.fontSizes[7],
-    large: theme_1.fontSizes[8],
-    xlarge: theme_1.fontSizes[9],
+    xxxsmall: fontSizes[3],
+    xxsmall: fontSizes[4],
+    xsmall: fontSizes[5],
+    small: fontSizes[6],
+    medium: fontSizes[7],
+    large: fontSizes[8],
+    xlarge: fontSizes[9],
 };
 exports.headlineSizes = headlineSizes;
 const bodySizes = {
-    small: theme_1.fontSizes[2],
-    medium: theme_1.fontSizes[3],
+    small: fontSizes[2],
+    medium: fontSizes[3],
 };
 exports.bodySizes = bodySizes;
 const textSansSizes = {
-    xxsmall: theme_1.fontSizes[0],
-    xsmall: theme_1.fontSizes[1],
-    small: theme_1.fontSizes[2],
-    medium: theme_1.fontSizes[3],
-    large: theme_1.fontSizes[4],
-    xlarge: theme_1.fontSizes[5],
-    xxlarge: theme_1.fontSizes[6],
-    xxxlarge: theme_1.fontSizes[7],
+    xxsmall: fontSizes[0],
+    xsmall: fontSizes[1],
+    small: fontSizes[2],
+    medium: fontSizes[3],
+    large: fontSizes[4],
+    xlarge: fontSizes[5],
+    xxlarge: fontSizes[6],
+    xxxlarge: fontSizes[7],
 };
@@ -45,3 +53,3 @@ exports.textSansSizes = textSansSizes;
 exports.fontSizeMapping = fontSizeMapping;
-const remFontSizes = theme_1.fontSizes.map((fontSize) => utils_1.pxToRem(fontSize));
+const remFontSizes = fontSizes.map((fontSize) => px_to_rem_1.pxToRem(fontSize));
 exports.remFontSizes = remFontSizes;
@@ -88,19 +96,19 @@ const remTitlepieceSizes = {
 const fontMapping = {
-    titlepiece: theme_1.fonts.titlepiece,
-    headline: theme_1.fonts.headlineSerif,
-    body: theme_1.fonts.bodySerif,
-    textSans: theme_1.fonts.bodySans,
+    titlepiece: fonts.titlepiece,
+    headline: fonts.headlineSerif,
+    body: fonts.bodySerif,
+    textSans: fonts.bodySans,
 };
 exports.fontMapping = fontMapping;
 const lineHeightMapping = {
-    tight: theme_1.lineHeights[0],
-    regular: theme_1.lineHeights[1],
-    loose: theme_1.lineHeights[2],
+    tight: lineHeights[0],
+    regular: lineHeights[1],
+    loose: lineHeights[2],
 };
 exports.lineHeightMapping = lineHeightMapping;
 const fontWeightMapping = {
-    light: theme_1.fontWeights[0],
-    regular: theme_1.fontWeights[1],
-    medium: theme_1.fontWeights[2],
-    bold: theme_1.fontWeights[3],
+    light: fontWeights[0],
+    regular: fontWeights[1],
+    medium: fontWeights[2],
+    bold: fontWeights[3],
 };
@@ -107,0 +115,0 @@ exports.fontWeightMapping = fontWeightMapping;

dist/cjs/typography/fs.js

@@ -8,3 +8,3 @@ "use strict";
         case 'italic':
-            return font && font.hasItalic ? 'italic' : null;
+            return (font === null || font === void 0 ? void 0 : font.hasItalic) ? 'italic' : null;
         case 'normal':
@@ -11,0 +11,0 @@ return 'normal';

dist/cjs/typography/index.js

@@ -5,20 +5,16 @@ "use strict";
 const api_1 = require("./api");
-const object_styles_to_string_1 = require("./object-styles-to-string");
 const data_1 = require("./data");
-Object.defineProperty(exports, "titlepieceSizes", { enumerable: true, get: function () { return data_1.titlepieceSizes; } });
-Object.defineProperty(exports, "headlineSizes", { enumerable: true, get: function () { return data_1.headlineSizes; } });
 Object.defineProperty(exports, "bodySizes", { enumerable: true, get: function () { return data_1.bodySizes; } });
-Object.defineProperty(exports, "textSansSizes", { enumerable: true, get: function () { return data_1.textSansSizes; } });
-Object.defineProperty(exports, "remTitlepieceSizes", { enumerable: true, get: function () { return data_1.remTitlepieceSizes; } });
-Object.defineProperty(exports, "remHeadlineSizes", { enumerable: true, get: function () { return data_1.remHeadlineSizes; } });
-Object.defineProperty(exports, "remBodySizes", { enumerable: true, get: function () { return data_1.remBodySizes; } });
-Object.defineProperty(exports, "remTextSansSizes", { enumerable: true, get: function () { return data_1.remTextSansSizes; } });
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return data_1.fontMapping; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return data_1.fontWeightMapping; } });
+Object.defineProperty(exports, "headlineSizes", { enumerable: true, get: function () { return data_1.headlineSizes; } });
 Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return data_1.lineHeightMapping; } });
-const fromEntries = (entries) => entries.reduce((acc, [key, value]) => {
-    acc[key] = value;
-    return acc;
-}, {});
-const titlepiece = fromEntries(Object.entries(api_1.titlepiece).map(([key, func]) => {
+Object.defineProperty(exports, "remBodySizes", { enumerable: true, get: function () { return data_1.remBodySizes; } });
+Object.defineProperty(exports, "remHeadlineSizes", { enumerable: true, get: function () { return data_1.remHeadlineSizes; } });
+Object.defineProperty(exports, "remTextSansSizes", { enumerable: true, get: function () { return data_1.remTextSansSizes; } });
+Object.defineProperty(exports, "remTitlepieceSizes", { enumerable: true, get: function () { return data_1.remTitlepieceSizes; } });
+Object.defineProperty(exports, "textSansSizes", { enumerable: true, get: function () { return data_1.textSansSizes; } });
+Object.defineProperty(exports, "titlepieceSizes", { enumerable: true, get: function () { return data_1.titlepieceSizes; } });
+const object_styles_to_string_1 = require("./object-styles-to-string");
+const titlepiece = Object.fromEntries(Object.entries(api_1.titlepiece).map(([key, func]) => {
     return [
@@ -30,3 +26,3 @@ key,
 exports.titlepiece = titlepiece;
-const headline = fromEntries(Object.entries(api_1.headline).map(([key, func]) => {
+const headline = Object.fromEntries(Object.entries(api_1.headline).map(([key, func]) => {
     return [
@@ -38,3 +34,3 @@ key,
 exports.headline = headline;
-const body = fromEntries(Object.entries(api_1.body).map(([key, func]) => {
+const body = Object.fromEntries(Object.entries(api_1.body).map(([key, func]) => {
     return [
@@ -46,3 +42,3 @@ key,
 exports.body = body;
-const textSans = fromEntries(Object.entries(api_1.textSans).map(([key, func]) => {
+const textSans = Object.fromEntries(Object.entries(api_1.textSans).map(([key, func]) => {
     return [
@@ -49,0 +45,0 @@ key,

dist/cjs/typography/obj/index.js

@@ -5,18 +5,18 @@ "use strict";
 const api_1 = require("../api");
-Object.defineProperty(exports, "titlepiece", { enumerable: true, get: function () { return api_1.titlepiece; } });
+Object.defineProperty(exports, "body", { enumerable: true, get: function () { return api_1.body; } });
 Object.defineProperty(exports, "headline", { enumerable: true, get: function () { return api_1.headline; } });
-Object.defineProperty(exports, "body", { enumerable: true, get: function () { return api_1.body; } });
 Object.defineProperty(exports, "textSans", { enumerable: true, get: function () { return api_1.textSans; } });
+Object.defineProperty(exports, "titlepiece", { enumerable: true, get: function () { return api_1.titlepiece; } });
 const data_1 = require("../data");
-Object.defineProperty(exports, "titlepieceSizes", { enumerable: true, get: function () { return data_1.titlepieceSizes; } });
-Object.defineProperty(exports, "headlineSizes", { enumerable: true, get: function () { return data_1.headlineSizes; } });
 Object.defineProperty(exports, "bodySizes", { enumerable: true, get: function () { return data_1.bodySizes; } });
-Object.defineProperty(exports, "textSansSizes", { enumerable: true, get: function () { return data_1.textSansSizes; } });
-Object.defineProperty(exports, "remTitlepieceSizes", { enumerable: true, get: function () { return data_1.remTitlepieceSizes; } });
-Object.defineProperty(exports, "remHeadlineSizes", { enumerable: true, get: function () { return data_1.remHeadlineSizes; } });
-Object.defineProperty(exports, "remBodySizes", { enumerable: true, get: function () { return data_1.remBodySizes; } });
-Object.defineProperty(exports, "remTextSansSizes", { enumerable: true, get: function () { return data_1.remTextSansSizes; } });
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return data_1.fontMapping; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return data_1.fontWeightMapping; } });
+Object.defineProperty(exports, "headlineSizes", { enumerable: true, get: function () { return data_1.headlineSizes; } });
 Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return data_1.lineHeightMapping; } });
+Object.defineProperty(exports, "remBodySizes", { enumerable: true, get: function () { return data_1.remBodySizes; } });
+Object.defineProperty(exports, "remHeadlineSizes", { enumerable: true, get: function () { return data_1.remHeadlineSizes; } });
+Object.defineProperty(exports, "remTextSansSizes", { enumerable: true, get: function () { return data_1.remTextSansSizes; } });
+Object.defineProperty(exports, "remTitlepieceSizes", { enumerable: true, get: function () { return data_1.remTitlepieceSizes; } });
+Object.defineProperty(exports, "textSansSizes", { enumerable: true, get: function () { return data_1.textSansSizes; } });
+Object.defineProperty(exports, "titlepieceSizes", { enumerable: true, get: function () { return data_1.titlepieceSizes; } });
 //# sourceMappingURL=index.js.map

dist/cjs/typography/typography.test.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const index_1 = require("./index");
+const _1 = require(".");
 it('should return styles containing the specified font family', () => {
-    const mediumHeadlineStyles = index_1.headline.medium();
-    expect(mediumHeadlineStyles).toContain(`font-family: ${index_1.fonts.headline};`);
+    const mediumHeadlineStyles = _1.headline.medium();
+    expect(mediumHeadlineStyles).toContain(`font-family: ${_1.fonts.headline};`);
 });
 it('should return styles containing the specified font size', () => {
-    const mediumHeadlineStyles = index_1.headline.medium();
-    expect(mediumHeadlineStyles).toContain(`font-size: ${index_1.remHeadlineSizes.medium}rem;`);
+    const mediumHeadlineStyles = _1.headline.medium();
+    expect(mediumHeadlineStyles).toContain(`font-size: ${_1.remHeadlineSizes.medium}rem;`);
 });
 it('should return styles containing the specified font size in px if requested', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({ unit: 'px' });
-    expect(mediumHeadlineStyles).toContain(`font-size: ${index_1.headlineSizes.medium}px;`);
+    const mediumHeadlineStyles = _1.headline.medium({ unit: 'px' });
+    expect(mediumHeadlineStyles).toContain(`font-size: ${_1.headlineSizes.medium}px;`);
 });
 it('should return styles containing the specified font weight', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({ fontWeight: 'bold' });
-    expect(mediumHeadlineStyles).toContain(`font-weight: ${index_1.fontWeights.bold};`);
+    const mediumHeadlineStyles = _1.headline.medium({ fontWeight: 'bold' });
+    expect(mediumHeadlineStyles).toContain(`font-weight: ${_1.fontWeights.bold};`);
 });
 it('should return styles containing the specified line height', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({ lineHeight: 'tight' });
-    expect(mediumHeadlineStyles).toContain(`line-height: ${index_1.lineHeights.tight};`);
+    const mediumHeadlineStyles = _1.headline.medium({ lineHeight: 'tight' });
+    expect(mediumHeadlineStyles).toContain(`line-height: ${_1.lineHeights.tight};`);
 });
 it('should return styles containing the specified line height in px if requested', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({
+    const mediumHeadlineStyles = _1.headline.medium({
         lineHeight: 'tight',
         unit: 'px',
     });
-    expect(mediumHeadlineStyles).toContain(`line-height: ${index_1.lineHeights.tight * index_1.headlineSizes.medium}px;`);
+    expect(mediumHeadlineStyles).toContain(`line-height: ${_1.lineHeights.tight * _1.headlineSizes.medium}px;`);
 });
 it('should return italic styles if specified', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({ fontStyle: 'italic' });
+    const mediumHeadlineStyles = _1.headline.medium({ fontStyle: 'italic' });
     expect(mediumHeadlineStyles).toContain('font-style: italic;');
 });
 it('should return normal styles if specified', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({ fontStyle: 'normal' });
+    const mediumHeadlineStyles = _1.headline.medium({ fontStyle: 'normal' });
     expect(mediumHeadlineStyles).toContain('font-style: normal;');
 });
 it('should not return font styles if unspecified', () => {
-    const mediumHeadlineStyles = index_1.headline.medium();
+    const mediumHeadlineStyles = _1.headline.medium();
     expect(mediumHeadlineStyles).not.toContain('font-style');
 });
 it('should not include italic font style if it is not available for requested font', () => {
-    const mediumHeadlineStyles = index_1.headline.medium({
+    const mediumHeadlineStyles = _1.headline.medium({
         fontWeight: 'bold',
         fontStyle: 'italic',
     });
-    const largeHeadlineStyles = index_1.headline.large({
+    const largeHeadlineStyles = _1.headline.large({
         fontWeight: 'bold',
@@ -50,0 +50,0 @@ fontStyle: 'italic',

dist/cjs/utils/focus-style-manager.js

 "use strict";
+// FYI
+// src/core/foundations/src/utils/focus-style-manager.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/focus-style-manager.ts
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -12,2 +15,5 @@ exports.FocusStyleManager = exports.InteractionModeEngine = void 0;
  * Requires @babel/plugin-proposal-class-properties
+ *
+ * Modifications to original source:
+ * - Add return types to `isActive`, `start` and `stop` functions
  */
@@ -14,0 +20,0 @@ class InteractionModeEngine {

dist/cjs/utils/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resets = exports.rootPixelFontSize = exports.pxToRem = exports.FocusStyleManager = void 0;
+exports.appearance = exports.resets = exports.rootPixelFontSize = exports.pxToRem = exports.FocusStyleManager = void 0;
 var focus_style_manager_1 = require("./focus-style-manager");
@@ -11,2 +11,4 @@ Object.defineProperty(exports, "FocusStyleManager", { enumerable: true, get: function () { return focus_style_manager_1.FocusStyleManager; } });
 Object.defineProperty(exports, "resets", { enumerable: true, get: function () { return resets_1.resets; } });
+var supports_queries_1 = require("./supports-queries");
+Object.defineProperty(exports, "appearance", { enumerable: true, get: function () { return supports_queries_1.appearance; } });
 //# sourceMappingURL=index.js.map

dist/cjs/utils/px-to-rem.js

 "use strict";
+// FYI
+// src/core/foundations/src/utils/px-to-rem.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/px-to-rem.ts
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -3,0 +6,0 @@ exports.pxToRem = exports.rootPixelFontSize = void 0;

dist/cjs/utils/resets.js

 "use strict";
+// FYI
+// src/core/foundations/src/utils/resets.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/resets.ts
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -51,2 +54,58 @@ exports.resets = void 0;
 `;
+////////////////////////////
+// Meyer resets
+////////////////////////////
+// Originally sourced from https://github.com/shannonmoeller/reset-css
+// and https://meyerweb.com/eric/tools/css/reset/
+const resetCSS = `
+	html, body, div, span, applet, object, iframe,
+	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+	a, abbr, acronym, address, big, cite, code,
+	del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var,
+	b, u, i, center,
+	dl, dt, dd, menu, ol, ul, li,
+	fieldset, form, label, legend,
+	table, caption, tbody, tfoot, thead, tr, th, td,
+	article, aside, canvas, details, embed,
+	figure, figcaption, footer, header, hgroup,
+	main, menu, nav, output, ruby, section, summary,
+	time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+	/* HTML5 display-role reset for older browsers */
+	article, aside, details, figcaption, figure,
+	footer, header, hgroup, main, menu, nav, section {
+		display: block;
+	}
+	/* HTML5 hidden-attribute fix for newer browsers */
+	*[hidden] {
+		display: none;
+	}
+	body {
+		line-height: 1;
+	}
+	menu, ol, ul {
+		list-style: none;
+	}
+	blockquote, q {
+		quotes: none;
+	}
+	blockquote:before, blockquote:after,
+	q:before, q:after {
+		content: '';
+		content: none;
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	${defaults}
+`;
 exports.resets = {
@@ -57,3 +116,4 @@ legend,
     defaults,
+    resetCSS,
 };
 //# sourceMappingURL=resets.js.map

dist/esm/animation.js

@@ -1,8 +0,10 @@
-import { transitions as _transitions } from './theme';
+// FYI
+// src/core/foundations/src/animation.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/animation.ts
 const transitions = {
-    short: _transitions[0],
-    medium: _transitions[1],
-    long: _transitions[2],
+    short: '.2s cubic-bezier(.64, .57, .67, 1.53)',
+    medium: '.3s ease-in-out',
+    long: '.65s ease-in-out',
 };
 export { transitions };
 //# sourceMappingURL=animation.js.map

dist/esm/breakpoints.js

@@ -1,12 +0,14 @@
-import { breakpoints as _breakpoints, tweakpoints } from './theme';
+// FYI
+// src/core/foundations/src/breakpoints.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/breakpoints.ts
 export const breakpoints = {
-    mobile: tweakpoints[0],
-    mobileMedium: tweakpoints[1],
-    mobileLandscape: tweakpoints[2],
-    phablet: tweakpoints[3],
-    tablet: _breakpoints[0],
-    desktop: _breakpoints[1],
-    leftCol: _breakpoints[2],
-    wide: _breakpoints[3],
+    mobile: 320,
+    mobileMedium: 375,
+    mobileLandscape: 480,
+    phablet: 660,
+    tablet: 740,
+    desktop: 980,
+    leftCol: 1140,
+    wide: 1300,
 };
 //# sourceMappingURL=breakpoints.js.map

dist/esm/mq/index.js

@@ -1,87 +0,3 @@
-import { breakpoints } from '../index';
-const minWidth = (from) => `@media (min-width: ${`${from}px`})`;
-const maxWidth = (until) => `@media (max-width: ${`${until - 1}px`})`;
-const minWidthMaxWidth = (from, until) => `@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;
-// e.g. from.*
-const from = {
-    mobile: minWidth(breakpoints.mobile),
-    mobileMedium: minWidth(breakpoints.mobileMedium),
-    mobileLandscape: minWidth(breakpoints.mobileLandscape),
-    phablet: minWidth(breakpoints.phablet),
-    tablet: minWidth(breakpoints.tablet),
-    desktop: minWidth(breakpoints.desktop),
-    leftCol: minWidth(breakpoints.leftCol),
-    wide: minWidth(breakpoints.wide),
-};
-// e.g. until.*
-const until = {
-    mobile: maxWidth(breakpoints.mobile),
-    mobileMedium: maxWidth(breakpoints.mobileMedium),
-    mobileLandscape: maxWidth(breakpoints.mobileLandscape),
-    phablet: maxWidth(breakpoints.phablet),
-    tablet: maxWidth(breakpoints.tablet),
-    desktop: maxWidth(breakpoints.desktop),
-    leftCol: maxWidth(breakpoints.leftCol),
-    wide: maxWidth(breakpoints.wide),
-};
-// e.g. between.*.and.*
-const between = {
-    mobile: {
-        and: {
-            mobileMedium: minWidthMaxWidth(breakpoints.mobile, breakpoints.mobileMedium),
-            mobileLandscape: minWidthMaxWidth(breakpoints.mobile, breakpoints.mobileLandscape),
-            phablet: minWidthMaxWidth(breakpoints.mobile, breakpoints.phablet),
-            tablet: minWidthMaxWidth(breakpoints.mobile, breakpoints.tablet),
-            desktop: minWidthMaxWidth(breakpoints.mobile, breakpoints.desktop),
-            leftCol: minWidthMaxWidth(breakpoints.mobile, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.wide),
-        },
-    },
-    mobileMedium: {
-        and: {
-            mobileLandscape: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.mobileLandscape),
-            phablet: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.phablet),
-            tablet: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.tablet),
-            desktop: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.desktop),
-            leftCol: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.wide),
-        },
-    },
-    mobileLandscape: {
-        and: {
-            phablet: minWidthMaxWidth(breakpoints.mobileLandscape, breakpoints.phablet),
-            tablet: minWidthMaxWidth(breakpoints.mobileLandscape, breakpoints.tablet),
-            desktop: minWidthMaxWidth(breakpoints.mobileLandscape, breakpoints.desktop),
-            leftCol: minWidthMaxWidth(breakpoints.mobileLandscape, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.mobileLandscape, breakpoints.wide),
-        },
-    },
-    phablet: {
-        and: {
-            tablet: minWidthMaxWidth(breakpoints.phablet, breakpoints.tablet),
-            desktop: minWidthMaxWidth(breakpoints.phablet, breakpoints.desktop),
-            leftCol: minWidthMaxWidth(breakpoints.phablet, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.phablet, breakpoints.wide),
-        },
-    },
-    tablet: {
-        and: {
-            desktop: minWidthMaxWidth(breakpoints.tablet, breakpoints.desktop),
-            leftCol: minWidthMaxWidth(breakpoints.tablet, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.tablet, breakpoints.wide),
-        },
-    },
-    desktop: {
-        and: {
-            leftCol: minWidthMaxWidth(breakpoints.desktop, breakpoints.leftCol),
-            wide: minWidthMaxWidth(breakpoints.desktop, breakpoints.wide),
-        },
-    },
-    leftCol: {
-        and: {
-            wide: minWidthMaxWidth(breakpoints.leftCol, breakpoints.wide),
-        },
-    },
-};
-export { from, until, between, breakpoints };
+export { from, until, between } from './mq';
+export { breakpoints } from '../breakpoints';
 //# sourceMappingURL=index.js.map

dist/esm/size/global.js

@@ -1,35 +0,16 @@
-import { size as _size } from '../theme';
-import { pxToRem } from '../utils';
-/*
-   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.
-*/
-const size = {
-    xsmall: _size[0],
-    small: _size[1],
-    medium: _size[2],
+// This is a temporary fix to make migration work as remSize and remIconSize were
+// are technically importable from `@guardian/src-foundations/size/global` but not from
+// @guardian/source-foundations
+import { iconSize, size } from './size';
+import { pxToRem } from './utils/px-to-rem';
+export const remSize = {
+    xsmall: pxToRem(size.xsmall),
+    small: pxToRem(size.small),
+    medium: pxToRem(size.medium),
 };
-const remSize = {
-    xsmall: pxToRem(_size[0]),
-    small: pxToRem(_size[1]),
-    medium: pxToRem(_size[2]),
+export const remIconSize = {
+    xsmall: pxToRem(iconSize.xsmall),
+    small: pxToRem(iconSize.small),
+    medium: pxToRem(iconSize.medium),
 };
-/*
-   We attempt to use these values for icons within Source components.
-   They are analogous with component heights defined by the size values
-   above. They are based on the size of icons used within the button
-   component.
-*/
-const iconSize = {
-    xsmall: 20,
-    small: 26,
-    medium: 30,
-};
-const remIconSize = {
-    xsmall: pxToRem(20),
-    small: pxToRem(26),
-    medium: pxToRem(30),
-};
-export { size, remSize, iconSize, remIconSize };
 //# sourceMappingURL=global.js.map

dist/esm/size/index.js

@@ -1,41 +0,4 @@
-import { size, remSize, iconSize, remIconSize } from './global';
-const height = {
-    ctaMedium: size.medium,
-    ctaSmall: size.small,
-    ctaXsmall: size.xsmall,
-    inputMedium: size.medium,
-    inputXsmall: size.xsmall,
-    iconMedium: iconSize.medium,
-    iconSmall: iconSize.small,
-    iconXsmall: iconSize.xsmall,
-};
-const remHeight = {
-    ctaMedium: remSize.medium,
-    ctaSmall: remSize.small,
-    ctaXsmall: remSize.xsmall,
-    inputMedium: remSize.medium,
-    inputXsmall: remSize.xsmall,
-    iconMedium: remIconSize.medium,
-    iconSmall: remIconSize.small,
-    iconXsmall: remIconSize.xsmall,
-};
-const width = {
-    ctaMedium: size.medium,
-    ctaSmall: size.small,
-    ctaXsmall: size.xsmall,
-    inputXsmall: size.xsmall,
-    iconMedium: iconSize.medium,
-    iconSmall: iconSize.small,
-    iconXsmall: iconSize.xsmall,
-};
-const remWidth = {
-    ctaMedium: remSize.medium,
-    ctaSmall: remSize.small,
-    ctaXsmall: remSize.xsmall,
-    inputXsmall: remSize.xsmall,
-    iconMedium: remIconSize.medium,
-    iconSmall: remIconSize.small,
-    iconXsmall: remIconSize.xsmall,
-};
-export { height, remHeight, width, remWidth, size, iconSize };
+// This is a temporary fix to make migration work
+// as size is not nested in packages/@guardian/source-foundations
+export { height, remHeight, width, remWidth, size, iconSize } from './size';
 //# sourceMappingURL=index.js.map

dist/esm/space.js

@@ -1,17 +0,19 @@
-import { space as _space } from './theme';
-import { pxToRem } from './utils';
-const space = {
-    1: _space[1],
-    2: _space[2],
-    3: _space[3],
-    4: _space[4],
-    5: _space[5],
-    6: _space[6],
-    9: _space[7],
-    12: _space[8],
-    24: _space[9],
+// FYI
+// src/core/foundations/src/space.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/space.ts
+import { pxToRem } from './utils/px-to-rem';
+export const space = {
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    9: 36,
+    12: 48,
+    24: 96,
 };
 /* TODO: this should be exposed as a number instead of a string,
    so consumers can perform calculations on it */
-const remSpace = {
+export const remSpace = {
     1: `${pxToRem(space[1])}rem`,
@@ -27,3 +29,2 @@ 2: `${pxToRem(space[2])}rem`,
 };
-export { space, remSpace };
 //# sourceMappingURL=space.js.map

dist/esm/typography/data.js

@@ -1,3 +0,11 @@
-import { fontSizes, fonts, lineHeights, fontWeights } from '../theme';
-import { pxToRem } from '../utils';
+import { pxToRem } from '../utils/px-to-rem';
+const fontSizes = [12, 14, 15, 17, 20, 24, 28, 34, 42, 50, 70];
+const fonts = {
+    titlepiece: 'GT Guardian Titlepiece, Georgia, serif',
+    headlineSerif: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif',
+    bodySerif: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif',
+    bodySans: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
+};
+const lineHeights = [1.15, 1.35, 1.5];
+const fontWeights = [300, 400, 500, 700];
 const titlepieceSizes = {
@@ -4,0 +12,0 @@ small: fontSizes[8],

dist/esm/typography/fs.js

@@ -1,6 +0,6 @@
-import { fontMapping, fontSizeMapping, remFontSizeMapping, lineHeightMapping, fontWeightMapping, availableFonts, } from './data';
+import { availableFonts, fontMapping, fontSizeMapping, fontWeightMapping, lineHeightMapping, remFontSizeMapping, } from './data';
 function getFontStyle(font, fontStyle) {
     switch (fontStyle) {
         case 'italic':
-            return font && font.hasItalic ? 'italic' : null;
+            return (font === null || font === void 0 ? void 0 : font.hasItalic) ? 'italic' : null;
         case 'normal':
@@ -7,0 +7,0 @@ return 'normal';

dist/esm/typography/index.js

@@ -1,9 +0,5 @@
-import { titlepiece as titlepieceAsObj, headline as headlineAsObj, body as bodyAsObj, textSans as textSansAsObj, } from './api';
+import { body as bodyAsObj, headline as headlineAsObj, textSans as textSansAsObj, titlepiece as titlepieceAsObj, } from './api';
+import { bodySizes, fontMapping, fontWeightMapping, headlineSizes, lineHeightMapping, remBodySizes, remHeadlineSizes, remTextSansSizes, remTitlepieceSizes, textSansSizes, titlepieceSizes, } from './data';
 import { objectStylesToString } from './object-styles-to-string';
-import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping, } from './data';
-const fromEntries = (entries) => entries.reduce((acc, [key, value]) => {
-    acc[key] = value;
-    return acc;
-}, {});
-const titlepiece = fromEntries(Object.entries(titlepieceAsObj).map(([key, func]) => {
+const titlepiece = Object.fromEntries(Object.entries(titlepieceAsObj).map(([key, func]) => {
     return [
@@ -14,3 +10,3 @@ key,
 }));
-const headline = fromEntries(Object.entries(headlineAsObj).map(([key, func]) => {
+const headline = Object.fromEntries(Object.entries(headlineAsObj).map(([key, func]) => {
     return [
@@ -21,3 +17,3 @@ key,
 }));
-const body = fromEntries(Object.entries(bodyAsObj).map(([key, func]) => {
+const body = Object.fromEntries(Object.entries(bodyAsObj).map(([key, func]) => {
     return [
@@ -28,3 +24,3 @@ key,
 }));
-const textSans = fromEntries(Object.entries(textSansAsObj).map(([key, func]) => {
+const textSans = Object.fromEntries(Object.entries(textSansAsObj).map(([key, func]) => {
     return [
@@ -31,0 +27,0 @@ key,

dist/esm/typography/obj/index.js

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

dist/esm/typography/obj/typography.obj.test.js

@@ -1,2 +0,2 @@
-import { headline, fonts, headlineSizes, remHeadlineSizes, fontWeights, lineHeights, } from './index';
+import { fonts, fontWeights, headline, headlineSizes, lineHeights, remHeadlineSizes, } from './index';
 it('should return styles containing the specified font family', () => {
@@ -3,0 +3,0 @@ const mediumHeadlineStyles = headline.medium();

dist/esm/typography/typography.test.js

@@ -1,2 +0,2 @@
-import { headline, fonts, headlineSizes, remHeadlineSizes, fontWeights, lineHeights, } from './index';
+import { fonts, fontWeights, headline, headlineSizes, lineHeights, remHeadlineSizes, } from '.';
 it('should return styles containing the specified font family', () => {
@@ -3,0 +3,0 @@ const mediumHeadlineStyles = headline.medium();

dist/esm/utils/focus-style-manager.js

@@ -0,1 +1,4 @@
+// FYI
+// src/core/foundations/src/utils/focus-style-manager.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/focus-style-manager.ts
 const TAB_KEY_CODE = 9;
@@ -9,2 +12,5 @@ /**
  * Requires @babel/plugin-proposal-class-properties
+ *
+ * Modifications to original source:
+ * - Add return types to `isActive`, `start` and `stop` functions
  */
@@ -11,0 +17,0 @@ export class InteractionModeEngine {

dist/esm/utils/index.js

 export { FocusStyleManager } from './focus-style-manager';
 export { pxToRem, rootPixelFontSize } from './px-to-rem';
 export { resets } from './resets';
+export { appearance } from './supports-queries';
 //# sourceMappingURL=index.js.map

dist/esm/utils/px-to-rem.js

@@ -0,3 +1,6 @@
+// FYI
+// src/core/foundations/src/utils/px-to-rem.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/px-to-rem.ts
 export const rootPixelFontSize = 16;
 export const pxToRem = (px) => px / rootPixelFontSize;
 //# sourceMappingURL=px-to-rem.js.map

dist/esm/utils/resets.js

@@ -0,1 +1,4 @@
+// FYI
+// src/core/foundations/src/utils/resets.ts SYMLINKS TO
+// packages/@guardian/source-foundations/src/utils/resets.ts
 import { background, text } from '../palette';
@@ -48,2 +51,58 @@ ////////////////////////////
 `;
+////////////////////////////
+// Meyer resets
+////////////////////////////
+// Originally sourced from https://github.com/shannonmoeller/reset-css
+// and https://meyerweb.com/eric/tools/css/reset/
+const resetCSS = `
+	html, body, div, span, applet, object, iframe,
+	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+	a, abbr, acronym, address, big, cite, code,
+	del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var,
+	b, u, i, center,
+	dl, dt, dd, menu, ol, ul, li,
+	fieldset, form, label, legend,
+	table, caption, tbody, tfoot, thead, tr, th, td,
+	article, aside, canvas, details, embed,
+	figure, figcaption, footer, header, hgroup,
+	main, menu, nav, output, ruby, section, summary,
+	time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+	/* HTML5 display-role reset for older browsers */
+	article, aside, details, figcaption, figure,
+	footer, header, hgroup, main, menu, nav, section {
+		display: block;
+	}
+	/* HTML5 hidden-attribute fix for newer browsers */
+	*[hidden] {
+		display: none;
+	}
+	body {
+		line-height: 1;
+	}
+	menu, ol, ul {
+		list-style: none;
+	}
+	blockquote, q {
+		quotes: none;
+	}
+	blockquote:before, blockquote:after,
+	q:before, q:after {
+		content: '';
+		content: none;
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	${defaults}
+`;
 export const resets = {
@@ -54,3 +113,4 @@ legend,
     defaults,
+    resetCSS,
 };
 //# sourceMappingURL=resets.js.map

dist/types/mq/index.d.ts

@@ -1,66 +0,2 @@
-import { breakpoints } from '../index';
-declare type Breakpoint = 'mobile' | 'mobileMedium' | 'mobileLandscape' | 'phablet' | 'tablet' | 'desktop' | 'leftCol' | 'wide';
-declare type BreakpointMap = {
-    [key in Breakpoint]: string;
-};
-declare const from: BreakpointMap;
-declare const until: BreakpointMap;
-declare const between: {
-    mobile: {
-        and: {
-            mobileMedium: string;
-            mobileLandscape: string;
-            phablet: string;
-            tablet: string;
-            desktop: string;
-            leftCol: string;
-            wide: string;
-        };
-    };
-    mobileMedium: {
-        and: {
-            mobileLandscape: string;
-            phablet: string;
-            tablet: string;
-            desktop: string;
-            leftCol: string;
-            wide: string;
-        };
-    };
-    mobileLandscape: {
-        and: {
-            phablet: string;
-            tablet: string;
-            desktop: string;
-            leftCol: string;
-            wide: string;
-        };
-    };
-    phablet: {
-        and: {
-            tablet: string;
-            desktop: string;
-            leftCol: string;
-            wide: string;
-        };
-    };
-    tablet: {
-        and: {
-            desktop: string;
-            leftCol: string;
-            wide: string;
-        };
-    };
-    desktop: {
-        and: {
-            leftCol: string;
-            wide: string;
-        };
-    };
-    leftCol: {
-        and: {
-            wide: string;
-        };
-    };
-};
-export { from, until, between, breakpoints, Breakpoint };
+export { from, until, between } from './mq';
+export { Breakpoint, breakpoints } from '../breakpoints';

dist/types/size/global.d.ts

@@ -1,17 +0,7 @@
-declare const size: {
-    xsmall: number;
-    small: number;
-    medium: number;
-};
-declare const remSize: {
+import { iconSize, size } from './size';
+export declare const remSize: {
     [K in keyof typeof size]: number;
 };
-declare const iconSize: {
-    xsmall: number;
-    small: number;
-    medium: number;
-};
-declare const remIconSize: {
+export declare const remIconSize: {
     [K in keyof typeof iconSize]: number;
 };
-export { size, remSize, iconSize, remIconSize };

dist/types/size/index.d.ts

@@ -1,40 +0,1 @@
-import { size, iconSize } from './global';
-declare const height: {
-    ctaMedium: number;
-    ctaSmall: number;
-    ctaXsmall: number;
-    inputMedium: number;
-    inputXsmall: number;
-    iconMedium: number;
-    iconSmall: number;
-    iconXsmall: number;
-};
-declare const remHeight: {
-    ctaMedium: number;
-    ctaSmall: number;
-    ctaXsmall: number;
-    inputMedium: number;
-    inputXsmall: number;
-    iconMedium: number;
-    iconSmall: number;
-    iconXsmall: number;
-};
-declare const width: {
-    ctaMedium: number;
-    ctaSmall: number;
-    ctaXsmall: number;
-    inputXsmall: number;
-    iconMedium: number;
-    iconSmall: number;
-    iconXsmall: number;
-};
-declare const remWidth: {
-    ctaMedium: number;
-    ctaSmall: number;
-    ctaXsmall: number;
-    inputXsmall: number;
-    iconMedium: number;
-    iconSmall: number;
-    iconXsmall: number;
-};
-export { height, remHeight, width, remWidth, size, iconSize };
+export { height, remHeight, width, remWidth, size, iconSize } from './size';

dist/types/space.d.ts

@@ -1,2 +0,2 @@
-declare const space: {
+export declare const space: {
     1: number;
@@ -12,5 +12,4 @@ 2: number;
 };
-declare const remSpace: {
+export declare const remSpace: {
     [K in keyof typeof space]: string;
 };
-export { space, remSpace };

dist/types/typography/api.d.ts

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

dist/types/typography/data.d.ts

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

dist/types/typography/fs.d.ts

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

dist/types/typography/index.d.ts

@@ -1,35 +0,10 @@
-import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from './data';
-import { FontScaleFunctionStr } from './types';
-declare const titlepiece: {
-    [x: string]: FontScaleFunctionStr;
-    small: FontScaleFunctionStr;
-    medium: FontScaleFunctionStr;
-    large: FontScaleFunctionStr;
+import { bodySizes, fontMapping, fontWeightMapping, headlineSizes, lineHeightMapping, remBodySizes, remHeadlineSizes, remTextSansSizes, remTitlepieceSizes, textSansSizes, titlepieceSizes } from './data';
+import type { BodySizes, FontScaleFunctionStr, HeadlineSizes, TextSansSizes, TitlepieceSizes } from './types';
+declare type TypographyApi<Sizes> = {
+    [key in keyof Sizes]: FontScaleFunctionStr;
 };
-declare const headline: {
-    [x: string]: FontScaleFunctionStr;
-    xxxsmall: FontScaleFunctionStr;
-    xxsmall: FontScaleFunctionStr;
-    xsmall: FontScaleFunctionStr;
-    small: FontScaleFunctionStr;
-    medium: FontScaleFunctionStr;
-    large: FontScaleFunctionStr;
-    xlarge: FontScaleFunctionStr;
-};
-declare const body: {
-    [x: string]: FontScaleFunctionStr;
-    small: FontScaleFunctionStr;
-    medium: FontScaleFunctionStr;
-};
-declare const textSans: {
-    [x: string]: FontScaleFunctionStr;
-    xxsmall: FontScaleFunctionStr;
-    xsmall: FontScaleFunctionStr;
-    small: FontScaleFunctionStr;
-    medium: FontScaleFunctionStr;
-    large: FontScaleFunctionStr;
-    xlarge: FontScaleFunctionStr;
-    xxlarge: FontScaleFunctionStr;
-    xxxlarge: FontScaleFunctionStr;
-};
+declare const titlepiece: TypographyApi<TitlepieceSizes>;
+declare const headline: TypographyApi<HeadlineSizes>;
+declare const body: TypographyApi<BodySizes>;
+declare const textSans: TypographyApi<TextSansSizes>;
 export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };

dist/types/typography/obj/index.d.ts

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

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

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

dist/types/utils/focus-style-manager.d.ts

@@ -8,2 +8,5 @@ /**
  * Requires @babel/plugin-proposal-class-properties
+ *
+ * Modifications to original source:
+ * - Add return types to `isActive`, `start` and `stop` functions
  */
@@ -10,0 +13,0 @@ export declare class InteractionModeEngine {

dist/types/utils/index.d.ts

 export { FocusStyleManager } from './focus-style-manager';
 export { pxToRem, rootPixelFontSize } from './px-to-rem';
 export { resets } from './resets';
+export { appearance } from './supports-queries';

dist/types/utils/resets.d.ts

@@ -6,2 +6,3 @@ export declare const resets: {
     defaults: string;
+    resetCSS: string;
 };

package.json

 {
   "name": "@guardian/src-foundations",
-  "version": "3.9.0",
+  "version": "3.9.1-rc.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

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

Worsened metrics

Total package byte prevSize

239748

decreased by-7.51%

Number of package files

205

decreased by-28.07%

Lines of code

4065

decreased by-3.6%

Number of low quality alerts

2

increased by100%

No dependency changes