@guardian/src-foundations - npm Package Compare versions

Comparing version 1.9.0 to 2.0.0-rc.0

foundations.esm.js

@@ -11,5 +11,5 @@ // The theme file is based on the specification at https://system-ui.com/theme
   "#FF5943", //news-500
+  "#FF9081", //news-550, error-500
   "#FFBAC8", //news-600
-  "#FFF4F2", //news-800
-  "#FF9081" //error-500
+  "#FFF4F2" //news-800
   ],
@@ -84,3 +84,2 @@ oranges: ["#672005", //opinion-100
 var space = [0, 4, 8, 12, 16, 20, 24, 36, 48, 96];
-var size = [24, 36, 44];
 var breakpoints = [740, 980, 1140, 1300]; // Diverges from https://system-ui.com
@@ -117,9 +116,3 @@ // At these widths, there are tweaks to the
   600: colors.blues[11],
-  800: colors.blues[12],
-  // legacy names: please do not use
-  dark: colors.blues[8],
-  main: colors.blues[9],
-  bright: colors.blues[10],
-  pastel: colors.blues[11],
-  faded: colors.blues[12]
+  800: colors.blues[12]
 };
@@ -129,9 +122,4 @@ var brandAlt = {
   300: colors.yellows[1],
-  400: colors.yellows[2],
-  // legacy names: please do not use
-  dark: colors.yellows[1],
-  main: colors.yellows[2]
-}; // continue to expose legacy name for compatibility
-
-var brandYellow = brandAlt;
+  400: colors.yellows[2]
+};
 var neutral = {
@@ -151,12 +139,7 @@ 0: colors.grays[0],
   400: colors.reds[3],
-  500: colors.reds[7],
-  // legacy names: please do not use
-  main: colors.reds[3],
-  bright: colors.reds[7]
+  500: colors.reds[5]
 };
 var success = {
   400: colors.greens[1],
-  500: colors.greens[2],
-  // legacy names: please do not use
-  main: colors.greens[1]
+  500: colors.greens[2]
 };
@@ -169,10 +152,5 @@ var news = {
   500: colors.reds[4],
-  600: colors.reds[5],
-  800: colors.reds[6],
-  // legacy names: please do not use
-  dark: colors.reds[2],
-  main: colors.reds[3],
-  bright: colors.reds[4],
-  pastel: colors.reds[5],
-  faded: colors.reds[6]
+  550: colors.reds[5],
+  600: colors.reds[6],
+  800: colors.reds[7]
 };
@@ -186,9 +164,3 @@ var opinion = {
   600: colors.oranges[5],
-  800: colors.oranges[6],
-  // legacy names: please do not use
-  dark: colors.oranges[2],
-  main: colors.oranges[3],
-  bright: colors.oranges[4],
-  pastel: colors.oranges[5],
-  faded: colors.oranges[6]
+  800: colors.oranges[6]
 };
@@ -202,9 +174,3 @@ var sport = {
   600: colors.blues[5],
-  800: colors.blues[6],
-  // legacy names: please do not use
-  dark: colors.blues[2],
-  main: colors.blues[3],
-  bright: colors.blues[4],
-  pastel: colors.blues[5],
-  faded: colors.blues[6]
+  800: colors.blues[6]
 };
@@ -218,9 +184,3 @@ var culture = {
   600: colors.browns[5],
-  800: colors.browns[6],
-  // legacy names: please do not use
-  dark: colors.browns[2],
-  main: colors.browns[3],
-  bright: colors.browns[4],
-  pastel: colors.browns[5],
-  faded: colors.browns[6]
+  800: colors.browns[6]
 };
@@ -234,9 +194,3 @@ var lifestyle = {
   600: colors.pinks[5],
-  800: colors.pinks[6],
-  // legacy names: please do not use
-  dark: colors.pinks[2],
-  main: colors.pinks[3],
-  bright: colors.pinks[4],
-  pastel: colors.pinks[5],
-  faded: colors.pinks[6]
+  800: colors.pinks[6]
 };
@@ -246,6 +200,3 @@ var labs = {
   300: colors.greens[4],
-  400: colors.greens[5],
-  // legacy names: please do not use
-  dark: colors.greens[4],
-  main: colors.greens[5]
+  400: colors.greens[5]
 };
@@ -352,3 +303,4 @@ var specialReport = {
   groupLabel: neutral[7],
-  groupLabelSupporting: neutral[46]
+  groupLabelSupporting: neutral[46],
+  newsInverse: news[550]
 };
@@ -379,13 +331,2 @@
 
-/*
-This API is now deprecated. Use the values under
-@guardian/src-foundations/size instead
-*/
-
-var size$1 = {
-  xsmall: size[0],
-  small: size[1],
-  medium: size[2]
-};
-
 var rootPixelFontSize = 16;
@@ -441,3 +382,2 @@ var pxToRem = function pxToRem(px) {
   brandAlt: brandAlt,
-  brandYellow: brandYellow,
   neutral: neutral,
@@ -454,2 +394,2 @@ error: error,
 
-export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, brandYellow, breakpoints$1 as breakpoints, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, palette, remSpace, size$1 as size, space$1 as space, specialReport, sport, success, text, transitions$1 as transitions };
+export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, breakpoints$1 as breakpoints, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, palette, remSpace, space$1 as space, specialReport, sport, success, text, transitions$1 as transitions };

foundations.js

@@ -15,5 +15,5 @@ 'use strict';
   "#FF5943", //news-500
+  "#FF9081", //news-550, error-500
   "#FFBAC8", //news-600
-  "#FFF4F2", //news-800
-  "#FF9081" //error-500
+  "#FFF4F2" //news-800
   ],
@@ -88,3 +88,2 @@ oranges: ["#672005", //opinion-100
 var space = [0, 4, 8, 12, 16, 20, 24, 36, 48, 96];
-var size = [24, 36, 44];
 var breakpoints = [740, 980, 1140, 1300]; // Diverges from https://system-ui.com
@@ -121,9 +120,3 @@ // At these widths, there are tweaks to the
   600: colors.blues[11],
-  800: colors.blues[12],
-  // legacy names: please do not use
-  dark: colors.blues[8],
-  main: colors.blues[9],
-  bright: colors.blues[10],
-  pastel: colors.blues[11],
-  faded: colors.blues[12]
+  800: colors.blues[12]
 };
@@ -133,9 +126,4 @@ var brandAlt = {
   300: colors.yellows[1],
-  400: colors.yellows[2],
-  // legacy names: please do not use
-  dark: colors.yellows[1],
-  main: colors.yellows[2]
-}; // continue to expose legacy name for compatibility
-
-var brandYellow = brandAlt;
+  400: colors.yellows[2]
+};
 var neutral = {
@@ -155,12 +143,7 @@ 0: colors.grays[0],
   400: colors.reds[3],
-  500: colors.reds[7],
-  // legacy names: please do not use
-  main: colors.reds[3],
-  bright: colors.reds[7]
+  500: colors.reds[5]
 };
 var success = {
   400: colors.greens[1],
-  500: colors.greens[2],
-  // legacy names: please do not use
-  main: colors.greens[1]
+  500: colors.greens[2]
 };
@@ -173,10 +156,5 @@ var news = {
   500: colors.reds[4],
-  600: colors.reds[5],
-  800: colors.reds[6],
-  // legacy names: please do not use
-  dark: colors.reds[2],
-  main: colors.reds[3],
-  bright: colors.reds[4],
-  pastel: colors.reds[5],
-  faded: colors.reds[6]
+  550: colors.reds[5],
+  600: colors.reds[6],
+  800: colors.reds[7]
 };
@@ -190,9 +168,3 @@ var opinion = {
   600: colors.oranges[5],
-  800: colors.oranges[6],
-  // legacy names: please do not use
-  dark: colors.oranges[2],
-  main: colors.oranges[3],
-  bright: colors.oranges[4],
-  pastel: colors.oranges[5],
-  faded: colors.oranges[6]
+  800: colors.oranges[6]
 };
@@ -206,9 +178,3 @@ var sport = {
   600: colors.blues[5],
-  800: colors.blues[6],
-  // legacy names: please do not use
-  dark: colors.blues[2],
-  main: colors.blues[3],
-  bright: colors.blues[4],
-  pastel: colors.blues[5],
-  faded: colors.blues[6]
+  800: colors.blues[6]
 };
@@ -222,9 +188,3 @@ var culture = {
   600: colors.browns[5],
-  800: colors.browns[6],
-  // legacy names: please do not use
-  dark: colors.browns[2],
-  main: colors.browns[3],
-  bright: colors.browns[4],
-  pastel: colors.browns[5],
-  faded: colors.browns[6]
+  800: colors.browns[6]
 };
@@ -238,9 +198,3 @@ var lifestyle = {
   600: colors.pinks[5],
-  800: colors.pinks[6],
-  // legacy names: please do not use
-  dark: colors.pinks[2],
-  main: colors.pinks[3],
-  bright: colors.pinks[4],
-  pastel: colors.pinks[5],
-  faded: colors.pinks[6]
+  800: colors.pinks[6]
 };
@@ -250,6 +204,3 @@ var labs = {
   300: colors.greens[4],
-  400: colors.greens[5],
-  // legacy names: please do not use
-  dark: colors.greens[4],
-  main: colors.greens[5]
+  400: colors.greens[5]
 };
@@ -356,3 +307,4 @@ var specialReport = {
   groupLabel: neutral[7],
-  groupLabelSupporting: neutral[46]
+  groupLabelSupporting: neutral[46],
+  newsInverse: news[550]
 };
@@ -383,13 +335,2 @@
 
-/*
-This API is now deprecated. Use the values under
-@guardian/src-foundations/size instead
-*/
-
-var size$1 = {
-  xsmall: size[0],
-  small: size[1],
-  medium: size[2]
-};
-
 var rootPixelFontSize = 16;
@@ -445,3 +386,2 @@ var pxToRem = function pxToRem(px) {
   brandAlt: brandAlt,
-  brandYellow: brandYellow,
   neutral: neutral,
@@ -470,3 +410,2 @@ error: error,
 exports.brandText = brandText;
-exports.brandYellow = brandYellow;
 exports.breakpoints = breakpoints$1;
@@ -484,3 +423,2 @@ exports.culture = culture;
 exports.remSpace = remSpace;
-exports.size = size$1;
 exports.space = space$1;
@@ -487,0 +425,0 @@ exports.specialReport = specialReport;

index.d.ts

 export * from "./animation";
 export * from "./breakpoints";
 export * from "./palette";
-export * from "./size__legacy";
 export * from "./space";
@@ -51,2 +50,3 @@ export declare const palette: {
         groupLabelSupporting: string;
+        newsInverse: string;
     };
@@ -116,7 +116,2 @@ brandBackground: {
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -127,12 +122,3 @@ brandAlt: {
         400: string;
-        dark: string;
-        main: string;
     };
-    brandYellow: {
-        200: string;
-        300: string;
-        400: string;
-        dark: string;
-        main: string;
-    };
     neutral: {
@@ -153,4 +139,2 @@ 0: string;
         500: string;
-        main: string;
-        bright: string;
     };
@@ -160,3 +144,2 @@ success: {
         500: string;
-        main: string;
     };
@@ -169,9 +152,5 @@ news: {
         500: string;
+        550: string;
         600: string;
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -186,7 +165,2 @@ opinion: {
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -201,7 +175,2 @@ sport: {
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -216,7 +185,2 @@ culture: {
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -231,7 +195,2 @@ lifestyle: {
         800: string;
-        dark: string;
-        main: string;
-        bright: string;
-        pastel: string;
-        faded: string;
     };
@@ -242,5 +201,3 @@ labs: {
         400: string;
-        dark: string;
-        main: string;
     };
 };

package.json

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

palette/cjs/global.d.ts

@@ -8,7 +8,2 @@ export declare const brand: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -19,12 +14,3 @@ export declare const brandAlt: {
     400: string;
-    dark: string;
-    main: string;
 };
-export declare const brandYellow: {
-    200: string;
-    300: string;
-    400: string;
-    dark: string;
-    main: string;
-};
 export declare const neutral: {
@@ -45,4 +31,2 @@ 0: string;
     500: string;
-    main: string;
-    bright: string;
 };
@@ -52,3 +36,2 @@ export declare const success: {
     500: string;
-    main: string;
 };
@@ -61,9 +44,5 @@ export declare const news: {
     500: string;
+    550: string;
     600: string;
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -78,7 +57,2 @@ export declare const opinion: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -93,7 +67,2 @@ export declare const sport: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -108,7 +77,2 @@ export declare const culture: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -123,7 +87,2 @@ export declare const lifestyle: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -134,4 +93,2 @@ export declare const labs: {
     400: string;
-    dark: string;
-    main: string;
 };
@@ -138,0 +95,0 @@ export declare const specialReport: {

palette/cjs/index.js

@@ -15,5 +15,5 @@ 'use strict';
   "#FF5943", //news-500
+  "#FF9081", //news-550, error-500
   "#FFBAC8", //news-600
-  "#FFF4F2", //news-800
-  "#FF9081" //error-500
+  "#FFF4F2" //news-800
   ],
@@ -95,9 +95,3 @@ oranges: ["#672005", //opinion-100
   600: colors.blues[11],
-  800: colors.blues[12],
-  // legacy names: please do not use
-  dark: colors.blues[8],
-  main: colors.blues[9],
-  bright: colors.blues[10],
-  pastel: colors.blues[11],
-  faded: colors.blues[12]
+  800: colors.blues[12]
 };
@@ -107,9 +101,4 @@ var brandAlt = {
   300: colors.yellows[1],
-  400: colors.yellows[2],
-  // legacy names: please do not use
-  dark: colors.yellows[1],
-  main: colors.yellows[2]
-}; // continue to expose legacy name for compatibility
-
-var brandYellow = brandAlt;
+  400: colors.yellows[2]
+};
 var neutral = {
@@ -129,12 +118,7 @@ 0: colors.grays[0],
   400: colors.reds[3],
-  500: colors.reds[7],
-  // legacy names: please do not use
-  main: colors.reds[3],
-  bright: colors.reds[7]
+  500: colors.reds[5]
 };
 var success = {
   400: colors.greens[1],
-  500: colors.greens[2],
-  // legacy names: please do not use
-  main: colors.greens[1]
+  500: colors.greens[2]
 };
@@ -147,10 +131,5 @@ var news = {
   500: colors.reds[4],
-  600: colors.reds[5],
-  800: colors.reds[6],
-  // legacy names: please do not use
-  dark: colors.reds[2],
-  main: colors.reds[3],
-  bright: colors.reds[4],
-  pastel: colors.reds[5],
-  faded: colors.reds[6]
+  550: colors.reds[5],
+  600: colors.reds[6],
+  800: colors.reds[7]
 };
@@ -164,9 +143,3 @@ var opinion = {
   600: colors.oranges[5],
-  800: colors.oranges[6],
-  // legacy names: please do not use
-  dark: colors.oranges[2],
-  main: colors.oranges[3],
-  bright: colors.oranges[4],
-  pastel: colors.oranges[5],
-  faded: colors.oranges[6]
+  800: colors.oranges[6]
 };
@@ -180,9 +153,3 @@ var sport = {
   600: colors.blues[5],
-  800: colors.blues[6],
-  // legacy names: please do not use
-  dark: colors.blues[2],
-  main: colors.blues[3],
-  bright: colors.blues[4],
-  pastel: colors.blues[5],
-  faded: colors.blues[6]
+  800: colors.blues[6]
 };
@@ -196,9 +163,3 @@ var culture = {
   600: colors.browns[5],
-  800: colors.browns[6],
-  // legacy names: please do not use
-  dark: colors.browns[2],
-  main: colors.browns[3],
-  bright: colors.browns[4],
-  pastel: colors.browns[5],
-  faded: colors.browns[6]
+  800: colors.browns[6]
 };
@@ -212,9 +173,3 @@ var lifestyle = {
   600: colors.pinks[5],
-  800: colors.pinks[6],
-  // legacy names: please do not use
-  dark: colors.pinks[2],
-  main: colors.pinks[3],
-  bright: colors.pinks[4],
-  pastel: colors.pinks[5],
-  faded: colors.pinks[6]
+  800: colors.pinks[6]
 };
@@ -224,6 +179,3 @@ var labs = {
   300: colors.greens[4],
-  400: colors.greens[5],
-  // legacy names: please do not use
-  dark: colors.greens[4],
-  main: colors.greens[5]
+  400: colors.greens[5]
 };
@@ -330,3 +282,4 @@ var specialReport = {
   groupLabel: neutral[7],
-  groupLabelSupporting: neutral[46]
+  groupLabelSupporting: neutral[46],
+  newsInverse: news[550]
 };
@@ -369,3 +322,2 @@
 exports.brandText = brandText;
-exports.brandYellow = brandYellow;
 exports.culture = culture;
@@ -372,0 +324,0 @@ exports.dynamo = dynamo;

palette/cjs/text/default.d.ts

@@ -18,2 +18,3 @@ export declare const text: {
     groupLabelSupporting: string;
+    newsInverse: string;
 };

palette/global.d.ts

@@ -8,7 +8,2 @@ export declare const brand: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -19,12 +14,3 @@ export declare const brandAlt: {
     400: string;
-    dark: string;
-    main: string;
 };
-export declare const brandYellow: {
-    200: string;
-    300: string;
-    400: string;
-    dark: string;
-    main: string;
-};
 export declare const neutral: {
@@ -45,4 +31,2 @@ 0: string;
     500: string;
-    main: string;
-    bright: string;
 };
@@ -52,3 +36,2 @@ export declare const success: {
     500: string;
-    main: string;
 };
@@ -61,9 +44,5 @@ export declare const news: {
     500: string;
+    550: string;
     600: string;
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -78,7 +57,2 @@ export declare const opinion: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -93,7 +67,2 @@ export declare const sport: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -108,7 +77,2 @@ export declare const culture: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -123,7 +87,2 @@ export declare const lifestyle: {
     800: string;
-    dark: string;
-    main: string;
-    bright: string;
-    pastel: string;
-    faded: string;
 };
@@ -134,4 +93,2 @@ export declare const labs: {
     400: string;
-    dark: string;
-    main: string;
 };
@@ -138,0 +95,0 @@ export declare const specialReport: {

palette/index.js

@@ -11,5 +11,5 @@ // The theme file is based on the specification at https://system-ui.com/theme
   "#FF5943", //news-500
+  "#FF9081", //news-550, error-500
   "#FFBAC8", //news-600
-  "#FFF4F2", //news-800
-  "#FF9081" //error-500
+  "#FFF4F2" //news-800
   ],
@@ -91,9 +91,3 @@ oranges: ["#672005", //opinion-100
   600: colors.blues[11],
-  800: colors.blues[12],
-  // legacy names: please do not use
-  dark: colors.blues[8],
-  main: colors.blues[9],
-  bright: colors.blues[10],
-  pastel: colors.blues[11],
-  faded: colors.blues[12]
+  800: colors.blues[12]
 };
@@ -103,9 +97,4 @@ var brandAlt = {
   300: colors.yellows[1],
-  400: colors.yellows[2],
-  // legacy names: please do not use
-  dark: colors.yellows[1],
-  main: colors.yellows[2]
-}; // continue to expose legacy name for compatibility
-
-var brandYellow = brandAlt;
+  400: colors.yellows[2]
+};
 var neutral = {
@@ -125,12 +114,7 @@ 0: colors.grays[0],
   400: colors.reds[3],
-  500: colors.reds[7],
-  // legacy names: please do not use
-  main: colors.reds[3],
-  bright: colors.reds[7]
+  500: colors.reds[5]
 };
 var success = {
   400: colors.greens[1],
-  500: colors.greens[2],
-  // legacy names: please do not use
-  main: colors.greens[1]
+  500: colors.greens[2]
 };
@@ -143,10 +127,5 @@ var news = {
   500: colors.reds[4],
-  600: colors.reds[5],
-  800: colors.reds[6],
-  // legacy names: please do not use
-  dark: colors.reds[2],
-  main: colors.reds[3],
-  bright: colors.reds[4],
-  pastel: colors.reds[5],
-  faded: colors.reds[6]
+  550: colors.reds[5],
+  600: colors.reds[6],
+  800: colors.reds[7]
 };
@@ -160,9 +139,3 @@ var opinion = {
   600: colors.oranges[5],
-  800: colors.oranges[6],
-  // legacy names: please do not use
-  dark: colors.oranges[2],
-  main: colors.oranges[3],
-  bright: colors.oranges[4],
-  pastel: colors.oranges[5],
-  faded: colors.oranges[6]
+  800: colors.oranges[6]
 };
@@ -176,9 +149,3 @@ var sport = {
   600: colors.blues[5],
-  800: colors.blues[6],
-  // legacy names: please do not use
-  dark: colors.blues[2],
-  main: colors.blues[3],
-  bright: colors.blues[4],
-  pastel: colors.blues[5],
-  faded: colors.blues[6]
+  800: colors.blues[6]
 };
@@ -192,9 +159,3 @@ var culture = {
   600: colors.browns[5],
-  800: colors.browns[6],
-  // legacy names: please do not use
-  dark: colors.browns[2],
-  main: colors.browns[3],
-  bright: colors.browns[4],
-  pastel: colors.browns[5],
-  faded: colors.browns[6]
+  800: colors.browns[6]
 };
@@ -208,9 +169,3 @@ var lifestyle = {
   600: colors.pinks[5],
-  800: colors.pinks[6],
-  // legacy names: please do not use
-  dark: colors.pinks[2],
-  main: colors.pinks[3],
-  bright: colors.pinks[4],
-  pastel: colors.pinks[5],
-  faded: colors.pinks[6]
+  800: colors.pinks[6]
 };
@@ -220,6 +175,3 @@ var labs = {
   300: colors.greens[4],
-  400: colors.greens[5],
-  // legacy names: please do not use
-  dark: colors.greens[4],
-  main: colors.greens[5]
+  400: colors.greens[5]
 };
@@ -326,3 +278,4 @@ var specialReport = {
   groupLabel: neutral[7],
-  groupLabelSupporting: neutral[46]
+  groupLabelSupporting: neutral[46],
+  newsInverse: news[550]
 };
@@ -353,2 +306,2 @@
 
-export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, brandYellow, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, specialReport, sport, success, text };
+export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, culture, dynamo, error, labs, lifestyle, line, neutral, news, opinion, specialReport, sport, success, text };

palette/text/default.d.ts

@@ -18,2 +18,3 @@ export declare const text: {
     groupLabelSupporting: string;
+    newsInverse: string;
 };

src/index.ts

 export * from "./animation"
 export * from "./breakpoints"
 export * from "./palette"
-export * from "./size__legacy"
 export * from "./space"
@@ -34,3 +33,2 @@
 	brandAlt,
-	brandYellow,
 	neutral,
@@ -66,3 +64,2 @@ error,
 	brandAlt,
-	brandYellow,
 	neutral,
@@ -69,0 +66,0 @@ error,

src/palette/global.ts

@@ -31,9 +31,2 @@ // Global colour names that correspond to https://www.theguardian.design/2a1e5182b/p/938810-colour/b/587ef3
 	800: colors.blues[12],
-
-	// legacy names: please do not use
-	dark: colors.blues[8],
-	main: colors.blues[9],
-	bright: colors.blues[10],
-	pastel: colors.blues[11],
-	faded: colors.blues[12],
 }
@@ -44,9 +37,3 @@ export const brandAlt = {
 	400: colors.yellows[2],
-
-	// legacy names: please do not use
-	dark: colors.yellows[1],
-	main: colors.yellows[2],
 }
-// continue to expose legacy name for compatibility
-export const brandYellow = brandAlt
 export const neutral = {
@@ -66,7 +53,3 @@ 0: colors.grays[0],
 	400: colors.reds[3],
-	500: colors.reds[7],
-
-	// legacy names: please do not use
-	main: colors.reds[3],
-	bright: colors.reds[7],
+	500: colors.reds[5],
 }
@@ -76,5 +59,2 @@ export const success = {
 	500: colors.greens[2],
-
-	// legacy names: please do not use
-	main: colors.greens[1],
 }
@@ -87,11 +67,5 @@ export const news = {
 	500: colors.reds[4],
-	600: colors.reds[5],
-	800: colors.reds[6],
-
-	// legacy names: please do not use
-	dark: colors.reds[2],
-	main: colors.reds[3],
-	bright: colors.reds[4],
-	pastel: colors.reds[5],
-	faded: colors.reds[6],
+	550: colors.reds[5],
+	600: colors.reds[6],
+	800: colors.reds[7],
 }
@@ -106,9 +80,2 @@ export const opinion = {
 	800: colors.oranges[6],
-
-	// legacy names: please do not use
-	dark: colors.oranges[2],
-	main: colors.oranges[3],
-	bright: colors.oranges[4],
-	pastel: colors.oranges[5],
-	faded: colors.oranges[6],
 }
@@ -123,9 +90,2 @@ export const sport = {
 	800: colors.blues[6],
-
-	// legacy names: please do not use
-	dark: colors.blues[2],
-	main: colors.blues[3],
-	bright: colors.blues[4],
-	pastel: colors.blues[5],
-	faded: colors.blues[6],
 }
@@ -140,9 +100,2 @@ export const culture = {
 	800: colors.browns[6],
-
-	// legacy names: please do not use
-	dark: colors.browns[2],
-	main: colors.browns[3],
-	bright: colors.browns[4],
-	pastel: colors.browns[5],
-	faded: colors.browns[6],
 }
@@ -157,9 +110,2 @@ export const lifestyle = {
 	800: colors.pinks[6],
-
-	// legacy names: please do not use
-	dark: colors.pinks[2],
-	main: colors.pinks[3],
-	bright: colors.pinks[4],
-	pastel: colors.pinks[5],
-	faded: colors.pinks[6],
 }
@@ -170,6 +116,2 @@ export const labs = {
 	400: colors.greens[5],
-
-	// legacy names: please do not use
-	dark: colors.greens[4],
-	main: colors.greens[5],
 }
@@ -176,0 +118,0 @@

src/palette/text/default.ts

@@ -1,2 +0,8 @@
-import { neutral, error as _error, success as _success, brand } from "../global"
+import {
+	neutral,
+	error as _error,
+	success as _success,
+	brand,
+	news,
+} from "../global"
 
@@ -20,2 +26,3 @@ export const text = {
 	groupLabelSupporting: neutral[46],
+	newsInverse: news[550],
 }

src/theme.ts

@@ -51,5 +51,5 @@ // The theme file is based on the specification at https://system-ui.com/theme
 		"#FF5943", //news-500
+		"#FF9081", //news-550, error-500
 		"#FFBAC8", //news-600
 		"#FFF4F2", //news-800
-		"#FF9081", //error-500
 	],
@@ -56,0 +56,0 @@ oranges: [

src/themes/button.ts

@@ -70,5 +70,1 @@ import {
 }
-
-// continue to expose legacy theme names
-export const buttonLight = buttonDefault
-export const buttonBrandYellow = buttonBrandAlt

src/themes/checkbox.ts

@@ -59,4 +59,1 @@ import {
 }
-
-// continue to expose legacy theme names
-export const checkboxLight = checkboxDefault

src/themes/index.ts

@@ -12,25 +12,9 @@ export * from "./accordion"
 
-import {
-	buttonLight,
-	buttonBrand,
-	buttonBrandYellow,
-	buttonDefault,
-	buttonBrandAlt,
-} from "./button"
-import { checkboxLight, checkboxBrand, checkboxDefault } from "./checkbox"
+import { buttonBrand, buttonDefault, buttonBrandAlt } from "./button"
+import { checkboxBrand, checkboxDefault } from "./checkbox"
 import { choiceCardDefault } from "./choice-card"
-import {
-	inlineErrorLight,
-	inlineErrorBrand,
-	inlineErrorDefault,
-} from "./inline-error"
-import {
-	linkLight,
-	linkBrand,
-	linkBrandYellow,
-	linkDefault,
-	linkBrandAlt,
-} from "./link"
-import { radioLight, radioBrand, radioDefault } from "./radio"
-import { textInputLight, textInputDefault } from "./text-input"
+import { inlineErrorBrand, inlineErrorDefault } from "./inline-error"
+import { linkBrand, linkDefault, linkBrandAlt } from "./link"
+import { radioBrand, radioDefault } from "./radio"
+import { textInputDefault } from "./text-input"
 import { userFeedbackDefault, userFeedbackBrand } from "./user-feedback"
@@ -47,9 +31,2 @@
 	...userFeedbackDefault,
-	// continue to expose legacy theme names
-	...buttonLight,
-	...checkboxLight,
-	...inlineErrorLight,
-	...linkLight,
-	...radioLight,
-	...textInputLight,
 }
@@ -69,9 +46,2 @@
 	...linkBrandAlt,
-	// continue to expose legacy theme names
-	...buttonBrandYellow,
-	...linkBrandYellow,
 }
-
-// continue to expose legacy theme names
-export const light = defaultTheme
-export const brandYellow = brandAlt

src/themes/inline-error.ts

@@ -18,4 +18,1 @@ import { text, brandText } from "@guardian/src-foundations/palette"
 }
-
-// continue to expose legacy theme names
-export const inlineErrorLight = inlineErrorDefault

src/themes/link.ts

@@ -36,5 +36,1 @@ import {
 }
-
-// continue to expose legacy theme names
-export const linkLight = linkDefault
-export const linkBrandYellow = linkBrandAlt

src/themes/radio.ts

@@ -53,4 +53,1 @@ import {
 }
-
-// continue to expose legacy theme names
-export const radioLight = radioDefault

src/themes/text-input.ts

@@ -37,4 +37,1 @@ import { text, background, border } from "@guardian/src-foundations/palette"
 }
-
-// continue to expose legacy theme names
-export const textInputLight = textInputDefault

themes/button.d.ts

@@ -22,7 +22,1 @@ export declare type ButtonTheme = {
 };
-export declare const buttonLight: {
-    button: ButtonTheme;
-};
-export declare const buttonBrandYellow: {
-    button: ButtonTheme;
-};

themes/checkbox.d.ts

@@ -20,5 +20,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const checkboxLight: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
-};

themes/cjs/button.d.ts

@@ -22,7 +22,1 @@ export declare type ButtonTheme = {
 };
-export declare const buttonLight: {
-    button: ButtonTheme;
-};
-export declare const buttonBrandYellow: {
-    button: ButtonTheme;
-};

themes/cjs/checkbox.d.ts

@@ -20,5 +20,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const checkboxLight: {
-    checkbox: CheckboxTheme;
-    userFeedback: UserFeedbackTheme;
-};

themes/cjs/index.d.ts

@@ -12,10 +12,10 @@ export * from "./accordion";
 export declare const defaultTheme: {
+    userFeedback: import("./user-feedback").UserFeedbackTheme;
     textInput: import("./text-input").TextInputTheme;
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
     radio: import("./radio").RadioTheme;
     link: import("./link").LinkTheme;
     inlineError: import("./inline-error").InlineErrorTheme;
+    choiceCard: import("./choice-card").ChoiceCardTheme;
     checkbox: import("./checkbox").CheckboxTheme;
     button: import("./button").ButtonTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
 };
@@ -34,15 +34,1 @@ export declare const brand: {
 };
-export declare const light: {
-    textInput: import("./text-input").TextInputTheme;
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    radio: import("./radio").RadioTheme;
-    link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
-    button: import("./button").ButtonTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
-};
-export declare const brandYellow: {
-    link: import("./link").LinkTheme;
-    button: import("./button").ButtonTheme;
-};

themes/cjs/index.js

@@ -104,7 +104,4 @@ 'use strict';
   }
-}; // continue to expose legacy theme names
+};
 
-var buttonLight = buttonDefault;
-var buttonBrandYellow = buttonBrandAlt;
-
 var userFeedbackDefault = {
@@ -146,6 +143,4 @@ userFeedback: {
   }
-}, userFeedbackBrand); // continue to expose legacy theme names
+}, userFeedbackBrand);
 
-var checkboxLight = checkboxDefault;
-
 var choiceCardDefault = _objectSpread2({
@@ -178,6 +173,4 @@ choiceCard: {
   }
-}; // continue to expose legacy theme names
+};
 
-var inlineErrorLight = inlineErrorDefault;
-
 var linkDefault = {
@@ -202,7 +195,4 @@ link: {
   }
-}; // continue to expose legacy theme names
+};
 
-var linkLight = linkDefault;
-var linkBrandYellow = linkBrandAlt;
-
 var radioDefault = _objectSpread2({
@@ -227,6 +217,4 @@ radio: {
   }
-}, userFeedbackBrand); // continue to expose legacy theme names
+}, userFeedbackBrand);
 
-var radioLight = radioDefault;
-
 var selectDefault = _objectSpread2({
@@ -262,25 +250,16 @@ select: {
   }
-}, userFeedbackDefault); // continue to expose legacy theme names
+}, userFeedbackDefault);
 
-var textInputLight = textInputDefault;
-
-var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault), buttonLight), checkboxLight), inlineErrorLight), linkLight), radioLight), textInputLight);
+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 brandAlt = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt), buttonBrandYellow), linkBrandYellow); // continue to expose legacy theme names
+var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
 
-var light = defaultTheme;
-var brandYellow = brandAlt;
-
 exports.accordionDefault = accordionDefault;
 exports.brand = brand;
 exports.brandAlt = brandAlt;
-exports.brandYellow = brandYellow;
 exports.buttonBrand = buttonBrand;
 exports.buttonBrandAlt = buttonBrandAlt;
-exports.buttonBrandYellow = buttonBrandYellow;
 exports.buttonDefault = buttonDefault;
-exports.buttonLight = buttonLight;
 exports.checkboxBrand = checkboxBrand;
 exports.checkboxDefault = checkboxDefault;
-exports.checkboxLight = checkboxLight;
 exports.choiceCardDefault = choiceCardDefault;
@@ -290,16 +269,10 @@ exports.defaultTheme = defaultTheme;
 exports.inlineErrorDefault = inlineErrorDefault;
-exports.inlineErrorLight = inlineErrorLight;
-exports.light = light;
 exports.linkBrand = linkBrand;
 exports.linkBrandAlt = linkBrandAlt;
-exports.linkBrandYellow = linkBrandYellow;
 exports.linkDefault = linkDefault;
-exports.linkLight = linkLight;
 exports.radioBrand = radioBrand;
 exports.radioDefault = radioDefault;
-exports.radioLight = radioLight;
 exports.selectDefault = selectDefault;
 exports.textInputDefault = textInputDefault;
-exports.textInputLight = textInputLight;
 exports.userFeedbackBrand = userFeedbackBrand;
 exports.userFeedbackDefault = userFeedbackDefault;

themes/cjs/inline-error.d.ts

@@ -10,4 +10,1 @@ export declare type InlineErrorTheme = {
 };
-export declare const inlineErrorLight: {
-    inlineError: InlineErrorTheme;
-};

themes/cjs/link.d.ts

@@ -16,7 +16,1 @@ export declare type LinkTheme = {
 };
-export declare const linkLight: {
-    link: LinkTheme;
-};
-export declare const linkBrandYellow: {
-    link: LinkTheme;
-};

themes/cjs/radio.d.ts

@@ -18,5 +18,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const radioLight: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-};

themes/cjs/text-input.d.ts

@@ -19,5 +19,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const textInputLight: {
-    textInput: TextInputTheme;
-    userFeedback: UserFeedbackTheme;
-};

themes/index.d.ts

@@ -12,10 +12,10 @@ export * from "./accordion";
 export declare const defaultTheme: {
+    userFeedback: import("./user-feedback").UserFeedbackTheme;
     textInput: import("./text-input").TextInputTheme;
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
     radio: import("./radio").RadioTheme;
     link: import("./link").LinkTheme;
     inlineError: import("./inline-error").InlineErrorTheme;
+    choiceCard: import("./choice-card").ChoiceCardTheme;
     checkbox: import("./checkbox").CheckboxTheme;
     button: import("./button").ButtonTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
 };
@@ -34,15 +34,1 @@ export declare const brand: {
 };
-export declare const light: {
-    textInput: import("./text-input").TextInputTheme;
-    userFeedback: import("./user-feedback").UserFeedbackTheme;
-    radio: import("./radio").RadioTheme;
-    link: import("./link").LinkTheme;
-    inlineError: import("./inline-error").InlineErrorTheme;
-    checkbox: import("./checkbox").CheckboxTheme;
-    button: import("./button").ButtonTheme;
-    choiceCard: import("./choice-card").ChoiceCardTheme;
-};
-export declare const brandYellow: {
-    link: import("./link").LinkTheme;
-    button: import("./button").ButtonTheme;
-};

themes/index.js

@@ -100,7 +100,4 @@ import { text, border, background, brandText, brandBackground, brandBorder, brandAltText, brandAltBackground, brandAltBorder } from '@guardian/src-foundations/palette';
   }
-}; // continue to expose legacy theme names
+};
 
-var buttonLight = buttonDefault;
-var buttonBrandYellow = buttonBrandAlt;
-
 var userFeedbackDefault = {
@@ -142,6 +139,4 @@ userFeedback: {
   }
-}, userFeedbackBrand); // continue to expose legacy theme names
+}, userFeedbackBrand);
 
-var checkboxLight = checkboxDefault;
-
 var choiceCardDefault = _objectSpread2({
@@ -174,6 +169,4 @@ choiceCard: {
   }
-}; // continue to expose legacy theme names
+};
 
-var inlineErrorLight = inlineErrorDefault;
-
 var linkDefault = {
@@ -198,7 +191,4 @@ link: {
   }
-}; // continue to expose legacy theme names
+};
 
-var linkLight = linkDefault;
-var linkBrandYellow = linkBrandAlt;
-
 var radioDefault = _objectSpread2({
@@ -223,6 +213,4 @@ radio: {
   }
-}, userFeedbackBrand); // continue to expose legacy theme names
+}, userFeedbackBrand);
 
-var radioLight = radioDefault;
-
 var selectDefault = _objectSpread2({
@@ -258,13 +246,8 @@ select: {
   }
-}, userFeedbackDefault); // continue to expose legacy theme names
+}, userFeedbackDefault);
 
-var textInputLight = textInputDefault;
-
-var defaultTheme = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonDefault), checkboxDefault), choiceCardDefault), inlineErrorDefault), linkDefault), radioDefault), textInputDefault), userFeedbackDefault), buttonLight), checkboxLight), inlineErrorLight), linkLight), radioLight), textInputLight);
+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 brandAlt = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt), buttonBrandYellow), linkBrandYellow); // continue to expose legacy theme names
+var brandAlt = _objectSpread2(_objectSpread2({}, buttonBrandAlt), linkBrandAlt);
 
-var light = defaultTheme;
-var brandYellow = brandAlt;
-
-export { accordionDefault, brand, brandAlt, brandYellow, buttonBrand, buttonBrandAlt, buttonBrandYellow, buttonDefault, buttonLight, checkboxBrand, checkboxDefault, checkboxLight, choiceCardDefault, defaultTheme, inlineErrorBrand, inlineErrorDefault, inlineErrorLight, light, linkBrand, linkBrandAlt, linkBrandYellow, linkDefault, linkLight, radioBrand, radioDefault, radioLight, selectDefault, textInputDefault, textInputLight, userFeedbackBrand, userFeedbackDefault };
+export { accordionDefault, brand, brandAlt, buttonBrand, buttonBrandAlt, buttonDefault, checkboxBrand, checkboxDefault, choiceCardDefault, defaultTheme, inlineErrorBrand, inlineErrorDefault, linkBrand, linkBrandAlt, linkDefault, radioBrand, radioDefault, selectDefault, textInputDefault, userFeedbackBrand, userFeedbackDefault };

themes/inline-error.d.ts

@@ -10,4 +10,1 @@ export declare type InlineErrorTheme = {
 };
-export declare const inlineErrorLight: {
-    inlineError: InlineErrorTheme;
-};

themes/link.d.ts

@@ -16,7 +16,1 @@ export declare type LinkTheme = {
 };
-export declare const linkLight: {
-    link: LinkTheme;
-};
-export declare const linkBrandYellow: {
-    link: LinkTheme;
-};

themes/radio.d.ts

@@ -18,5 +18,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const radioLight: {
-    radio: RadioTheme;
-    userFeedback: UserFeedbackTheme;
-};

themes/text-input.d.ts

@@ -19,5 +19,1 @@ import { UserFeedbackTheme } from "./user-feedback";
 };
-export declare const textInputLight: {
-    textInput: TextInputTheme;
-    userFeedback: UserFeedbackTheme;
-};

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

Worsened metrics

Total package byte prevSize

216226

decreased by-6.83%

Number of package files

169

decreased by-0.59%

Lines of code

7496

decreased by-6.73%

Number of low quality alerts

2

increased by100%

No dependency changes