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

Comparing version 8.1.1 to 8.2.0

package.json

 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "8.1.1",
+  "version": "8.2.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.4.1",
+    "@skyscanner/bpk-foundations-common": "^2.5.0",
     "color": "^3.0.0"
   },
-  "gitHead": "1cbebbbd25cbe52f8516c8e0fe7cf5be8ab80780"
+  "gitHead": "d03c0ab60d643956ad6e9b0c20c4c8135a25c49d"
 }

tokens/base.common.js

@@ -270,2 +270,3 @@ /*
   colorBlack: "rgb(0, 0, 0)",
+  colorBlackAlpha20: "rgb(178, 178, 191)",
   colorBlackTint01: "rgb(29, 27, 32)",
@@ -318,2 +319,3 @@ colorBlackTint02: "rgb(44, 44, 46)",
   colorSagano: "rgb(208, 238, 236)",
+  colorScrim: "rgb(2, 18, 44)",
   colorSkyBlue: "rgb(7, 112, 227)",
@@ -339,2 +341,4 @@ colorSkyBlueShade01: "rgb(8, 78, 178)",
   colorWhite: "rgb(255, 255, 255)",
+  colorWhiteAlpha20: "rgb(142, 142, 147)",
+  colorWhiteAlpha80: "rgb(142, 142, 147)",
   colorYellow: "rgb(254, 235, 135)",
@@ -489,6 +493,6 @@ colorYellowMuted: "rgb(255, 235, 208)",
   scrimDarkOpacity: ".95",
-  scrimDay: "rgb(205, 205, 215)",
+  scrimDay: "rgb(2, 18, 44)",
   scrimInitialOpacity: "0",
   scrimMobileOpacity: "1",
-  scrimNight: "rgb(72, 72, 74)",
+  scrimNight: "rgb(2, 18, 44)",
   scrimOpacity: ".7",
@@ -548,4 +552,4 @@ selectBorder: "solid .0625rem #B2B2BF",
   textBaseLineHeight: "1.5rem",
-  textDisabledDay: "rgb(0, 0, 0)",
-  textDisabledNight: "rgb(255, 255, 255)",
+  textDisabledDay: "rgb(178, 178, 191)",
+  textDisabledNight: "rgb(142, 142, 147)",
   textErrorDay: "rgb(209, 67, 91)",
@@ -563,2 +567,4 @@ textErrorNight: "rgb(209, 67, 91)",
   textPrimaryNight: "rgb(255, 255, 255)",
+  textPrimaryOnContrastDay: "rgb(255, 255, 255)",
+  textPrimaryOnContrastNight: "rgb(255, 255, 255)",
   textQuaternaryDarkColor: "rgb(142, 142, 147)",
@@ -570,2 +576,4 @@ textQuaternaryLightColor: "rgb(143, 144, 160)",
   textSecondaryNight: "rgb(178, 178, 191)",
+  textSecondaryOnContrastDay: "rgb(142, 142, 147)",
+  textSecondaryOnContrastNight: "rgb(142, 142, 147)",
   textSmFontSize: ".875rem",
@@ -572,0 +580,0 @@ textSmFontWeight: "400",

tokens/base.es6.js

@@ -268,2 +268,3 @@ /*
 export const colorBlack = "rgb(0, 0, 0)";
+export const colorBlackAlpha20 = "rgb(178, 178, 191)";
 export const colorBlackTint01 = "rgb(29, 27, 32)";
@@ -316,2 +317,3 @@ export const colorBlackTint02 = "rgb(44, 44, 46)";
 export const colorSagano = "rgb(208, 238, 236)";
+export const colorScrim = "rgb(2, 18, 44)";
 export const colorSkyBlue = "rgb(7, 112, 227)";
@@ -337,2 +339,4 @@ export const colorSkyBlueShade01 = "rgb(8, 78, 178)";
 export const colorWhite = "rgb(255, 255, 255)";
+export const colorWhiteAlpha20 = "rgb(142, 142, 147)";
+export const colorWhiteAlpha80 = "rgb(142, 142, 147)";
 export const colorYellow = "rgb(254, 235, 135)";
@@ -487,6 +491,6 @@ export const colorYellowMuted = "rgb(255, 235, 208)";
 export const scrimDarkOpacity = ".95";
-export const scrimDay = "rgb(205, 205, 215)";
+export const scrimDay = "rgb(2, 18, 44)";
 export const scrimInitialOpacity = "0";
 export const scrimMobileOpacity = "1";
-export const scrimNight = "rgb(72, 72, 74)";
+export const scrimNight = "rgb(2, 18, 44)";
 export const scrimOpacity = ".7";
@@ -546,4 +550,4 @@ export const selectBorder = "solid .0625rem #B2B2BF";
 export const textBaseLineHeight = "1.5rem";
-export const textDisabledDay = "rgb(0, 0, 0)";
-export const textDisabledNight = "rgb(255, 255, 255)";
+export const textDisabledDay = "rgb(178, 178, 191)";
+export const textDisabledNight = "rgb(142, 142, 147)";
 export const textErrorDay = "rgb(209, 67, 91)";
@@ -561,2 +565,4 @@ export const textErrorNight = "rgb(209, 67, 91)";
 export const textPrimaryNight = "rgb(255, 255, 255)";
+export const textPrimaryOnContrastDay = "rgb(255, 255, 255)";
+export const textPrimaryOnContrastNight = "rgb(255, 255, 255)";
 export const textQuaternaryDarkColor = "rgb(142, 142, 147)";
@@ -568,2 +574,4 @@ export const textQuaternaryLightColor = "rgb(143, 144, 160)";
 export const textSecondaryNight = "rgb(178, 178, 191)";
+export const textSecondaryOnContrastDay = "rgb(142, 142, 147)";
+export const textSecondaryOnContrastNight = "rgb(142, 142, 147)";
 export const textSmFontSize = ".875rem";
@@ -846,2 +854,3 @@ export const textSmFontWeight = "400";
 colorBlack,
+colorBlackAlpha20,
 colorBlackTint01,
@@ -894,2 +903,3 @@ colorBlackTint02,
 colorSagano,
+colorScrim,
 colorSkyBlue,
@@ -915,2 +925,4 @@ colorSkyBlueShade01,
 colorWhite,
+colorWhiteAlpha20,
+colorWhiteAlpha80,
 colorYellow,
@@ -1202,2 +1214,4 @@ colorYellowMuted,
 textPrimaryNight,
+textPrimaryOnContrastDay,
+textPrimaryOnContrastNight,
 textQuaternaryDarkColor,
@@ -1209,2 +1223,4 @@ textQuaternaryLightColor,
 textSecondaryNight,
+textSecondaryOnContrastDay,
+textSecondaryOnContrastNight,
 textTertiaryDarkColor,
@@ -1211,0 +1227,0 @@ textTertiaryLightColor,

tokens/breakpoints.common.js

@@ -66,2 +66,3 @@ /*
   colorBlack: "rgb(0, 0, 0)",
+  colorBlackAlpha20: "rgb(178, 178, 191)",
   colorBlackTint01: "rgb(29, 27, 32)",
@@ -114,2 +115,3 @@ colorBlackTint02: "rgb(44, 44, 46)",
   colorSagano: "rgb(208, 238, 236)",
+  colorScrim: "rgb(2, 18, 44)",
   colorSkyBlue: "rgb(7, 112, 227)",
@@ -135,2 +137,4 @@ colorSkyBlueShade01: "rgb(8, 78, 178)",
   colorWhite: "rgb(255, 255, 255)",
+  colorWhiteAlpha20: "rgb(142, 142, 147)",
+  colorWhiteAlpha80: "rgb(142, 142, 147)",
   colorYellow: "rgb(254, 235, 135)",
@@ -150,4 +154,4 @@ colorYellowMuted: "rgb(255, 235, 208)",
   primaryLightColor: "rgb(7, 112, 227)",
-  scrimDay: "rgb(205, 205, 215)",
-  scrimNight: "rgb(72, 72, 74)",
+  scrimDay: "rgb(2, 18, 44)",
+  scrimNight: "rgb(2, 18, 44)",
   statusDangerFillDay: "rgb(246, 221, 225)",
@@ -173,4 +177,4 @@ statusDangerFillNight: "rgb(255, 202, 221)",
   surfaceHighlightNight: "rgb(177, 255, 231)",
-  textDisabledDay: "rgb(0, 0, 0)",
-  textDisabledNight: "rgb(255, 255, 255)",
+  textDisabledDay: "rgb(178, 178, 191)",
+  textDisabledNight: "rgb(142, 142, 147)",
   textErrorDay: "rgb(209, 67, 91)",
@@ -184,2 +188,4 @@ textErrorNight: "rgb(209, 67, 91)",
   textPrimaryNight: "rgb(255, 255, 255)",
+  textPrimaryOnContrastDay: "rgb(255, 255, 255)",
+  textPrimaryOnContrastNight: "rgb(255, 255, 255)",
   textQuaternaryDarkColor: "rgb(142, 142, 147)",
@@ -191,4 +197,6 @@ textQuaternaryLightColor: "rgb(143, 144, 160)",
   textSecondaryNight: "rgb(178, 178, 191)",
+  textSecondaryOnContrastDay: "rgb(142, 142, 147)",
+  textSecondaryOnContrastNight: "rgb(142, 142, 147)",
   textTertiaryDarkColor: "rgb(142, 142, 147)",
   textTertiaryLightColor: "rgb(143, 144, 160)"
 };

tokens/breakpoints.es6.js

@@ -64,2 +64,3 @@ /*
 export const colorBlack = "rgb(0, 0, 0)";
+export const colorBlackAlpha20 = "rgb(178, 178, 191)";
 export const colorBlackTint01 = "rgb(29, 27, 32)";
@@ -112,2 +113,3 @@ export const colorBlackTint02 = "rgb(44, 44, 46)";
 export const colorSagano = "rgb(208, 238, 236)";
+export const colorScrim = "rgb(2, 18, 44)";
 export const colorSkyBlue = "rgb(7, 112, 227)";
@@ -133,2 +135,4 @@ export const colorSkyBlueShade01 = "rgb(8, 78, 178)";
 export const colorWhite = "rgb(255, 255, 255)";
+export const colorWhiteAlpha20 = "rgb(142, 142, 147)";
+export const colorWhiteAlpha80 = "rgb(142, 142, 147)";
 export const colorYellow = "rgb(254, 235, 135)";
@@ -148,4 +152,4 @@ export const colorYellowMuted = "rgb(255, 235, 208)";
 export const primaryLightColor = "rgb(7, 112, 227)";
-export const scrimDay = "rgb(205, 205, 215)";
-export const scrimNight = "rgb(72, 72, 74)";
+export const scrimDay = "rgb(2, 18, 44)";
+export const scrimNight = "rgb(2, 18, 44)";
 export const statusDangerFillDay = "rgb(246, 221, 225)";
@@ -171,4 +175,4 @@ export const statusDangerFillNight = "rgb(255, 202, 221)";
 export const surfaceHighlightNight = "rgb(177, 255, 231)";
-export const textDisabledDay = "rgb(0, 0, 0)";
-export const textDisabledNight = "rgb(255, 255, 255)";
+export const textDisabledDay = "rgb(178, 178, 191)";
+export const textDisabledNight = "rgb(142, 142, 147)";
 export const textErrorDay = "rgb(209, 67, 91)";
@@ -182,2 +186,4 @@ export const textErrorNight = "rgb(209, 67, 91)";
 export const textPrimaryNight = "rgb(255, 255, 255)";
+export const textPrimaryOnContrastDay = "rgb(255, 255, 255)";
+export const textPrimaryOnContrastNight = "rgb(255, 255, 255)";
 export const textQuaternaryDarkColor = "rgb(142, 142, 147)";
@@ -189,2 +195,4 @@ export const textQuaternaryLightColor = "rgb(143, 144, 160)";
 export const textSecondaryNight = "rgb(178, 178, 191)";
+export const textSecondaryOnContrastDay = "rgb(142, 142, 147)";
+export const textSecondaryOnContrastNight = "rgb(142, 142, 147)";
 export const textTertiaryDarkColor = "rgb(142, 142, 147)";
@@ -235,2 +243,3 @@ export const textTertiaryLightColor = "rgb(143, 144, 160)";
 colorBlack,
+colorBlackAlpha20,
 colorBlackTint01,
@@ -283,2 +292,3 @@ colorBlackTint02,
 colorSagano,
+colorScrim,
 colorSkyBlue,
@@ -304,2 +314,4 @@ colorSkyBlueShade01,
 colorWhite,
+colorWhiteAlpha20,
+colorWhiteAlpha80,
 colorYellow,
@@ -369,2 +381,4 @@ colorYellowMuted,
 textPrimaryNight,
+textPrimaryOnContrastDay,
+textPrimaryOnContrastNight,
 textQuaternaryDarkColor,
@@ -376,4 +390,6 @@ textQuaternaryLightColor,
 textSecondaryNight,
+textSecondaryOnContrastDay,
+textSecondaryOnContrastNight,
 textTertiaryDarkColor,
 textTertiaryLightColor,
 };

tokens/breakpoints.raw.json

@@ -51,2 +51,5 @@ {
     },
+    "SCRIM": {
+      "value": "02122c"
+    },
     "BLUE_MUTED": {
@@ -124,2 +127,5 @@ "value": "#D9F8FF"
     },
+    "WHITE_ALPHA_80": {
+      "value": "#8E8E93"
+    },
     "ABISKO": {
@@ -137,2 +143,5 @@ "value": "#5a489b"
     },
+    "WHITE_ALPHA_20": {
+      "value": "#8E8E93"
+    },
     "ECO_GREEN": {
@@ -216,2 +225,5 @@ "value": "#0FA1A9"
     },
+    "BLACK_ALPHA_20": {
+      "value": "#B2B2BF"
+    },
     "SKY_BLUE_TINT_02": {
@@ -635,2 +647,9 @@ "value": "#9dc0f2"
     },
+    "COLOR_SCRIM": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(2, 18, 44)",
+      "originalValue": "{!SCRIM}",
+      "name": "COLOR_SCRIM"
+    },
     "COLOR_BLACK_TINT_02": {
@@ -671,2 +690,9 @@ "type": "color",
     },
+    "COLOR_WHITE_ALPHA_80": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(142, 142, 147)",
+      "originalValue": "{!WHITE_ALPHA_80}",
+      "name": "COLOR_WHITE_ALPHA_80"
+    },
     "COLOR_NIGHT_YELLOW_FILL": {
@@ -742,2 +768,9 @@ "type": "color",
     },
+    "COLOR_WHITE_ALPHA_20": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(142, 142, 147)",
+      "originalValue": "{!WHITE_ALPHA_20}",
+      "name": "COLOR_WHITE_ALPHA_20"
+    },
     "COLOR_PINK": {
@@ -869,2 +902,9 @@ "type": "color",
     },
+    "COLOR_BLACK_ALPHA_20": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(178, 178, 191)",
+      "originalValue": "{!BLACK_ALPHA_20}",
+      "name": "COLOR_BLACK_ALPHA_20"
+    },
     "COLOR_NIGHT_GREY_20": {
@@ -1171,2 +1211,10 @@ "type": "color",
     },
+    "TEXT_SECONDARY_ON_CONTRAST_DAY": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(142, 142, 147)",
+      "comment": "This colour needs to be apply opacity to it but needs a better solution but shouldn't be in use in product so safe to leave as is",
+      "originalValue": "{!WHITE_ALPHA_80}",
+      "name": "TEXT_SECONDARY_ON_CONTRAST_DAY"
+    },
     "TEXT_LINK_NIGHT": {
@@ -1182,4 +1230,4 @@ "type": "color",
       "category": "text-colors",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "{!WHITE}",
+      "value": "rgb(142, 142, 147)",
+      "originalValue": "{!WHITE_ALPHA_20}",
       "name": "TEXT_DISABLED_NIGHT"
@@ -1225,4 +1273,4 @@ },
       "category": "text-colors",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(178, 178, 191)",
+      "originalValue": "{!BLACK_ALPHA_20}",
       "name": "TEXT_DISABLED_DAY"
@@ -1237,2 +1285,9 @@ },
     },
+    "TEXT_PRIMARY_ON_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "{!WHITE}",
+      "name": "TEXT_PRIMARY_ON_CONTRAST_NIGHT"
+    },
     "TEXT_PRIMARY_DAY": {
@@ -1252,2 +1307,9 @@ "type": "color",
     },
+    "TEXT_PRIMARY_ON_CONTRAST_DAY": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "{!WHITE}",
+      "name": "TEXT_PRIMARY_ON_CONTRAST_DAY"
+    },
     "TEXT_ERROR_DAY": {
@@ -1289,2 +1351,9 @@ "type": "color",
     },
+    "TEXT_SECONDARY_ON_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(142, 142, 147)",
+      "originalValue": "{!NIGHT_GREY_40}",
+      "name": "TEXT_SECONDARY_ON_CONTRAST_NIGHT"
+    },
     "TEXT_TERTIARY_LIGHT_COLOR": {
@@ -1307,4 +1376,4 @@ "type": "color",
       "category": "scrim-colors",
-      "value": "rgb(205, 205, 215)",
-      "originalValue": "{!GREY_30}",
+      "value": "rgb(2, 18, 44)",
+      "originalValue": "{!SCRIM}",
       "name": "SCRIM_DAY"
@@ -1483,4 +1552,4 @@ },
       "category": "scrim-colors",
-      "value": "rgb(72, 72, 74)",
-      "originalValue": "{!NIGHT_GREY_30}",
+      "value": "rgb(2, 18, 44)",
+      "originalValue": "{!SCRIM}",
       "name": "SCRIM_NIGHT"
@@ -1487,0 +1556,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

397799

increased by2.21%

Lines of code

8851

increased by2.15%

Dependency changes

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