@guardian/src-foundations - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/foundations.esm.js

@@ -8,19 +8,52 @@ var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var lineHeights = ["1.15em", "1.35em", "1.45em"];
-var fontWeights = [300, 400, 500, 700];
+var fontWeights = [300, 400, 500, 700]; // Arrays of colours should have pillar colors first
+// e.g. for sport:
+// const [dark, main, bright, pastel, faded] = colors.blue
+
 var colors = {
-  reds: ["#ab0613", "#c70000", "#ff4e36", "#ffbac8", "#fff4f2"],
-  oranges: ["#BD5318", "#E05E00", "#FF7F0F", "#F9B376", "#FEF9F5"],
-  blues: ["#041f4a", //brand-dark
-  "#052962", //brand-main
-  "#506991", //brand-pastel
-  "#005689", //sport-dark
+  reds: ["#ab0613", //news-dark
+  "#c70000", //news-main
+  "#ff4e36", //news-bright
+  "#ffbac8", //news-pastel
+  "#fff4f2"],
+  oranges: ["#AB0613", //opinion-dark
+  "#E05E00", //opinion-main
+  "#FF7F0F", //opinion-bright
+  "#F9B376", //opinion-pastel
+  "#FEF9F5"],
+  blues: ["#005689", //sport-dark
   "#0084C6", //sport-main
   "#00B2FF", //sport-bright
   "#90DCFF", //sport-pastel
-  "#F1F8FC"],
-  yellows: ["#ffbb50", "#ffe500"],
-  browns: ["#6B5840", "#A1845C", "#EACCA0", "#E7D4B9", "#FBF6EF"],
-  pinks: ["#7D0068", "#BB3B80", "#FFABDB", "#FEC8D3", "#FEEEF7"],
-  greens: ["#3F464A", "#65A897", "#185E36", "#22874D", "#69D1CA"],
-  grays: ["#121212", "#1a1a1a", "#333333", "#767676", "#999999", "#d9d9d9", "#dcdcdc", "#ededed", "#f6f6f6", "#ffffff"]
+  "#F1F8FC", //sport-faded
+  "#041F4A", //brand-dark
+  "#052962", //brand-main
+  "#0077B3", //brand-bright
+  "#506991", //brand-pastel
+  "#B6C5DB"],
+  browns: ["#6B5840", //culture-dark
+  "#A1845C", //culture-main
+  "#EACCA0", //culture-bright
+  "#E7D4B9", //culture-pastel
+  "#FBF6EF"],
+  pinks: ["#7D0068", //lifestyle-dark
+  "#BB3B80", //lifestyle-main
+  "#FFABDB", //lifestyle-bright
+  "#FEC8D3", //lifestyle-pastel
+  "#FEEEF7"],
+  yellows: ["#F3C100", //highlight-dark
+  "#FFE500"],
+  greens: ["#185E36", "#22874D", "#65A897", //labs-dark
+  "#69D1CA"],
+  grays: ["#121212", //neutral-7
+  "#1a1a1a", //neutral-10
+  "#333333", //neutral-20
+  "#767676", //neutral-46
+  "#999999", //neutral-60
+  "#d9d9d9", //neutral-85
+  "#dcdcdc", //neutral-86
+  "#ededed", //neutral-93
+  "#f6f6f6", //neutral-97
+  "#ffffff", //neutral-100
+  "#3F464A"]
 };
@@ -136,5 +169,7 @@ var space = [3, 6, 12, 18, 24, 36, 48, 96];
   brand: {
-    dark: colors.blues[0],
-    main: colors.blues[1],
-    pastel: colors.blues[2]
+    dark: colors.blues[5],
+    main: colors.blues[6],
+    bright: colors.blues[7],
+    pastel: colors.blues[8],
+    faded: colors.blues[9]
   },
@@ -155,4 +190,8 @@ yellow: {
     97: colors.grays[8],
-    100: colors.grays[9]
+    100: colors.grays[9],
+    specialReport: colors.grays[10]
   },
+  error: {
+    main: colors.reds[1]
+  },
   news: {
@@ -173,7 +212,7 @@ dark: colors.reds[0],
   sport: {
-    dark: colors.blues[3],
-    main: colors.blues[4],
-    bright: colors.blues[5],
-    pastel: colors.blues[6],
-    faded: colors.blues[7]
+    dark: colors.blues[0],
+    main: colors.blues[1],
+    bright: colors.blues[2],
+    pastel: colors.blues[3],
+    faded: colors.blues[4]
   },
@@ -195,8 +234,4 @@ culture: {
   labs: {
-    dark: colors.grays[0],
-    main: colors.grays[0],
-    bright: colors.greens[4],
-    pastel: "",
-    // TODO
-    faded: colors.greens[1]
+    dark: colors.greens[2],
+    main: colors.greens[3]
   }
@@ -358,2 +393,2 @@ };
 
-export { body, bodySizes, desktop, focusHalo, from, headline, headlineSizes, leftCol, mobileLandscape, mobileMedium, palette, phablet, size$1 as size, space$1 as space, tablet, textSans, textSansSizes, transitions$1 as transitions, until, visuallyHidden, wide };
+export { body, bodySizes, breakpointMap as breakpoints, desktop, focusHalo, from, headline, headlineSizes, leftCol, mobileLandscape, mobileMedium, palette, phablet, size$1 as size, space$1 as space, tablet, textSans, textSansSizes, transitions$1 as transitions, until, visuallyHidden, wide };

dist/foundations.js

@@ -12,19 +12,52 @@ 'use strict';
 var lineHeights = ["1.15em", "1.35em", "1.45em"];
-var fontWeights = [300, 400, 500, 700];
+var fontWeights = [300, 400, 500, 700]; // Arrays of colours should have pillar colors first
+// e.g. for sport:
+// const [dark, main, bright, pastel, faded] = colors.blue
+
 var colors = {
-  reds: ["#ab0613", "#c70000", "#ff4e36", "#ffbac8", "#fff4f2"],
-  oranges: ["#BD5318", "#E05E00", "#FF7F0F", "#F9B376", "#FEF9F5"],
-  blues: ["#041f4a", //brand-dark
-  "#052962", //brand-main
-  "#506991", //brand-pastel
-  "#005689", //sport-dark
+  reds: ["#ab0613", //news-dark
+  "#c70000", //news-main
+  "#ff4e36", //news-bright
+  "#ffbac8", //news-pastel
+  "#fff4f2"],
+  oranges: ["#AB0613", //opinion-dark
+  "#E05E00", //opinion-main
+  "#FF7F0F", //opinion-bright
+  "#F9B376", //opinion-pastel
+  "#FEF9F5"],
+  blues: ["#005689", //sport-dark
   "#0084C6", //sport-main
   "#00B2FF", //sport-bright
   "#90DCFF", //sport-pastel
-  "#F1F8FC"],
-  yellows: ["#ffbb50", "#ffe500"],
-  browns: ["#6B5840", "#A1845C", "#EACCA0", "#E7D4B9", "#FBF6EF"],
-  pinks: ["#7D0068", "#BB3B80", "#FFABDB", "#FEC8D3", "#FEEEF7"],
-  greens: ["#3F464A", "#65A897", "#185E36", "#22874D", "#69D1CA"],
-  grays: ["#121212", "#1a1a1a", "#333333", "#767676", "#999999", "#d9d9d9", "#dcdcdc", "#ededed", "#f6f6f6", "#ffffff"]
+  "#F1F8FC", //sport-faded
+  "#041F4A", //brand-dark
+  "#052962", //brand-main
+  "#0077B3", //brand-bright
+  "#506991", //brand-pastel
+  "#B6C5DB"],
+  browns: ["#6B5840", //culture-dark
+  "#A1845C", //culture-main
+  "#EACCA0", //culture-bright
+  "#E7D4B9", //culture-pastel
+  "#FBF6EF"],
+  pinks: ["#7D0068", //lifestyle-dark
+  "#BB3B80", //lifestyle-main
+  "#FFABDB", //lifestyle-bright
+  "#FEC8D3", //lifestyle-pastel
+  "#FEEEF7"],
+  yellows: ["#F3C100", //highlight-dark
+  "#FFE500"],
+  greens: ["#185E36", "#22874D", "#65A897", //labs-dark
+  "#69D1CA"],
+  grays: ["#121212", //neutral-7
+  "#1a1a1a", //neutral-10
+  "#333333", //neutral-20
+  "#767676", //neutral-46
+  "#999999", //neutral-60
+  "#d9d9d9", //neutral-85
+  "#dcdcdc", //neutral-86
+  "#ededed", //neutral-93
+  "#f6f6f6", //neutral-97
+  "#ffffff", //neutral-100
+  "#3F464A"]
 };
@@ -140,5 +173,7 @@ var space = [3, 6, 12, 18, 24, 36, 48, 96];
   brand: {
-    dark: colors.blues[0],
-    main: colors.blues[1],
-    pastel: colors.blues[2]
+    dark: colors.blues[5],
+    main: colors.blues[6],
+    bright: colors.blues[7],
+    pastel: colors.blues[8],
+    faded: colors.blues[9]
   },
@@ -159,4 +194,8 @@ yellow: {
     97: colors.grays[8],
-    100: colors.grays[9]
+    100: colors.grays[9],
+    specialReport: colors.grays[10]
   },
+  error: {
+    main: colors.reds[1]
+  },
   news: {
@@ -177,7 +216,7 @@ dark: colors.reds[0],
   sport: {
-    dark: colors.blues[3],
-    main: colors.blues[4],
-    bright: colors.blues[5],
-    pastel: colors.blues[6],
-    faded: colors.blues[7]
+    dark: colors.blues[0],
+    main: colors.blues[1],
+    bright: colors.blues[2],
+    pastel: colors.blues[3],
+    faded: colors.blues[4]
   },
@@ -199,8 +238,4 @@ culture: {
   labs: {
-    dark: colors.grays[0],
-    main: colors.grays[0],
-    bright: colors.greens[4],
-    pastel: "",
-    // TODO
-    faded: colors.greens[1]
+    dark: colors.greens[2],
+    main: colors.greens[3]
   }
@@ -364,2 +399,3 @@ };
 exports.bodySizes = bodySizes;
+exports.breakpoints = breakpointMap;
 exports.desktop = desktop;
@@ -366,0 +402,0 @@ exports.focusHalo = focusHalo;

media-queries.ts

@@ -151,2 +151,3 @@ import { tweakpoints, breakpoints } from "./theme"
 	wide,
+	breakpointMap as breakpoints,
 }

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"main": "dist/foundations.js",
@@ -5,0 +5,0 @@ "module": "dist/foundations.esm.js",

palette.ts

@@ -5,5 +5,7 @@ import { colors } from "./theme"
 	brand: {
-		dark: colors.blues[0],
-		main: colors.blues[1],
-		pastel: colors.blues[2],
+		dark: colors.blues[5],
+		main: colors.blues[6],
+		bright: colors.blues[7],
+		pastel: colors.blues[8],
+		faded: colors.blues[9],
 	},
@@ -25,3 +27,7 @@ yellow: {
 		100: colors.grays[9],
+		specialReport: colors.grays[10],
 	},
+	error: {
+		main: colors.reds[1],
+	},
 	news: {
@@ -42,7 +48,7 @@ dark: colors.reds[0],
 	sport: {
-		dark: colors.blues[3],
-		main: colors.blues[4],
-		bright: colors.blues[5],
-		pastel: colors.blues[6],
-		faded: colors.blues[7],
+		dark: colors.blues[0],
+		main: colors.blues[1],
+		bright: colors.blues[2],
+		pastel: colors.blues[3],
+		faded: colors.blues[4],
 	},
@@ -64,7 +70,4 @@ culture: {
 	labs: {
-		dark: colors.grays[0],
-		main: colors.grays[0],
-		bright: colors.greens[4],
-		pastel: "", // TODO
-		faded: colors.greens[1],
+		dark: colors.greens[2],
+		main: colors.greens[3],
 	},
@@ -71,0 +74,0 @@ }

README.md

@@ -26,3 +26,3 @@ # Foundations
 ```ts
-import { from, until } from "@guardian/src-foundations"
+import { mobileLandscape, from, until } from "@guardian/src-foundations"
 
@@ -32,3 +32,3 @@ const styles = css`
 
-	${from.mobileLandscape} {
+	${mobileLandscape} {
 		padding: 0 20px;
@@ -54,3 +54,3 @@ }
 
-@media (min-width: 375px) {
+@media (min-width: 480px) {
 	.class-name {
@@ -57,0 +57,0 @@ padding: 0 20px;

theme.ts

@@ -14,9 +14,21 @@ const fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70]
 
+// Arrays of colours should have pillar colors first
+// e.g. for sport:
+// const [dark, main, bright, pastel, faded] = colors.blue
 const colors = {
-	reds: ["#ab0613", "#c70000", "#ff4e36", "#ffbac8", "#fff4f2"],
-	oranges: ["#BD5318", "#E05E00", "#FF7F0F", "#F9B376", "#FEF9F5"],
+	reds: [
+		"#ab0613", //news-dark
+		"#c70000", //news-main
+		"#ff4e36", //news-bright
+		"#ffbac8", //news-pastel
+		"#fff4f2", //news-fade
+	],
+	oranges: [
+		"#AB0613", //opinion-dark
+		"#E05E00", //opinion-main
+		"#FF7F0F", //opinion-bright
+		"#F9B376", //opinion-pastel
+		"#FEF9F5", //opinion-faded
+	],
 	blues: [
-		"#041f4a", //brand-dark
-		"#052962", //brand-main
-		"#506991", //brand-pastel
 		"#005689", //sport-dark
@@ -27,18 +39,44 @@ "#0084C6", //sport-main
 		"#F1F8FC", //sport-faded
+		"#041F4A", //brand-dark
+		"#052962", //brand-main
+		"#0077B3", //brand-bright
+		"#506991", //brand-pastel
+		"#B6C5DB", //brand-faded
 	],
-	yellows: ["#ffbb50", "#ffe500"],
-	browns: ["#6B5840", "#A1845C", "#EACCA0", "#E7D4B9", "#FBF6EF"],
-	pinks: ["#7D0068", "#BB3B80", "#FFABDB", "#FEC8D3", "#FEEEF7"],
-	greens: ["#3F464A", "#65A897", "#185E36", "#22874D", "#69D1CA"],
+	browns: [
+		"#6B5840", //culture-dark
+		"#A1845C", //culture-main
+		"#EACCA0", //culture-bright
+		"#E7D4B9", //culture-pastel
+		"#FBF6EF", //culture-faded
+	],
+	pinks: [
+		"#7D0068", //lifestyle-dark
+		"#BB3B80", //lifestyle-main
+		"#FFABDB", //lifestyle-bright
+		"#FEC8D3", //lifestyle-pastel
+		"#FEEEF7", //lifestyle-faded
+	],
+	yellows: [
+		"#F3C100", //highlight-dark
+		"#FFE500", //highlight-main
+	],
+	greens: [
+		"#185E36",
+		"#22874D",
+		"#65A897", //labs-dark
+		"#69D1CA", //labs-main
+	],
 	grays: [
-		"#121212",
-		"#1a1a1a",
-		"#333333",
-		"#767676",
-		"#999999",
-		"#d9d9d9",
-		"#dcdcdc",
-		"#ededed",
-		"#f6f6f6",
-		"#ffffff",
+		"#121212", //neutral-7
+		"#1a1a1a", //neutral-10
+		"#333333", //neutral-20
+		"#767676", //neutral-46
+		"#999999", //neutral-60
+		"#d9d9d9", //neutral-85
+		"#dcdcdc", //neutral-86
+		"#ededed", //neutral-93
+		"#f6f6f6", //neutral-97
+		"#ffffff", //neutral-100
+		"#3F464A", //special-report
 	],
@@ -45,0 +83,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

35753

increased by7.04%

Lines of code

1254

increased by9.81%

No dependency changes