@skyscanner/bpk-foundations-web 19.5.0 → 20.0.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.5.0",
+  "version": "20.0.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.5.0",
+    "@skyscanner/bpk-foundations-common": "^20.0.0",
     "color": "^5.0.0"
   },
-  "gitHead": "c8e6bfdec3c44f7ecc387aaab19d68949b6a032c"
+  "gitHead": "9fae1a1c49c643ac88c3d07ccd8092785b21cd73"
 }

package/tokens/base.common.js

@@ -33,15 +33,9 @@ module.exports = {
   colorHarbour: "rgb(246, 221, 225)",
   colorSkyGrayTint05: "rgb(205, 205, 215)",
   colorSkyGrayTint06: "rgb(221, 221, 229)",
-  colorBlackTint01: "rgb(29, 27, 32)",
   colorSkyGrayTint07: "rgb(241, 242, 248)",
-  colorBlackTint02: "rgb(44, 44, 46)",
   colorAbisko: "rgb(90, 72, 155)",
-  colorBlackTint03: "rgb(58, 58, 60)",
-  colorBlackTint04: "rgb(72, 72, 74)",
   colorWhite: "rgb(255, 255, 255)",
-  colorBlackTint05: "rgb(99, 99, 102)",
-  colorBlackTint06: "rgb(142, 142, 147)",
   colorPanjin: "rgb(209, 67, 91)",
   colorKolkata: "rgb(255, 148, 0)",
   colorGlencoe: "rgb(115, 206, 198)",
@@ -93,7 +87,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)",
@@ -277,6 +271,12 @@ module.exports = {
   privateSegmentedControlSurfaceContrastNight: "rgb(19, 29, 43)",
   privateSegmentedControlSurfaceContrastOnDay: "rgb(2, 77, 175)",
   privateSegmentedControlSurfaceContrastOnNight: "rgb(5, 65, 132)",
+  colorBlackTint01: "rgb(29, 27, 32)",
+  colorBlackTint02: "rgb(44, 44, 46)",
+  colorBlackTint03: "rgb(58, 58, 60)",
+  colorBlackTint04: "rgb(72, 72, 74)",
+  colorBlackTint05: "rgb(99, 99, 102)",
+  colorBlackTint06: "rgb(142, 142, 147)",
   durationXs: "50ms",
   durationSm: "200ms",
   durationBase: "400ms",

package/tokens/base.default.scss

@@ -46,24 +46,12 @@ $bpk-color-sky-gray-tint-05: rgb(205, 205, 215) !default;
 /// @group colors
 $bpk-color-sky-gray-tint-06: rgb(221, 221, 229) !default;
 /// @group colors
-$bpk-color-black-tint-01: rgb(29, 27, 32) !default;
-/// @group colors
 $bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;
 /// @group colors
-$bpk-color-black-tint-02: rgb(44, 44, 46) !default;
-/// @group colors
 $bpk-color-abisko: rgb(90, 72, 155) !default;
 /// @group colors
-$bpk-color-black-tint-03: rgb(58, 58, 60) !default;
-/// @group colors
-$bpk-color-black-tint-04: rgb(72, 72, 74) !default;
-/// @group colors
 $bpk-color-white: rgb(255, 255, 255) !default;
 /// @group colors
-$bpk-color-black-tint-05: rgb(99, 99, 102) !default;
-/// @group colors
-$bpk-color-black-tint-06: rgb(142, 142, 147) !default;
-/// @group colors
 $bpk-color-panjin: rgb(209, 67, 91) !default;
 /// @group colors
 $bpk-color-kolkata: rgb(255, 148, 0) !default;
@@ -166,7 +154,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
@@ -533,6 +521,18 @@ $bpk-private-segmented-control-surface-contrast-night: rgb(19, 29, 43) !default;
 $bpk-private-segmented-control-surface-contrast-on-day: rgb(2, 77, 175) !default;
 /// @group segmented-control-colors
 $bpk-private-segmented-control-surface-contrast-on-night: rgb(5, 65, 132) !default;
+/// @group colors
+$bpk-color-black-tint-01: rgb(29, 27, 32) !default;
+/// @group colors
+$bpk-color-black-tint-02: rgb(44, 44, 46) !default;
+/// @group colors
+$bpk-color-black-tint-03: rgb(58, 58, 60) !default;
+/// @group colors
+$bpk-color-black-tint-04: rgb(72, 72, 74) !default;
+/// @group colors
+$bpk-color-black-tint-05: rgb(99, 99, 102) !default;
+/// @group colors
+$bpk-color-black-tint-06: rgb(142, 142, 147) !default;
 /// @group animations
 $bpk-duration-xs: 50ms !default;
 /// @group animations

package/tokens/base.es6.d.ts

@@ -31,15 +31,9 @@ export declare const colorSkyGrayTint04 = "rgb(178, 178, 191)" as const;
 export declare const colorHarbour = "rgb(246, 221, 225)" as const;
 export declare const colorSkyGrayTint05 = "rgb(205, 205, 215)" as const;
 export declare const colorSkyGrayTint06 = "rgb(221, 221, 229)" as const;
-export declare const colorBlackTint01 = "rgb(29, 27, 32)" as const;
 export declare const colorSkyGrayTint07 = "rgb(241, 242, 248)" as const;
-export declare const colorBlackTint02 = "rgb(44, 44, 46)" as const;
 export declare const colorAbisko = "rgb(90, 72, 155)" as const;
-export declare const colorBlackTint03 = "rgb(58, 58, 60)" as const;
-export declare const colorBlackTint04 = "rgb(72, 72, 74)" as const;
 export declare const colorWhite = "rgb(255, 255, 255)" as const;
-export declare const colorBlackTint05 = "rgb(99, 99, 102)" as const;
-export declare const colorBlackTint06 = "rgb(142, 142, 147)" as const;
 export declare const colorPanjin = "rgb(209, 67, 91)" as const;
 export declare const colorKolkata = "rgb(255, 148, 0)" as const;
 export declare const colorGlencoe = "rgb(115, 206, 198)" as const;
@@ -91,7 +85,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;
@@ -275,6 +269,12 @@ export declare const privateSegmentedControlSurfaceContrastDay = "rgba(255, 255,
 export declare const privateSegmentedControlSurfaceContrastNight = "rgb(19, 29, 43)" as const;
 export declare const privateSegmentedControlSurfaceContrastOnDay = "rgb(2, 77, 175)" as const;
 export declare const privateSegmentedControlSurfaceContrastOnNight = "rgb(5, 65, 132)" as const;
+export declare const colorBlackTint01 = "rgb(29, 27, 32)" as const;
+export declare const colorBlackTint02 = "rgb(44, 44, 46)" as const;
+export declare const colorBlackTint03 = "rgb(58, 58, 60)" as const;
+export declare const colorBlackTint04 = "rgb(72, 72, 74)" as const;
+export declare const colorBlackTint05 = "rgb(99, 99, 102)" as const;
+export declare const colorBlackTint06 = "rgb(142, 142, 147)" as const;
 export declare const durationXs = "50ms" as const;
 export declare const durationSm = "200ms" as const;
 export declare const durationBase = "400ms" as const;
@@ -554,15 +554,9 @@ colorSkyGrayTint04,
 colorHarbour,
 colorSkyGrayTint05,
 colorSkyGrayTint06,
-colorBlackTint01,
 colorSkyGrayTint07,
-colorBlackTint02,
 colorAbisko,
-colorBlackTint03,
-colorBlackTint04,
 colorWhite,
-colorBlackTint05,
-colorBlackTint06,
 colorPanjin,
 colorKolkata,
 colorGlencoe,
@@ -595,6 +589,12 @@ backgroundAlternativeDarkColor,
 primaryLightColor,
 backgroundTertiaryLightColor,
 backgroundSecondaryLightColor,
+colorBlackTint01,
+colorBlackTint02,
+colorBlackTint03,
+colorBlackTint04,
+colorBlackTint05,
+colorBlackTint06,
 primaryGradient,
 } as const;
 export declare const coreColors = {

package/tokens/base.es6.js

@@ -31,15 +31,9 @@ export const colorSkyGrayTint04 = "rgb(178, 178, 191)";
 export const colorHarbour = "rgb(246, 221, 225)";
 export const colorSkyGrayTint05 = "rgb(205, 205, 215)";
 export const colorSkyGrayTint06 = "rgb(221, 221, 229)";
-export const colorBlackTint01 = "rgb(29, 27, 32)";
 export const colorSkyGrayTint07 = "rgb(241, 242, 248)";
-export const colorBlackTint02 = "rgb(44, 44, 46)";
 export const colorAbisko = "rgb(90, 72, 155)";
-export const colorBlackTint03 = "rgb(58, 58, 60)";
-export const colorBlackTint04 = "rgb(72, 72, 74)";
 export const colorWhite = "rgb(255, 255, 255)";
-export const colorBlackTint05 = "rgb(99, 99, 102)";
-export const colorBlackTint06 = "rgb(142, 142, 147)";
 export const colorPanjin = "rgb(209, 67, 91)";
 export const colorKolkata = "rgb(255, 148, 0)";
 export const colorGlencoe = "rgb(115, 206, 198)";
@@ -91,7 +85,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)";
@@ -275,6 +269,12 @@ export const privateSegmentedControlSurfaceContrastDay = "rgba(255, 255, 255, 0.
 export const privateSegmentedControlSurfaceContrastNight = "rgb(19, 29, 43)";
 export const privateSegmentedControlSurfaceContrastOnDay = "rgb(2, 77, 175)";
 export const privateSegmentedControlSurfaceContrastOnNight = "rgb(5, 65, 132)";
+export const colorBlackTint01 = "rgb(29, 27, 32)";
+export const colorBlackTint02 = "rgb(44, 44, 46)";
+export const colorBlackTint03 = "rgb(58, 58, 60)";
+export const colorBlackTint04 = "rgb(72, 72, 74)";
+export const colorBlackTint05 = "rgb(99, 99, 102)";
+export const colorBlackTint06 = "rgb(142, 142, 147)";
 export const durationXs = "50ms";
 export const durationSm = "200ms";
 export const durationBase = "400ms";
@@ -554,15 +554,9 @@ colorSkyGrayTint04,
 colorHarbour,
 colorSkyGrayTint05,
 colorSkyGrayTint06,
-colorBlackTint01,
 colorSkyGrayTint07,
-colorBlackTint02,
 colorAbisko,
-colorBlackTint03,
-colorBlackTint04,
 colorWhite,
-colorBlackTint05,
-colorBlackTint06,
 colorPanjin,
 colorKolkata,
 colorGlencoe,
@@ -595,6 +589,12 @@ backgroundAlternativeDarkColor,
 primaryLightColor,
 backgroundTertiaryLightColor,
 backgroundSecondaryLightColor,
+colorBlackTint01,
+colorBlackTint02,
+colorBlackTint03,
+colorBlackTint04,
+colorBlackTint05,
+colorBlackTint06,
 primaryGradient,
 };
 export const coreColors = {

package/tokens/base.raw.json

@@ -52,7 +52,7 @@
       "value": "#ffb54d"
     },
     "GREY_05": {
-      "value": "#F7F9FB"
+      "value": "#F5F7FA"
     },
     "NIGHT_GREEN_SPOT": {
       "value": "#62F1C6"
@@ -578,14 +578,6 @@
       "originalValue": "{!SKY_GRAY_TINT_06}",
       "name": "COLOR_SKY_GRAY_TINT_06"
     },
-    "COLOR_BLACK_TINT_01": {
-      "value": "rgb(29, 27, 32)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_01}",
-      "name": "COLOR_BLACK_TINT_01"
-    },
     "COLOR_SKY_GRAY_TINT_07": {
       "value": "rgb(241, 242, 248)",
       "deprecated": true,
@@ -594,14 +586,6 @@
       "originalValue": "{!SKY_GRAY_TINT_07}",
       "name": "COLOR_SKY_GRAY_TINT_07"
     },
-    "COLOR_BLACK_TINT_02": {
-      "value": "rgb(44, 44, 46)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_02}",
-      "name": "COLOR_BLACK_TINT_02"
-    },
     "COLOR_ABISKO": {
       "value": "rgb(90, 72, 155)",
       "deprecated": true,
@@ -610,22 +594,6 @@
       "originalValue": "{!ABISKO}",
       "name": "COLOR_ABISKO"
     },
-    "COLOR_BLACK_TINT_03": {
-      "value": "rgb(58, 58, 60)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_03}",
-      "name": "COLOR_BLACK_TINT_03"
-    },
-    "COLOR_BLACK_TINT_04": {
-      "value": "rgb(72, 72, 74)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_04}",
-      "name": "COLOR_BLACK_TINT_04"
-    },
     "COLOR_WHITE": {
       "type": "color",
       "category": "colors",
@@ -633,22 +601,6 @@
       "originalValue": "{!WHITE}",
       "name": "COLOR_WHITE"
     },
-    "COLOR_BLACK_TINT_05": {
-      "value": "rgb(99, 99, 102)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_05}",
-      "name": "COLOR_BLACK_TINT_05"
-    },
-    "COLOR_BLACK_TINT_06": {
-      "value": "rgb(142, 142, 147)",
-      "deprecated": true,
-      "type": "color",
-      "category": "colors",
-      "originalValue": "{!BLACK_TINT_06}",
-      "name": "COLOR_BLACK_TINT_06"
-    },
     "COLOR_PANJIN": {
       "value": "rgb(209, 67, 91)",
       "deprecated": true,
@@ -1024,7 +976,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"
     },
@@ -2339,6 +2291,54 @@
       "originalValue": "{!NIGHT_SKY}",
       "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT"
     },
+    "COLOR_BLACK_TINT_01": {
+      "value": "rgb(29, 27, 32)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_01}",
+      "name": "COLOR_BLACK_TINT_01"
+    },
+    "COLOR_BLACK_TINT_02": {
+      "value": "rgb(44, 44, 46)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_02}",
+      "name": "COLOR_BLACK_TINT_02"
+    },
+    "COLOR_BLACK_TINT_03": {
+      "value": "rgb(58, 58, 60)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_03}",
+      "name": "COLOR_BLACK_TINT_03"
+    },
+    "COLOR_BLACK_TINT_04": {
+      "value": "rgb(72, 72, 74)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_04}",
+      "name": "COLOR_BLACK_TINT_04"
+    },
+    "COLOR_BLACK_TINT_05": {
+      "value": "rgb(99, 99, 102)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_05}",
+      "name": "COLOR_BLACK_TINT_05"
+    },
+    "COLOR_BLACK_TINT_06": {
+      "value": "rgb(142, 142, 147)",
+      "deprecated": true,
+      "type": "color",
+      "category": "colors",
+      "originalValue": "{!BLACK_TINT_06}",
+      "name": "COLOR_BLACK_TINT_06"
+    },
     "DURATION_XS": {
       "type": "duration",
       "category": "animations",

package/tokens/base.scss

@@ -46,24 +46,12 @@ $bpk-color-sky-gray-tint-05: rgb(205, 205, 215);
 /// @group colors
 $bpk-color-sky-gray-tint-06: rgb(221, 221, 229);
 /// @group colors
-$bpk-color-black-tint-01: rgb(29, 27, 32);
-/// @group colors
 $bpk-color-sky-gray-tint-07: rgb(241, 242, 248);
 /// @group colors
-$bpk-color-black-tint-02: rgb(44, 44, 46);
-/// @group colors
 $bpk-color-abisko: rgb(90, 72, 155);
 /// @group colors
-$bpk-color-black-tint-03: rgb(58, 58, 60);
-/// @group colors
-$bpk-color-black-tint-04: rgb(72, 72, 74);
-/// @group colors
 $bpk-color-white: rgb(255, 255, 255);
 /// @group colors
-$bpk-color-black-tint-05: rgb(99, 99, 102);
-/// @group colors
-$bpk-color-black-tint-06: rgb(142, 142, 147);
-/// @group colors
 $bpk-color-panjin: rgb(209, 67, 91);
 /// @group colors
 $bpk-color-kolkata: rgb(255, 148, 0);
@@ -166,7 +154,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
@@ -533,6 +521,18 @@ $bpk-private-segmented-control-surface-contrast-night: rgb(19, 29, 43);
 $bpk-private-segmented-control-surface-contrast-on-day: rgb(2, 77, 175);
 /// @group segmented-control-colors
 $bpk-private-segmented-control-surface-contrast-on-night: rgb(5, 65, 132);
+/// @group colors
+$bpk-color-black-tint-01: rgb(29, 27, 32);
+/// @group colors
+$bpk-color-black-tint-02: rgb(44, 44, 46);
+/// @group colors
+$bpk-color-black-tint-03: rgb(58, 58, 60);
+/// @group colors
+$bpk-color-black-tint-04: rgb(72, 72, 74);
+/// @group colors
+$bpk-color-black-tint-05: rgb(99, 99, 102);
+/// @group colors
+$bpk-color-black-tint-06: rgb(142, 142, 147);
 /// @group animations
 $bpk-duration-xs: 50ms;
 /// @group animations