@skyscanner/bpk-foundations-web - npm Package Compare versions

Comparing version 8.2.1 to 8.3.0

package.json

 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Common Backpack design tokens for colors, spacing, font, etc.",
@@ -20,6 +20,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@skyscanner/bpk-foundations-common": "^2.5.1",
+    "@skyscanner/bpk-foundations-common": "^2.6.0",
     "color": "^3.0.0"
   },
-  "gitHead": "6e81f66d8dec3df04abea2ad3bfcd951ae53276b"
+  "gitHead": "0a391c3a90ba0bedf9c7f528e57a6fb42b4eeca2"
 }

tokens/base.common.js

@@ -278,4 +278,2 @@ /*
   colorBlackTint06: "rgb(142, 142, 147)",
-  colorBlueBright: "rgb(161, 238, 255)",
-  colorBlueMuted: "rgb(217, 248, 255)",
   colorBunol: "rgb(255, 123, 89)",
@@ -287,3 +285,2 @@ colorCharcoal: "rgb(17, 18, 54)",
   colorGlencoe: "rgb(115, 206, 198)",
-  colorGreenBright: "rgb(147, 255, 222)",
   colorGreenMuted: "rgb(208, 238, 236)",
@@ -313,9 +310,6 @@ colorGreenSpot: "rgb(0, 166, 152)",
   colorNightYellowSpot: "rgb(255, 181, 77)",
-  colorOrange: "rgb(255, 123, 89)",
   colorPanjin: "rgb(209, 67, 91)",
   colorPetra: "rgb(255, 171, 149)",
-  colorPink: "rgb(255, 163, 229)",
   colorPinkMuted: "rgb(246, 221, 225)",
   colorPrimaryGradientLight: "rgb(7, 112, 227)",
-  colorPurple: "rgb(142, 71, 186)",
   colorSagano: "rgb(208, 238, 236)",
@@ -344,3 +338,2 @@ colorSkyBlue: "rgb(7, 112, 227)",
   colorWhiteAlpha80: "rgb(142, 142, 147)",
-  colorYellow: "rgb(254, 235, 135)",
   colorYellowMuted: "rgb(255, 235, 208)",
@@ -467,2 +460,19 @@ coreAccentDay: "rgb(7, 112, 227)",
   listNestedMarginTop: "0",
+  marcommsBerry: "rgb(209, 67, 91)",
+  marcommsBlueBright: "rgb(161, 238, 255)",
+  marcommsBlueMuted: "rgb(217, 248, 255)",
+  marcommsCharcoal: "rgb(17, 18, 54)",
+  marcommsDarkSky: "rgb(2, 18, 44)",
+  marcommsEcoGreen: "rgb(15, 161, 169)",
+  marcommsGreenBright: "rgb(147, 255, 222)",
+  marcommsGreenMuted: "rgb(208, 238, 236)",
+  marcommsGrey40: "rgb(104, 105, 127)",
+  marcommsOrange: "rgb(255, 123, 89)",
+  marcommsPink: "rgb(255, 163, 229)",
+  marcommsPinkMuted: "rgb(246, 221, 225)",
+  marcommsPurple: "rgb(142, 71, 186)",
+  marcommsSkyBlue: "rgb(7, 112, 227)",
+  marcommsWhite: "rgb(255, 255, 255)",
+  marcommsYellow: "rgb(254, 235, 135)",
+  marcommsYellowMuted: "rgb(255, 235, 208)",
   modalBackgroundColor: "rgb(255, 255, 255)",
@@ -469,0 +479,0 @@ modalContentPadding: "1rem",

tokens/base.es6.js

@@ -276,4 +276,2 @@ /*
 export const colorBlackTint06 = "rgb(142, 142, 147)";
-export const colorBlueBright = "rgb(161, 238, 255)";
-export const colorBlueMuted = "rgb(217, 248, 255)";
 export const colorBunol = "rgb(255, 123, 89)";
@@ -285,3 +283,2 @@ export const colorCharcoal = "rgb(17, 18, 54)";
 export const colorGlencoe = "rgb(115, 206, 198)";
-export const colorGreenBright = "rgb(147, 255, 222)";
 export const colorGreenMuted = "rgb(208, 238, 236)";
@@ -311,9 +308,6 @@ export const colorGreenSpot = "rgb(0, 166, 152)";
 export const colorNightYellowSpot = "rgb(255, 181, 77)";
-export const colorOrange = "rgb(255, 123, 89)";
 export const colorPanjin = "rgb(209, 67, 91)";
 export const colorPetra = "rgb(255, 171, 149)";
-export const colorPink = "rgb(255, 163, 229)";
 export const colorPinkMuted = "rgb(246, 221, 225)";
 export const colorPrimaryGradientLight = "rgb(7, 112, 227)";
-export const colorPurple = "rgb(142, 71, 186)";
 export const colorSagano = "rgb(208, 238, 236)";
@@ -342,3 +336,2 @@ export const colorSkyBlue = "rgb(7, 112, 227)";
 export const colorWhiteAlpha80 = "rgb(142, 142, 147)";
-export const colorYellow = "rgb(254, 235, 135)";
 export const colorYellowMuted = "rgb(255, 235, 208)";
@@ -465,2 +458,19 @@ export const coreAccentDay = "rgb(7, 112, 227)";
 export const listNestedMarginTop = "0";
+export const marcommsBerry = "rgb(209, 67, 91)";
+export const marcommsBlueBright = "rgb(161, 238, 255)";
+export const marcommsBlueMuted = "rgb(217, 248, 255)";
+export const marcommsCharcoal = "rgb(17, 18, 54)";
+export const marcommsDarkSky = "rgb(2, 18, 44)";
+export const marcommsEcoGreen = "rgb(15, 161, 169)";
+export const marcommsGreenBright = "rgb(147, 255, 222)";
+export const marcommsGreenMuted = "rgb(208, 238, 236)";
+export const marcommsGrey40 = "rgb(104, 105, 127)";
+export const marcommsOrange = "rgb(255, 123, 89)";
+export const marcommsPink = "rgb(255, 163, 229)";
+export const marcommsPinkMuted = "rgb(246, 221, 225)";
+export const marcommsPurple = "rgb(142, 71, 186)";
+export const marcommsSkyBlue = "rgb(7, 112, 227)";
+export const marcommsWhite = "rgb(255, 255, 255)";
+export const marcommsYellow = "rgb(254, 235, 135)";
+export const marcommsYellowMuted = "rgb(255, 235, 208)";
 export const modalBackgroundColor = "rgb(255, 255, 255)";
@@ -860,4 +870,2 @@ export const modalContentPadding = "1rem";
 colorBlackTint06,
-colorBlueBright,
-colorBlueMuted,
 colorBunol,
@@ -869,3 +877,2 @@ colorCharcoal,
 colorGlencoe,
-colorGreenBright,
 colorGreenMuted,
@@ -895,9 +902,6 @@ colorGreenSpot,
 colorNightYellowSpot,
-colorOrange,
 colorPanjin,
 colorPetra,
-colorPink,
 colorPinkMuted,
 colorPrimaryGradientLight,
-colorPurple,
 colorSagano,
@@ -926,3 +930,2 @@ colorSkyBlue,
 colorWhiteAlpha80,
-colorYellow,
 colorYellowMuted,
@@ -1069,2 +1072,21 @@ lineDarkColor,
 };
+export const marcommsColors = {
+marcommsBerry,
+marcommsBlueBright,
+marcommsBlueMuted,
+marcommsCharcoal,
+marcommsDarkSky,
+marcommsEcoGreen,
+marcommsGreenBright,
+marcommsGreenMuted,
+marcommsGrey40,
+marcommsOrange,
+marcommsPink,
+marcommsPinkMuted,
+marcommsPurple,
+marcommsSkyBlue,
+marcommsWhite,
+marcommsYellow,
+marcommsYellowMuted,
+};
 export const modals = {
@@ -1071,0 +1093,0 @@ modalBackgroundColor,

tokens/breakpoints.common.js

@@ -74,4 +74,2 @@ /*
   colorBlackTint06: "rgb(142, 142, 147)",
-  colorBlueBright: "rgb(161, 238, 255)",
-  colorBlueMuted: "rgb(217, 248, 255)",
   colorBunol: "rgb(255, 123, 89)",
@@ -83,3 +81,2 @@ colorCharcoal: "rgb(17, 18, 54)",
   colorGlencoe: "rgb(115, 206, 198)",
-  colorGreenBright: "rgb(147, 255, 222)",
   colorGreenMuted: "rgb(208, 238, 236)",
@@ -109,9 +106,6 @@ colorGreenSpot: "rgb(0, 166, 152)",
   colorNightYellowSpot: "rgb(255, 181, 77)",
-  colorOrange: "rgb(255, 123, 89)",
   colorPanjin: "rgb(209, 67, 91)",
   colorPetra: "rgb(255, 171, 149)",
-  colorPink: "rgb(255, 163, 229)",
   colorPinkMuted: "rgb(246, 221, 225)",
   colorPrimaryGradientLight: "rgb(7, 112, 227)",
-  colorPurple: "rgb(142, 71, 186)",
   colorSagano: "rgb(208, 238, 236)",
@@ -140,3 +134,2 @@ colorSkyBlue: "rgb(7, 112, 227)",
   colorWhiteAlpha80: "rgb(142, 142, 147)",
-  colorYellow: "rgb(254, 235, 135)",
   colorYellowMuted: "rgb(255, 235, 208)",
@@ -153,2 +146,19 @@ coreAccentDay: "rgb(7, 112, 227)",
   lineNight: "rgb(72, 72, 74)",
+  marcommsBerry: "rgb(209, 67, 91)",
+  marcommsBlueBright: "rgb(161, 238, 255)",
+  marcommsBlueMuted: "rgb(217, 248, 255)",
+  marcommsCharcoal: "rgb(17, 18, 54)",
+  marcommsDarkSky: "rgb(2, 18, 44)",
+  marcommsEcoGreen: "rgb(15, 161, 169)",
+  marcommsGreenBright: "rgb(147, 255, 222)",
+  marcommsGreenMuted: "rgb(208, 238, 236)",
+  marcommsGrey40: "rgb(104, 105, 127)",
+  marcommsOrange: "rgb(255, 123, 89)",
+  marcommsPink: "rgb(255, 163, 229)",
+  marcommsPinkMuted: "rgb(246, 221, 225)",
+  marcommsPurple: "rgb(142, 71, 186)",
+  marcommsSkyBlue: "rgb(7, 112, 227)",
+  marcommsWhite: "rgb(255, 255, 255)",
+  marcommsYellow: "rgb(254, 235, 135)",
+  marcommsYellowMuted: "rgb(255, 235, 208)",
   primaryDarkColor: "rgb(109, 159, 235)",
@@ -155,0 +165,0 @@ primaryLightColor: "rgb(7, 112, 227)",

tokens/breakpoints.es6.js

@@ -72,4 +72,2 @@ /*
 export const colorBlackTint06 = "rgb(142, 142, 147)";
-export const colorBlueBright = "rgb(161, 238, 255)";
-export const colorBlueMuted = "rgb(217, 248, 255)";
 export const colorBunol = "rgb(255, 123, 89)";
@@ -81,3 +79,2 @@ export const colorCharcoal = "rgb(17, 18, 54)";
 export const colorGlencoe = "rgb(115, 206, 198)";
-export const colorGreenBright = "rgb(147, 255, 222)";
 export const colorGreenMuted = "rgb(208, 238, 236)";
@@ -107,9 +104,6 @@ export const colorGreenSpot = "rgb(0, 166, 152)";
 export const colorNightYellowSpot = "rgb(255, 181, 77)";
-export const colorOrange = "rgb(255, 123, 89)";
 export const colorPanjin = "rgb(209, 67, 91)";
 export const colorPetra = "rgb(255, 171, 149)";
-export const colorPink = "rgb(255, 163, 229)";
 export const colorPinkMuted = "rgb(246, 221, 225)";
 export const colorPrimaryGradientLight = "rgb(7, 112, 227)";
-export const colorPurple = "rgb(142, 71, 186)";
 export const colorSagano = "rgb(208, 238, 236)";
@@ -138,3 +132,2 @@ export const colorSkyBlue = "rgb(7, 112, 227)";
 export const colorWhiteAlpha80 = "rgb(142, 142, 147)";
-export const colorYellow = "rgb(254, 235, 135)";
 export const colorYellowMuted = "rgb(255, 235, 208)";
@@ -151,2 +144,19 @@ export const coreAccentDay = "rgb(7, 112, 227)";
 export const lineNight = "rgb(72, 72, 74)";
+export const marcommsBerry = "rgb(209, 67, 91)";
+export const marcommsBlueBright = "rgb(161, 238, 255)";
+export const marcommsBlueMuted = "rgb(217, 248, 255)";
+export const marcommsCharcoal = "rgb(17, 18, 54)";
+export const marcommsDarkSky = "rgb(2, 18, 44)";
+export const marcommsEcoGreen = "rgb(15, 161, 169)";
+export const marcommsGreenBright = "rgb(147, 255, 222)";
+export const marcommsGreenMuted = "rgb(208, 238, 236)";
+export const marcommsGrey40 = "rgb(104, 105, 127)";
+export const marcommsOrange = "rgb(255, 123, 89)";
+export const marcommsPink = "rgb(255, 163, 229)";
+export const marcommsPinkMuted = "rgb(246, 221, 225)";
+export const marcommsPurple = "rgb(142, 71, 186)";
+export const marcommsSkyBlue = "rgb(7, 112, 227)";
+export const marcommsWhite = "rgb(255, 255, 255)";
+export const marcommsYellow = "rgb(254, 235, 135)";
+export const marcommsYellowMuted = "rgb(255, 235, 208)";
 export const primaryDarkColor = "rgb(109, 159, 235)";
@@ -249,4 +259,2 @@ export const primaryLightColor = "rgb(7, 112, 227)";
 colorBlackTint06,
-colorBlueBright,
-colorBlueMuted,
 colorBunol,
@@ -258,3 +266,2 @@ colorCharcoal,
 colorGlencoe,
-colorGreenBright,
 colorGreenMuted,
@@ -284,9 +291,6 @@ colorGreenSpot,
 colorNightYellowSpot,
-colorOrange,
 colorPanjin,
 colorPetra,
-colorPink,
 colorPinkMuted,
 colorPrimaryGradientLight,
-colorPurple,
 colorSagano,
@@ -315,3 +319,2 @@ colorSkyBlue,
 colorWhiteAlpha80,
-colorYellow,
 colorYellowMuted,
@@ -335,2 +338,21 @@ lineDarkColor,
 };
+export const marcommsColors = {
+marcommsBerry,
+marcommsBlueBright,
+marcommsBlueMuted,
+marcommsCharcoal,
+marcommsDarkSky,
+marcommsEcoGreen,
+marcommsGreenBright,
+marcommsGreenMuted,
+marcommsGrey40,
+marcommsOrange,
+marcommsPink,
+marcommsPinkMuted,
+marcommsPurple,
+marcommsSkyBlue,
+marcommsWhite,
+marcommsYellow,
+marcommsYellowMuted,
+};
 export const scrimColors = {
@@ -337,0 +359,0 @@ scrimDay,

tokens/breakpoints.raw.json

@@ -51,5 +51,2 @@ {
     },
-    "BLUE_MUTED": {
-      "value": "#D9F8FF"
-    },
     "BLACK_TINT_02": {
@@ -115,5 +112,2 @@ "value": "#2C2C2E"
     },
-    "ORANGE": {
-      "value": "#FF7B59"
-    },
     "PETRA": {
@@ -137,5 +131,2 @@ "value": "#ffab95"
     },
-    "YELLOW": {
-      "value": "#FEEB87"
-    },
     "WHITE_ALPHA_20": {
@@ -156,5 +147,2 @@ "value": "#8E8E93"
     },
-    "PINK": {
-      "value": "#FFA3E5"
-    },
     "NIGHT_GREY_30": {
@@ -166,5 +154,2 @@ "value": "#48484A"
     },
-    "GREEN_BRIGHT": {
-      "value": "#93FFDE"
-    },
     "NIGHT_GREY_20": {
@@ -203,5 +188,2 @@ "value": "#2C2C2E"
     },
-    "PURPLE": {
-      "value": "#8E47BA"
-    },
     "GREY_40": {
@@ -234,5 +216,2 @@ "value": "#68697F"
     },
-    "BLUE_BRIGHT": {
-      "value": "#A1EEFF"
-    },
     "VALENSOLE": {
@@ -531,9 +510,2 @@ "value": "#a59bc8"
     },
-    "COLOR_BLUE_MUTED": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(217, 248, 255)",
-      "originalValue": "{!BLUE_MUTED}",
-      "name": "COLOR_BLUE_MUTED"
-    },
     "COLOR_VALENSOLE": {
@@ -560,9 +532,2 @@ "type": "color",
     },
-    "COLOR_BLUE_BRIGHT": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(161, 238, 255)",
-      "originalValue": "{!BLUE_BRIGHT}",
-      "name": "COLOR_BLUE_BRIGHT"
-    },
     "COLOR_SKY_GRAY_TINT_01": {
@@ -666,9 +631,2 @@ "type": "color",
     },
-    "COLOR_ORANGE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(255, 123, 89)",
-      "originalValue": "{!ORANGE}",
-      "name": "COLOR_ORANGE"
-    },
     "COLOR_ABISKO": {
@@ -758,9 +716,2 @@ "type": "color",
     },
-    "COLOR_YELLOW": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(254, 235, 135)",
-      "originalValue": "{!YELLOW}",
-      "name": "COLOR_YELLOW"
-    },
     "COLOR_WHITE_ALPHA_20": {
@@ -773,16 +724,2 @@ "type": "color",
     },
-    "COLOR_PINK": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(255, 163, 229)",
-      "originalValue": "{!PINK}",
-      "name": "COLOR_PINK"
-    },
-    "COLOR_GREEN_BRIGHT": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(147, 255, 222)",
-      "originalValue": "{!GREEN_BRIGHT}",
-      "name": "COLOR_GREEN_BRIGHT"
-    },
     "COLOR_PETRA": {
@@ -830,9 +767,2 @@ "type": "color",
     },
-    "COLOR_PURPLE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(142, 71, 186)",
-      "originalValue": "{!PURPLE}",
-      "name": "COLOR_PURPLE"
-    },
     "COLOR_BAGAN": {
@@ -1554,2 +1484,121 @@ "type": "color",
     },
+    "MARCOMMS_BERRY": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(209, 67, 91)",
+      "originalValue": "#D1435B",
+      "name": "MARCOMMS_BERRY"
+    },
+    "MARCOMMS_CHARCOAL": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(17, 18, 54)",
+      "originalValue": "#111236",
+      "name": "MARCOMMS_CHARCOAL"
+    },
+    "MARCOMMS_ORANGE": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(255, 123, 89)",
+      "originalValue": "#FF7B59",
+      "name": "MARCOMMS_ORANGE"
+    },
+    "MARCOMMS_GREY_40": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(104, 105, 127)",
+      "originalValue": "#68697F",
+      "name": "MARCOMMS_GREY_40"
+    },
+    "MARCOMMS_BLUE_BRIGHT": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(161, 238, 255)",
+      "originalValue": "#A1EEFF",
+      "name": "MARCOMMS_BLUE_BRIGHT"
+    },
+    "MARCOMMS_YELLOW": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(254, 235, 135)",
+      "originalValue": "#FEEB87",
+      "name": "MARCOMMS_YELLOW"
+    },
+    "MARCOMMS_GREEN_BRIGHT": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(147, 255, 222)",
+      "originalValue": "#93FFDE",
+      "name": "MARCOMMS_GREEN_BRIGHT"
+    },
+    "MARCOMMS_PINK": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(255, 163, 229)",
+      "originalValue": "#FFA3E5",
+      "name": "MARCOMMS_PINK"
+    },
+    "MARCOMMS_SKY_BLUE": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(7, 112, 227)",
+      "originalValue": "#0770e3",
+      "name": "MARCOMMS_SKY_BLUE"
+    },
+    "MARCOMMS_DARK_SKY": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(2, 18, 44)",
+      "originalValue": "#02122C",
+      "name": "MARCOMMS_DARK_SKY"
+    },
+    "MARCOMMS_PURPLE": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(142, 71, 186)",
+      "originalValue": "#8E47BA",
+      "name": "MARCOMMS_PURPLE"
+    },
+    "MARCOMMS_WHITE": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "#ffffff",
+      "name": "MARCOMMS_WHITE"
+    },
+    "MARCOMMS_YELLOW_MUTED": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(255, 235, 208)",
+      "originalValue": "#FFEBD0",
+      "name": "MARCOMMS_YELLOW_MUTED"
+    },
+    "MARCOMMS_PINK_MUTED": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(246, 221, 225)",
+      "originalValue": "#F6DDE1",
+      "name": "MARCOMMS_PINK_MUTED"
+    },
+    "MARCOMMS_GREEN_MUTED": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(208, 238, 236)",
+      "originalValue": "#D0EEEC",
+      "name": "MARCOMMS_GREEN_MUTED"
+    },
+    "MARCOMMS_BLUE_MUTED": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(217, 248, 255)",
+      "originalValue": "#D9F8FF",
+      "name": "MARCOMMS_BLUE_MUTED"
+    },
+    "MARCOMMS_ECO_GREEN": {
+      "type": "color",
+      "category": "marcomms-colors",
+      "value": "rgb(15, 161, 169)",
+      "originalValue": "#0FA1A9",
+      "name": "MARCOMMS_ECO_GREEN"
+    },
     "BREAKPOINT_QUERY_TABLET_ONLY": {
@@ -1556,0 +1605,0 @@ "category": "breakpoints",

No alert changes

Improved metrics

Total package byte prevSize

407137

increased by2.3%

Lines of code

9013

increased by1.83%

Dependency changes

• Updated@skyscanner/bpk-foundations-common@^2.6.0