@skyscanner/bpk-foundations-web 21.0.0 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "21.0.0",
+  "version": "22.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": "^21.0.0",
+    "@skyscanner/bpk-foundations-common": "^22.0.0",
     "color": "^5.0.0"
   },
-  "gitHead": "ba1f9465b2fc40c98cb42965ac3eadf534f8a116"
+  "gitHead": "9ed7037e72e88f6fe761313fc9499f4406b20732"
 }

package/tokens/base.common.js

@@ -19,9 +19,6 @@
  */
 
 module.exports = {
-  colorWhite: "rgb(255, 255, 255)",
-  colorSkyBlue: "rgb(0, 98, 227)",
-  colorBlack: "rgb(1, 9, 19)",
   privateBadgeBackgroundNormalDay: "rgb(239, 243, 248)",
   privateBadgeBackgroundNormalNight: "rgb(36, 51, 70)",
   canvasDay: "rgb(255, 255, 255)",
@@ -218,6 +215,7 @@ module.exports = {
   colorMonteverde: "rgb(0, 166, 152)",
   backgroundElevation03DarkColor: "rgb(58, 58, 60)",
   colorSkyGrayTint01: "rgb(68, 69, 96)",
+  colorBlack: "rgb(1, 9, 19)",
   backgroundElevation02DarkColor: "rgb(44, 44, 46)",
   colorSkyGrayTint02: "rgb(104, 105, 127)",
   lineDarkColor: "rgb(72, 72, 74)",
@@ -242,6 +240,7 @@ module.exports = {
   textPrimaryLightColor: "rgb(17, 18, 54)",
   colorBlackTint04: "rgb(72, 72, 74)",
   backgroundAlternativeSecondaryLightColor: "rgb(255, 255, 255)",
+  colorWhite: "rgb(255, 255, 255)",
   colorBlackTint05: "rgb(99, 99, 102)",
   colorBlackTint06: "rgb(142, 142, 147)",
   colorPanjin: "rgb(209, 67, 91)",
@@ -254,6 +253,7 @@ module.exports = {
   backgroundElevation02LightColor: "rgb(255, 255, 255)",
   backgroundElevation03LightColor: "rgb(255, 255, 255)",
   colorPetra: "rgb(255, 171, 149)",
+  colorSkyBlue: "rgb(0, 98, 227)",
   textTertiaryDarkColor: "rgb(142, 142, 147)",
   backgroundTertiaryDarkColor: "rgb(44, 44, 46)",
   backgroundSecondaryDarkColor: "rgb(29, 27, 32)",
@@ -280,13 +280,15 @@ module.exports = {
   durationXs: "50ms",
   durationSm: "200ms",
   durationBase: "400ms",
-  borderRadiusXs: ".25rem",
-  borderRadiusSm: ".5rem",
-  borderRadiusMd: ".75rem",
-  borderRadiusLg: "1.5rem",
-  borderRadiusXl: "2.5rem",
   borderSizeSm: "1px",
   borderSizeLg: "2px",
+  borderRadiusFull: "100%",
+  borderRadiusXl: "2.5rem",
+  borderRadiusMd: ".75rem",
+  borderRadiusNavTabs: "1.125rem",
+  borderRadiusSm: ".5rem",
+  borderRadiusXs: ".25rem",
+  borderRadiusLg: "1.5rem",
   borderSizeXl: "3px",
   boxShadowSm: "0px 1px 3px 0px rgba(37,32,31,.3)",
   boxShadowLg: "0px 4px 14px 0px rgba(37,32,31,.25)",

package/tokens/base.default.scss

@@ -17,12 +17,6 @@
  * limitations under the License.
  * 
  */
-/// @group colors
-$bpk-color-white: rgb(255, 255, 255) !default;
-/// @group colors
-$bpk-color-sky-blue: rgb(0, 98, 227) !default;
-/// @group colors
-$bpk-color-black: rgb(1, 9, 19) !default;
 /// @group badge-colors
 $bpk-private-badge-background-normal-day: rgb(239, 243, 248) !default;
 /// @group badge-colors
@@ -415,6 +409,8 @@ $bpk-color-monteverde: rgb(0, 166, 152) !default;
 $bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;
 /// @group colors
 $bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;
+/// @group colors
+$bpk-color-black: rgb(1, 9, 19) !default;
 /// @group text-colors
 $bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;
 /// @group colors
@@ -464,6 +460,8 @@ $bpk-color-black-tint-04: rgb(72, 72, 74) !default;
 /// @group colors
 $bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !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;
@@ -487,6 +485,8 @@ $bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;
 $bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;
 /// @group colors
 $bpk-color-petra: rgb(255, 171, 149) !default;
+/// @group colors
+$bpk-color-sky-blue: rgb(0, 98, 227) !default;
 /// @group text-colors
 $bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;
 /// @group colors
@@ -539,20 +539,24 @@ $bpk-duration-xs: 50ms !default;
 $bpk-duration-sm: 200ms !default;
 /// @group animations
 $bpk-duration-base: 400ms !default;
+/// @group borders
+$bpk-border-size-sm: 1px !default;
+/// @group borders
+$bpk-border-size-lg: 2px !default;
 /// @group radii
-$bpk-border-radius-xs: .25rem !default;
+$bpk-border-radius-full: 100% !default;
 /// @group radii
-$bpk-border-radius-sm: .5rem !default;
+$bpk-border-radius-xl: 2.5rem !default;
 /// @group radii
 $bpk-border-radius-md: .75rem !default;
 /// @group radii
-$bpk-border-radius-lg: 1.5rem !default;
+$bpk-border-radius-nav-tabs: 1.125rem !default;
 /// @group radii
-$bpk-border-radius-xl: 2.5rem !default;
-/// @group borders
-$bpk-border-size-sm: 1px !default;
-/// @group borders
-$bpk-border-size-lg: 2px !default;
+$bpk-border-radius-sm: .5rem !default;
+/// @group radii
+$bpk-border-radius-xs: .25rem !default;
+/// @group radii
+$bpk-border-radius-lg: 1.5rem !default;
 /// @group borders
 $bpk-border-size-xl: 3px !default;
 /// @group box-shadows

package/tokens/base.es6.d.ts

@@ -17,9 +17,6 @@
  * limitations under the License.
  * 
  */
-export declare const colorWhite = "rgb(255, 255, 255)" as const;
-export declare const colorSkyBlue = "rgb(0, 98, 227)" as const;
-export declare const colorBlack = "rgb(1, 9, 19)" as const;
 export declare const privateBadgeBackgroundNormalDay = "rgb(239, 243, 248)" as const;
 export declare const privateBadgeBackgroundNormalNight = "rgb(36, 51, 70)" as const;
 export declare const canvasDay = "rgb(255, 255, 255)" as const;
@@ -216,6 +213,7 @@ export declare const colorValensole = "rgb(165, 155, 200)" as const;
 export declare const colorMonteverde = "rgb(0, 166, 152)" as const;
 export declare const backgroundElevation03DarkColor = "rgb(58, 58, 60)" as const;
 export declare const colorSkyGrayTint01 = "rgb(68, 69, 96)" as const;
+export declare const colorBlack = "rgb(1, 9, 19)" as const;
 export declare const backgroundElevation02DarkColor = "rgb(44, 44, 46)" as const;
 export declare const colorSkyGrayTint02 = "rgb(104, 105, 127)" as const;
 export declare const lineDarkColor = "rgb(72, 72, 74)" as const;
@@ -240,6 +238,7 @@ export declare const colorBlackTint03 = "rgb(58, 58, 60)" as const;
 export declare const textPrimaryLightColor = "rgb(17, 18, 54)" as const;
 export declare const colorBlackTint04 = "rgb(72, 72, 74)" as const;
 export declare const backgroundAlternativeSecondaryLightColor = "rgb(255, 255, 255)" 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;
@@ -252,6 +251,7 @@ export declare const lineLightColor = "rgb(205, 205, 215)" as const;
 export declare const backgroundElevation02LightColor = "rgb(255, 255, 255)" as const;
 export declare const backgroundElevation03LightColor = "rgb(255, 255, 255)" as const;
 export declare const colorPetra = "rgb(255, 171, 149)" as const;
+export declare const colorSkyBlue = "rgb(0, 98, 227)" as const;
 export declare const textTertiaryDarkColor = "rgb(142, 142, 147)" as const;
 export declare const backgroundTertiaryDarkColor = "rgb(44, 44, 46)" as const;
 export declare const backgroundSecondaryDarkColor = "rgb(29, 27, 32)" as const;
@@ -278,13 +278,15 @@ export declare const colorSkyBlueShade02 = "rgb(4, 39, 89)" as const;
 export declare const durationXs = "50ms" as const;
 export declare const durationSm = "200ms" as const;
 export declare const durationBase = "400ms" as const;
-export declare const borderRadiusXs = ".25rem" as const;
-export declare const borderRadiusSm = ".5rem" as const;
-export declare const borderRadiusMd = ".75rem" as const;
-export declare const borderRadiusLg = "1.5rem" as const;
-export declare const borderRadiusXl = "2.5rem" as const;
 export declare const borderSizeSm = "1px" as const;
 export declare const borderSizeLg = "2px" as const;
+export declare const borderRadiusFull = "100%" as const;
+export declare const borderRadiusXl = "2.5rem" as const;
+export declare const borderRadiusMd = ".75rem" as const;
+export declare const borderRadiusNavTabs = "1.125rem" as const;
+export declare const borderRadiusSm = ".5rem" as const;
+export declare const borderRadiusXs = ".25rem" as const;
+export declare const borderRadiusLg = "1.5rem" as const;
 export declare const borderSizeXl = "3px" as const;
 export declare const boxShadowSm = "0px 1px 3px 0px rgba(37,32,31,.3)" as const;
 export declare const boxShadowLg = "0px 4px 14px 0px rgba(37,32,31,.25)" as const;
@@ -540,15 +542,13 @@ privateChipOnDarkOnDismissIconDay,
 privateChipOnDarkOnDismissIconNight,
 } as const;
 export declare const colors = {
-colorWhite,
-colorSkyBlue,
-colorBlack,
 colorSkyBlueShade03,
 colorPrimaryGradientLight,
 colorErfoud,
 colorValensole,
 colorMonteverde,
 colorSkyGrayTint01,
+colorBlack,
 colorSkyGrayTint02,
 lineDarkColor,
 colorSagano,
@@ -567,6 +567,7 @@ backgroundDarkColor,
 colorBlackTint03,
 colorBlackTint04,
 backgroundAlternativeSecondaryLightColor,
+colorWhite,
 colorBlackTint05,
 colorBlackTint06,
 colorPanjin,
@@ -576,6 +577,7 @@ colorGlencoe,
 colorTochigi,
 lineLightColor,
 colorPetra,
+colorSkyBlue,
 backgroundTertiaryDarkColor,
 backgroundSecondaryDarkColor,
 backgroundAlternativeLightColor,
@@ -732,11 +734,13 @@ export declare const panels = {
 panelBorderColor,
 } as const;
 export declare const radii = {
-borderRadiusXs,
-borderRadiusSm,
+borderRadiusFull,
+borderRadiusXl,
 borderRadiusMd,
+borderRadiusNavTabs,
+borderRadiusSm,
+borderRadiusXs,
 borderRadiusLg,
-borderRadiusXl,
 } as const;
 export declare const ratingBarColors = {
 privateBarTrackDefaultDay,

package/tokens/base.es6.js

@@ -17,9 +17,6 @@
  * limitations under the License.
  * 
  */
-export const colorWhite = "rgb(255, 255, 255)";
-export const colorSkyBlue = "rgb(0, 98, 227)";
-export const colorBlack = "rgb(1, 9, 19)";
 export const privateBadgeBackgroundNormalDay = "rgb(239, 243, 248)";
 export const privateBadgeBackgroundNormalNight = "rgb(36, 51, 70)";
 export const canvasDay = "rgb(255, 255, 255)";
@@ -216,6 +213,7 @@ export const colorValensole = "rgb(165, 155, 200)";
 export const colorMonteverde = "rgb(0, 166, 152)";
 export const backgroundElevation03DarkColor = "rgb(58, 58, 60)";
 export const colorSkyGrayTint01 = "rgb(68, 69, 96)";
+export const colorBlack = "rgb(1, 9, 19)";
 export const backgroundElevation02DarkColor = "rgb(44, 44, 46)";
 export const colorSkyGrayTint02 = "rgb(104, 105, 127)";
 export const lineDarkColor = "rgb(72, 72, 74)";
@@ -240,6 +238,7 @@ export const colorBlackTint03 = "rgb(58, 58, 60)";
 export const textPrimaryLightColor = "rgb(17, 18, 54)";
 export const colorBlackTint04 = "rgb(72, 72, 74)";
 export const backgroundAlternativeSecondaryLightColor = "rgb(255, 255, 255)";
+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)";
@@ -252,6 +251,7 @@ export const lineLightColor = "rgb(205, 205, 215)";
 export const backgroundElevation02LightColor = "rgb(255, 255, 255)";
 export const backgroundElevation03LightColor = "rgb(255, 255, 255)";
 export const colorPetra = "rgb(255, 171, 149)";
+export const colorSkyBlue = "rgb(0, 98, 227)";
 export const textTertiaryDarkColor = "rgb(142, 142, 147)";
 export const backgroundTertiaryDarkColor = "rgb(44, 44, 46)";
 export const backgroundSecondaryDarkColor = "rgb(29, 27, 32)";
@@ -278,13 +278,15 @@ export const colorSkyBlueShade02 = "rgb(4, 39, 89)";
 export const durationXs = "50ms";
 export const durationSm = "200ms";
 export const durationBase = "400ms";
-export const borderRadiusXs = ".25rem";
-export const borderRadiusSm = ".5rem";
-export const borderRadiusMd = ".75rem";
-export const borderRadiusLg = "1.5rem";
-export const borderRadiusXl = "2.5rem";
 export const borderSizeSm = "1px";
 export const borderSizeLg = "2px";
+export const borderRadiusFull = "100%";
+export const borderRadiusXl = "2.5rem";
+export const borderRadiusMd = ".75rem";
+export const borderRadiusNavTabs = "1.125rem";
+export const borderRadiusSm = ".5rem";
+export const borderRadiusXs = ".25rem";
+export const borderRadiusLg = "1.5rem";
 export const borderSizeXl = "3px";
 export const boxShadowSm = "0px 1px 3px 0px rgba(37,32,31,.3)";
 export const boxShadowLg = "0px 4px 14px 0px rgba(37,32,31,.25)";
@@ -540,15 +542,13 @@ privateChipOnDarkOnDismissIconDay,
 privateChipOnDarkOnDismissIconNight,
 };
 export const colors = {
-colorWhite,
-colorSkyBlue,
-colorBlack,
 colorSkyBlueShade03,
 colorPrimaryGradientLight,
 colorErfoud,
 colorValensole,
 colorMonteverde,
 colorSkyGrayTint01,
+colorBlack,
 colorSkyGrayTint02,
 lineDarkColor,
 colorSagano,
@@ -567,6 +567,7 @@ backgroundDarkColor,
 colorBlackTint03,
 colorBlackTint04,
 backgroundAlternativeSecondaryLightColor,
+colorWhite,
 colorBlackTint05,
 colorBlackTint06,
 colorPanjin,
@@ -576,6 +577,7 @@ colorGlencoe,
 colorTochigi,
 lineLightColor,
 colorPetra,
+colorSkyBlue,
 backgroundTertiaryDarkColor,
 backgroundSecondaryDarkColor,
 backgroundAlternativeLightColor,
@@ -732,11 +734,13 @@ export const panels = {
 panelBorderColor,
 };
 export const radii = {
-borderRadiusXs,
-borderRadiusSm,
+borderRadiusFull,
+borderRadiusXl,
 borderRadiusMd,
+borderRadiusNavTabs,
+borderRadiusSm,
+borderRadiusXs,
 borderRadiusLg,
-borderRadiusXl,
 };
 export const ratingBarColors = {
 privateBarTrackDefaultDay,

package/tokens/base.raw.json

@@ -300,6 +300,9 @@
     "LETTER_SPACING_TIGHT": {
       "value": "-0.02em"
     },
+    "BORDER_RADIUS_FULL": {
+      "value": "100%"
+    },
     "FONT_SIZE_LG": {
       "value": "1.25rem"
     },
@@ -384,6 +387,9 @@
     "SPACING_MD": {
       "value": ".5rem"
     },
+    "BORDER_RADIUS_NAV_TABS": {
+      "value": "1.125rem"
+    },
     "BORDER_RADIUS_SM": {
       "value": ".5rem"
     },
@@ -467,27 +473,6 @@
     }
   },
   "props": {
-    "COLOR_WHITE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "{!WHITE}",
-      "name": "COLOR_WHITE"
-    },
-    "COLOR_SKY_BLUE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(0, 98, 227)",
-      "originalValue": "{!SKY_BLUE}",
-      "name": "COLOR_SKY_BLUE"
-    },
-    "COLOR_BLACK": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(1, 9, 19)",
-      "originalValue": "{!BLACK}",
-      "name": "COLOR_BLACK"
-    },
     "PRIVATE_BADGE_BACKGROUND_NORMAL_DAY": {
       "type": "color",
       "category": "badge-colors",
@@ -1867,6 +1852,13 @@
       "originalValue": "{!SKY_GRAY_TINT_01}",
       "name": "COLOR_SKY_GRAY_TINT_01"
     },
+    "COLOR_BLACK": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(1, 9, 19)",
+      "originalValue": "#010913",
+      "name": "COLOR_BLACK"
+    },
     "BACKGROUND_ELEVATION_02_DARK_COLOR": {
       "type": "color",
       "category": "text-colors",
@@ -2059,6 +2051,13 @@
       "originalValue": "{!WHITE}",
       "name": "BACKGROUND_ALTERNATIVE_SECONDARY_LIGHT_COLOR"
     },
+    "COLOR_WHITE": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "#ffffff",
+      "name": "COLOR_WHITE"
+    },
     "COLOR_BLACK_TINT_05": {
       "value": "rgb(99, 99, 102)",
       "deprecated": true,
@@ -2155,6 +2154,13 @@
       "originalValue": "{!PETRA}",
       "name": "COLOR_PETRA"
     },
+    "COLOR_SKY_BLUE": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(0, 98, 227)",
+      "originalValue": "#0062e3",
+      "name": "COLOR_SKY_BLUE"
+    },
     "TEXT_TERTIARY_DARK_COLOR": {
       "value": "rgb(142, 142, 147)",
       "deprecated": true,
@@ -2360,19 +2366,33 @@
       "originalValue": "{!ANIMATION_DURATION_BASE}",
       "name": "DURATION_BASE"
     },
-    "BORDER_RADIUS_XS": {
+    "BORDER_SIZE_SM": {
       "type": "size",
-      "value": ".25rem",
+      "value": "1px",
+      "category": "borders",
+      "originalValue": "{!BORDER_SIZE_SM}",
+      "name": "BORDER_SIZE_SM"
+    },
+    "BORDER_SIZE_LG": {
+      "type": "size",
+      "value": "2px",
+      "category": "borders",
+      "originalValue": "{!BORDER_SIZE_LG}",
+      "name": "BORDER_SIZE_LG"
+    },
+    "BORDER_RADIUS_FULL": {
+      "type": "size",
+      "value": "100%",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_XS}",
-      "name": "BORDER_RADIUS_XS"
+      "originalValue": "{!BORDER_RADIUS_FULL}",
+      "name": "BORDER_RADIUS_FULL"
     },
-    "BORDER_RADIUS_SM": {
+    "BORDER_RADIUS_XL": {
       "type": "size",
-      "value": ".5rem",
+      "value": "2.5rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_SM}",
-      "name": "BORDER_RADIUS_SM"
+      "originalValue": "{!BORDER_RADIUS_XL}",
+      "name": "BORDER_RADIUS_XL"
     },
     "BORDER_RADIUS_MD": {
       "type": "size",
@@ -2381,33 +2401,33 @@
       "originalValue": "{!BORDER_RADIUS_MD}",
       "name": "BORDER_RADIUS_MD"
     },
-    "BORDER_RADIUS_LG": {
+    "BORDER_RADIUS_NAV_TABS": {
       "type": "size",
-      "value": "1.5rem",
+      "value": "1.125rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_LG}",
-      "name": "BORDER_RADIUS_LG"
+      "originalValue": "{!BORDER_RADIUS_NAV_TABS}",
+      "name": "BORDER_RADIUS_NAV_TABS"
     },
-    "BORDER_RADIUS_XL": {
+    "BORDER_RADIUS_SM": {
       "type": "size",
-      "value": "2.5rem",
+      "value": ".5rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_XL}",
-      "name": "BORDER_RADIUS_XL"
+      "originalValue": "{!BORDER_RADIUS_SM}",
+      "name": "BORDER_RADIUS_SM"
     },
-    "BORDER_SIZE_SM": {
+    "BORDER_RADIUS_XS": {
       "type": "size",
-      "value": "1px",
-      "category": "borders",
-      "originalValue": "{!BORDER_SIZE_SM}",
-      "name": "BORDER_SIZE_SM"
+      "value": ".25rem",
+      "category": "radii",
+      "originalValue": "{!BORDER_RADIUS_XS}",
+      "name": "BORDER_RADIUS_XS"
     },
-    "BORDER_SIZE_LG": {
+    "BORDER_RADIUS_LG": {
       "type": "size",
-      "value": "2px",
-      "category": "borders",
-      "originalValue": "{!BORDER_SIZE_LG}",
-      "name": "BORDER_SIZE_LG"
+      "value": "1.5rem",
+      "category": "radii",
+      "originalValue": "{!BORDER_RADIUS_LG}",
+      "name": "BORDER_RADIUS_LG"
     },
     "BORDER_SIZE_XL": {
       "type": "size",

package/tokens/base.scss

@@ -17,12 +17,6 @@
  * limitations under the License.
  * 
  */
-/// @group colors
-$bpk-color-white: rgb(255, 255, 255);
-/// @group colors
-$bpk-color-sky-blue: rgb(0, 98, 227);
-/// @group colors
-$bpk-color-black: rgb(1, 9, 19);
 /// @group badge-colors
 $bpk-private-badge-background-normal-day: rgb(239, 243, 248);
 /// @group badge-colors
@@ -415,6 +409,8 @@ $bpk-color-monteverde: rgb(0, 166, 152);
 $bpk-background-elevation-03-dark-color: rgb(58, 58, 60);
 /// @group colors
 $bpk-color-sky-gray-tint-01: rgb(68, 69, 96);
+/// @group colors
+$bpk-color-black: rgb(1, 9, 19);
 /// @group text-colors
 $bpk-background-elevation-02-dark-color: rgb(44, 44, 46);
 /// @group colors
@@ -464,6 +460,8 @@ $bpk-color-black-tint-04: rgb(72, 72, 74);
 /// @group colors
 $bpk-background-alternative-secondary-light-color: rgb(255, 255, 255);
 /// @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);
@@ -487,6 +485,8 @@ $bpk-background-elevation-02-light-color: rgb(255, 255, 255);
 $bpk-background-elevation-03-light-color: rgb(255, 255, 255);
 /// @group colors
 $bpk-color-petra: rgb(255, 171, 149);
+/// @group colors
+$bpk-color-sky-blue: rgb(0, 98, 227);
 /// @group text-colors
 $bpk-text-tertiary-dark-color: rgb(142, 142, 147);
 /// @group colors
@@ -539,20 +539,24 @@ $bpk-duration-xs: 50ms;
 $bpk-duration-sm: 200ms;
 /// @group animations
 $bpk-duration-base: 400ms;
+/// @group borders
+$bpk-border-size-sm: 1px;
+/// @group borders
+$bpk-border-size-lg: 2px;
 /// @group radii
-$bpk-border-radius-xs: .25rem;
+$bpk-border-radius-full: 100%;
 /// @group radii
-$bpk-border-radius-sm: .5rem;
+$bpk-border-radius-xl: 2.5rem;
 /// @group radii
 $bpk-border-radius-md: .75rem;
 /// @group radii
-$bpk-border-radius-lg: 1.5rem;
+$bpk-border-radius-nav-tabs: 1.125rem;
 /// @group radii
-$bpk-border-radius-xl: 2.5rem;
-/// @group borders
-$bpk-border-size-sm: 1px;
-/// @group borders
-$bpk-border-size-lg: 2px;
+$bpk-border-radius-sm: .5rem;
+/// @group radii
+$bpk-border-radius-xs: .25rem;
+/// @group radii
+$bpk-border-radius-lg: 1.5rem;
 /// @group borders
 $bpk-border-size-xl: 3px;
 /// @group box-shadows