@skyscanner/bpk-foundations-web 19.0.0 → 19.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "19.0.0",
+  "version": "19.2.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": "^6.13.0",
+    "@skyscanner/bpk-foundations-common": "^6.14.0",
     "color": "^4.2.3"
   },
-  "gitHead": "a88b0817b4896a748a3f32d8355b9b7d52f2960c"
+  "gitHead": "9011e9118cf4b4c6818da02419aeab18de4d6384"
 }

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(239, 243, 248)",
+  surfaceLowContrastDay: "rgb(247, 249, 251)",
   surfaceSubtleDay: "rgb(227, 240, 255)",
   surfaceHighlightDay: "rgb(224, 228, 233)",
   textOnDarkDay: "rgb(255, 255, 255)",
@@ -326,11 +326,12 @@ module.exports = {
   flareCornerRadius: "1.3125rem",
   inputLargeHeight: "3rem",
   inputBorder: "solid .0625rem #C1C7CF",
-  selectBorderRadius: ".25rem",
+  selectBorderRadius: ".5rem",
   inputBackground: "#ffffff",
   inputBorderWidth: ".0625rem",
   labelDisabledColor: "rgba(0, 0, 0, 0.2)",
-  inputBorderRadius: ".25rem",
+  inputLargeBorderRadius: ".75rem",
+  inputBorderRadius: ".5rem",
   selectDisabledBorderColor: "rgb(224, 228, 233)",
   inputDisabledColor: "rgba(0, 0, 0, 0.2)",
   inputPaddingX: ".5rem",
@@ -338,6 +339,7 @@ module.exports = {
   selectBorderWidth: ".0625rem",
   formValidationColor: "rgb(231, 8, 102)",
   inputHeight: "2.25rem",
+  selectLargeBorderRadius: ".75rem",
   inputDisabledBorderColor: "rgb(239, 243, 248)",
   horizontalNavBarSelectedColor: "rgb(0, 98, 227)",
   iconSizeSm: "1rem",

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(239, 243, 248) !default;
+$bpk-surface-low-contrast-day: rgb(247, 249, 251) !default;
 /// @group surface-colors
 $bpk-surface-subtle-day: rgb(227, 240, 255) !default;
 /// @group surface-colors
@@ -632,7 +632,7 @@ $bpk-input-large-height: 3rem !default;
 /// @group forms
 $bpk-input-border: solid .0625rem #C1C7CF !default;
 /// @group forms
-$bpk-select-border-radius: .25rem !default;
+$bpk-select-border-radius: .5rem !default;
 /// @group forms
 $bpk-input-background: #ffffff !default;
 /// @group forms
@@ -640,7 +640,9 @@ $bpk-input-border-width: .0625rem !default;
 /// @group forms
 $bpk-label-disabled-color: rgba(0, 0, 0, 0.2) !default;
 /// @group forms
-$bpk-input-border-radius: .25rem !default;
+$bpk-input-large-border-radius: .75rem !default;
+/// @group forms
+$bpk-input-border-radius: .5rem !default;
 /// @group forms
 $bpk-select-disabled-border-color: rgb(224, 228, 233) !default;
 /// @group forms
@@ -656,6 +658,8 @@ $bpk-form-validation-color: rgb(231, 8, 102) !default;
 /// @group forms
 $bpk-input-height: 2.25rem !default;
 /// @group forms
+$bpk-select-large-border-radius: .75rem !default;
+/// @group forms
 $bpk-input-disabled-border-color: rgb(239, 243, 248) !default;
 /// @group horizontal-nav
 $bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227) !default;

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(239, 243, 248)" as const;
+export declare const surfaceLowContrastDay = "rgb(247, 249, 251)" 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;
@@ -324,11 +324,12 @@ export declare const flareHeightMobile = "1rem" as const;
 export declare const flareCornerRadius = "1.3125rem" as const;
 export declare const inputLargeHeight = "3rem" as const;
 export declare const inputBorder = "solid .0625rem #C1C7CF" as const;
-export declare const selectBorderRadius = ".25rem" as const;
+export declare const selectBorderRadius = ".5rem" as const;
 export declare const inputBackground = "#ffffff" as const;
 export declare const inputBorderWidth = ".0625rem" as const;
 export declare const labelDisabledColor = "rgba(0, 0, 0, 0.2)" as const;
-export declare const inputBorderRadius = ".25rem" as const;
+export declare const inputLargeBorderRadius = ".75rem" as const;
+export declare const inputBorderRadius = ".5rem" as const;
 export declare const selectDisabledBorderColor = "rgb(224, 228, 233)" as const;
 export declare const inputDisabledColor = "rgba(0, 0, 0, 0.2)" as const;
 export declare const inputPaddingX = ".5rem" as const;
@@ -336,6 +337,7 @@ export declare const inputPaddingY = ".5rem" as const;
 export declare const selectBorderWidth = ".0625rem" as const;
 export declare const formValidationColor = "rgb(231, 8, 102)" as const;
 export declare const inputHeight = "2.25rem" as const;
+export declare const selectLargeBorderRadius = ".75rem" as const;
 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;
@@ -618,6 +620,7 @@ selectBorderRadius,
 inputBackground,
 inputBorderWidth,
 labelDisabledColor,
+inputLargeBorderRadius,
 inputBorderRadius,
 selectDisabledBorderColor,
 inputDisabledColor,
@@ -626,6 +629,7 @@ inputPaddingY,
 selectBorderWidth,
 formValidationColor,
 inputHeight,
+selectLargeBorderRadius,
 inputDisabledBorderColor,
 } as const;
 export declare const horizontalNav = {

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(239, 243, 248)";
+export const surfaceLowContrastDay = "rgb(247, 249, 251)";
 export const surfaceSubtleDay = "rgb(227, 240, 255)";
 export const surfaceHighlightDay = "rgb(224, 228, 233)";
 export const textOnDarkDay = "rgb(255, 255, 255)";
@@ -324,11 +324,12 @@ export const flareHeightMobile = "1rem";
 export const flareCornerRadius = "1.3125rem";
 export const inputLargeHeight = "3rem";
 export const inputBorder = "solid .0625rem #C1C7CF";
-export const selectBorderRadius = ".25rem";
+export const selectBorderRadius = ".5rem";
 export const inputBackground = "#ffffff";
 export const inputBorderWidth = ".0625rem";
 export const labelDisabledColor = "rgba(0, 0, 0, 0.2)";
-export const inputBorderRadius = ".25rem";
+export const inputLargeBorderRadius = ".75rem";
+export const inputBorderRadius = ".5rem";
 export const selectDisabledBorderColor = "rgb(224, 228, 233)";
 export const inputDisabledColor = "rgba(0, 0, 0, 0.2)";
 export const inputPaddingX = ".5rem";
@@ -336,6 +337,7 @@ export const inputPaddingY = ".5rem";
 export const selectBorderWidth = ".0625rem";
 export const formValidationColor = "rgb(231, 8, 102)";
 export const inputHeight = "2.25rem";
+export const selectLargeBorderRadius = ".75rem";
 export const inputDisabledBorderColor = "rgb(239, 243, 248)";
 export const horizontalNavBarSelectedColor = "rgb(0, 98, 227)";
 export const iconSizeSm = "1rem";
@@ -618,6 +620,7 @@ selectBorderRadius,
 inputBackground,
 inputBorderWidth,
 labelDisabledColor,
+inputLargeBorderRadius,
 inputBorderRadius,
 selectDisabledBorderColor,
 inputDisabledColor,
@@ -626,6 +629,7 @@ inputPaddingY,
 selectBorderWidth,
 formValidationColor,
 inputHeight,
+selectLargeBorderRadius,
 inputDisabledBorderColor,
 };
 export const horizontalNav = {

package/tokens/base.raw.json

@@ -51,6 +51,9 @@
     "ERFOUD": {
       "value": "#ffb54d"
     },
+    "GREY_05": {
+      "value": "#F7F9FB"
+    },
     "NIGHT_GREEN_SPOT": {
       "value": "#62F1C6"
     },
@@ -1021,8 +1024,8 @@
     "SURFACE_LOW_CONTRAST_DAY": {
       "type": "color",
       "category": "surface-colors",
-      "value": "rgb(239, 243, 248)",
-      "originalValue": "{!GREY_10}",
+      "value": "rgb(247, 249, 251)",
+      "originalValue": "{!GREY_05}",
       "name": "SURFACE_LOW_CONTRAST_DAY"
     },
     "SURFACE_SUBTLE_DAY": {
@@ -2681,9 +2684,9 @@
     },
     "SELECT_BORDER_RADIUS": {
       "category": "forms",
-      "value": ".25rem",
+      "value": ".5rem",
       "type": "radius",
-      "originalValue": "{!BORDER_RADIUS_XS}",
+      "originalValue": "{!BORDER_RADIUS_SM}",
       "name": "SELECT_BORDER_RADIUS"
     },
     "INPUT_BACKGROUND": {
@@ -2707,11 +2710,18 @@
       "originalValue": "{!BLACK_ALPHA_20}",
       "name": "LABEL_DISABLED_COLOR"
     },
+    "INPUT_LARGE_BORDER_RADIUS": {
+      "category": "forms",
+      "value": ".75rem",
+      "type": "radius",
+      "originalValue": "{!BORDER_RADIUS_MD}",
+      "name": "INPUT_LARGE_BORDER_RADIUS"
+    },
     "INPUT_BORDER_RADIUS": {
       "category": "forms",
-      "value": ".25rem",
+      "value": ".5rem",
       "type": "radius",
-      "originalValue": "{!BORDER_RADIUS_XS}",
+      "originalValue": "{!BORDER_RADIUS_SM}",
       "name": "INPUT_BORDER_RADIUS"
     },
     "SELECT_DISABLED_BORDER_COLOR": {
@@ -2763,6 +2773,13 @@
       "originalValue": "{!BUTTON_HEIGHT}",
       "name": "INPUT_HEIGHT"
     },
+    "SELECT_LARGE_BORDER_RADIUS": {
+      "category": "forms",
+      "value": ".75rem",
+      "type": "radius",
+      "originalValue": "{!BORDER_RADIUS_MD}",
+      "name": "SELECT_LARGE_BORDER_RADIUS"
+    },
     "INPUT_DISABLED_BORDER_COLOR": {
       "category": "forms",
       "value": "rgb(239, 243, 248)",

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(239, 243, 248);
+$bpk-surface-low-contrast-day: rgb(247, 249, 251);
 /// @group surface-colors
 $bpk-surface-subtle-day: rgb(227, 240, 255);
 /// @group surface-colors
@@ -632,7 +632,7 @@ $bpk-input-large-height: 3rem;
 /// @group forms
 $bpk-input-border: solid .0625rem #C1C7CF;
 /// @group forms
-$bpk-select-border-radius: .25rem;
+$bpk-select-border-radius: .5rem;
 /// @group forms
 $bpk-input-background: #ffffff;
 /// @group forms
@@ -640,7 +640,9 @@ $bpk-input-border-width: .0625rem;
 /// @group forms
 $bpk-label-disabled-color: rgba(0, 0, 0, 0.2);
 /// @group forms
-$bpk-input-border-radius: .25rem;
+$bpk-input-large-border-radius: .75rem;
+/// @group forms
+$bpk-input-border-radius: .5rem;
 /// @group forms
 $bpk-select-disabled-border-color: rgb(224, 228, 233);
 /// @group forms
@@ -656,6 +658,8 @@ $bpk-form-validation-color: rgb(231, 8, 102);
 /// @group forms
 $bpk-input-height: 2.25rem;
 /// @group forms
+$bpk-select-large-border-radius: .75rem;
+/// @group forms
 $bpk-input-disabled-border-color: rgb(239, 243, 248);
 /// @group horizontal-nav
 $bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227);