@skyscanner/bpk-foundations-web - npm Package Compare versions

Comparing version 17.6.0 to 17.7.0

package.json

 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "17.6.0",
+  "version": "17.7.0",
   "description": "Common Backpack design tokens for colors, spacing, font, etc.",
@@ -20,6 +20,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@skyscanner/bpk-foundations-common": "^6.7.0",
+    "@skyscanner/bpk-foundations-common": "^6.8.0",
     "color": "^3.0.0"
   },
-  "gitHead": "2f804a591a4a9f183409836999aa1d086cda7741"
+  "gitHead": "c318b962abafd72155a77223adf7c4ea7ff39ba3"
 }

tokens/base.common.js

@@ -61,7 +61,7 @@ /*
   colorSkyBlueShade02: "rgb(4, 39, 89)",
-  privateBadgeBackgroundNormalDay: "rgb(239, 241, 242)",
+  privateBadgeBackgroundNormalDay: "rgb(239, 243, 248)",
   privateBadgeBackgroundNormalNight: "rgb(36, 51, 70)",
   canvasDay: "rgb(255, 255, 255)",
   canvasNight: "rgb(1, 9, 19)",
-  canvasContrastDay: "rgb(239, 241, 242)",
+  canvasContrastDay: "rgb(239, 243, 248)",
   canvasContrastNight: "rgb(1, 9, 19)",
@@ -97,3 +97,3 @@ coreEcoDay: "rgb(15, 161, 169)",
   surfaceSubtleDay: "rgb(227, 240, 255)",
-  surfaceHighlightDay: "rgb(224, 227, 229)",
+  surfaceHighlightDay: "rgb(224, 228, 233)",
   textOnDarkDay: "rgb(255, 255, 255)",
@@ -104,5 +104,7 @@ textOnLightNight: "rgb(1, 9, 19)",
   textLinkNight: "rgb(132, 233, 255)",
+  textHeroNight: "rgb(1, 9, 19)",
   textDisabledNight: "rgba(255, 255, 255, 0.2)",
   textPrimaryDarkColor: "rgb(255, 255, 255)",
   textLinkDay: "rgb(0, 98, 227)",
+  textHeroDay: "rgb(0, 98, 227)",
   textQuaternaryDarkColor: "rgb(142, 142, 147)",
@@ -125,3 +127,3 @@ textPrimaryNight: "rgb(255, 255, 255)",
   textTertiaryLightColor: "rgb(143, 144, 160)",
-  textSecondaryDay: "rgb(84, 88, 96)",
+  textSecondaryDay: "rgb(98, 105, 113)",
   scrimDay: "rgba(0, 0, 0, 0.7)",
@@ -143,3 +145,3 @@ backgroundElevation03DarkColor: "rgb(58, 58, 60)",
   backgroundElevation02LightColor: "rgb(255, 255, 255)",
-  lineDay: "rgb(194, 201, 205)",
+  lineDay: "rgb(193, 199, 207)",
   backgroundElevation03LightColor: "rgb(255, 255, 255)",
@@ -156,3 +158,3 @@ backgroundTertiaryDarkColor: "rgb(44, 44, 46)",
   scrimNight: "rgba(0, 0, 0, 0.7)",
-  privateInfoBannerDefaultDay: "rgb(239, 241, 242)",
+  privateInfoBannerDefaultDay: "rgb(239, 243, 248)",
   privateInfoBannerOnContrastDay: "rgb(255, 255, 255)",
@@ -163,3 +165,3 @@ privateInfoBannerSuccessDay: "rgb(12, 131, 138)",
   privateInfoBannerErrorDay: "rgb(231, 8, 102)",
-  privateInfoBannerInfoDay: "rgb(84, 88, 96)",
+  privateInfoBannerInfoDay: "rgb(98, 105, 113)",
   privateInfoBannerWarningNight: "rgb(254, 235, 135)",
@@ -173,3 +175,3 @@ privateInfoBannerWarningDay: "rgb(245, 93, 66)",
   marcommsOrange: "rgb(255, 123, 89)",
-  marcommsGrey40: "rgb(84, 88, 96)",
+  marcommsGrey40: "rgb(98, 105, 113)",
   marcommsBlueBright: "rgb(161, 238, 255)",
@@ -192,5 +194,5 @@ marcommsYellow: "rgb(254, 235, 135)",
   privateChipOnDarkOnBackgroundNight: "rgb(5, 65, 132)",
-  privateChipDisabledBackgroundDay: "rgb(224, 227, 229)",
+  privateChipDisabledBackgroundDay: "rgb(224, 228, 233)",
   privateChipDisabledBackgroundNight: "rgb(11, 18, 29)",
-  privateChipOnDarkOnDismissIconDay: "rgb(84, 88, 96)",
+  privateChipOnDarkOnDismissIconDay: "rgb(98, 105, 113)",
   privateChipOnDarkOnDismissIconNight: "rgba(255, 255, 255, 0.5)",
@@ -215,3 +217,3 @@ privateMapPreviousSelectionDay: "rgb(207, 228, 255)",
   privateButtonPrimaryOnLightNormalBackgroundNight: "rgb(5, 32, 60)",
-  privateButtonSecondaryPressedBackgroundDay: "rgb(194, 201, 205)",
+  privateButtonSecondaryPressedBackgroundDay: "rgb(193, 199, 207)",
   privateButtonLinkNormalForegroundDay: "rgb(0, 98, 227)",
@@ -222,3 +224,3 @@ privateButtonPrimaryOnLightDisabledForegroundNight: "rgba(0, 0, 0, 0.2)",
   privateButtonLinkOnDarkDisabledForegroundDay: "rgba(255, 255, 255, 0.2)",
-  privateButtonSecondaryNormalBackgroundDay: "rgb(224, 227, 229)",
+  privateButtonSecondaryNormalBackgroundDay: "rgb(224, 228, 233)",
   privateButtonPrimaryOnLightNormalBackgroundDay: "rgb(5, 32, 60)",
@@ -236,3 +238,3 @@ privateButtonPrimaryOnLightDisabledForegroundDay: "rgba(0, 0, 0, 0.2)",
   privateButtonSecondaryOnDarkPressedBackgroundDay: "rgb(1, 9, 19)",
-  privateButtonPrimaryOnLightDisabledBackgroundNight: "rgb(224, 227, 229)",
+  privateButtonPrimaryOnLightDisabledBackgroundNight: "rgb(224, 228, 233)",
   privateButtonLinkPressedForegroundDay: "rgb(21, 70, 121)",
@@ -243,10 +245,10 @@ privateButtonDestructiveNormalBackgroundNight: "rgb(36, 51, 70)",
   privateButtonPrimaryPressedBackgroundNight: "rgb(0, 43, 91)",
-  privateButtonPrimaryOnLightDisabledBackgroundDay: "rgb(224, 227, 229)",
-  privateButtonPrimaryOnDarkDisabledBackgroundNight: "rgb(224, 227, 229)",
+  privateButtonPrimaryOnLightDisabledBackgroundDay: "rgb(224, 228, 233)",
+  privateButtonPrimaryOnDarkDisabledBackgroundNight: "rgb(224, 228, 233)",
   privateButtonPrimaryNormalBackgroundDay: "rgb(5, 32, 60)",
-  privateButtonDestructiveNormalBackgroundDay: "rgb(224, 227, 229)",
+  privateButtonDestructiveNormalBackgroundDay: "rgb(224, 228, 233)",
   privateButtonLinkOnDarkPressedForegroundNight: "rgba(255, 255, 255, 0.5)",
   privateButtonDestructivePressedBackgroundDay: "rgb(200, 4, 86)",
   privateButtonPrimaryPressedBackgroundDay: "rgb(21, 70, 121)",
-  privateButtonPrimaryOnDarkDisabledBackgroundDay: "rgb(224, 227, 229)",
+  privateButtonPrimaryOnDarkDisabledBackgroundDay: "rgb(224, 228, 233)",
   privateButtonLinkOnDarkNormalForegroundNight: "rgb(255, 255, 255)",
@@ -257,8 +259,8 @@ privateButtonDisabledBackgroundNight: "rgb(11, 18, 29)",
   privateButtonLinkOnDarkPressedForegroundDay: "rgba(255, 255, 255, 0.5)",
-  privateButtonPrimaryOnDarkPressedBackgroundNight: "rgb(194, 201, 205)",
+  privateButtonPrimaryOnDarkPressedBackgroundNight: "rgb(193, 199, 207)",
   privateButtonLinkOnDarkNormalForegroundDay: "rgb(255, 255, 255)",
-  privateButtonDisabledBackgroundDay: "rgb(224, 227, 229)",
+  privateButtonDisabledBackgroundDay: "rgb(224, 228, 233)",
   privateButtonSecondaryOnDarkNormalBackgroundDay: "rgb(36, 51, 70)",
   privateButtonSecondaryOnDarkDisabledForegroundDay: "rgba(255, 255, 255, 0.2)",
-  privateButtonPrimaryOnDarkPressedBackgroundDay: "rgb(194, 201, 205)",
+  privateButtonPrimaryOnDarkPressedBackgroundDay: "rgb(193, 199, 207)",
   privateButtonPrimaryOnLightPressedBackgroundNight: "rgb(21, 70, 121)",
@@ -270,3 +272,3 @@ privateButtonFeaturedNormalBackgroundNight: "rgb(132, 233, 255)",
   privateSkeletonShimmerCenterNight: "rgba(0, 0, 0, 0.2)",
-  privateSponsoredBannerBackgroundDay: "rgb(239, 241, 242)",
+  privateSponsoredBannerBackgroundDay: "rgb(239, 243, 248)",
   privateSponsoredBannerBackgroundNight: "rgb(36, 51, 70)",
@@ -321,3 +323,3 @@ durationXs: "50ms",
   inputLargeHeight: "3rem",
-  inputBorder: "solid .0625rem #C2C9CD",
+  inputBorder: "solid .0625rem #C1C7CF",
   selectBorderRadius: ".25rem",
@@ -328,3 +330,3 @@ inputBackground: "#ffffff",
   inputBorderRadius: ".25rem",
-  selectDisabledBorderColor: "rgb(224, 227, 229)",
+  selectDisabledBorderColor: "rgb(224, 228, 233)",
   inputDisabledColor: "rgba(0, 0, 0, 0.2)",
@@ -336,3 +338,3 @@ inputPaddingX: ".5rem",
   inputHeight: "2.25rem",
-  inputDisabledBorderColor: "rgb(239, 241, 242)",
+  inputDisabledBorderColor: "rgb(239, 243, 248)",
   horizontalNavBarSelectedColor: "rgb(0, 98, 227)",
@@ -347,4 +349,4 @@ iconSizeSm: "1rem",
   modalContentPadding: "1rem",
-  bannerAlertHeaderExpandableHoverBackgroundColor: "rgb(239, 241, 242)",
-  bannerAlertHeaderExpandableActiveBackgroundColor: "rgb(239, 241, 242)",
+  bannerAlertHeaderExpandableHoverBackgroundColor: "rgb(239, 243, 248)",
+  bannerAlertHeaderExpandableActiveBackgroundColor: "rgb(239, 243, 248)",
   bannerAlertPrimaryColor: "rgb(0, 98, 227)",
@@ -354,4 +356,4 @@ bannerAlertSuccessColor: "rgb(12, 131, 138)",
   bannerAlertErrorColor: "rgb(231, 8, 102)",
-  bannerAlertNeutralColor: "rgb(194, 201, 205)",
-  panelBorderColor: "rgb(194, 201, 205)",
+  bannerAlertNeutralColor: "rgb(193, 199, 207)",
+  panelBorderColor: "rgb(193, 199, 207)",
   privateSliderSelectedDay: "rgb(21, 70, 121)",
@@ -358,0 +360,0 @@ onePixelRem: ".0625rem",

tokens/base.es6.js

@@ -59,7 +59,7 @@ /*
 export const colorSkyBlueShade02 = "rgb(4, 39, 89)";
-export const privateBadgeBackgroundNormalDay = "rgb(239, 241, 242)";
+export const privateBadgeBackgroundNormalDay = "rgb(239, 243, 248)";
 export const privateBadgeBackgroundNormalNight = "rgb(36, 51, 70)";
 export const canvasDay = "rgb(255, 255, 255)";
 export const canvasNight = "rgb(1, 9, 19)";
-export const canvasContrastDay = "rgb(239, 241, 242)";
+export const canvasContrastDay = "rgb(239, 243, 248)";
 export const canvasContrastNight = "rgb(1, 9, 19)";
@@ -95,3 +95,3 @@ export const coreEcoDay = "rgb(15, 161, 169)";
 export const surfaceSubtleDay = "rgb(227, 240, 255)";
-export const surfaceHighlightDay = "rgb(224, 227, 229)";
+export const surfaceHighlightDay = "rgb(224, 228, 233)";
 export const textOnDarkDay = "rgb(255, 255, 255)";
@@ -102,5 +102,7 @@ export const textOnLightNight = "rgb(1, 9, 19)";
 export const textLinkNight = "rgb(132, 233, 255)";
+export const textHeroNight = "rgb(1, 9, 19)";
 export const textDisabledNight = "rgba(255, 255, 255, 0.2)";
 export const textPrimaryDarkColor = "rgb(255, 255, 255)";
 export const textLinkDay = "rgb(0, 98, 227)";
+export const textHeroDay = "rgb(0, 98, 227)";
 export const textQuaternaryDarkColor = "rgb(142, 142, 147)";
@@ -123,3 +125,3 @@ export const textPrimaryNight = "rgb(255, 255, 255)";
 export const textTertiaryLightColor = "rgb(143, 144, 160)";
-export const textSecondaryDay = "rgb(84, 88, 96)";
+export const textSecondaryDay = "rgb(98, 105, 113)";
 export const scrimDay = "rgba(0, 0, 0, 0.7)";
@@ -141,3 +143,3 @@ export const backgroundElevation03DarkColor = "rgb(58, 58, 60)";
 export const backgroundElevation02LightColor = "rgb(255, 255, 255)";
-export const lineDay = "rgb(194, 201, 205)";
+export const lineDay = "rgb(193, 199, 207)";
 export const backgroundElevation03LightColor = "rgb(255, 255, 255)";
@@ -154,3 +156,3 @@ export const backgroundTertiaryDarkColor = "rgb(44, 44, 46)";
 export const scrimNight = "rgba(0, 0, 0, 0.7)";
-export const privateInfoBannerDefaultDay = "rgb(239, 241, 242)";
+export const privateInfoBannerDefaultDay = "rgb(239, 243, 248)";
 export const privateInfoBannerOnContrastDay = "rgb(255, 255, 255)";
@@ -161,3 +163,3 @@ export const privateInfoBannerSuccessDay = "rgb(12, 131, 138)";
 export const privateInfoBannerErrorDay = "rgb(231, 8, 102)";
-export const privateInfoBannerInfoDay = "rgb(84, 88, 96)";
+export const privateInfoBannerInfoDay = "rgb(98, 105, 113)";
 export const privateInfoBannerWarningNight = "rgb(254, 235, 135)";
@@ -171,3 +173,3 @@ export const privateInfoBannerWarningDay = "rgb(245, 93, 66)";
 export const marcommsOrange = "rgb(255, 123, 89)";
-export const marcommsGrey40 = "rgb(84, 88, 96)";
+export const marcommsGrey40 = "rgb(98, 105, 113)";
 export const marcommsBlueBright = "rgb(161, 238, 255)";
@@ -190,5 +192,5 @@ export const marcommsYellow = "rgb(254, 235, 135)";
 export const privateChipOnDarkOnBackgroundNight = "rgb(5, 65, 132)";
-export const privateChipDisabledBackgroundDay = "rgb(224, 227, 229)";
+export const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)";
 export const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)";
-export const privateChipOnDarkOnDismissIconDay = "rgb(84, 88, 96)";
+export const privateChipOnDarkOnDismissIconDay = "rgb(98, 105, 113)";
 export const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)";
@@ -213,3 +215,3 @@ export const privateMapPreviousSelectionDay = "rgb(207, 228, 255)";
 export const privateButtonPrimaryOnLightNormalBackgroundNight = "rgb(5, 32, 60)";
-export const privateButtonSecondaryPressedBackgroundDay = "rgb(194, 201, 205)";
+export const privateButtonSecondaryPressedBackgroundDay = "rgb(193, 199, 207)";
 export const privateButtonLinkNormalForegroundDay = "rgb(0, 98, 227)";
@@ -220,3 +222,3 @@ export const privateButtonPrimaryOnLightDisabledForegroundNight = "rgba(0, 0, 0, 0.2)";
 export const privateButtonLinkOnDarkDisabledForegroundDay = "rgba(255, 255, 255, 0.2)";
-export const privateButtonSecondaryNormalBackgroundDay = "rgb(224, 227, 229)";
+export const privateButtonSecondaryNormalBackgroundDay = "rgb(224, 228, 233)";
 export const privateButtonPrimaryOnLightNormalBackgroundDay = "rgb(5, 32, 60)";
@@ -234,3 +236,3 @@ export const privateButtonPrimaryOnLightDisabledForegroundDay = "rgba(0, 0, 0, 0.2)";
 export const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(1, 9, 19)";
-export const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(224, 227, 229)";
+export const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(224, 228, 233)";
 export const privateButtonLinkPressedForegroundDay = "rgb(21, 70, 121)";
@@ -241,10 +243,10 @@ export const privateButtonDestructiveNormalBackgroundNight = "rgb(36, 51, 70)";
 export const privateButtonPrimaryPressedBackgroundNight = "rgb(0, 43, 91)";
-export const privateButtonPrimaryOnLightDisabledBackgroundDay = "rgb(224, 227, 229)";
-export const privateButtonPrimaryOnDarkDisabledBackgroundNight = "rgb(224, 227, 229)";
+export const privateButtonPrimaryOnLightDisabledBackgroundDay = "rgb(224, 228, 233)";
+export const privateButtonPrimaryOnDarkDisabledBackgroundNight = "rgb(224, 228, 233)";
 export const privateButtonPrimaryNormalBackgroundDay = "rgb(5, 32, 60)";
-export const privateButtonDestructiveNormalBackgroundDay = "rgb(224, 227, 229)";
+export const privateButtonDestructiveNormalBackgroundDay = "rgb(224, 228, 233)";
 export const privateButtonLinkOnDarkPressedForegroundNight = "rgba(255, 255, 255, 0.5)";
 export const privateButtonDestructivePressedBackgroundDay = "rgb(200, 4, 86)";
 export const privateButtonPrimaryPressedBackgroundDay = "rgb(21, 70, 121)";
-export const privateButtonPrimaryOnDarkDisabledBackgroundDay = "rgb(224, 227, 229)";
+export const privateButtonPrimaryOnDarkDisabledBackgroundDay = "rgb(224, 228, 233)";
 export const privateButtonLinkOnDarkNormalForegroundNight = "rgb(255, 255, 255)";
@@ -255,8 +257,8 @@ export const privateButtonDisabledBackgroundNight = "rgb(11, 18, 29)";
 export const privateButtonLinkOnDarkPressedForegroundDay = "rgba(255, 255, 255, 0.5)";
-export const privateButtonPrimaryOnDarkPressedBackgroundNight = "rgb(194, 201, 205)";
+export const privateButtonPrimaryOnDarkPressedBackgroundNight = "rgb(193, 199, 207)";
 export const privateButtonLinkOnDarkNormalForegroundDay = "rgb(255, 255, 255)";
-export const privateButtonDisabledBackgroundDay = "rgb(224, 227, 229)";
+export const privateButtonDisabledBackgroundDay = "rgb(224, 228, 233)";
 export const privateButtonSecondaryOnDarkNormalBackgroundDay = "rgb(36, 51, 70)";
 export const privateButtonSecondaryOnDarkDisabledForegroundDay = "rgba(255, 255, 255, 0.2)";
-export const privateButtonPrimaryOnDarkPressedBackgroundDay = "rgb(194, 201, 205)";
+export const privateButtonPrimaryOnDarkPressedBackgroundDay = "rgb(193, 199, 207)";
 export const privateButtonPrimaryOnLightPressedBackgroundNight = "rgb(21, 70, 121)";
@@ -268,3 +270,3 @@ export const privateButtonFeaturedNormalBackgroundNight = "rgb(132, 233, 255)";
 export const privateSkeletonShimmerCenterNight = "rgba(0, 0, 0, 0.2)";
-export const privateSponsoredBannerBackgroundDay = "rgb(239, 241, 242)";
+export const privateSponsoredBannerBackgroundDay = "rgb(239, 243, 248)";
 export const privateSponsoredBannerBackgroundNight = "rgb(36, 51, 70)";
@@ -319,3 +321,3 @@ export const durationXs = "50ms";
 export const inputLargeHeight = "3rem";
-export const inputBorder = "solid .0625rem #C2C9CD";
+export const inputBorder = "solid .0625rem #C1C7CF";
 export const selectBorderRadius = ".25rem";
@@ -326,3 +328,3 @@ export const inputBackground = "#ffffff";
 export const inputBorderRadius = ".25rem";
-export const selectDisabledBorderColor = "rgb(224, 227, 229)";
+export const selectDisabledBorderColor = "rgb(224, 228, 233)";
 export const inputDisabledColor = "rgba(0, 0, 0, 0.2)";
@@ -334,3 +336,3 @@ export const inputPaddingX = ".5rem";
 export const inputHeight = "2.25rem";
-export const inputDisabledBorderColor = "rgb(239, 241, 242)";
+export const inputDisabledBorderColor = "rgb(239, 243, 248)";
 export const horizontalNavBarSelectedColor = "rgb(0, 98, 227)";
@@ -345,4 +347,4 @@ export const iconSizeSm = "1rem";
 export const modalContentPadding = "1rem";
-export const bannerAlertHeaderExpandableHoverBackgroundColor = "rgb(239, 241, 242)";
-export const bannerAlertHeaderExpandableActiveBackgroundColor = "rgb(239, 241, 242)";
+export const bannerAlertHeaderExpandableHoverBackgroundColor = "rgb(239, 243, 248)";
+export const bannerAlertHeaderExpandableActiveBackgroundColor = "rgb(239, 243, 248)";
 export const bannerAlertPrimaryColor = "rgb(0, 98, 227)";
@@ -352,4 +354,4 @@ export const bannerAlertSuccessColor = "rgb(12, 131, 138)";
 export const bannerAlertErrorColor = "rgb(231, 8, 102)";
-export const bannerAlertNeutralColor = "rgb(194, 201, 205)";
-export const panelBorderColor = "rgb(194, 201, 205)";
+export const bannerAlertNeutralColor = "rgb(193, 199, 207)";
+export const panelBorderColor = "rgb(193, 199, 207)";
 export const privateSliderSelectedDay = "rgb(21, 70, 121)";
@@ -764,5 +766,7 @@ export const onePixelRem = ".0625rem";
 textLinkNight,
+textHeroNight,
 textDisabledNight,
 textPrimaryDarkColor,
 textLinkDay,
+textHeroDay,
 textQuaternaryDarkColor,
@@ -769,0 +773,0 @@ textPrimaryNight,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212077

increased by0.41%

Lines of code

4316

increased by0.47%

Dependency changes

• Updated@skyscanner/bpk-foundations-common@^6.8.0