@skyscanner/bpk-foundations-web 19.2.0 → 19.4.1

package/README.md

@@ -26,9 +26,9 @@ For web:
 
 ```js
 // Individual tokens
-import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { colorSkyGrayTint01 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
-console.log(spacingBase);
+console.log(colorSkyGrayTint01);
 
 // Whole token categories
 import { colors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
@@ -45,9 +45,9 @@ console.log(tokens);
 
 ```js
 // Individual tokens
-import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.common';
+import { colorSkyGrayTint01 } from '@skyscanner/bpk-foundations-web/tokens/base.common';
 
-console.log(spacingBase);
+console.log(colorSkyGrayTint01);
 
 // All tokens
 import * as tokens from '@skyscanner/bpk-foundations-web/tokens/base.common';

package/gulpfile.mjs

@@ -0,0 +1,117 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016-2021 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { deleteAsync } from 'del';
+import gulp from 'gulp';
+import jsonLint from 'gulp-jsonlint';
+import gulpTheo from 'gulp-theo';
+import _ from 'lodash';
+import gulpMerge from 'merge2';
+import theo from 'theo';
+
+import bpkEs6Js from './formatters/bpk.es6.js.mjs';
+import bpkCommonJs from './formatters/bpk.common.js.mjs';
+import bpkDts from './formatters/bpk.d.ts.mjs';
+
+import bpkScss from './formatters/bpk.scss.mjs';
+import bpkDefaultScss from './formatters/bpk.default.scss.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const RAW_FORMATS = {
+  web: ['raw.json'],
+};
+
+const PLATFORM_FORMATS = {
+  web: ['scss', 'default.scss', 'common.js', 'es6.js', 'es6.d.ts'],
+};
+
+const createTokenSets = (formats) =>
+  _.flatten(
+    Object.keys(formats).map((platform) =>
+      formats[platform].map((format) =>
+        typeof format !== 'string'
+          ? { platform, ...format }
+          : { platform, format },
+      ),
+    ),
+  );
+
+const rawTokenSets = createTokenSets(RAW_FORMATS);
+const platformTokenSets = createTokenSets(PLATFORM_FORMATS);
+
+theo.registerFormat('scss', bpkScss);
+theo.registerFormat('default.scss', bpkDefaultScss);
+theo.registerFormat('es6.js', bpkEs6Js);
+theo.registerFormat('common.js', bpkCommonJs);
+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()),
+);
+
+const createTokens = (tokenSets, done) => {
+  const streams = tokenSets.map(({ format, nest, platform }) => {
+    let outputPath = 'tokens';
+    if (nest) {
+      outputPath = `${outputPath}/${platform}`;
+    }
+
+    return gulp
+      .src([`./src/*.json`])
+      .pipe(
+        gulpTheo({
+          transform: { type: platform },
+          format: { type: format },
+        }),
+      )
+      .on('error', done)
+      .pipe(gulp.dest(path.resolve(__dirname, outputPath)))
+      .on('error', done)
+      .on(`finish`, () => {
+        // eslint-disable-next-line no-console
+        console.log('Completed tokens');
+      });
+  });
+
+  gulpMerge(streams).on('finish', done);
+};
+
+const createRawTokens = (done) => createTokens(rawTokenSets, done);
+const createPlatformTokens = (done) => createTokens(platformTokenSets, done);
+
+gulp.task('tokens:raw', createRawTokens);
+
+gulp.task('tokens:platform', createPlatformTokens);
+
+gulp.task(
+  'tokens',
+  gulp.series(gulp.parallel('clean', 'lint'), 'tokens:raw', 'tokens:platform'),
+);
+
+gulp.task('default', gulp.series('tokens'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "19.2.0",
+  "version": "19.4.1",
   "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": "^6.14.0",
-    "color": "^4.2.3"
+    "@skyscanner/bpk-foundations-common": "^19.4.1",
+    "color": "^5.0.0"
   },
-  "gitHead": "9011e9118cf4b4c6818da02419aeab18de4d6384"
+  "gitHead": "fce6283d9a98b0480a45aaab5480729bb66fbc15"
 }

package/tokens/base.common.js

@@ -344,6 +344,7 @@ module.exports = {
   horizontalNavBarSelectedColor: "rgb(0, 98, 227)",
   iconSizeSm: "1rem",
   iconSizeLg: "1.5rem",
+  iconSizeXl: "2rem",
   modalBackgroundColor: "rgb(255, 255, 255)",
   modalInitialOpacity: "0",
   modalOpacity: "1",

package/tokens/base.default.scss

@@ -667,6 +667,8 @@ $bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227) !default;
 $bpk-icon-size-sm: 1rem !default;
 /// @group icons
 $bpk-icon-size-lg: 1.5rem !default;
+/// @group icons
+$bpk-icon-size-xl: 2rem !default;
 /// @group modals
 $bpk-modal-background-color: rgb(255, 255, 255) !default;
 /// @group modals

package/tokens/base.es6.d.ts

@@ -342,6 +342,7 @@ 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 = "2rem" 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;
@@ -638,6 +639,7 @@ horizontalNavBarSelectedColor,
 export declare const icons = {
 iconSizeSm,
 iconSizeLg,
+iconSizeXl,
 } as const;
 export declare const infoBannerColors = {
 privateInfoBannerDefaultDay,

package/tokens/base.es6.js

@@ -342,6 +342,7 @@ 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 = "2rem";
 export const modalBackgroundColor = "rgb(255, 255, 255)";
 export const modalInitialOpacity = "0";
 export const modalOpacity = "1";
@@ -638,6 +639,7 @@ horizontalNavBarSelectedColor,
 export const icons = {
 iconSizeSm,
 iconSizeLg,
+iconSizeXl,
 };
 export const infoBannerColors = {
 privateInfoBannerDefaultDay,

package/tokens/base.raw.json

@@ -2808,6 +2808,13 @@
       "originalValue": "1.5rem",
       "name": "ICON_SIZE_LG"
     },
+    "ICON_SIZE_XL": {
+      "type": "size",
+      "category": "icons",
+      "value": "2rem",
+      "originalValue": "2rem",
+      "name": "ICON_SIZE_XL"
+    },
     "MODAL_BACKGROUND_COLOR": {
       "category": "modals",
       "value": "rgb(255, 255, 255)",

package/tokens/base.scss

@@ -667,6 +667,8 @@ $bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227);
 $bpk-icon-size-sm: 1rem;
 /// @group icons
 $bpk-icon-size-lg: 1.5rem;
+/// @group icons
+$bpk-icon-size-xl: 2rem;
 /// @group modals
 $bpk-modal-background-color: rgb(255, 255, 255);
 /// @group modals