@guardian/src-foundations - npm Package Compare versions

Comparing version 0.16.0-alpha.4 to 0.16.0

accessibility/cjs/index.js

@@ -148,2 +148,3 @@ 'use strict';
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -150,0 +151,0 @@ };

accessibility/index.js

@@ -144,2 +144,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -146,0 +147,0 @@ };

foundations.esm.js

@@ -275,2 +275,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -277,0 +278,0 @@ };

foundations.js

@@ -279,2 +279,3 @@ 'use strict';
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -281,0 +282,0 @@ };

index.d.ts

@@ -25,2 +25,3 @@ export * from "./animation";
         inputHover: string;
+        inputActive: string;
         focusHalo: string;
@@ -27,0 +28,0 @@ };

package.json

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

palette/border/default.d.ts

@@ -9,3 +9,4 @@ export declare const border: {
     inputHover: string;
+    inputActive: string;
     focusHalo: string;
 };

palette/cjs/index.js

@@ -254,2 +254,3 @@ 'use strict';
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -256,0 +257,0 @@ };

palette/index.js

@@ -250,2 +250,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -252,0 +253,0 @@ };

src/palette/border/default.ts

@@ -17,3 +17,4 @@ import {
 	inputHover: brand[500],
+	inputActive: brand[500],
 	focusHalo: sport[500],
 }

src/themes/text-input.ts

@@ -12,2 +12,3 @@ import { text, background, border } from "../index"
 	border: string
+	borderActive: string
 	borderError: string
@@ -28,2 +29,3 @@ }
 		border: border.input,
+		borderActive: border.inputActive,
 		borderError: border.error,
@@ -30,0 +32,0 @@ },

src/typography/api.ts

@@ -21,3 +21,3 @@ import {
 }
-const titlepieceFs = fs.bind(null, "titlepiece")
+const titlepieceFs = fs("titlepiece")
 
@@ -42,3 +42,3 @@ export const titlepiece: TitlepieceFunctions = {
 }
-const headlineFs = fs.bind(null, "headline")
+const headlineFs = fs("headline")
 
@@ -72,3 +72,3 @@ export const headline: HeadlineFunctions = {
 }
-const bodyFs = fs.bind(null, "body")
+const bodyFs = fs("body")
 
@@ -92,3 +92,3 @@ export const body: BodyFunctions = {
 }
-const textSansFs = fs.bind(null, "textSans")
+const textSansFs = fs("textSans")
 
@@ -95,0 +95,0 @@ export const textSans: TextSansFunctions = {

src/typography/data.ts

@@ -34,2 +34,3 @@ import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
 	category: Category,
+) => (
 	level: string,
@@ -36,0 +37,0 @@ {

src/typography/fs.ts

@@ -10,4 +10,3 @@ import {
 
-export const fs: Fs = (
-	category,
+export const fs: Fs = category => (
 	level,
@@ -14,0 +13,0 @@ { lineHeight, fontWeight, italic, unit },

themes/cjs/index.js

@@ -233,2 +233,3 @@ 'use strict';
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -441,2 +442,3 @@ };
     border: border.input,
+    borderActive: border.inputActive,
     borderError: border.error
@@ -443,0 +445,0 @@ }

themes/index.js

@@ -229,2 +229,3 @@ function _defineProperty(obj, key, value) {
   inputHover: brand[500],
+  inputActive: brand[500],
   focusHalo: sport[500]
@@ -437,2 +438,3 @@ };
     border: border.input,
+    borderActive: border.inputActive,
     borderError: border.error
@@ -439,0 +441,0 @@ }

themes/text-input.d.ts

@@ -10,2 +10,3 @@ import { InlineErrorTheme } from "./inline-error";
     border: string;
+    borderActive: string;
     borderError: string;
@@ -12,0 +13,0 @@ };

typography/cjs/index.js

@@ -238,24 +238,26 @@ 'use strict';
 
-var fs = function fs(category, level, _ref) {
-  var lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight,
-      italic = _ref.italic,
-      unit = _ref.unit;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
-  // font is unavailable
+var fs = function fs(category) {
+  return function (level, _ref) {
+    var lineHeight = _ref.lineHeight,
+        fontWeight = _ref.fontWeight,
+        italic = _ref.italic,
+        unit = _ref.unit;
+    var fontFamilyValue = fontMapping[category];
+    var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+    var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : 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 Object.assign({
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    lineHeight: lineHeightValue
-  }, fontWeightValue ? {
-    fontWeight: fontWeightValue
-  } : {}, fontStyleValue ? {
-    fontStyle: fontStyleValue
-  } : {});
+    var requestedFont = availableFonts[category][fontWeight];
+    var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
+    var fontStyleValue = italic && requestedFont && requestedFont.hasItalic ? "italic" : "";
+    return Object.assign({
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      lineHeight: lineHeightValue
+    }, fontWeightValue ? {
+      fontWeight: fontWeightValue
+    } : {}, fontStyleValue ? {
+      fontStyle: fontStyleValue
+    } : {});
+  };
 };
@@ -269,3 +271,3 @@
 };
-var titlepieceFs = fs.bind(null, "titlepiece");
+var titlepieceFs = fs("titlepiece");
 var titlepiece = {
@@ -288,3 +290,3 @@ small: function small(options) {
 };
-var headlineFs = fs.bind(null, "headline");
+var headlineFs = fs("headline");
 var headline = {
@@ -319,3 +321,3 @@ xxxsmall: function xxxsmall(options) {
 };
-var bodyFs = fs.bind(null, "body");
+var bodyFs = fs("body");
 var body = {
@@ -335,3 +337,3 @@ small: function small(options) {
 };
-var textSansFs = fs.bind(null, "textSans");
+var textSansFs = fs("textSans");
 var textSans = {
@@ -338,0 +340,0 @@ xsmall: function xsmall(options) {

typography/data.d.ts

@@ -19,3 +19,3 @@ export declare type ScaleUnit = "rem" | "px";
 };
-export declare type Fs = (category: Category, level: string, { lineHeight, fontWeight, italic, unit, }: {
+export declare type Fs = (category: Category) => (level: string, { lineHeight, fontWeight, italic, unit, }: {
     lineHeight: LineHeight;
@@ -22,0 +22,0 @@ fontWeight: FontWeight;

typography/index.js

@@ -234,24 +234,26 @@ function _slicedToArray(arr, i) {
 
-var fs = function fs(category, level, _ref) {
-  var lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight,
-      italic = _ref.italic,
-      unit = _ref.unit;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
-  // font is unavailable
+var fs = function fs(category) {
+  return function (level, _ref) {
+    var lineHeight = _ref.lineHeight,
+        fontWeight = _ref.fontWeight,
+        italic = _ref.italic,
+        unit = _ref.unit;
+    var fontFamilyValue = fontMapping[category];
+    var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+    var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : 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 Object.assign({
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    lineHeight: lineHeightValue
-  }, fontWeightValue ? {
-    fontWeight: fontWeightValue
-  } : {}, fontStyleValue ? {
-    fontStyle: fontStyleValue
-  } : {});
+    var requestedFont = availableFonts[category][fontWeight];
+    var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
+    var fontStyleValue = italic && requestedFont && requestedFont.hasItalic ? "italic" : "";
+    return Object.assign({
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      lineHeight: lineHeightValue
+    }, fontWeightValue ? {
+      fontWeight: fontWeightValue
+    } : {}, fontStyleValue ? {
+      fontStyle: fontStyleValue
+    } : {});
+  };
 };
@@ -265,3 +267,3 @@
 };
-var titlepieceFs = fs.bind(null, "titlepiece");
+var titlepieceFs = fs("titlepiece");
 var titlepiece = {
@@ -284,3 +286,3 @@ small: function small(options) {
 };
-var headlineFs = fs.bind(null, "headline");
+var headlineFs = fs("headline");
 var headline = {
@@ -315,3 +317,3 @@ xxxsmall: function xxxsmall(options) {
 };
-var bodyFs = fs.bind(null, "body");
+var bodyFs = fs("body");
 var body = {
@@ -331,3 +333,3 @@ small: function small(options) {
 };
-var textSansFs = fs.bind(null, "textSans");
+var textSansFs = fs("textSans");
 var textSans = {
@@ -334,0 +336,0 @@ xsmall: function xsmall(options) {

typography/obj/cjs/index.js

@@ -196,24 +196,26 @@ 'use strict';
 
-var fs = function fs(category, level, _ref) {
-  var lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight,
-      italic = _ref.italic,
-      unit = _ref.unit;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
-  // font is unavailable
+var fs = function fs(category) {
+  return function (level, _ref) {
+    var lineHeight = _ref.lineHeight,
+        fontWeight = _ref.fontWeight,
+        italic = _ref.italic,
+        unit = _ref.unit;
+    var fontFamilyValue = fontMapping[category];
+    var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+    var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : 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 Object.assign({
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    lineHeight: lineHeightValue
-  }, fontWeightValue ? {
-    fontWeight: fontWeightValue
-  } : {}, fontStyleValue ? {
-    fontStyle: fontStyleValue
-  } : {});
+    var requestedFont = availableFonts[category][fontWeight];
+    var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
+    var fontStyleValue = italic && requestedFont && requestedFont.hasItalic ? "italic" : "";
+    return Object.assign({
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      lineHeight: lineHeightValue
+    }, fontWeightValue ? {
+      fontWeight: fontWeightValue
+    } : {}, fontStyleValue ? {
+      fontStyle: fontStyleValue
+    } : {});
+  };
 };
@@ -227,3 +229,3 @@
 };
-var titlepieceFs = fs.bind(null, "titlepiece");
+var titlepieceFs = fs("titlepiece");
 var titlepiece = {
@@ -246,3 +248,3 @@ small: function small(options) {
 };
-var headlineFs = fs.bind(null, "headline");
+var headlineFs = fs("headline");
 var headline = {
@@ -277,3 +279,3 @@ xxxsmall: function xxxsmall(options) {
 };
-var bodyFs = fs.bind(null, "body");
+var bodyFs = fs("body");
 var body = {
@@ -293,3 +295,3 @@ small: function small(options) {
 };
-var textSansFs = fs.bind(null, "textSans");
+var textSansFs = fs("textSans");
 var textSans = {
@@ -296,0 +298,0 @@ xsmall: function xsmall(options) {

typography/obj/index.js

@@ -192,24 +192,26 @@ // The theme file is based on the specification at https://system-ui.com/theme
 
-var fs = function fs(category, level, _ref) {
-  var lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight,
-      italic = _ref.italic,
-      unit = _ref.unit;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
-  // font is unavailable
+var fs = function fs(category) {
+  return function (level, _ref) {
+    var lineHeight = _ref.lineHeight,
+        fontWeight = _ref.fontWeight,
+        italic = _ref.italic,
+        unit = _ref.unit;
+    var fontFamilyValue = fontMapping[category];
+    var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+    var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : 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 Object.assign({
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    lineHeight: lineHeightValue
-  }, fontWeightValue ? {
-    fontWeight: fontWeightValue
-  } : {}, fontStyleValue ? {
-    fontStyle: fontStyleValue
-  } : {});
+    var requestedFont = availableFonts[category][fontWeight];
+    var fontWeightValue = requestedFont ? fontWeightMapping[fontWeight] : "";
+    var fontStyleValue = italic && requestedFont && requestedFont.hasItalic ? "italic" : "";
+    return Object.assign({
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      lineHeight: lineHeightValue
+    }, fontWeightValue ? {
+      fontWeight: fontWeightValue
+    } : {}, fontStyleValue ? {
+      fontStyle: fontStyleValue
+    } : {});
+  };
 };
@@ -223,3 +225,3 @@
 };
-var titlepieceFs = fs.bind(null, "titlepiece");
+var titlepieceFs = fs("titlepiece");
 var titlepiece = {
@@ -242,3 +244,3 @@ small: function small(options) {
 };
-var headlineFs = fs.bind(null, "headline");
+var headlineFs = fs("headline");
 var headline = {
@@ -273,3 +275,3 @@ xxxsmall: function xxxsmall(options) {
 };
-var bodyFs = fs.bind(null, "body");
+var bodyFs = fs("body");
 var body = {
@@ -289,3 +291,3 @@ small: function small(options) {
 };
-var textSansFs = fs.bind(null, "textSans");
+var textSansFs = fs("textSans");
 var textSans = {
@@ -292,0 +294,0 @@ xsmall: function xsmall(options) {

No alert changes

Improved metrics

Total package byte prevSize

197324

increased by0.26%

Lines of code

6978

increased by0.35%

No dependency changes