@skyscanner/bpk-foundations-web 19.4.2 → 19.6.0

package/gulpfile.mjs

@@ -20,8 +20,8 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 import { deleteAsync } from 'del';
+import { exec } from 'child_process';
 import gulp from 'gulp';
-import jsonLint from 'gulp-jsonlint';
 import gulpTheo from 'gulp-theo';
 import _ from 'lodash';
 import gulpMerge from 'merge2';
@@ -67,13 +67,17 @@ theo.registerFormat('es6.d.ts', bpkDts);
 
 gulp.task('clean', (done) => deleteAsync(['tokens'], done));
 
-gulp.task('lint', () =>
-  gulp
-    .src('./src/*.json')
-    .pipe(jsonLint())
-    .pipe(jsonLint.reporter())
-    .pipe(jsonLint.failAfterError()),
-);
+gulp.task('lint', (done) => {
+  exec('eslint ./src --ext json', (err, stdout, _) => {
+    if (err) {
+      console.error(stdout);
+      done(err);
+    } else {
+      console.log(stdout);
+      done();
+    }
+  });
+});
 
 const createTokens = (tokenSets, done) => {
   const streams = tokenSets.map(({ format, nest, platform }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "19.4.2",
+  "version": "19.6.0",
   "description": "Common Backpack design tokens for colors, spacing, font, etc.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,8 +17,8 @@
     "tokens": "gulp"
   },
   "dependencies": {
-    "@skyscanner/bpk-foundations-common": "^19.4.2",
+    "@skyscanner/bpk-foundations-common": "^19.6.0",
     "color": "^5.0.0"
   },
-  "gitHead": "0b10e16b271a30747b4aba3be58433f8716abd34"
+  "gitHead": "5a2dbb49f77e410b1cbc082061179f49fe0d2a5d"
 }

package/tokens/base.common.js

@@ -93,7 +93,7 @@ module.exports = {
   surfaceSubtleNight: "rgb(36, 51, 70)",
   surfaceElevatedDay: "rgb(255, 255, 255)",
   surfaceHighlightNight: "rgb(36, 51, 70)",
-  surfaceLowContrastDay: "rgb(247, 249, 251)",
+  surfaceLowContrastDay: "rgb(245, 247, 250)",
   surfaceSubtleDay: "rgb(227, 240, 255)",
   surfaceHighlightDay: "rgb(224, 228, 233)",
   textOnDarkDay: "rgb(255, 255, 255)",
@@ -344,7 +344,9 @@ module.exports = {
   horizontalNavBarSelectedColor: "rgb(0, 98, 227)",
   iconSizeSm: "1rem",
   iconSizeLg: "1.5rem",
-  iconSizeXl: "3rem",
+  iconSizeXl: "2rem",
+  iconSizeXxl: "2.5rem",
+  iconSizeXxxl: "3rem",
   modalBackgroundColor: "rgb(255, 255, 255)",
   modalInitialOpacity: "0",
   modalOpacity: "1",

package/tokens/base.default.scss

@@ -166,7 +166,7 @@ $bpk-surface-elevated-day: rgb(255, 255, 255) !default;
 /// @group surface-colors
 $bpk-surface-highlight-night: rgb(36, 51, 70) !default;
 /// @group surface-colors
-$bpk-surface-low-contrast-day: rgb(247, 249, 251) !default;
+$bpk-surface-low-contrast-day: rgb(245, 247, 250) !default;
 /// @group surface-colors
 $bpk-surface-subtle-day: rgb(227, 240, 255) !default;
 /// @group surface-colors
@@ -668,7 +668,11 @@ $bpk-icon-size-sm: 1rem !default;
 /// @group icons
 $bpk-icon-size-lg: 1.5rem !default;
 /// @group icons
-$bpk-icon-size-xl: 3rem !default;
+$bpk-icon-size-xl: 2rem !default;
+/// @group icons
+$bpk-icon-size-xxl: 2.5rem !default;
+/// @group icons
+$bpk-icon-size-xxxl: 3rem !default;
 /// @group modals
 $bpk-modal-background-color: rgb(255, 255, 255) !default;
 /// @group modals

package/tokens/base.es6.d.ts

@@ -91,7 +91,7 @@ export declare const surfaceLowContrastNight = "rgb(36, 51, 70)" as const;
 export declare const surfaceSubtleNight = "rgb(36, 51, 70)" as const;
 export declare const surfaceElevatedDay = "rgb(255, 255, 255)" as const;
 export declare const surfaceHighlightNight = "rgb(36, 51, 70)" as const;
-export declare const surfaceLowContrastDay = "rgb(247, 249, 251)" as const;
+export declare const surfaceLowContrastDay = "rgb(245, 247, 250)" as const;
 export declare const surfaceSubtleDay = "rgb(227, 240, 255)" as const;
 export declare const surfaceHighlightDay = "rgb(224, 228, 233)" as const;
 export declare const textOnDarkDay = "rgb(255, 255, 255)" as const;
@@ -342,7 +342,9 @@ export declare const inputDisabledBorderColor = "rgb(239, 243, 248)" as const;
 export declare const horizontalNavBarSelectedColor = "rgb(0, 98, 227)" as const;
 export declare const iconSizeSm = "1rem" as const;
 export declare const iconSizeLg = "1.5rem" as const;
-export declare const iconSizeXl = "3rem" as const;
+export declare const iconSizeXl = "2rem" as const;
+export declare const iconSizeXxl = "2.5rem" as const;
+export declare const iconSizeXxxl = "3rem" as const;
 export declare const modalBackgroundColor = "rgb(255, 255, 255)" as const;
 export declare const modalInitialOpacity = "0" as const;
 export declare const modalOpacity = "1" as const;
@@ -640,6 +642,8 @@ export declare const icons = {
 iconSizeSm,
 iconSizeLg,
 iconSizeXl,
+iconSizeXxl,
+iconSizeXxxl,
 } as const;
 export declare const infoBannerColors = {
 privateInfoBannerDefaultDay,

package/tokens/base.es6.js

@@ -91,7 +91,7 @@ export const surfaceLowContrastNight = "rgb(36, 51, 70)";
 export const surfaceSubtleNight = "rgb(36, 51, 70)";
 export const surfaceElevatedDay = "rgb(255, 255, 255)";
 export const surfaceHighlightNight = "rgb(36, 51, 70)";
-export const surfaceLowContrastDay = "rgb(247, 249, 251)";
+export const surfaceLowContrastDay = "rgb(245, 247, 250)";
 export const surfaceSubtleDay = "rgb(227, 240, 255)";
 export const surfaceHighlightDay = "rgb(224, 228, 233)";
 export const textOnDarkDay = "rgb(255, 255, 255)";
@@ -342,7 +342,9 @@ export const inputDisabledBorderColor = "rgb(239, 243, 248)";
 export const horizontalNavBarSelectedColor = "rgb(0, 98, 227)";
 export const iconSizeSm = "1rem";
 export const iconSizeLg = "1.5rem";
-export const iconSizeXl = "3rem";
+export const iconSizeXl = "2rem";
+export const iconSizeXxl = "2.5rem";
+export const iconSizeXxxl = "3rem";
 export const modalBackgroundColor = "rgb(255, 255, 255)";
 export const modalInitialOpacity = "0";
 export const modalOpacity = "1";
@@ -640,6 +642,8 @@ export const icons = {
 iconSizeSm,
 iconSizeLg,
 iconSizeXl,
+iconSizeXxl,
+iconSizeXxxl,
 };
 export const infoBannerColors = {
 privateInfoBannerDefaultDay,

package/tokens/base.raw.json

@@ -52,7 +52,7 @@
       "value": "#ffb54d"
     },
     "GREY_05": {
-      "value": "#F7F9FB"
+      "value": "#F5F7FA"
     },
     "NIGHT_GREEN_SPOT": {
       "value": "#62F1C6"
@@ -1024,7 +1024,7 @@
     "SURFACE_LOW_CONTRAST_DAY": {
       "type": "color",
       "category": "surface-colors",
-      "value": "rgb(247, 249, 251)",
+      "value": "rgb(245, 247, 250)",
       "originalValue": "{!GREY_05}",
       "name": "SURFACE_LOW_CONTRAST_DAY"
     },
@@ -2809,11 +2809,25 @@
       "name": "ICON_SIZE_LG"
     },
     "ICON_SIZE_XL": {
+      "type": "size",
+      "category": "icons",
+      "value": "2rem",
+      "originalValue": "2rem",
+      "name": "ICON_SIZE_XL"
+    },
+    "ICON_SIZE_XXL": {
+      "type": "size",
+      "category": "icons",
+      "value": "2.5rem",
+      "originalValue": "2.5rem",
+      "name": "ICON_SIZE_XXL"
+    },
+    "ICON_SIZE_XXXL": {
       "type": "size",
       "category": "icons",
       "value": "3rem",
       "originalValue": "3rem",
-      "name": "ICON_SIZE_XL"
+      "name": "ICON_SIZE_XXXL"
     },
     "MODAL_BACKGROUND_COLOR": {
       "category": "modals",

package/tokens/base.scss

@@ -166,7 +166,7 @@ $bpk-surface-elevated-day: rgb(255, 255, 255);
 /// @group surface-colors
 $bpk-surface-highlight-night: rgb(36, 51, 70);
 /// @group surface-colors
-$bpk-surface-low-contrast-day: rgb(247, 249, 251);
+$bpk-surface-low-contrast-day: rgb(245, 247, 250);
 /// @group surface-colors
 $bpk-surface-subtle-day: rgb(227, 240, 255);
 /// @group surface-colors
@@ -668,7 +668,11 @@ $bpk-icon-size-sm: 1rem;
 /// @group icons
 $bpk-icon-size-lg: 1.5rem;
 /// @group icons
-$bpk-icon-size-xl: 3rem;
+$bpk-icon-size-xl: 2rem;
+/// @group icons
+$bpk-icon-size-xxl: 2.5rem;
+/// @group icons
+$bpk-icon-size-xxxl: 3rem;
 /// @group modals
 $bpk-modal-background-color: rgb(255, 255, 255);
 /// @group modals