@guardian/src-foundations - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0-rc.1

accessibility/index.js

@@ -26,5 +26,5 @@ 'use strict';
   "#052962", //brand-main
-  "#0077B3", //brand-bright
+  "#007ABC", //brand-bright
   "#506991", //brand-pastel
-  "#B2C7E7"],
+  "#C1D8FC"],
   browns: ["#6B5840", //culture-dark
@@ -42,3 +42,4 @@ "#A1845C", //culture-main
   "#FFE500"],
-  greens: ["#185E36", "#22874D", "#65A897", //labs-dark
+  greens: ["#185E36", "#22874D", //success-main
+  "#65A897", //labs-dark
   "#69D1CA"],
@@ -57,70 +58,193 @@ grays: ["#121212", //neutral-7
 
-var palette = {
+var brand = {
+  dark: colors.blues[5],
+  main: colors.blues[6],
+  bright: colors.blues[7],
+  pastel: colors.blues[8],
+  faded: colors.blues[9]
+};
+var brandYellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1] // TOO: remove in v0.9.0, prefer brandYellow
+
+};
+var yellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1]
+};
+var neutral = {
+  7: colors.grays[0],
+  20: colors.grays[1],
+  46: colors.grays[2],
+  60: colors.grays[3],
+  86: colors.grays[4],
+  93: colors.grays[5],
+  97: colors.grays[6],
+  100: colors.grays[7],
+  specialReport: colors.grays[8],
+  // TODO: remove in v0.9.0, prefer background.dark.primary
+  darkMode: colors.grays[9]
+};
+var error = {
+  main: colors.reds[1],
+  bright: colors.reds[2]
+};
+var success = {
+  main: colors.greens[1]
+};
+var news = {
+  dark: colors.reds[0],
+  main: colors.reds[1],
+  bright: colors.reds[2],
+  pastel: colors.reds[3],
+  faded: colors.reds[4]
+};
+var opinion = {
+  dark: colors.oranges[0],
+  main: colors.oranges[1],
+  bright: colors.oranges[2],
+  pastel: colors.oranges[3],
+  faded: colors.oranges[4]
+};
+var sport = {
+  dark: colors.blues[0],
+  main: colors.blues[1],
+  bright: colors.blues[2],
+  pastel: colors.blues[3],
+  faded: colors.blues[4]
+};
+var culture = {
+  dark: colors.browns[0],
+  main: colors.browns[1],
+  bright: colors.browns[2],
+  pastel: colors.browns[3],
+  faded: colors.browns[4]
+};
+var lifestyle = {
+  dark: colors.pinks[0],
+  main: colors.pinks[1],
+  bright: colors.pinks[2],
+  pastel: colors.pinks[3],
+  faded: colors.pinks[4]
+};
+var labs = {
+  dark: colors.greens[2],
+  main: colors.greens[3] // functional colours
+
+};
+var text = {
+  primary: neutral[7],
+  secondary: neutral[46],
+  error: error.main,
+  ctaPrimary: neutral[100],
+  ctaSecondary: brand.main,
+  mono: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: neutral[7],
+    ctaSecondary: neutral[100]
+  },
   brand: {
-    dark: colors.blues[5],
-    main: colors.blues[6],
-    bright: colors.blues[7],
-    pastel: colors.blues[8],
-    faded: colors.blues[9]
+    primary: neutral[100],
+    secondary: neutral[60],
+    error: error.bright,
+    ctaPrimary: brand.main,
+    ctaSecondary: neutral[100]
   },
-  yellow: {
-    dark: colors.yellows[0],
-    main: colors.yellows[1]
+  brandYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
   },
-  neutral: {
-    7: colors.grays[0],
-    20: colors.grays[1],
-    46: colors.grays[2],
-    60: colors.grays[3],
-    86: colors.grays[4],
-    93: colors.grays[5],
-    97: colors.grays[6],
-    100: colors.grays[7],
-    specialReport: colors.grays[8],
-    darkMode: colors.grays[9]
+  readerRevenue: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: brand.main,
+    ctaSecondary: brandYellow.main
   },
-  error: {
-    main: colors.reds[1],
-    bright: colors.reds[2]
+  readerRevenueYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
+  }
+};
+var background = {
+  primary: neutral[100],
+  ctaPrimary: brand.main,
+  ctaPrimaryHover: "#234B8A",
+  ctaSecondary: brand.faded,
+  ctaSecondaryHover: "#96B0D9",
+  radioChecked: brand.main,
+  mono: {
+    primary: neutral[7],
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: neutral[46],
+    ctaSecondaryHover: "#5C5C5C"
   },
-  news: {
-    dark: colors.reds[0],
-    main: colors.reds[1],
-    bright: colors.reds[2],
-    pastel: colors.reds[3],
-    faded: colors.reds[4]
+  brand: {
+    primary: brand.main,
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: brand.pastel,
+    ctaSecondaryHover: "#234B8A",
+    radioChecked: neutral[100]
   },
-  opinion: {
-    dark: colors.oranges[0],
-    main: colors.oranges[1],
-    bright: colors.oranges[2],
-    pastel: colors.oranges[3],
-    faded: colors.oranges[4]
+  brandYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.dark,
+    ctaSecondaryHover: "#F2AE00"
   },
-  sport: {
-    dark: colors.blues[0],
-    main: colors.blues[1],
-    bright: colors.blues[2],
-    pastel: colors.blues[3],
-    faded: colors.blues[4]
+  readerRevenue: {
+    primary: brand.main,
+    ctaPrimary: brandYellow.main,
+    ctaPrimaryHover: brandYellow.dark,
+    ctaSecondary: brand.main,
+    ctaSecondaryHover: brand.dark
   },
-  culture: {
-    dark: colors.browns[0],
-    main: colors.browns[1],
-    bright: colors.browns[2],
-    pastel: colors.browns[3],
-    faded: colors.browns[4]
+  readerRevenueYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.main,
+    ctaSecondaryHover: brandYellow.dark
+  }
+};
+var border = {
+  error: error.main,
+  radio: neutral[60],
+  radioHover: brand.main,
+  brand: {
+    error: error.bright,
+    radio: neutral[100],
+    radioHover: brand.faded
   },
-  lifestyle: {
-    dark: colors.pinks[0],
-    main: colors.pinks[1],
-    bright: colors.pinks[2],
-    pastel: colors.pinks[3],
-    faded: colors.pinks[4]
+  readerRevenue: {
+    ctaSecondary: brandYellow.main
   },
-  labs: {
-    dark: colors.greens[2],
-    main: colors.greens[3]
+  readerRevenueYellow: {
+    ctaSecondary: neutral[7]
   }
 };
+var palette = {
+  brand: brand,
+  brandYellow: brandYellow,
+  yellow: yellow,
+  neutral: neutral,
+  error: error,
+  success: success,
+  news: news,
+  opinion: opinion,
+  sport: sport,
+  culture: culture,
+  lifestyle: lifestyle,
+  labs: labs,
+  text: text,
+  background: background,
+  border: border
+};
 
@@ -127,0 +251,0 @@ var visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n"; // TODO: migrate to using context-specific alias

foundations.esm.js

@@ -22,5 +22,5 @@ // e.g. for sport:
   "#052962", //brand-main
-  "#0077B3", //brand-bright
+  "#007ABC", //brand-bright
   "#506991", //brand-pastel
-  "#B2C7E7"],
+  "#C1D8FC"],
   browns: ["#6B5840", //culture-dark
@@ -38,3 +38,4 @@ "#A1845C", //culture-main
   "#FFE500"],
-  greens: ["#185E36", "#22874D", "#65A897", //labs-dark
+  greens: ["#185E36", "#22874D", //success-main
+  "#65A897", //labs-dark
   "#69D1CA"],
@@ -77,70 +78,193 @@ grays: ["#121212", //neutral-7
 
-var palette = {
+var brand = {
+  dark: colors.blues[5],
+  main: colors.blues[6],
+  bright: colors.blues[7],
+  pastel: colors.blues[8],
+  faded: colors.blues[9]
+};
+var brandYellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1] // TOO: remove in v0.9.0, prefer brandYellow
+
+};
+var yellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1]
+};
+var neutral = {
+  7: colors.grays[0],
+  20: colors.grays[1],
+  46: colors.grays[2],
+  60: colors.grays[3],
+  86: colors.grays[4],
+  93: colors.grays[5],
+  97: colors.grays[6],
+  100: colors.grays[7],
+  specialReport: colors.grays[8],
+  // TODO: remove in v0.9.0, prefer background.dark.primary
+  darkMode: colors.grays[9]
+};
+var error = {
+  main: colors.reds[1],
+  bright: colors.reds[2]
+};
+var success = {
+  main: colors.greens[1]
+};
+var news = {
+  dark: colors.reds[0],
+  main: colors.reds[1],
+  bright: colors.reds[2],
+  pastel: colors.reds[3],
+  faded: colors.reds[4]
+};
+var opinion = {
+  dark: colors.oranges[0],
+  main: colors.oranges[1],
+  bright: colors.oranges[2],
+  pastel: colors.oranges[3],
+  faded: colors.oranges[4]
+};
+var sport = {
+  dark: colors.blues[0],
+  main: colors.blues[1],
+  bright: colors.blues[2],
+  pastel: colors.blues[3],
+  faded: colors.blues[4]
+};
+var culture = {
+  dark: colors.browns[0],
+  main: colors.browns[1],
+  bright: colors.browns[2],
+  pastel: colors.browns[3],
+  faded: colors.browns[4]
+};
+var lifestyle = {
+  dark: colors.pinks[0],
+  main: colors.pinks[1],
+  bright: colors.pinks[2],
+  pastel: colors.pinks[3],
+  faded: colors.pinks[4]
+};
+var labs = {
+  dark: colors.greens[2],
+  main: colors.greens[3] // functional colours
+
+};
+var text = {
+  primary: neutral[7],
+  secondary: neutral[46],
+  error: error.main,
+  ctaPrimary: neutral[100],
+  ctaSecondary: brand.main,
+  mono: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: neutral[7],
+    ctaSecondary: neutral[100]
+  },
   brand: {
-    dark: colors.blues[5],
-    main: colors.blues[6],
-    bright: colors.blues[7],
-    pastel: colors.blues[8],
-    faded: colors.blues[9]
+    primary: neutral[100],
+    secondary: neutral[60],
+    error: error.bright,
+    ctaPrimary: brand.main,
+    ctaSecondary: neutral[100]
   },
-  yellow: {
-    dark: colors.yellows[0],
-    main: colors.yellows[1]
+  brandYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
   },
-  neutral: {
-    7: colors.grays[0],
-    20: colors.grays[1],
-    46: colors.grays[2],
-    60: colors.grays[3],
-    86: colors.grays[4],
-    93: colors.grays[5],
-    97: colors.grays[6],
-    100: colors.grays[7],
-    specialReport: colors.grays[8],
-    darkMode: colors.grays[9]
+  readerRevenue: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: brand.main,
+    ctaSecondary: brandYellow.main
   },
-  error: {
-    main: colors.reds[1],
-    bright: colors.reds[2]
+  readerRevenueYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
+  }
+};
+var background = {
+  primary: neutral[100],
+  ctaPrimary: brand.main,
+  ctaPrimaryHover: "#234B8A",
+  ctaSecondary: brand.faded,
+  ctaSecondaryHover: "#96B0D9",
+  radioChecked: brand.main,
+  mono: {
+    primary: neutral[7],
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: neutral[46],
+    ctaSecondaryHover: "#5C5C5C"
   },
-  news: {
-    dark: colors.reds[0],
-    main: colors.reds[1],
-    bright: colors.reds[2],
-    pastel: colors.reds[3],
-    faded: colors.reds[4]
+  brand: {
+    primary: brand.main,
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: brand.pastel,
+    ctaSecondaryHover: "#234B8A",
+    radioChecked: neutral[100]
   },
-  opinion: {
-    dark: colors.oranges[0],
-    main: colors.oranges[1],
-    bright: colors.oranges[2],
-    pastel: colors.oranges[3],
-    faded: colors.oranges[4]
+  brandYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.dark,
+    ctaSecondaryHover: "#F2AE00"
   },
-  sport: {
-    dark: colors.blues[0],
-    main: colors.blues[1],
-    bright: colors.blues[2],
-    pastel: colors.blues[3],
-    faded: colors.blues[4]
+  readerRevenue: {
+    primary: brand.main,
+    ctaPrimary: brandYellow.main,
+    ctaPrimaryHover: brandYellow.dark,
+    ctaSecondary: brand.main,
+    ctaSecondaryHover: brand.dark
   },
-  culture: {
-    dark: colors.browns[0],
-    main: colors.browns[1],
-    bright: colors.browns[2],
-    pastel: colors.browns[3],
-    faded: colors.browns[4]
+  readerRevenueYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.main,
+    ctaSecondaryHover: brandYellow.dark
+  }
+};
+var border = {
+  error: error.main,
+  radio: neutral[60],
+  radioHover: brand.main,
+  brand: {
+    error: error.bright,
+    radio: neutral[100],
+    radioHover: brand.faded
   },
-  lifestyle: {
-    dark: colors.pinks[0],
-    main: colors.pinks[1],
-    bright: colors.pinks[2],
-    pastel: colors.pinks[3],
-    faded: colors.pinks[4]
+  readerRevenue: {
+    ctaSecondary: brandYellow.main
   },
-  labs: {
-    dark: colors.greens[2],
-    main: colors.greens[3]
+  readerRevenueYellow: {
+    ctaSecondary: neutral[7]
   }
 };
+var palette = {
+  brand: brand,
+  brandYellow: brandYellow,
+  yellow: yellow,
+  neutral: neutral,
+  error: error,
+  success: success,
+  news: news,
+  opinion: opinion,
+  sport: sport,
+  culture: culture,
+  lifestyle: lifestyle,
+  labs: labs,
+  text: text,
+  background: background,
+  border: border
+};
 
@@ -147,0 +271,0 @@ var size$1 = {

foundations.js

@@ -26,5 +26,5 @@ 'use strict';
   "#052962", //brand-main
-  "#0077B3", //brand-bright
+  "#007ABC", //brand-bright
   "#506991", //brand-pastel
-  "#B2C7E7"],
+  "#C1D8FC"],
   browns: ["#6B5840", //culture-dark
@@ -42,3 +42,4 @@ "#A1845C", //culture-main
   "#FFE500"],
-  greens: ["#185E36", "#22874D", "#65A897", //labs-dark
+  greens: ["#185E36", "#22874D", //success-main
+  "#65A897", //labs-dark
   "#69D1CA"],
@@ -81,70 +82,193 @@ grays: ["#121212", //neutral-7
 
-var palette = {
+var brand = {
+  dark: colors.blues[5],
+  main: colors.blues[6],
+  bright: colors.blues[7],
+  pastel: colors.blues[8],
+  faded: colors.blues[9]
+};
+var brandYellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1] // TOO: remove in v0.9.0, prefer brandYellow
+
+};
+var yellow = {
+  dark: colors.yellows[0],
+  main: colors.yellows[1]
+};
+var neutral = {
+  7: colors.grays[0],
+  20: colors.grays[1],
+  46: colors.grays[2],
+  60: colors.grays[3],
+  86: colors.grays[4],
+  93: colors.grays[5],
+  97: colors.grays[6],
+  100: colors.grays[7],
+  specialReport: colors.grays[8],
+  // TODO: remove in v0.9.0, prefer background.dark.primary
+  darkMode: colors.grays[9]
+};
+var error = {
+  main: colors.reds[1],
+  bright: colors.reds[2]
+};
+var success = {
+  main: colors.greens[1]
+};
+var news = {
+  dark: colors.reds[0],
+  main: colors.reds[1],
+  bright: colors.reds[2],
+  pastel: colors.reds[3],
+  faded: colors.reds[4]
+};
+var opinion = {
+  dark: colors.oranges[0],
+  main: colors.oranges[1],
+  bright: colors.oranges[2],
+  pastel: colors.oranges[3],
+  faded: colors.oranges[4]
+};
+var sport = {
+  dark: colors.blues[0],
+  main: colors.blues[1],
+  bright: colors.blues[2],
+  pastel: colors.blues[3],
+  faded: colors.blues[4]
+};
+var culture = {
+  dark: colors.browns[0],
+  main: colors.browns[1],
+  bright: colors.browns[2],
+  pastel: colors.browns[3],
+  faded: colors.browns[4]
+};
+var lifestyle = {
+  dark: colors.pinks[0],
+  main: colors.pinks[1],
+  bright: colors.pinks[2],
+  pastel: colors.pinks[3],
+  faded: colors.pinks[4]
+};
+var labs = {
+  dark: colors.greens[2],
+  main: colors.greens[3] // functional colours
+
+};
+var text = {
+  primary: neutral[7],
+  secondary: neutral[46],
+  error: error.main,
+  ctaPrimary: neutral[100],
+  ctaSecondary: brand.main,
+  mono: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: neutral[7],
+    ctaSecondary: neutral[100]
+  },
   brand: {
-    dark: colors.blues[5],
-    main: colors.blues[6],
-    bright: colors.blues[7],
-    pastel: colors.blues[8],
-    faded: colors.blues[9]
+    primary: neutral[100],
+    secondary: neutral[60],
+    error: error.bright,
+    ctaPrimary: brand.main,
+    ctaSecondary: neutral[100]
   },
-  yellow: {
-    dark: colors.yellows[0],
-    main: colors.yellows[1]
+  brandYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
   },
-  neutral: {
-    7: colors.grays[0],
-    20: colors.grays[1],
-    46: colors.grays[2],
-    60: colors.grays[3],
-    86: colors.grays[4],
-    93: colors.grays[5],
-    97: colors.grays[6],
-    100: colors.grays[7],
-    specialReport: colors.grays[8],
-    darkMode: colors.grays[9]
+  readerRevenue: {
+    primary: neutral[100],
+    secondary: neutral[60],
+    ctaPrimary: brand.main,
+    ctaSecondary: brandYellow.main
   },
-  error: {
-    main: colors.reds[1],
-    bright: colors.reds[2]
+  readerRevenueYellow: {
+    primary: neutral[7],
+    secondary: neutral[60],
+    ctaPrimary: neutral[100],
+    ctaSecondary: neutral[7]
+  }
+};
+var background = {
+  primary: neutral[100],
+  ctaPrimary: brand.main,
+  ctaPrimaryHover: "#234B8A",
+  ctaSecondary: brand.faded,
+  ctaSecondaryHover: "#96B0D9",
+  radioChecked: brand.main,
+  mono: {
+    primary: neutral[7],
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: neutral[46],
+    ctaSecondaryHover: "#5C5C5C"
   },
-  news: {
-    dark: colors.reds[0],
-    main: colors.reds[1],
-    bright: colors.reds[2],
-    pastel: colors.reds[3],
-    faded: colors.reds[4]
+  brand: {
+    primary: brand.main,
+    ctaPrimary: neutral[100],
+    ctaPrimaryHover: neutral[93],
+    ctaSecondary: brand.pastel,
+    ctaSecondaryHover: "#234B8A",
+    radioChecked: neutral[100]
   },
-  opinion: {
-    dark: colors.oranges[0],
-    main: colors.oranges[1],
-    bright: colors.oranges[2],
-    pastel: colors.oranges[3],
-    faded: colors.oranges[4]
+  brandYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.dark,
+    ctaSecondaryHover: "#F2AE00"
   },
-  sport: {
-    dark: colors.blues[0],
-    main: colors.blues[1],
-    bright: colors.blues[2],
-    pastel: colors.blues[3],
-    faded: colors.blues[4]
+  readerRevenue: {
+    primary: brand.main,
+    ctaPrimary: brandYellow.main,
+    ctaPrimaryHover: brandYellow.dark,
+    ctaSecondary: brand.main,
+    ctaSecondaryHover: brand.dark
   },
-  culture: {
-    dark: colors.browns[0],
-    main: colors.browns[1],
-    bright: colors.browns[2],
-    pastel: colors.browns[3],
-    faded: colors.browns[4]
+  readerRevenueYellow: {
+    primary: brandYellow.main,
+    ctaPrimary: neutral[7],
+    ctaPrimaryHover: neutral[20],
+    ctaSecondary: brandYellow.main,
+    ctaSecondaryHover: brandYellow.dark
+  }
+};
+var border = {
+  error: error.main,
+  radio: neutral[60],
+  radioHover: brand.main,
+  brand: {
+    error: error.bright,
+    radio: neutral[100],
+    radioHover: brand.faded
   },
-  lifestyle: {
-    dark: colors.pinks[0],
-    main: colors.pinks[1],
-    bright: colors.pinks[2],
-    pastel: colors.pinks[3],
-    faded: colors.pinks[4]
+  readerRevenue: {
+    ctaSecondary: brandYellow.main
   },
-  labs: {
-    dark: colors.greens[2],
-    main: colors.greens[3]
+  readerRevenueYellow: {
+    ctaSecondary: neutral[7]
   }
 };
+var palette = {
+  brand: brand,
+  brandYellow: brandYellow,
+  yellow: yellow,
+  neutral: neutral,
+  error: error,
+  success: success,
+  news: news,
+  opinion: opinion,
+  sport: sport,
+  culture: culture,
+  lifestyle: lifestyle,
+  labs: labs,
+  text: text,
+  background: background,
+  border: border
+};
 
@@ -151,0 +275,0 @@ var size$1 = {

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.7.0",
+	"version": "0.8.0-rc.1",
 	"main": "foundations.js",
@@ -9,3 +9,3 @@ "module": "foundations.esm.js",
 		"watch": "rollup --config --watch",
-		"clean": "rm -rf accessibility mq typography foundations.js foundations.esm.js *.d.ts src/**/*.d.ts",
+		"clean": "rm -rf accessibility mq themes typography foundations.js foundations.esm.js *.d.ts src/**/*.d.ts",
 		"prepublishOnly": "yarn build",
@@ -17,2 +17,3 @@ "postpublish": "yarn clean"
 		"accessibility/*",
+		"themes/*",
 		"typography/*",
@@ -30,2 +31,3 @@ "*.d.ts",
 		"src/mq/index.ts",
+		"src/themes/**",
 		"src/typography/index.ts"
@@ -39,4 +41,4 @@ ],
 		"rollup-plugin-node-resolve": "^5.2.0",
-		"typescript": "^3.6.4"
+		"typescript": "^3.7.2"
 	}
 }

palette.d.ts

@@ -9,2 +9,6 @@ declare const palette: {
     };
+    brandYellow: {
+        dark: string;
+        main: string;
+    };
     yellow: {
@@ -30,2 +34,5 @@ dark: string;
     };
+    success: {
+        main: string;
+    };
     news: {
@@ -70,3 +77,101 @@ dark: string;
     };
+    text: {
+        primary: string;
+        secondary: string;
+        error: string;
+        ctaPrimary: string;
+        ctaSecondary: string;
+        mono: {
+            primary: string;
+            secondary: string;
+            ctaPrimary: string;
+            ctaSecondary: string;
+        };
+        brand: {
+            primary: string;
+            secondary: string;
+            error: string;
+            ctaPrimary: string;
+            ctaSecondary: string;
+        };
+        brandYellow: {
+            primary: string;
+            secondary: string;
+            ctaPrimary: string;
+            ctaSecondary: string;
+        };
+        readerRevenue: {
+            primary: string;
+            secondary: string;
+            ctaPrimary: string;
+            ctaSecondary: string;
+        };
+        readerRevenueYellow: {
+            primary: string;
+            secondary: string;
+            ctaPrimary: string;
+            ctaSecondary: string;
+        };
+    };
+    background: {
+        primary: string;
+        ctaPrimary: string;
+        ctaPrimaryHover: string;
+        ctaSecondary: string;
+        ctaSecondaryHover: string;
+        radioChecked: string;
+        mono: {
+            primary: string;
+            ctaPrimary: string;
+            ctaPrimaryHover: string;
+            ctaSecondary: string;
+            ctaSecondaryHover: string;
+        };
+        brand: {
+            primary: string;
+            ctaPrimary: string;
+            ctaPrimaryHover: string;
+            ctaSecondary: string;
+            ctaSecondaryHover: string;
+            radioChecked: string;
+        };
+        brandYellow: {
+            primary: string;
+            ctaPrimary: string;
+            ctaPrimaryHover: string;
+            ctaSecondary: string;
+            ctaSecondaryHover: string;
+        };
+        readerRevenue: {
+            primary: string;
+            ctaPrimary: string;
+            ctaPrimaryHover: string;
+            ctaSecondary: string;
+            ctaSecondaryHover: string;
+        };
+        readerRevenueYellow: {
+            primary: string;
+            ctaPrimary: string;
+            ctaPrimaryHover: string;
+            ctaSecondary: string;
+            ctaSecondaryHover: string;
+        };
+    };
+    border: {
+        error: string;
+        radio: string;
+        radioHover: string;
+        brand: {
+            error: string;
+            radio: string;
+            radioHover: string;
+        };
+        readerRevenue: {
+            ctaSecondary: string;
+        };
+        readerRevenueYellow: {
+            ctaSecondary: string;
+        };
+    };
 };
 export { palette };

src/palette.ts

 import { colors } from "./theme"
 
-const palette = {
+const brand = {
+	dark: colors.blues[5],
+	main: colors.blues[6],
+	bright: colors.blues[7],
+	pastel: colors.blues[8],
+	faded: colors.blues[9],
+}
+const brandYellow = {
+	dark: colors.yellows[0],
+	main: colors.yellows[1],
+}
+// TOO: remove in v0.9.0, prefer brandYellow
+const yellow = {
+	dark: colors.yellows[0],
+	main: colors.yellows[1],
+}
+const neutral = {
+	7: colors.grays[0],
+	20: colors.grays[1],
+	46: colors.grays[2],
+	60: colors.grays[3],
+	86: colors.grays[4],
+	93: colors.grays[5],
+	97: colors.grays[6],
+	100: colors.grays[7],
+	specialReport: colors.grays[8],
+	// TODO: remove in v0.9.0, prefer background.dark.primary
+	darkMode: colors.grays[9],
+}
+const error = {
+	main: colors.reds[1],
+	bright: colors.reds[2],
+}
+const success = {
+	main: colors.greens[1],
+}
+const news = {
+	dark: colors.reds[0],
+	main: colors.reds[1],
+	bright: colors.reds[2],
+	pastel: colors.reds[3],
+	faded: colors.reds[4],
+}
+const opinion = {
+	dark: colors.oranges[0],
+	main: colors.oranges[1],
+	bright: colors.oranges[2],
+	pastel: colors.oranges[3],
+	faded: colors.oranges[4],
+}
+const sport = {
+	dark: colors.blues[0],
+	main: colors.blues[1],
+	bright: colors.blues[2],
+	pastel: colors.blues[3],
+	faded: colors.blues[4],
+}
+const culture = {
+	dark: colors.browns[0],
+	main: colors.browns[1],
+	bright: colors.browns[2],
+	pastel: colors.browns[3],
+	faded: colors.browns[4],
+}
+const lifestyle = {
+	dark: colors.pinks[0],
+	main: colors.pinks[1],
+	bright: colors.pinks[2],
+	pastel: colors.pinks[3],
+	faded: colors.pinks[4],
+}
+const labs = {
+	dark: colors.greens[2],
+	main: colors.greens[3],
+}
+
+// functional colours
+const text = {
+	primary: neutral[7],
+	secondary: neutral[46],
+	error: error.main,
+	ctaPrimary: neutral[100],
+	ctaSecondary: brand.main,
+	mono: {
+		primary: neutral[100],
+		secondary: neutral[60],
+		ctaPrimary: neutral[7],
+		ctaSecondary: neutral[100],
+	},
 	brand: {
-		dark: colors.blues[5],
-		main: colors.blues[6],
-		bright: colors.blues[7],
-		pastel: colors.blues[8],
-		faded: colors.blues[9],
+		primary: neutral[100],
+		secondary: neutral[60],
+		error: error.bright,
+		ctaPrimary: brand.main,
+		ctaSecondary: neutral[100],
 	},
-	yellow: {
-		dark: colors.yellows[0],
-		main: colors.yellows[1],
+	brandYellow: {
+		primary: neutral[7],
+		secondary: neutral[60],
+		ctaPrimary: neutral[100],
+		ctaSecondary: neutral[7],
 	},
-	neutral: {
-		7: colors.grays[0],
-		20: colors.grays[1],
-		46: colors.grays[2],
-		60: colors.grays[3],
-		86: colors.grays[4],
-		93: colors.grays[5],
-		97: colors.grays[6],
-		100: colors.grays[7],
-		specialReport: colors.grays[8],
-		darkMode: colors.grays[9],
+	readerRevenue: {
+		primary: neutral[100],
+		secondary: neutral[60],
+		ctaPrimary: brand.main,
+		ctaSecondary: brandYellow.main,
 	},
-	error: {
-		main: colors.reds[1],
-		bright: colors.reds[2],
+	readerRevenueYellow: {
+		primary: neutral[7],
+		secondary: neutral[60],
+		ctaPrimary: neutral[100],
+		ctaSecondary: neutral[7],
 	},
-	news: {
-		dark: colors.reds[0],
-		main: colors.reds[1],
-		bright: colors.reds[2],
-		pastel: colors.reds[3],
-		faded: colors.reds[4],
+}
+const background = {
+	primary: neutral[100],
+	ctaPrimary: brand.main,
+	ctaPrimaryHover: "#234B8A",
+	ctaSecondary: brand.faded,
+	ctaSecondaryHover: "#96B0D9",
+	radioChecked: brand.main,
+	mono: {
+		primary: neutral[7],
+		ctaPrimary: neutral[100],
+		ctaPrimaryHover: neutral[93],
+		ctaSecondary: neutral[46],
+		ctaSecondaryHover: "#5C5C5C",
 	},
-	opinion: {
-		dark: colors.oranges[0],
-		main: colors.oranges[1],
-		bright: colors.oranges[2],
-		pastel: colors.oranges[3],
-		faded: colors.oranges[4],
+	brand: {
+		primary: brand.main,
+		ctaPrimary: neutral[100],
+		ctaPrimaryHover: neutral[93],
+		ctaSecondary: brand.pastel,
+		ctaSecondaryHover: "#234B8A",
+		radioChecked: neutral[100],
 	},
-	sport: {
-		dark: colors.blues[0],
-		main: colors.blues[1],
-		bright: colors.blues[2],
-		pastel: colors.blues[3],
-		faded: colors.blues[4],
+	brandYellow: {
+		primary: brandYellow.main,
+		ctaPrimary: neutral[7],
+		ctaPrimaryHover: neutral[20],
+		ctaSecondary: brandYellow.dark,
+		ctaSecondaryHover: "#F2AE00",
 	},
-	culture: {
-		dark: colors.browns[0],
-		main: colors.browns[1],
-		bright: colors.browns[2],
-		pastel: colors.browns[3],
-		faded: colors.browns[4],
+	readerRevenue: {
+		primary: brand.main,
+		ctaPrimary: brandYellow.main,
+		ctaPrimaryHover: brandYellow.dark,
+		ctaSecondary: brand.main,
+		ctaSecondaryHover: brand.dark,
 	},
-	lifestyle: {
-		dark: colors.pinks[0],
-		main: colors.pinks[1],
-		bright: colors.pinks[2],
-		pastel: colors.pinks[3],
-		faded: colors.pinks[4],
+	readerRevenueYellow: {
+		primary: brandYellow.main,
+		ctaPrimary: neutral[7],
+		ctaPrimaryHover: neutral[20],
+		ctaSecondary: brandYellow.main,
+		ctaSecondaryHover: brandYellow.dark,
 	},
-	labs: {
-		dark: colors.greens[2],
-		main: colors.greens[3],
+}
+const border = {
+	error: error.main,
+	radio: neutral[60],
+	radioHover: brand.main,
+	brand: {
+		error: error.bright,
+		radio: neutral[100],
+		radioHover: brand.faded,
 	},
+	readerRevenue: {
+		ctaSecondary: brandYellow.main,
+	},
+	readerRevenueYellow: {
+		ctaSecondary: neutral[7],
+	},
 }
 
+const palette = {
+	brand,
+	brandYellow,
+	yellow,
+	neutral,
+	error,
+	success,
+	news,
+	opinion,
+	sport,
+	culture,
+	lifestyle,
+	labs,
+	text,
+	background,
+	border,
+}
+
 export { palette }

src/theme.ts

 const fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70]
 
 const fonts = {
+	titlepiece: "GT Guardian Titlepiece, Georgia, serif",
 	headlineSerif: "GH Guardian Headline, Georgia, serif",
@@ -10,3 +11,3 @@ bodySerif: "GuardianTextEgyptian, Georgia, serif",
 
-const lineHeights = ["1.15em", "1.35em", "1.45em"]
+const lineHeights = [1.15, 1.35, 1.45]
 
@@ -41,5 +42,5 @@ const fontWeights = [300, 400, 500, 700]
 		"#052962", //brand-main
-		"#0077B3", //brand-bright
+		"#007ABC", //brand-bright
 		"#506991", //brand-pastel
-		"#B2C7E7", //brand-faded
+		"#C1D8FC", //brand-faded
 	],
@@ -66,3 +67,3 @@ browns: [
 		"#185E36",
-		"#22874D",
+		"#22874D", //success-main
 		"#65A897", //labs-dark
@@ -81,3 +82,3 @@ "#69D1CA", //labs-main
 		"#3F464A", //special-report
-		"#1A1A1A", //dark-mode-background
+		"#1A1A1A", //inverse theme background
 	],
@@ -84,0 +85,0 @@ }

src/typography/index.ts

 import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
 
-type Category = "headline" | "body" | "textSans"
+type Category = "titlepiece" | "headline" | "body" | "textSans"
 type LineHeight = "tight" | "regular" | "loose"
 type FontWeight = "light" | "regular" | "medium" | "bold"
-type FontWeightDefinition = { fontWeight: number; hasItalic: boolean }
+type FontWeightDefinition = { hasItalic: boolean }
 
+type TitlepieceSizes = "small" | "medium" | "large"
+
 type HeadlineSizes =
-	| "tiny"
+	| "xxxsmall"
 	| "xxsmall"
@@ -16,19 +18,17 @@ | "xsmall"
 	| "xlarge"
-	| "jumbo"
 
 type BodySizes = "small" | "medium"
 
-type TextSansSizes =
-	| "xsmall"
-	| "small"
-	| "medium"
-	| "large"
-	| "xlarge"
-	| "xxlarge"
+type TextSansSizes = "xsmall" | "small" | "medium" | "large" | "xlarge"
 
 const fontSizesRem = fontSizes.map(fontSize => fontSize / 16)
 
+const titlepieceSizes: { [key in TitlepieceSizes]: number } = {
+	small: fontSizesRem[7], //42px
+	medium: fontSizesRem[8], //50px
+	large: fontSizesRem[9], //70px
+}
+
 const headlineSizes: { [key in HeadlineSizes]: number } = {
-	tiny: fontSizesRem[2], //17px
-	// BEGIN SUGGESTED RANGE
+	xxxsmall: fontSizesRem[2], //17px
 	xxsmall: fontSizesRem[3], //20px
@@ -40,4 +40,2 @@ xsmall: fontSizesRem[4], //24px
 	xlarge: fontSizesRem[8], //50px
-	// END SUGGESTED RANGE
-	jumbo: fontSizesRem[9], //70px
 }
@@ -51,17 +49,11 @@
 const textSansSizes: { [key in TextSansSizes]: number } = {
-	// BEGIN SUGGESTED RANGE
 	xsmall: fontSizesRem[0], //12px
 	small: fontSizesRem[1], //15px
 	medium: fontSizesRem[2], //17px
-	// END SUGGESTED RANGE
 	large: fontSizesRem[3], //20px
 	xlarge: fontSizesRem[4], //24px
-	xxlarge: fontSizesRem[5], //28px
-	// xxxlarge: fontSizesRem[6], //34px
-	// xxxxlarge: fontSizesRem[7], //42px
-	// xxxxxlarge: fontSizesRem[8], //50px
-	// xxxxxxlarge: fontSizesRem[9], //70px
 }
 
 const fontSizeMapping: { [cat in Category]: { [level in string]: number } } = {
+	titlepiece: titlepieceSizes,
 	headline: headlineSizes,
@@ -73,2 +65,3 @@ body: bodySizes,
 const fontMapping: { [cat in Category]: string } = {
+	titlepiece: fonts.titlepiece,
 	headline: fonts.headlineSerif,
@@ -79,3 +72,3 @@ body: fonts.bodySerif,
 
-const lineHeightMapping: { [lineHight in LineHeight]: string } = {
+const lineHeightMapping: { [lineHight in LineHeight]: number } = {
 	tight: lineHeights[0],
@@ -86,3 +79,10 @@ regular: lineHeights[1],
 
-const fontWeightMapping: {
+const fontWeightMapping: { [fontWeight in FontWeight]: number } = {
+	light: fontWeights[0],
+	regular: fontWeights[1],
+	medium: fontWeights[2],
+	bold: fontWeights[3],
+}
+
+const availableFonts: {
 	[cat in Category]: {
@@ -92,13 +92,15 @@ [fontWeight in FontWeight]?: FontWeightDefinition
 } = {
+	titlepiece: {
+		bold: {
+			hasItalic: false,
+		},
+	},
 	headline: {
 		light: {
-			fontWeight: fontWeights[0],
 			hasItalic: true,
 		},
 		medium: {
-			fontWeight: fontWeights[2],
 			hasItalic: true,
 		},
 		bold: {
-			fontWeight: fontWeights[3],
 			hasItalic: false,
@@ -109,7 +111,5 @@ },
 		regular: {
-			fontWeight: fontWeights[1],
 			hasItalic: true,
 		},
 		bold: {
-			fontWeight: fontWeights[3],
 			hasItalic: true,
@@ -120,7 +120,5 @@ },
 		regular: {
-			fontWeight: fontWeights[1],
 			hasItalic: true,
 		},
 		bold: {
-			fontWeight: fontWeights[3],
 			hasItalic: false,
@@ -131,17 +129,24 @@ },
 
-const fs = ({
-	category,
-	level,
-	lineHeight,
-	fontWeight,
-}: {
-	category: Category
-	level: string
-	lineHeight: LineHeight
-	fontWeight: FontWeight
-}) => {
+const fs = (
+	category: Category,
+	level: string,
+	{
+		lineHeight,
+		fontWeight,
+		italic,
+	}: {
+		lineHeight: LineHeight
+		fontWeight: FontWeight
+		italic: boolean
+	},
+) => {
 	const fontFamilyValue = fontMapping[category]
 	const fontSizeValue = fontSizeMapping[category][level]
 	const lineHeightValue = lineHeightMapping[lineHeight]
-	const fontWeightDefinition = fontWeightMapping[category][fontWeight]
+	// TODO: consider logging an error in development if a requested
+	// font is unavailable
+	const requestedFont = availableFonts[category][fontWeight]
+	const fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : ""
+	const fontStyleValue =
+		italic && requestedFont && requestedFont.hasItalic ? "italic" : ""
 
@@ -152,7 +157,4 @@ return `
 	line-height: ${lineHeightValue};
-	${
-		fontWeightDefinition
-			? `font-weight: ${fontWeightDefinition.fontWeight}`
-			: ""
-	};
+	${fontWeightValue ? `font-weight: ${fontWeightValue}` : ""};
+	${fontStyleValue ? `font-style: ${fontStyleValue}` : ""};
 	`
@@ -164,4 +166,27 @@ }
 	fontWeight?: FontWeight
+	italic?: boolean
 }
 
+type TitlepieceFunctions = {
+	[key in TitlepieceSizes]: (options?: FontScaleArgs) => number
+}
+
+const titlepiece: TitlepieceFunctions = Object.keys(titlepieceSizes).reduce(
+	(acc, key) => {
+		return Object.assign({}, acc, {
+			[key]: (options: FontScaleArgs) => {
+				const defaultOptions = {
+					lineHeight: "tight",
+					fontWeight: "bold",
+					italic: false,
+				}
+				const fsOptions = Object.assign(defaultOptions, options)
+
+				return fs("titlepiece", key, fsOptions)
+			},
+		})
+	},
+	{} as HeadlineFunctions,
+)
+
 type HeadlineFunctions = {
@@ -178,14 +203,7 @@ [key in HeadlineSizes]: (options?: FontScaleArgs) => number
 					fontWeight: "medium",
+					italic: false,
 				}
-				const { lineHeight, fontWeight } = Object.assign(
-					defaultOptions,
-					options,
-				)
+				const fsOptions = Object.assign(defaultOptions, options)
 
-				return fs({
-					category: "headline",
-					level: key,
-					lineHeight,
-					fontWeight,
-				})
+				return fs("headline", key, fsOptions)
 			},
@@ -208,14 +226,7 @@ })
 					fontWeight: "regular",
+					italic: false,
 				}
-				const { lineHeight, fontWeight } = Object.assign(
-					defaultOptions,
-					options,
-				)
+				const fsOptions = Object.assign(defaultOptions, options)
 
-				return fs({
-					category: "body",
-					level: key,
-					lineHeight,
-					fontWeight,
-				})
+				return fs("body", key, fsOptions)
 			},
@@ -238,14 +249,7 @@ })
 					fontWeight: "regular",
+					italic: false,
 				}
-				const { lineHeight, fontWeight } = Object.assign(
-					defaultOptions,
-					options,
-				)
+				const fsOptions = Object.assign(defaultOptions, options)
 
-				return fs({
-					category: "textSans",
-					level: key,
-					lineHeight,
-					fontWeight,
-				})
+				return fs("textSans", key, fsOptions)
 			},
@@ -257,2 +261,3 @@ })
 
+Object.freeze(titlepieceSizes)
 Object.freeze(headlineSizes)
@@ -262,2 +267,11 @@ Object.freeze(bodySizes)
 
-export { headline, body, textSans, headlineSizes, bodySizes, textSansSizes }
+export {
+	titlepiece,
+	headline,
+	body,
+	textSans,
+	titlepieceSizes,
+	headlineSizes,
+	bodySizes,
+	textSansSizes,
+}

theme.d.ts

 declare const fontSizes: number[];
 declare const fonts: {
+    titlepiece: string;
     headlineSerif: string;
@@ -7,3 +8,3 @@ bodySerif: string;
 };
-declare const lineHeights: string[];
+declare const lineHeights: number[];
 declare const fontWeights: number[];
@@ -10,0 +11,0 @@ declare const colors: {

typography/index.d.ts

 declare type LineHeight = "tight" | "regular" | "loose";
 declare type FontWeight = "light" | "regular" | "medium" | "bold";
-declare type HeadlineSizes = "tiny" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "jumbo";
+declare type TitlepieceSizes = "small" | "medium" | "large";
+declare type HeadlineSizes = "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge";
 declare type BodySizes = "small" | "medium";
-declare type TextSansSizes = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type TextSansSizes = "xsmall" | "small" | "medium" | "large" | "xlarge";
+declare const titlepieceSizes: {
+    [key in TitlepieceSizes]: number;
+};
 declare const headlineSizes: {
@@ -18,3 +22,8 @@ [key in HeadlineSizes]: number;
     fontWeight?: FontWeight;
+    italic?: boolean;
 }
+declare type TitlepieceFunctions = {
+    [key in TitlepieceSizes]: (options?: FontScaleArgs) => number;
+};
+declare const titlepiece: TitlepieceFunctions;
 declare type HeadlineFunctions = {
@@ -32,2 +41,2 @@ [key in HeadlineSizes]: (options?: FontScaleArgs) => number;
 declare const textSans: TextSansFunctions;
-export { headline, body, textSans, headlineSizes, bodySizes, textSansSizes };
+export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, };

typography/index.js

@@ -22,2 +22,3 @@ 'use strict';
 var fonts = {
+  titlepiece: "GT Guardian Titlepiece, Georgia, serif",
   headlineSerif: "GH Guardian Headline, Georgia, serif",
@@ -27,3 +28,3 @@ bodySerif: "GuardianTextEgyptian, Georgia, serif",
 };
-var lineHeights = ["1.15em", "1.35em", "1.45em"];
+var lineHeights = [1.15, 1.35, 1.45];
 var fontWeights = [300, 400, 500, 700]; // Arrays of colours should have pillar colors first
@@ -34,6 +35,13 @@
 });
+var titlepieceSizes = {
+  small: fontSizesRem[7],
+  //42px
+  medium: fontSizesRem[8],
+  //50px
+  large: fontSizesRem[9] //70px
+
+};
 var headlineSizes = {
-  tiny: fontSizesRem[2],
+  xxxsmall: fontSizesRem[2],
   //17px
-  // BEGIN SUGGESTED RANGE
   xxsmall: fontSizesRem[3],
@@ -49,6 +57,3 @@ //20px
   //42px
-  xlarge: fontSizesRem[8],
-  //50px
-  // END SUGGESTED RANGE
-  jumbo: fontSizesRem[9] //70px
+  xlarge: fontSizesRem[8] //50px
 
@@ -63,3 +68,2 @@ };
 var textSansSizes = {
-  // BEGIN SUGGESTED RANGE
   xsmall: fontSizesRem[0],
@@ -71,15 +75,9 @@ //12px
   //17px
-  // END SUGGESTED RANGE
   large: fontSizesRem[3],
   //20px
-  xlarge: fontSizesRem[4],
-  //24px
-  xxlarge: fontSizesRem[5] //28px
-  // xxxlarge: fontSizesRem[6], //34px
-  // xxxxlarge: fontSizesRem[7], //42px
-  // xxxxxlarge: fontSizesRem[8], //50px
-  // xxxxxxlarge: fontSizesRem[9], //70px
+  xlarge: fontSizesRem[4] //24px
 
 };
 var fontSizeMapping = {
+  titlepiece: titlepieceSizes,
   headline: headlineSizes,
@@ -90,2 +88,3 @@ body: bodySizes,
 var fontMapping = {
+  titlepiece: fonts.titlepiece,
   headline: fonts.headlineSerif,
@@ -101,13 +100,21 @@ body: fonts.bodySerif,
 var fontWeightMapping = {
+  light: fontWeights[0],
+  regular: fontWeights[1],
+  medium: fontWeights[2],
+  bold: fontWeights[3]
+};
+var availableFonts = {
+  titlepiece: {
+    bold: {
+      hasItalic: false
+    }
+  },
   headline: {
     light: {
-      fontWeight: fontWeights[0],
       hasItalic: true
     },
     medium: {
-      fontWeight: fontWeights[2],
       hasItalic: true
     },
     bold: {
-      fontWeight: fontWeights[3],
       hasItalic: false
@@ -118,7 +125,5 @@ }
     regular: {
-      fontWeight: fontWeights[1],
       hasItalic: true
     },
     bold: {
-      fontWeight: fontWeights[3],
       hasItalic: true
@@ -129,7 +134,5 @@ }
     regular: {
-      fontWeight: fontWeights[1],
       hasItalic: true
     },
     bold: {
-      fontWeight: fontWeights[3],
       hasItalic: false
@@ -140,14 +143,28 @@ }
 
-var fs = function fs(_ref) {
-  var category = _ref.category,
-      level = _ref.level,
-      lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight;
+var fs = function fs(category, level, _ref) {
+  var lineHeight = _ref.lineHeight,
+      fontWeight = _ref.fontWeight,
+      italic = _ref.italic;
   var fontFamilyValue = fontMapping[category];
   var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight];
-  var fontWeightDefinition = fontWeightMapping[category][fontWeight];
-  return "\n\tfont-family: ".concat(fontFamilyValue, ";\n\tfont-size: ").concat(fontSizeValue, "rem;\n\tline-height: ").concat(lineHeightValue, ";\n\t").concat(fontWeightDefinition ? "font-weight: ".concat(fontWeightDefinition.fontWeight) : "", ";\n\t");
+  var lineHeightValue = lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  // font is unavailable
+
+  var requestedFont = availableFonts[category][fontWeight];
+  var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
+  var fontStyleValue = italic && requestedFont && requestedFont.hasItalic ? "italic" : "";
+  return "\n\tfont-family: ".concat(fontFamilyValue, ";\n\tfont-size: ").concat(fontSizeValue, "rem;\n\tline-height: ").concat(lineHeightValue, ";\n\t").concat(fontWeightValue ? "font-weight: ".concat(fontWeightValue) : "", ";\n\t").concat(fontStyleValue ? "font-style: ".concat(fontStyleValue) : "", ";\n\t");
 };
 
+var titlepiece = Object.keys(titlepieceSizes).reduce(function (acc, key) {
+  return Object.assign({}, acc, _defineProperty({}, key, function (options) {
+    var defaultOptions = {
+      lineHeight: "tight",
+      fontWeight: "bold",
+      italic: false
+    };
+    var fsOptions = Object.assign(defaultOptions, options);
+    return fs("titlepiece", key, fsOptions);
+  }));
+}, {});
 var headline = Object.keys(headlineSizes).reduce(function (acc, key) {
@@ -157,15 +174,7 @@ return Object.assign({}, acc, _defineProperty({}, key, function (options) {
       lineHeight: "tight",
-      fontWeight: "medium"
+      fontWeight: "medium",
+      italic: false
     };
-
-    var _Object$assign = Object.assign(defaultOptions, options),
-        lineHeight = _Object$assign.lineHeight,
-        fontWeight = _Object$assign.fontWeight;
-
-    return fs({
-      category: "headline",
-      level: key,
-      lineHeight: lineHeight,
-      fontWeight: fontWeight
-    });
+    var fsOptions = Object.assign(defaultOptions, options);
+    return fs("headline", key, fsOptions);
   }));
@@ -177,15 +186,7 @@ }, {});
       lineHeight: "loose",
-      fontWeight: "regular"
+      fontWeight: "regular",
+      italic: false
     };
-
-    var _Object$assign3 = Object.assign(defaultOptions, options),
-        lineHeight = _Object$assign3.lineHeight,
-        fontWeight = _Object$assign3.fontWeight;
-
-    return fs({
-      category: "body",
-      level: key,
-      lineHeight: lineHeight,
-      fontWeight: fontWeight
-    });
+    var fsOptions = Object.assign(defaultOptions, options);
+    return fs("body", key, fsOptions);
   }));
@@ -197,17 +198,10 @@ }, {});
       lineHeight: "loose",
-      fontWeight: "regular"
+      fontWeight: "regular",
+      italic: false
     };
-
-    var _Object$assign5 = Object.assign(defaultOptions, options),
-        lineHeight = _Object$assign5.lineHeight,
-        fontWeight = _Object$assign5.fontWeight;
-
-    return fs({
-      category: "textSans",
-      level: key,
-      lineHeight: lineHeight,
-      fontWeight: fontWeight
-    });
+    var fsOptions = Object.assign(defaultOptions, options);
+    return fs("textSans", key, fsOptions);
   }));
 }, {});
+Object.freeze(titlepieceSizes);
 Object.freeze(headlineSizes);
@@ -223,1 +217,3 @@ Object.freeze(bodySizes);
 exports.textSansSizes = textSansSizes;
+exports.titlepiece = titlepiece;
+exports.titlepieceSizes = titlepieceSizes;

No alert changes

Improved metrics

Total package byte prevSize

75119

increased by78.09%

Number of package files

38

increased by40.74%

Lines of code

2764

increased by82.8%

No dependency changes