@skyscanner/bpk-foundations-web 24.1.0 → 24.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "24.1.0",
+  "version": "24.3.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": "^24.1.0",
+    "@skyscanner/bpk-foundations-common": "^24.3.0",
     "color": "^5.0.0"
   },
-  "gitHead": "a3e9cc4bfc4b21e4d2659942ec5f8a39bfdb40b4"
+  "gitHead": "7bc1c2e577aaaaa3453d13a3035fd745a6fcb042"
 }

package/tokens/base.common.js

@@ -206,6 +206,10 @@ module.exports = {
   privateNavigationTabHoverNight: "rgb(209, 247, 255)",
   privateNavigationTabOutlineDay: "rgb(193, 199, 207)",
   privateNavigationTabOutlineNight: "rgb(255, 255, 255)",
+  privateNavigationTabOnDarkOutlineDay: "rgba(255, 255, 255, 0.2)",
+  privateNavigationTabOnDarkOutlineNight: "rgba(255, 255, 255, 0.2)",
+  privateNavigationTabSelectedDay: "rgb(2, 77, 175)",
+  privateNavigationTabSelectedNight: "rgb(5, 65, 132)",
   privateCardButtonContainedFillDay: "rgba(255, 255, 255, 0.8)",
   privateCardButtonContainedFillNight: "rgba(0, 0, 0, 0.8)",
   privateSegmentedControlCanvasDefaultDay: "rgb(239, 243, 248)",

package/tokens/base.default.scss

@@ -391,6 +391,14 @@ $bpk-private-navigation-tab-hover-night: rgb(209, 247, 255) !default;
 $bpk-private-navigation-tab-outline-day: rgb(193, 199, 207) !default;
 /// @group navigation-tab-colors
 $bpk-private-navigation-tab-outline-night: rgb(255, 255, 255) !default;
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-on-dark-outline-day: rgba(255, 255, 255, 0.2) !default;
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-on-dark-outline-night: rgba(255, 255, 255, 0.2) !default;
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-selected-day: rgb(2, 77, 175) !default;
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-selected-night: rgb(5, 65, 132) !default;
 /// @group card-button-colors
 $bpk-private-card-button-contained-fill-day: rgba(255, 255, 255, 0.8) !default;
 /// @group card-button-colors
@@ -730,8 +738,12 @@ $bpk-private-slider-selected-day: rgb(21, 70, 121) !default;
 /// @group spacings
 @function bpk-spacing-lg() { @return 1.5rem; }
 /// @group spacings
+@function bpk-spacing-xs() { @return .125rem; }
+/// @group spacings
 $bpk-one-pixel-rem: .0625rem !default;
 /// @group spacings
+@function bpk-spacing-xxs() { @return .0625rem; }
+/// @group spacings
 $bpk-spacing-none: 0 !default;
 /// @group spacings
 $bpk-spacing-icon-text: .5rem !default;

package/tokens/base.es6.d.ts

@@ -204,6 +204,10 @@ export declare const privateNavigationTabHoverDay = "rgb(21, 70, 121)" as const;
 export declare const privateNavigationTabHoverNight = "rgb(209, 247, 255)" as const;
 export declare const privateNavigationTabOutlineDay = "rgb(193, 199, 207)" as const;
 export declare const privateNavigationTabOutlineNight = "rgb(255, 255, 255)" as const;
+export declare const privateNavigationTabOnDarkOutlineDay = "rgba(255, 255, 255, 0.2)" as const;
+export declare const privateNavigationTabOnDarkOutlineNight = "rgba(255, 255, 255, 0.2)" as const;
+export declare const privateNavigationTabSelectedDay = "rgb(2, 77, 175)" as const;
+export declare const privateNavigationTabSelectedNight = "rgb(5, 65, 132)" as const;
 export declare const privateCardButtonContainedFillDay = "rgba(255, 255, 255, 0.8)" as const;
 export declare const privateCardButtonContainedFillNight = "rgba(0, 0, 0, 0.8)" as const;
 export declare const privateSegmentedControlCanvasDefaultDay = "rgb(239, 243, 248)" as const;
@@ -724,6 +728,10 @@ privateNavigationTabHoverDay,
 privateNavigationTabHoverNight,
 privateNavigationTabOutlineDay,
 privateNavigationTabOutlineNight,
+privateNavigationTabOnDarkOutlineDay,
+privateNavigationTabOnDarkOutlineNight,
+privateNavigationTabSelectedDay,
+privateNavigationTabSelectedNight,
 } as const;
 export declare const notifications = {
 bannerAlertHeaderExpandableHoverBackgroundColor,

package/tokens/base.es6.js

@@ -204,6 +204,10 @@ export const privateNavigationTabHoverDay = "rgb(21, 70, 121)";
 export const privateNavigationTabHoverNight = "rgb(209, 247, 255)";
 export const privateNavigationTabOutlineDay = "rgb(193, 199, 207)";
 export const privateNavigationTabOutlineNight = "rgb(255, 255, 255)";
+export const privateNavigationTabOnDarkOutlineDay = "rgba(255, 255, 255, 0.2)";
+export const privateNavigationTabOnDarkOutlineNight = "rgba(255, 255, 255, 0.2)";
+export const privateNavigationTabSelectedDay = "rgb(2, 77, 175)";
+export const privateNavigationTabSelectedNight = "rgb(5, 65, 132)";
 export const privateCardButtonContainedFillDay = "rgba(255, 255, 255, 0.8)";
 export const privateCardButtonContainedFillNight = "rgba(0, 0, 0, 0.8)";
 export const privateSegmentedControlCanvasDefaultDay = "rgb(239, 243, 248)";
@@ -724,6 +728,10 @@ privateNavigationTabHoverDay,
 privateNavigationTabHoverNight,
 privateNavigationTabOutlineDay,
 privateNavigationTabOutlineNight,
+privateNavigationTabOnDarkOutlineDay,
+privateNavigationTabOnDarkOutlineNight,
+privateNavigationTabSelectedDay,
+privateNavigationTabSelectedNight,
 };
 export const notifications = {
 bannerAlertHeaderExpandableHoverBackgroundColor,

package/tokens/base.raw.json

@@ -420,12 +420,18 @@
     "SPACING_SM": {
       "value": ".25rem"
     },
+    "SPACING_XS": {
+      "value": ".125rem"
+    },
     "FONT_LINE_HEIGHT_LG_TIGHT": {
       "value": "1.5rem"
     },
     "SPACING_LG": {
       "value": "1.5rem"
     },
+    "SPACING_XXS": {
+      "value": ".0625rem"
+    },
     "FONT_LINE_HEIGHT_SM": {
       "value": "1.25rem"
     },
@@ -1792,6 +1798,34 @@
       "originalValue": "{!WHITE}",
       "name": "PRIVATE_NAVIGATION_TAB_OUTLINE_NIGHT"
     },
+    "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_DAY": {
+      "type": "color",
+      "category": "navigation-tab-colors",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "originalValue": "{!WHITE_ALPHA_20}",
+      "name": "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_DAY"
+    },
+    "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_NIGHT": {
+      "type": "color",
+      "category": "navigation-tab-colors",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "originalValue": "{!WHITE_ALPHA_20}",
+      "name": "PRIVATE_NAVIGATION_TAB_ON_DARK_OUTLINE_NIGHT"
+    },
+    "PRIVATE_NAVIGATION_TAB_SELECTED_DAY": {
+      "type": "color",
+      "category": "navigation-tab-colors",
+      "value": "rgb(2, 77, 175)",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "PRIVATE_NAVIGATION_TAB_SELECTED_DAY"
+    },
+    "PRIVATE_NAVIGATION_TAB_SELECTED_NIGHT": {
+      "type": "color",
+      "category": "navigation-tab-colors",
+      "value": "rgb(5, 65, 132)",
+      "originalValue": "{!NIGHT_SKY}",
+      "name": "PRIVATE_NAVIGATION_TAB_SELECTED_NIGHT"
+    },
     "PRIVATE_CARD_BUTTON_CONTAINED_FILL_DAY": {
       "type": "color",
       "category": "card-button-colors",
@@ -3041,6 +3075,13 @@
       "originalValue": "@function bpk-spacing-lg() { @return {!SPACING_LG}; }",
       "name": "SPACING_FUNCTION_LG"
     },
+    "SPACING_FUNCTION_XS": {
+      "type": "function",
+      "category": "spacings",
+      "value": "@function bpk-spacing-xs() { @return .125rem; }",
+      "originalValue": "@function bpk-spacing-xs() { @return {!SPACING_XS}; }",
+      "name": "SPACING_FUNCTION_XS"
+    },
     "ONE_PIXEL_REM": {
       "type": "size",
       "category": "spacings",
@@ -3048,6 +3089,13 @@
       "originalValue": "{!ONE_PIXEL_REM}",
       "name": "ONE_PIXEL_REM"
     },
+    "SPACING_FUNCTION_XXS": {
+      "type": "function",
+      "category": "spacings",
+      "value": "@function bpk-spacing-xxs() { @return .0625rem; }",
+      "originalValue": "@function bpk-spacing-xxs() { @return {!SPACING_XXS}; }",
+      "name": "SPACING_FUNCTION_XXS"
+    },
     "SPACING_NONE": {
       "type": "size",
       "category": "spacings",

package/tokens/base.scss

@@ -391,6 +391,14 @@ $bpk-private-navigation-tab-hover-night: rgb(209, 247, 255);
 $bpk-private-navigation-tab-outline-day: rgb(193, 199, 207);
 /// @group navigation-tab-colors
 $bpk-private-navigation-tab-outline-night: rgb(255, 255, 255);
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-on-dark-outline-day: rgba(255, 255, 255, 0.2);
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-on-dark-outline-night: rgba(255, 255, 255, 0.2);
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-selected-day: rgb(2, 77, 175);
+/// @group navigation-tab-colors
+$bpk-private-navigation-tab-selected-night: rgb(5, 65, 132);
 /// @group card-button-colors
 $bpk-private-card-button-contained-fill-day: rgba(255, 255, 255, 0.8);
 /// @group card-button-colors
@@ -730,8 +738,12 @@ $bpk-private-slider-selected-day: rgb(21, 70, 121);
 /// @group spacings
 @function bpk-spacing-lg() { @return 1.5rem; }
 /// @group spacings
+@function bpk-spacing-xs() { @return .125rem; }
+/// @group spacings
 $bpk-one-pixel-rem: .0625rem;
 /// @group spacings
+@function bpk-spacing-xxs() { @return .0625rem; }
+/// @group spacings
 $bpk-spacing-none: 0;
 /// @group spacings
 $bpk-spacing-icon-text: .5rem;