@skyscanner/bpk-foundations-web 22.4.0 → 24.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "22.4.0",
+  "version": "24.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": "^22.4.0",
+    "@skyscanner/bpk-foundations-common": "^24.0.0",
     "color": "^5.0.0"
   },
-  "gitHead": "4e4577c7b29a46464128425ff507ad77155451d9"
+  "gitHead": "c0b09255d56f00c139988461085774835a0d573b"
 }

package/tokens/base.common.js

@@ -44,8 +44,10 @@ module.exports = {
   statusDangerFillDay: "rgb(255, 233, 249)",
   statusWarningFillDay: "rgb(255, 247, 207)",
   surfaceHeroNight: "rgb(1, 9, 19)",
+  surfaceTintNight: "rgba(255, 255, 255, 0.1)",
   surfaceDefaultNight: "rgb(19, 29, 43)",
   surfaceHeroDay: "rgb(0, 98, 227)",
+  surfaceTintDay: "rgba(255, 255, 255, 0.1)",
   surfaceDefaultDay: "rgb(255, 255, 255)",
   surfaceContrastNight: "rgb(1, 9, 19)",
   surfaceContrastDay: "rgb(5, 32, 60)",
@@ -116,14 +118,16 @@ module.exports = {
   marcommsGreenMuted: "rgb(212, 255, 242)",
   marcommsBlueMuted: "rgb(217, 248, 255)",
   marcommsEcoGreen: "rgb(15, 161, 169)",
-  privateChipOnDarkPressedStrokeDay: "rgb(255, 255, 255)",
-  privateChipOnDarkPressedStrokeNight: "rgb(5, 65, 132)",
-  privateChipOnDarkOnBackgroundDay: "rgb(255, 255, 255)",
+  privateChipOnDarkOnFillDay: "rgb(21, 70, 121)",
+  privateChipOnDarkOnDismissIconNight: "rgba(255, 255, 255, 0.5)",
   privateChipOnDarkOnBackgroundNight: "rgb(5, 65, 132)",
-  privateChipDisabledBackgroundDay: "rgb(224, 228, 233)",
-  privateChipDisabledBackgroundNight: "rgb(11, 18, 29)",
+  privateChipOnDarkOnBackgroundDay: "rgb(255, 255, 255)",
   privateChipOnDarkOnDismissIconDay: "rgb(98, 105, 113)",
-  privateChipOnDarkOnDismissIconNight: "rgba(255, 255, 255, 0.5)",
+  privateChipOnDarkPressedStrokeNight: "rgb(5, 65, 132)",
+  privateChipOnDarkPressedStrokeDay: "rgb(255, 255, 255)",
+  privateChipDisabledBackgroundNight: "rgb(11, 18, 29)",
+  privateChipDisabledBackgroundDay: "rgb(224, 228, 233)",
+  privateChipOnDarkOnFillNight: "rgb(2, 77, 175)",
   privateMapPreviousSelectionDay: "rgb(207, 228, 255)",
   privateMapClusterPinNight: "rgb(255, 255, 255)",
   privateMapClusterPinPreviousSelectionNight: "rgb(148, 195, 255)",
@@ -155,12 +159,12 @@ module.exports = {
   privateButtonFeaturedPressedBackgroundDay: "rgb(2, 77, 175)",
   privateButtonPrimaryOnDarkDisabledForegroundNight: "rgba(255, 255, 255, 0.2)",
   privateButtonSecondaryOnDarkDisabledBackgroundDay: "rgb(11, 18, 29)",
-  privateButtonSecondaryOnDarkPressedBackgroundNight: "rgb(1, 9, 19)",
+  privateButtonSecondaryOnDarkPressedBackgroundNight: "rgba(255, 255, 255, 0.2)",
   privateButtonDestructiveNormalForegroundDay: "rgb(231, 8, 102)",
   privateButtonPrimaryOnDarkNormalBackgroundDay: "rgb(255, 255, 255)",
   privateButtonPrimaryOnDarkDisabledForegroundDay: "rgba(0, 0, 0, 0.2)",
   privateButtonLinkPressedForegroundNight: "rgb(209, 247, 255)",
-  privateButtonSecondaryOnDarkPressedBackgroundDay: "rgb(1, 9, 19)",
+  privateButtonSecondaryOnDarkPressedBackgroundDay: "rgb(4, 24, 45)",
   privateButtonPrimaryOnLightDisabledBackgroundNight: "rgb(11, 18, 29)",
   privateButtonLinkPressedForegroundDay: "rgb(2, 77, 175)",
   privateButtonDestructiveNormalBackgroundNight: "rgb(36, 51, 70)",

package/tokens/base.default.scss

@@ -68,10 +68,14 @@ $bpk-status-warning-fill-day: rgb(255, 247, 207) !default;
 /// @group surface-colors
 $bpk-surface-hero-night: rgb(1, 9, 19) !default;
 /// @group surface-colors
+$bpk-surface-tint-night: rgba(255, 255, 255, 0.1) !default;
+/// @group surface-colors
 $bpk-surface-default-night: rgb(19, 29, 43) !default;
 /// @group surface-colors
 $bpk-surface-hero-day: rgb(0, 98, 227) !default;
 /// @group surface-colors
+$bpk-surface-tint-day: rgba(255, 255, 255, 0.1) !default;
+/// @group surface-colors
 $bpk-surface-default-day: rgb(255, 255, 255) !default;
 /// @group surface-colors
 $bpk-surface-contrast-night: rgb(1, 9, 19) !default;
@@ -212,21 +216,25 @@ $bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;
 /// @group marcomms-colors
 $bpk-marcomms-eco-green: rgb(15, 161, 169) !default;
 /// @group chip-colors
-$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;
+$bpk-private-chip-on-dark-on-fill-day: rgb(21, 70, 121) !default;
 /// @group chip-colors
-$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;
+$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;
+/// @group chip-colors
+$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;
 /// @group chip-colors
 $bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;
+$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113) !default;
 /// @group chip-colors
-$bpk-private-chip-disabled-background-day: rgb(224, 228, 233) !default;
+$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;
+/// @group chip-colors
+$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;
 /// @group chip-colors
 $bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113) !default;
+$bpk-private-chip-disabled-background-day: rgb(224, 228, 233) !default;
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;
+$bpk-private-chip-on-dark-on-fill-night: rgb(2, 77, 175) !default;
 /// @group map-marker-colors
 $bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;
 /// @group map-marker-colors
@@ -290,7 +298,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 25
 /// @group button-colors
 $bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;
 /// @group button-colors
-$bpk-private-button-secondary-on-dark-pressed-background-night: rgb(1, 9, 19) !default;
+$bpk-private-button-secondary-on-dark-pressed-background-night: rgba(255, 255, 255, 0.2) !default;
 /// @group button-colors
 $bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102) !default;
 /// @group button-colors
@@ -300,7 +308,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2)
 /// @group button-colors
 $bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !default;
 /// @group button-colors
-$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(1, 9, 19) !default;
+$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(4, 24, 45) !default;
 /// @group button-colors
 $bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29) !default;
 /// @group button-colors

package/tokens/base.es6.d.ts

@@ -42,8 +42,10 @@ export declare const statusWarningSpotDay = "rgb(245, 93, 66)" as const;
 export declare const statusDangerFillDay = "rgb(255, 233, 249)" as const;
 export declare const statusWarningFillDay = "rgb(255, 247, 207)" as const;
 export declare const surfaceHeroNight = "rgb(1, 9, 19)" as const;
+export declare const surfaceTintNight = "rgba(255, 255, 255, 0.1)" as const;
 export declare const surfaceDefaultNight = "rgb(19, 29, 43)" as const;
 export declare const surfaceHeroDay = "rgb(0, 98, 227)" as const;
+export declare const surfaceTintDay = "rgba(255, 255, 255, 0.1)" as const;
 export declare const surfaceDefaultDay = "rgb(255, 255, 255)" as const;
 export declare const surfaceContrastNight = "rgb(1, 9, 19)" as const;
 export declare const surfaceContrastDay = "rgb(5, 32, 60)" as const;
@@ -114,14 +116,16 @@ export declare const marcommsPinkMuted = "rgb(255, 233, 249)" as const;
 export declare const marcommsGreenMuted = "rgb(212, 255, 242)" as const;
 export declare const marcommsBlueMuted = "rgb(217, 248, 255)" as const;
 export declare const marcommsEcoGreen = "rgb(15, 161, 169)" as const;
-export declare const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)" as const;
-export declare const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)" as const;
-export declare const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)" as const;
+export declare const privateChipOnDarkOnFillDay = "rgb(21, 70, 121)" as const;
+export declare const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)" as const;
 export declare const privateChipOnDarkOnBackgroundNight = "rgb(5, 65, 132)" as const;
-export declare const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)" as const;
-export declare const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
+export declare const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)" as const;
 export declare const privateChipOnDarkOnDismissIconDay = "rgb(98, 105, 113)" as const;
-export declare const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)" as const;
+export declare const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)" as const;
+export declare const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)" as const;
+export declare const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
+export declare const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)" as const;
+export declare const privateChipOnDarkOnFillNight = "rgb(2, 77, 175)" as const;
 export declare const privateMapPreviousSelectionDay = "rgb(207, 228, 255)" as const;
 export declare const privateMapClusterPinNight = "rgb(255, 255, 255)" as const;
 export declare const privateMapClusterPinPreviousSelectionNight = "rgb(148, 195, 255)" as const;
@@ -153,12 +157,12 @@ export declare const privateButtonPrimaryOnDarkNormalBackgroundNight = "rgb(255,
 export declare const privateButtonFeaturedPressedBackgroundDay = "rgb(2, 77, 175)" as const;
 export declare const privateButtonPrimaryOnDarkDisabledForegroundNight = "rgba(255, 255, 255, 0.2)" as const;
 export declare const privateButtonSecondaryOnDarkDisabledBackgroundDay = "rgb(11, 18, 29)" as const;
-export declare const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgb(1, 9, 19)" as const;
+export declare const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgba(255, 255, 255, 0.2)" as const;
 export declare const privateButtonDestructiveNormalForegroundDay = "rgb(231, 8, 102)" as const;
 export declare const privateButtonPrimaryOnDarkNormalBackgroundDay = "rgb(255, 255, 255)" as const;
 export declare const privateButtonPrimaryOnDarkDisabledForegroundDay = "rgba(0, 0, 0, 0.2)" as const;
 export declare const privateButtonLinkPressedForegroundNight = "rgb(209, 247, 255)" as const;
-export declare const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(1, 9, 19)" as const;
+export declare const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(4, 24, 45)" as const;
 export declare const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
 export declare const privateButtonLinkPressedForegroundDay = "rgb(2, 77, 175)" as const;
 export declare const privateButtonDestructiveNormalBackgroundNight = "rgb(36, 51, 70)" as const;
@@ -534,14 +538,16 @@ cardBackgroundColor,
 cardPadding,
 } as const;
 export declare const chipColors = {
-privateChipOnDarkPressedStrokeDay,
-privateChipOnDarkPressedStrokeNight,
-privateChipOnDarkOnBackgroundDay,
+privateChipOnDarkOnFillDay,
+privateChipOnDarkOnDismissIconNight,
 privateChipOnDarkOnBackgroundNight,
-privateChipDisabledBackgroundDay,
-privateChipDisabledBackgroundNight,
+privateChipOnDarkOnBackgroundDay,
 privateChipOnDarkOnDismissIconDay,
-privateChipOnDarkOnDismissIconNight,
+privateChipOnDarkPressedStrokeNight,
+privateChipOnDarkPressedStrokeDay,
+privateChipDisabledBackgroundNight,
+privateChipDisabledBackgroundDay,
+privateChipOnDarkOnFillNight,
 } as const;
 export declare const colors = {
 colorSkyBlueShade03,
@@ -796,8 +802,10 @@ statusWarningFillDay,
 } as const;
 export declare const surfaceColors = {
 surfaceHeroNight,
+surfaceTintNight,
 surfaceDefaultNight,
 surfaceHeroDay,
+surfaceTintDay,
 surfaceDefaultDay,
 surfaceContrastNight,
 surfaceContrastDay,

package/tokens/base.es6.js

@@ -42,8 +42,10 @@ export const statusWarningSpotDay = "rgb(245, 93, 66)";
 export const statusDangerFillDay = "rgb(255, 233, 249)";
 export const statusWarningFillDay = "rgb(255, 247, 207)";
 export const surfaceHeroNight = "rgb(1, 9, 19)";
+export const surfaceTintNight = "rgba(255, 255, 255, 0.1)";
 export const surfaceDefaultNight = "rgb(19, 29, 43)";
 export const surfaceHeroDay = "rgb(0, 98, 227)";
+export const surfaceTintDay = "rgba(255, 255, 255, 0.1)";
 export const surfaceDefaultDay = "rgb(255, 255, 255)";
 export const surfaceContrastNight = "rgb(1, 9, 19)";
 export const surfaceContrastDay = "rgb(5, 32, 60)";
@@ -114,14 +116,16 @@ export const marcommsPinkMuted = "rgb(255, 233, 249)";
 export const marcommsGreenMuted = "rgb(212, 255, 242)";
 export const marcommsBlueMuted = "rgb(217, 248, 255)";
 export const marcommsEcoGreen = "rgb(15, 161, 169)";
-export const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)";
-export const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)";
-export const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)";
+export const privateChipOnDarkOnFillDay = "rgb(21, 70, 121)";
+export const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)";
 export const privateChipOnDarkOnBackgroundNight = "rgb(5, 65, 132)";
-export const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)";
-export const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)";
+export const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)";
 export const privateChipOnDarkOnDismissIconDay = "rgb(98, 105, 113)";
-export const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)";
+export const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)";
+export const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)";
+export const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)";
+export const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)";
+export const privateChipOnDarkOnFillNight = "rgb(2, 77, 175)";
 export const privateMapPreviousSelectionDay = "rgb(207, 228, 255)";
 export const privateMapClusterPinNight = "rgb(255, 255, 255)";
 export const privateMapClusterPinPreviousSelectionNight = "rgb(148, 195, 255)";
@@ -153,12 +157,12 @@ export const privateButtonPrimaryOnDarkNormalBackgroundNight = "rgb(255, 255, 25
 export const privateButtonFeaturedPressedBackgroundDay = "rgb(2, 77, 175)";
 export const privateButtonPrimaryOnDarkDisabledForegroundNight = "rgba(255, 255, 255, 0.2)";
 export const privateButtonSecondaryOnDarkDisabledBackgroundDay = "rgb(11, 18, 29)";
-export const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgb(1, 9, 19)";
+export const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgba(255, 255, 255, 0.2)";
 export const privateButtonDestructiveNormalForegroundDay = "rgb(231, 8, 102)";
 export const privateButtonPrimaryOnDarkNormalBackgroundDay = "rgb(255, 255, 255)";
 export const privateButtonPrimaryOnDarkDisabledForegroundDay = "rgba(0, 0, 0, 0.2)";
 export const privateButtonLinkPressedForegroundNight = "rgb(209, 247, 255)";
-export const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(1, 9, 19)";
+export const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(4, 24, 45)";
 export const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(11, 18, 29)";
 export const privateButtonLinkPressedForegroundDay = "rgb(2, 77, 175)";
 export const privateButtonDestructiveNormalBackgroundNight = "rgb(36, 51, 70)";
@@ -534,14 +538,16 @@ cardBackgroundColor,
 cardPadding,
 };
 export const chipColors = {
-privateChipOnDarkPressedStrokeDay,
-privateChipOnDarkPressedStrokeNight,
-privateChipOnDarkOnBackgroundDay,
+privateChipOnDarkOnFillDay,
+privateChipOnDarkOnDismissIconNight,
 privateChipOnDarkOnBackgroundNight,
-privateChipDisabledBackgroundDay,
-privateChipDisabledBackgroundNight,
+privateChipOnDarkOnBackgroundDay,
 privateChipOnDarkOnDismissIconDay,
-privateChipOnDarkOnDismissIconNight,
+privateChipOnDarkPressedStrokeNight,
+privateChipOnDarkPressedStrokeDay,
+privateChipDisabledBackgroundNight,
+privateChipDisabledBackgroundDay,
+privateChipOnDarkOnFillNight,
 };
 export const colors = {
 colorSkyBlueShade03,
@@ -796,8 +802,10 @@ statusWarningFillDay,
 };
 export const surfaceColors = {
 surfaceHeroNight,
+surfaceTintNight,
 surfaceDefaultNight,
 surfaceHeroDay,
+surfaceTintDay,
 surfaceDefaultDay,
 surfaceContrastNight,
 surfaceContrastDay,

package/tokens/base.raw.json

@@ -72,6 +72,9 @@
     "WHITE_ALPHA_50": {
       "value": "#FFFFFF80"
     },
+    "MIDNIGHT_SKY": {
+      "value": "#04182D"
+    },
     "NIGHT_BLUE_100": {
       "value": "#002B5B"
     },
@@ -108,6 +111,9 @@
     "NIGHT_GREY_10": {
       "value": "#010913"
     },
+    "BABY_BLUE_30": {
+      "value": "#B4D7FF"
+    },
     "BLACK_ALPHA_80": {
       "value": "#000000CC"
     },
@@ -519,6 +525,7 @@
       "type": "color",
       "category": "core-colors",
       "value": "rgb(15, 161, 169)",
+      "deprecated": true,
       "originalValue": "{!ECO_GREEN}",
       "name": "CORE_ECO_DAY"
     },
@@ -526,6 +533,7 @@
       "type": "color",
       "category": "core-colors",
       "value": "rgb(15, 161, 169)",
+      "deprecated": true,
       "originalValue": "{!ECO_GREEN}",
       "name": "CORE_ECO_NIGHT"
     },
@@ -648,6 +656,13 @@
       "originalValue": "{!NIGHT_GREY_10}",
       "name": "SURFACE_HERO_NIGHT"
     },
+    "SURFACE_TINT_NIGHT": {
+      "type": "color",
+      "category": "surface-colors",
+      "value": "rgba(255, 255, 255, 0.1)",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "SURFACE_TINT_NIGHT"
+    },
     "SURFACE_DEFAULT_NIGHT": {
       "type": "color",
       "category": "surface-colors",
@@ -662,6 +677,13 @@
       "originalValue": "{!SKY_BLUE}",
       "name": "SURFACE_HERO_DAY"
     },
+    "SURFACE_TINT_DAY": {
+      "type": "color",
+      "category": "surface-colors",
+      "value": "rgba(255, 255, 255, 0.1)",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "SURFACE_TINT_DAY"
+    },
     "SURFACE_DEFAULT_DAY": {
       "type": "color",
       "category": "surface-colors",
@@ -771,6 +793,7 @@
       "type": "color",
       "category": "text-colors",
       "value": "rgb(132, 233, 255)",
+      "deprecated": true,
       "originalValue": "{!NIGHT_BLUE}",
       "name": "TEXT_LINK_NIGHT"
     },
@@ -792,6 +815,7 @@
       "type": "color",
       "category": "text-colors",
       "value": "rgb(0, 98, 227)",
+      "deprecated": true,
       "originalValue": "{!SKY_BLUE}",
       "name": "TEXT_LINK_DAY"
     },
@@ -1152,19 +1176,26 @@
       "originalValue": "{!ECO_GREEN}",
       "name": "MARCOMMS_ECO_GREEN"
     },
-    "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY": {
+    "PRIVATE_CHIP_ON_DARK_ON_FILL_DAY": {
       "type": "color",
       "category": "chip-colors",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "{!WHITE}",
-      "name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY"
+      "value": "rgb(21, 70, 121)",
+      "originalValue": "{!DARK_SKY_85}",
+      "name": "PRIVATE_CHIP_ON_DARK_ON_FILL_DAY"
     },
-    "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT": {
+    "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT": {
+      "type": "color",
+      "category": "chip-colors",
+      "value": "rgba(255, 255, 255, 0.5)",
+      "originalValue": "{!WHITE_ALPHA_50}",
+      "name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT"
+    },
+    "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT": {
       "type": "color",
       "category": "chip-colors",
       "value": "rgb(5, 65, 132)",
       "originalValue": "{!NIGHT_SKY}",
-      "name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT"
+      "name": "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT"
     },
     "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_DAY": {
       "type": "color",
@@ -1173,19 +1204,26 @@
       "originalValue": "{!WHITE}",
       "name": "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_DAY"
     },
-    "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT": {
+    "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY": {
+      "type": "color",
+      "category": "chip-colors",
+      "value": "rgb(98, 105, 113)",
+      "originalValue": "{!GREY_40}",
+      "name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY"
+    },
+    "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT": {
       "type": "color",
       "category": "chip-colors",
       "value": "rgb(5, 65, 132)",
       "originalValue": "{!NIGHT_SKY}",
-      "name": "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT"
+      "name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT"
     },
-    "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY": {
+    "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY": {
       "type": "color",
       "category": "chip-colors",
-      "value": "rgb(224, 228, 233)",
-      "originalValue": "{!GREY_20}",
-      "name": "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY"
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "{!WHITE}",
+      "name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY"
     },
     "PRIVATE_CHIP_DISABLED_BACKGROUND_NIGHT": {
       "type": "color",
@@ -1194,19 +1232,19 @@
       "originalValue": "{!NIGHT_GREY_00}",
       "name": "PRIVATE_CHIP_DISABLED_BACKGROUND_NIGHT"
     },
-    "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY": {
+    "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY": {
       "type": "color",
       "category": "chip-colors",
-      "value": "rgb(98, 105, 113)",
-      "originalValue": "{!GREY_40}",
-      "name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY"
+      "value": "rgb(224, 228, 233)",
+      "originalValue": "{!GREY_20}",
+      "name": "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY"
     },
-    "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT": {
+    "PRIVATE_CHIP_ON_DARK_ON_FILL_NIGHT": {
       "type": "color",
       "category": "chip-colors",
-      "value": "rgba(255, 255, 255, 0.5)",
-      "originalValue": "{!WHITE_ALPHA_50}",
-      "name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT"
+      "value": "rgb(2, 77, 175)",
+      "originalValue": "{!NIGHT_SKY_85}",
+      "name": "PRIVATE_CHIP_ON_DARK_ON_FILL_NIGHT"
     },
     "PRIVATE_MAP_PREVIOUS_SELECTION_DAY": {
       "type": "color",
@@ -1428,8 +1466,8 @@
     "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_NIGHT": {
       "type": "color",
       "category": "button-colors",
-      "value": "rgb(1, 9, 19)",
-      "originalValue": "{!NIGHT_GREY_10}",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "originalValue": "{!WHITE_ALPHA_20}",
       "name": "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_NIGHT"
     },
     "PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_FOREGROUND_DAY": {
@@ -1463,8 +1501,8 @@
     "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_DAY": {
       "type": "color",
       "category": "button-colors",
-      "value": "rgb(1, 9, 19)",
-      "originalValue": "{!NIGHT_GREY_10}",
+      "value": "rgb(4, 24, 45)",
+      "originalValue": "{!MIDNIGHT_SKY}",
       "name": "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_DAY"
     },
     "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_BACKGROUND_NIGHT": {

package/tokens/base.scss

@@ -68,10 +68,14 @@ $bpk-status-warning-fill-day: rgb(255, 247, 207);
 /// @group surface-colors
 $bpk-surface-hero-night: rgb(1, 9, 19);
 /// @group surface-colors
+$bpk-surface-tint-night: rgba(255, 255, 255, 0.1);
+/// @group surface-colors
 $bpk-surface-default-night: rgb(19, 29, 43);
 /// @group surface-colors
 $bpk-surface-hero-day: rgb(0, 98, 227);
 /// @group surface-colors
+$bpk-surface-tint-day: rgba(255, 255, 255, 0.1);
+/// @group surface-colors
 $bpk-surface-default-day: rgb(255, 255, 255);
 /// @group surface-colors
 $bpk-surface-contrast-night: rgb(1, 9, 19);
@@ -212,21 +216,25 @@ $bpk-marcomms-blue-muted: rgb(217, 248, 255);
 /// @group marcomms-colors
 $bpk-marcomms-eco-green: rgb(15, 161, 169);
 /// @group chip-colors
-$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255);
+$bpk-private-chip-on-dark-on-fill-day: rgb(21, 70, 121);
 /// @group chip-colors
-$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132);
+$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5);
+/// @group chip-colors
+$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132);
 /// @group chip-colors
 $bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255);
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132);
+$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113);
 /// @group chip-colors
-$bpk-private-chip-disabled-background-day: rgb(224, 228, 233);
+$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132);
+/// @group chip-colors
+$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255);
 /// @group chip-colors
 $bpk-private-chip-disabled-background-night: rgb(11, 18, 29);
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113);
+$bpk-private-chip-disabled-background-day: rgb(224, 228, 233);
 /// @group chip-colors
-$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5);
+$bpk-private-chip-on-dark-on-fill-night: rgb(2, 77, 175);
 /// @group map-marker-colors
 $bpk-private-map-previous-selection-day: rgb(207, 228, 255);
 /// @group map-marker-colors
@@ -290,7 +298,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 25
 /// @group button-colors
 $bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29);
 /// @group button-colors
-$bpk-private-button-secondary-on-dark-pressed-background-night: rgb(1, 9, 19);
+$bpk-private-button-secondary-on-dark-pressed-background-night: rgba(255, 255, 255, 0.2);
 /// @group button-colors
 $bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102);
 /// @group button-colors
@@ -300,7 +308,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2);
 /// @group button-colors
 $bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255);
 /// @group button-colors
-$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(1, 9, 19);
+$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(4, 24, 45);
 /// @group button-colors
 $bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29);
 /// @group button-colors