@guardian/src-foundations - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

accessibility/index.js

@@ -175,4 +175,5 @@ 'use strict';
   ctaSecondary: brand.faded,
-  ctaSecondaryHover: "#96B0D9",
+  ctaSecondaryHover: "#ACC9F7",
   radioChecked: brand.main,
+  checkboxChecked: brand.bright,
   mono: {
@@ -188,3 +189,3 @@ primary: neutral[7],
     ctaPrimary: neutral[100],
-    ctaPrimaryHover: neutral[93],
+    ctaPrimaryHover: "#E0E0E0",
     ctaSecondary: brand.pastel,
@@ -197,3 +198,3 @@ ctaSecondaryHover: "#234B8A",
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.dark,
@@ -207,3 +208,3 @@ ctaSecondaryHover: "#F2AE00"
     ctaSecondary: brand.main,
-    ctaSecondaryHover: brand.dark
+    ctaSecondaryHover: "#234B8A"
   },
@@ -213,3 +214,3 @@ readerRevenueYellow: {
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.main,
@@ -220,5 +221,12 @@ ctaSecondaryHover: brandYellow.dark
 var border = {
+  primary: neutral[60],
+  secondary: neutral[86],
   error: error.main,
+  focusHalo: sport.bright,
   radio: neutral[60],
   radioHover: brand.main,
+  textInput: neutral[60],
+  checkbox: neutral[60],
+  checkboxHover: brand.bright,
+  checkboxChecked: brand.bright,
   brand: {
@@ -254,7 +262,6 @@ error: error.bright,
 
-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
+var visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
+var focusHalo = "\n\toutline: 0;\n\thtml:not(.src-focus-disabled) & {\n\t\tbox-shadow: 0 0 0 5px ".concat(palette.border.focusHalo, ";\n\t\tz-index: 9;\n\t}\n");
 
-var focusHalo = "\n\toutline: 0;\n\tbox-shadow: 0 0 0 5px ".concat(palette.sport.bright, ";\n\tz-index: 9;\n");
-
 exports.focusHalo = focusHalo;
 exports.visuallyHidden = visuallyHidden;

breakpoints.d.ts

@@ -1,3 +0,4 @@
-export declare type Breakpoint = "mobileMedium" | "mobileLandscape" | "phablet" | "tablet" | "desktop" | "leftCol" | "wide";
+export declare type Breakpoint = "mobile" | "mobileMedium" | "mobileLandscape" | "phablet" | "tablet" | "desktop" | "leftCol" | "wide";
 export declare const breakpoints: {
+    mobile: number;
     mobileMedium: number;
@@ -4,0 +5,0 @@ mobileLandscape: number;

foundations.esm.js

@@ -57,3 +57,3 @@ // e.g. for sport:
 
-var tweakpoints = [375, 480, 660];
+var tweakpoints = [320, 375, 480, 660];
 var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
@@ -68,5 +68,6 @@
 var breakpoints$1 = {
-  mobileMedium: tweakpoints[0],
-  mobileLandscape: tweakpoints[1],
-  phablet: tweakpoints[2],
+  mobile: tweakpoints[0],
+  mobileMedium: tweakpoints[1],
+  mobileLandscape: tweakpoints[2],
+  phablet: tweakpoints[3],
   tablet: breakpoints[0],
@@ -197,4 +198,5 @@ desktop: breakpoints[1],
   ctaSecondary: brand.faded,
-  ctaSecondaryHover: "#96B0D9",
+  ctaSecondaryHover: "#ACC9F7",
   radioChecked: brand.main,
+  checkboxChecked: brand.bright,
   mono: {
@@ -210,3 +212,3 @@ primary: neutral[7],
     ctaPrimary: neutral[100],
-    ctaPrimaryHover: neutral[93],
+    ctaPrimaryHover: "#E0E0E0",
     ctaSecondary: brand.pastel,
@@ -219,3 +221,3 @@ ctaSecondaryHover: "#234B8A",
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.dark,
@@ -229,3 +231,3 @@ ctaSecondaryHover: "#F2AE00"
     ctaSecondary: brand.main,
-    ctaSecondaryHover: brand.dark
+    ctaSecondaryHover: "#234B8A"
   },
@@ -235,3 +237,3 @@ readerRevenueYellow: {
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.main,
@@ -242,5 +244,12 @@ ctaSecondaryHover: brandYellow.dark
 var border = {
+  primary: neutral[60],
+  secondary: neutral[86],
   error: error.main,
+  focusHalo: sport.bright,
   radio: neutral[60],
   radioHover: brand.main,
+  textInput: neutral[60],
+  checkbox: neutral[60],
+  checkboxHover: brand.bright,
+  checkboxChecked: brand.bright,
   brand: {
@@ -247,0 +256,0 @@ error: error.bright,

foundations.js

@@ -61,3 +61,3 @@ 'use strict';
 
-var tweakpoints = [375, 480, 660];
+var tweakpoints = [320, 375, 480, 660];
 var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
@@ -72,5 +72,6 @@
 var breakpoints$1 = {
-  mobileMedium: tweakpoints[0],
-  mobileLandscape: tweakpoints[1],
-  phablet: tweakpoints[2],
+  mobile: tweakpoints[0],
+  mobileMedium: tweakpoints[1],
+  mobileLandscape: tweakpoints[2],
+  phablet: tweakpoints[3],
   tablet: breakpoints[0],
@@ -201,4 +202,5 @@ desktop: breakpoints[1],
   ctaSecondary: brand.faded,
-  ctaSecondaryHover: "#96B0D9",
+  ctaSecondaryHover: "#ACC9F7",
   radioChecked: brand.main,
+  checkboxChecked: brand.bright,
   mono: {
@@ -214,3 +216,3 @@ primary: neutral[7],
     ctaPrimary: neutral[100],
-    ctaPrimaryHover: neutral[93],
+    ctaPrimaryHover: "#E0E0E0",
     ctaSecondary: brand.pastel,
@@ -223,3 +225,3 @@ ctaSecondaryHover: "#234B8A",
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.dark,
@@ -233,3 +235,3 @@ ctaSecondaryHover: "#F2AE00"
     ctaSecondary: brand.main,
-    ctaSecondaryHover: brand.dark
+    ctaSecondaryHover: "#234B8A"
   },
@@ -239,3 +241,3 @@ readerRevenueYellow: {
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.main,
@@ -246,5 +248,12 @@ ctaSecondaryHover: brandYellow.dark
 var border = {
+  primary: neutral[60],
+  secondary: neutral[86],
   error: error.main,
+  focusHalo: sport.bright,
   radio: neutral[60],
   radioHover: brand.main,
+  textInput: neutral[60],
+  checkbox: neutral[60],
+  checkboxHover: brand.bright,
+  checkboxChecked: brand.bright,
   brand: {
@@ -251,0 +260,0 @@ error: error.bright,

mq/index.d.ts

 import { breakpoints } from "../index";
-declare type Breakpoint = "mobileMedium" | "mobileLandscape" | "phablet" | "tablet" | "desktop" | "leftCol" | "wide";
+declare type Breakpoint = "mobile" | "mobileMedium" | "mobileLandscape" | "phablet" | "tablet" | "desktop" | "leftCol" | "wide";
 declare type BreakpointMap = {
@@ -9,2 +9,13 @@ [key in Breakpoint]: string;
 declare const between: {
+    mobile: {
+        and: {
+            mobileMedium: string;
+            mobileLandscape: string;
+            phablet: string;
+            tablet: string;
+            desktop: string;
+            leftCol: string;
+            wide: string;
+        };
+    };
     mobileMedium: {
@@ -11,0 +22,0 @@ and: {

mq/index.js

@@ -9,8 +9,9 @@ 'use strict';
 
-var tweakpoints = [375, 480, 660];
+var tweakpoints = [320, 375, 480, 660];
 
 var breakpoints$1 = {
-  mobileMedium: tweakpoints[0],
-  mobileLandscape: tweakpoints[1],
-  phablet: tweakpoints[2],
+  mobile: tweakpoints[0],
+  mobileMedium: tweakpoints[1],
+  mobileLandscape: tweakpoints[2],
+  phablet: tweakpoints[3],
   tablet: breakpoints[0],
@@ -38,2 +39,3 @@ desktop: breakpoints[1],
 var from = {
+  mobile: minWidth(breakpoints$1.mobile),
   mobileMedium: minWidth(breakpoints$1.mobileMedium),
@@ -49,2 +51,3 @@ mobileLandscape: minWidth(breakpoints$1.mobileLandscape),
 var until = {
+  mobile: maxWidth(breakpoints$1.mobile),
   mobileMedium: maxWidth(breakpoints$1.mobileMedium),
@@ -60,2 +63,13 @@ mobileLandscape: maxWidth(breakpoints$1.mobileLandscape),
 var between = {
+  mobile: {
+    and: {
+      mobileMedium: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.mobileMedium),
+      mobileLandscape: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.mobileLandscape),
+      phablet: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.phablet),
+      tablet: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.tablet),
+      desktop: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.desktop),
+      leftCol: minWidthMaxWidth(breakpoints$1.mobile, breakpoints$1.leftCol),
+      wide: minWidthMaxWidth(breakpoints$1.mobileMedium, breakpoints$1.wide)
+    }
+  },
   mobileMedium: {
@@ -62,0 +76,0 @@ and: {

package.json

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

palette.d.ts

@@ -120,2 +120,3 @@ declare const palette: {
         radioChecked: string;
+        checkboxChecked: string;
         mono: {
@@ -159,5 +160,12 @@ primary: string;
     border: {
+        primary: string;
+        secondary: string;
         error: string;
+        focusHalo: string;
         radio: string;
         radioHover: string;
+        textInput: string;
+        checkbox: string;
+        checkboxHover: string;
+        checkboxChecked: string;
         brand: {
@@ -164,0 +172,0 @@ error: string;

src/accessibility/index.ts

@@ -12,9 +12,10 @@ import { palette } from "../index"
 
-// TODO: migrate to using context-specific alias
 const focusHalo = `
 	outline: 0;
-	box-shadow: 0 0 0 5px ${palette.sport.bright};
-	z-index: 9;
+	html:not(.src-focus-disabled) & {
+		box-shadow: 0 0 0 5px ${palette.border.focusHalo};
+		z-index: 9;
+	}
 `
 
 export { visuallyHidden, focusHalo }

src/breakpoints.ts

 import { breakpoints as _breakpoints, tweakpoints } from "./theme"
 
 export type Breakpoint =
+	| "mobile"
 	| "mobileMedium"
@@ -13,5 +14,6 @@ | "mobileLandscape"
 export const breakpoints = {
-	mobileMedium: tweakpoints[0],
-	mobileLandscape: tweakpoints[1],
-	phablet: tweakpoints[2],
+	mobile: tweakpoints[0],
+	mobileMedium: tweakpoints[1],
+	mobileLandscape: tweakpoints[2],
+	phablet: tweakpoints[3],
 	tablet: _breakpoints[0],
@@ -18,0 +20,0 @@ desktop: _breakpoints[1],

src/mq/index.ts

@@ -6,2 +6,3 @@ import { breakpoints } from "../index"
 type Breakpoint =
+	| "mobile"
 	| "mobileMedium"
@@ -29,2 +30,3 @@ | "mobileLandscape"
 const from: BreakpointMap = {
+	mobile: minWidth(breakpoints.mobile),
 	mobileMedium: minWidth(breakpoints.mobileMedium),
@@ -41,2 +43,3 @@ mobileLandscape: minWidth(breakpoints.mobileLandscape),
 const until: BreakpointMap = {
+	mobile: maxWidth(breakpoints.mobile),
 	mobileMedium: maxWidth(breakpoints.mobileMedium),
@@ -53,2 +56,19 @@ mobileLandscape: maxWidth(breakpoints.mobileLandscape),
 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: {
@@ -55,0 +75,0 @@ and: {

src/palette.ts

@@ -123,4 +123,5 @@ import { colors } from "./theme"
 	ctaSecondary: brand.faded,
-	ctaSecondaryHover: "#96B0D9",
+	ctaSecondaryHover: "#ACC9F7",
 	radioChecked: brand.main,
+	checkboxChecked: brand.bright,
 	mono: {
@@ -136,3 +137,3 @@ primary: neutral[7],
 		ctaPrimary: neutral[100],
-		ctaPrimaryHover: neutral[93],
+		ctaPrimaryHover: "#E0E0E0",
 		ctaSecondary: brand.pastel,
@@ -145,3 +146,3 @@ ctaSecondaryHover: "#234B8A",
 		ctaPrimary: neutral[7],
-		ctaPrimaryHover: neutral[20],
+		ctaPrimaryHover: "#454545",
 		ctaSecondary: brandYellow.dark,
@@ -155,3 +156,3 @@ ctaSecondaryHover: "#F2AE00",
 		ctaSecondary: brand.main,
-		ctaSecondaryHover: brand.dark,
+		ctaSecondaryHover: "#234B8A",
 	},
@@ -161,3 +162,3 @@ readerRevenueYellow: {
 		ctaPrimary: neutral[7],
-		ctaPrimaryHover: neutral[20],
+		ctaPrimaryHover: "#454545",
 		ctaSecondary: brandYellow.main,
@@ -168,5 +169,12 @@ ctaSecondaryHover: brandYellow.dark,
 const border = {
+	primary: neutral[60],
+	secondary: neutral[86],
 	error: error.main,
+	focusHalo: sport.bright,
 	radio: neutral[60],
 	radioHover: brand.main,
+	textInput: neutral[60],
+	checkbox: neutral[60],
+	checkboxHover: brand.bright,
+	checkboxChecked: brand.bright,
 	brand: {
@@ -173,0 +181,0 @@ error: error.bright,

src/theme.ts

@@ -92,3 +92,3 @@ const fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70]
 // fluid grid on mobile devices
-const tweakpoints = [375, 480, 660]
+const tweakpoints = [320, 375, 480, 660]
 
@@ -95,0 +95,0 @@ const transitions = [

themes/index.js

@@ -175,4 +175,5 @@ 'use strict';
   ctaSecondary: brand.faded,
-  ctaSecondaryHover: "#96B0D9",
+  ctaSecondaryHover: "#ACC9F7",
   radioChecked: brand.main,
+  checkboxChecked: brand.bright,
   mono: {
@@ -188,3 +189,3 @@ primary: neutral[7],
     ctaPrimary: neutral[100],
-    ctaPrimaryHover: neutral[93],
+    ctaPrimaryHover: "#E0E0E0",
     ctaSecondary: brand.pastel,
@@ -197,3 +198,3 @@ ctaSecondaryHover: "#234B8A",
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.dark,
@@ -207,3 +208,3 @@ ctaSecondaryHover: "#F2AE00"
     ctaSecondary: brand.main,
-    ctaSecondaryHover: brand.dark
+    ctaSecondaryHover: "#234B8A"
   },
@@ -213,3 +214,3 @@ readerRevenueYellow: {
     ctaPrimary: neutral[7],
-    ctaPrimaryHover: neutral[20],
+    ctaPrimaryHover: "#454545",
     ctaSecondary: brandYellow.main,
@@ -220,5 +221,12 @@ ctaSecondaryHover: brandYellow.dark
 var border = {
+  primary: neutral[60],
+  secondary: neutral[86],
   error: error.main,
+  focusHalo: sport.bright,
   radio: neutral[60],
   radioHover: brand.main,
+  textInput: neutral[60],
+  checkbox: neutral[60],
+  checkboxHover: brand.bright,
+  checkboxChecked: brand.bright,
   brand: {
@@ -225,0 +233,0 @@ error: error.bright,

No alert changes

Improved metrics

Total package byte prevSize

78211

increased by4.12%

Lines of code

2863

increased by3.58%

No dependency changes