@guardian/src-foundations - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0-rc.0

accessibility/cjs/index.js

@@ -8,5 +8,5 @@ 'use strict';
 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\thtml:not(.src-focus-disabled) & {\n\t\tbox-shadow: 0 0 0 5px ".concat(palette.border.focusHalo, ";\n\t}\n");
 
 exports.focusHalo = focusHalo;
 exports.visuallyHidden = visuallyHidden;

accessibility/index.js

 import { border } from '@guardian/src-foundations/palette';
 
 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(border.focusHalo, ";\n\t\tz-index: 9;\n\t}\n");
+var focusHalo = "\n\toutline: 0;\n\thtml:not(.src-focus-disabled) & {\n\t\tbox-shadow: 0 0 0 5px ".concat(border.focusHalo, ";\n\t}\n");
 
 export { focusHalo, visuallyHidden };

foundations.esm.js

@@ -17,3 +17,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   "#8D2700", //opinion-200
-  "#BD5318", //opinion-300
+  "#CB4700", //opinion-300
   "#E05E00", //opinion-400
@@ -199,3 +199,5 @@ "#FF7F0F", //opinion-500
   500: colors.grays[14]
-};
+}; // Deprecated - please do not use
+// TODO: remove in v3.0.0
+
 var dynamo = {
@@ -251,3 +253,4 @@ 400: colors.grays[15]
 var brandBorder = {
-  primary: brand[800],
+  primary: brand[600],
+  secondary: brand[600],
   success: success[500],
@@ -308,2 +311,3 @@ error: error[500],
   anchorPrimary: neutral[100],
+  anchorPrimaryHover: brandAlt[400],
   userInput: neutral[100],
@@ -310,0 +314,0 @@ inputLabel: neutral[100],

foundations.js

@@ -21,3 +21,3 @@ 'use strict';
   "#8D2700", //opinion-200
-  "#BD5318", //opinion-300
+  "#CB4700", //opinion-300
   "#E05E00", //opinion-400
@@ -203,3 +203,5 @@ "#FF7F0F", //opinion-500
   500: colors.grays[14]
-};
+}; // Deprecated - please do not use
+// TODO: remove in v3.0.0
+
 var dynamo = {
@@ -255,3 +257,4 @@ 400: colors.grays[15]
 var brandBorder = {
-  primary: brand[800],
+  primary: brand[600],
+  secondary: brand[600],
   success: success[500],
@@ -312,2 +315,3 @@ error: error[500],
   anchorPrimary: neutral[100],
+  anchorPrimaryHover: brandAlt[400],
   userInput: neutral[100],
@@ -314,0 +318,0 @@ inputLabel: neutral[100],

index.d.ts

@@ -63,2 +63,3 @@ export * from "./animation";
         primary: string;
+        secondary: string;
         success: string;
@@ -83,2 +84,3 @@ error: string;
         anchorPrimary: string;
+        anchorPrimaryHover: string;
         userInput: string;
@@ -85,0 +87,0 @@ inputLabel: string;

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "2.1.0",
+	"version": "2.2.0-rc.0",
 	"license": "Apache-2.0",
@@ -51,3 +51,3 @@ "main": "foundations.js",
 		"@babel/core": "^7.10.0",
-		"@babel/plugin-proposal-class-properties": "^7.8.3",
+		"@babel/plugin-proposal-class-properties": "^7.10.4",
 		"@babel/preset-env": "^7.10.0",
@@ -54,0 +54,0 @@ "@babel/preset-react": "^7.10.0",

palette/border/brand.d.ts

 export declare const brandBorder: {
     primary: string;
+    secondary: string;
     success: string;
@@ -4,0 +5,0 @@ error: string;

palette/cjs/border/brand.d.ts

 export declare const brandBorder: {
     primary: string;
+    secondary: string;
     success: string;
@@ -4,0 +5,0 @@ error: string;

palette/cjs/index.js

@@ -21,3 +21,3 @@ 'use strict';
   "#8D2700", //opinion-200
-  "#BD5318", //opinion-300
+  "#CB4700", //opinion-300
   "#E05E00", //opinion-400
@@ -179,3 +179,5 @@ "#FF7F0F", //opinion-500
   500: colors.grays[14]
-};
+}; // Deprecated - please do not use
+// TODO: remove in v3.0.0
+
 var dynamo = {
@@ -231,3 +233,4 @@ 400: colors.grays[15]
 var brandBorder = {
-  primary: brand[800],
+  primary: brand[600],
+  secondary: brand[600],
   success: success[500],
@@ -288,2 +291,3 @@ error: error[500],
   anchorPrimary: neutral[100],
+  anchorPrimaryHover: brandAlt[400],
   userInput: neutral[100],
@@ -290,0 +294,0 @@ inputLabel: neutral[100],

palette/cjs/text/brand.d.ts

@@ -10,2 +10,3 @@ export declare const brandText: {
     anchorPrimary: string;
+    anchorPrimaryHover: string;
     userInput: string;
@@ -12,0 +13,0 @@ inputLabel: string;

palette/index.js

@@ -17,3 +17,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   "#8D2700", //opinion-200
-  "#BD5318", //opinion-300
+  "#CB4700", //opinion-300
   "#E05E00", //opinion-400
@@ -175,3 +175,5 @@ "#FF7F0F", //opinion-500
   500: colors.grays[14]
-};
+}; // Deprecated - please do not use
+// TODO: remove in v3.0.0
+
 var dynamo = {
@@ -227,3 +229,4 @@ 400: colors.grays[15]
 var brandBorder = {
-  primary: brand[800],
+  primary: brand[600],
+  secondary: brand[600],
   success: success[500],
@@ -284,2 +287,3 @@ error: error[500],
   anchorPrimary: neutral[100],
+  anchorPrimaryHover: brandAlt[400],
   userInput: neutral[100],
@@ -286,0 +290,0 @@ inputLabel: neutral[100],

palette/text/brand.d.ts

@@ -10,2 +10,3 @@ export declare const brandText: {
     anchorPrimary: string;
+    anchorPrimaryHover: string;
     userInput: string;
@@ -12,0 +13,0 @@ inputLabel: string;

src/accessibility/index.ts

@@ -16,3 +16,2 @@ import { border } from "@guardian/src-foundations/palette"
 		box-shadow: 0 0 0 5px ${border.focusHalo};
-		z-index: 9;
 	}
@@ -19,0 +18,0 @@ `

src/palette/border/brand.ts

 import { neutral, success as _success, error as _error, brand } from "../global"
 
 export const brandBorder = {
-	primary: brand[800],
+	primary: brand[600],
+	secondary: brand[600],
 	success: _success[500],
@@ -6,0 +7,0 @@ error: _error[500],

src/palette/global.ts

@@ -117,4 +117,6 @@ // Global colour names that correspond to https://www.theguardian.design/2a1e5182b/p/938810-colour/b/587ef3
 
+// Deprecated - please do not use
+// TODO: remove in v3.0.0
 export const dynamo = {
 	400: colors.grays[15],
 }

src/palette/text/brand.ts

@@ -1,2 +0,8 @@
-import { neutral, success as _success, error as _error, brand } from "../global"
+import {
+	neutral,
+	success as _success,
+	error as _error,
+	brand,
+	brandAlt,
+} from "../global"
 
@@ -12,2 +18,3 @@ export const brandText = {
 	anchorPrimary: neutral[100],
+	anchorPrimaryHover: brandAlt[400],
 	userInput: neutral[100],
@@ -14,0 +21,0 @@ inputLabel: neutral[100],

src/theme.ts

@@ -58,3 +58,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
 		"#8D2700", //opinion-200
-		"#BD5318", //opinion-300
+		"#CB4700", //opinion-300
 		"#E05E00", //opinion-400
@@ -61,0 +61,0 @@ "#FF7F0F", //opinion-500

src/themes/index.ts

@@ -5,2 +5,3 @@ export * from "./accordion"
 export * from "./choice-card"
+export * from "./footer"
 export * from "./inline-error"
@@ -16,2 +17,3 @@ export * from "./link"
 import { choiceCardDefault } from "./choice-card"
+import { footerBrand } from "./footer"
 import { inlineErrorBrand, inlineErrorDefault } from "./inline-error"
@@ -37,2 +39,3 @@ import { linkBrand, linkDefault, linkBrandAlt } from "./link"
 	...checkboxBrand,
+	...footerBrand,
 	...inlineErrorBrand,
@@ -39,0 +42,0 @@ ...linkBrand,

themes/cjs/index.d.ts

@@ -5,2 +5,3 @@ export * from "./accordion";
 export * from "./choice-card";
+export * from "./footer";
 export * from "./inline-error";
@@ -27,2 +28,3 @@ export * from "./link";
     inlineError: import("./inline-error").InlineErrorTheme;
+    footer: import("./footer").FooterTheme;
     checkbox: import("./checkbox").CheckboxTheme;
@@ -29,0 +31,0 @@ button: import("./button").ButtonTheme;

themes/cjs/index.js

@@ -162,2 +162,12 @@ 'use strict';
 
+var footerBrand = {
+  footer: {
+    border: palette.brandBorder.primary,
+    background: palette.brandBackground.primary,
+    text: palette.brandText.primary,
+    anchor: palette.brandText.anchorPrimary,
+    anchorHover: palette.brandText.anchorPrimaryHover
+  }
+};
+
 var inlineErrorDefault = {
@@ -249,3 +259,3 @@ inlineError: {
 var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
-var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), inlineErrorBrand), linkBrand), radioBrand), userFeedbackBrand);
+var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), inlineErrorBrand), linkBrand), radioBrand), userFeedbackBrand);
 var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
@@ -263,2 +273,3 @@
 exports.defaultTheme = defaultTheme;
+exports.footerBrand = footerBrand;
 exports.inlineErrorBrand = inlineErrorBrand;
@@ -265,0 +276,0 @@ exports.inlineErrorDefault = inlineErrorDefault;

themes/index.d.ts

@@ -5,2 +5,3 @@ export * from "./accordion";
 export * from "./choice-card";
+export * from "./footer";
 export * from "./inline-error";
@@ -27,2 +28,3 @@ export * from "./link";
     inlineError: import("./inline-error").InlineErrorTheme;
+    footer: import("./footer").FooterTheme;
     checkbox: import("./checkbox").CheckboxTheme;
@@ -29,0 +31,0 @@ button: import("./button").ButtonTheme;

themes/index.js

@@ -158,2 +158,12 @@ import { text, border, background, brandText, brandBackground, brandBorder, brandAltText, brandAltBackground, brandAltBorder } from '@guardian/src-foundations/palette';
 
+var footerBrand = {
+  footer: {
+    border: brandBorder.primary,
+    background: brandBackground.primary,
+    text: brandText.primary,
+    anchor: brandText.anchorPrimary,
+    anchorHover: brandText.anchorPrimaryHover
+  }
+};
+
 var inlineErrorDefault = {
@@ -245,5 +255,5 @@ inlineError: {
 var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault);
-var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), inlineErrorBrand), linkBrand), radioBrand), userFeedbackBrand);
+var brand = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrand), checkboxBrand), footerBrand), inlineErrorBrand), linkBrand), radioBrand), userFeedbackBrand);
 var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
 
-export { accordionDefault, brand, brandAlt, buttonBrand, buttonBrandAlt, buttonDefault, checkboxBrand, checkboxDefault, choiceCardDefault, defaultTheme, inlineErrorBrand, inlineErrorDefault, linkBrand, linkBrandAlt, linkDefault, radioBrand, radioDefault, selectDefault, textInputDefault, userFeedbackBrand, userFeedbackDefault };
+export { accordionDefault, brand, brandAlt, buttonBrand, buttonBrandAlt, buttonDefault, checkboxBrand, checkboxDefault, choiceCardDefault, defaultTheme, footerBrand, inlineErrorBrand, inlineErrorDefault, linkBrand, linkBrandAlt, linkDefault, radioBrand, radioDefault, selectDefault, textInputDefault, userFeedbackBrand, userFeedbackDefault };

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

Improved metrics

Total package byte prevSize

237720

increased by9.93%

Number of package files

217

increased by28.4%

Lines of code

8247

increased by10.02%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes