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

Comparing version 7.0.0 to 8.0.0

package.json

 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Common Backpack design tokens for colors, spacing, font, etc.",
@@ -23,3 +23,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "8d555a2786a5401e0b85c1069ad604a4be1dc441"
+  "gitHead": "a4302291105f26de3cbce014f53be610404fad06"
 }

tokens/base.common.js

@@ -60,11 +60,21 @@ /*
   boxShadowXl: "0px 12px 50px 0px rgba(37,32,31,.25)",
-  breakpointDesktop: "71.25rem",
-  breakpointMobile: "32.25rem",
-  breakpointQueryAboveDesktop: "(min-width: 71.3125rem)",
-  breakpointQueryAboveMobile: "(min-width: 32.3125rem)",
-  breakpointQueryAboveTablet: "(min-width: 50.3125rem)",
-  breakpointQueryMobile: "(max-width: 32.25rem)",
-  breakpointQueryTablet: "(max-width: 50.25rem)",
-  breakpointQueryTabletOnly: "(min-width: 32.3125rem) and (max-width: 50.25rem)",
-  breakpointTablet: "50.25rem",
+  breakpointDesktop: "80rem",
+  breakpointDesktopMargin: "1rem * 3",
+  breakpointMobile: "32rem",
+  breakpointMobileMargin: "1.5rem",
+  breakpointQueryAboveDesktop: "(min-width: 80.0625rem)",
+  breakpointQueryAboveMobile: "(min-width: 32.0625rem)",
+  breakpointQueryAboveTablet: "(min-width: 64.0625rem)",
+  breakpointQueryMobile: "(max-width: 32rem)",
+  breakpointQuerySmallMobile: "(max-width: 22.4375rem)",
+  breakpointQuerySmallTablet: "(max-width: 48rem)",
+  breakpointQuerySmallTabletOnly: "(min-width: 32.0625rem) and (max-width: 48rem)",
+  breakpointQueryTablet: "(max-width: 64rem)",
+  breakpointQueryTabletOnly: "(min-width: 32.0625rem) and (max-width: 64rem)",
+  breakpointSmallMobile: "22.4375rem",
+  breakpointSmallMobileMargin: "1rem",
+  breakpointSmallTablet: "48rem",
+  breakpointSmallTabletMargin: "1.5rem",
+  breakpointTablet: "64rem",
+  breakpointTabletMargin: "2rem",
   buttonActiveBackgroundColor: "rgb(0, 106, 97)",
@@ -390,5 +400,5 @@ buttonActiveBackgroundImage: "none",
   modalInitialOpacity: "0",
-  modalMaxWidth: "32.25rem",
+  modalMaxWidth: "32rem",
   modalOpacity: "1",
-  modalWideMaxWidth: "50.25rem",
+  modalWideMaxWidth: "64rem",
   onePixelRem: ".0625rem",
@@ -395,0 +405,0 @@ panelBackgroundColor: "rgb(255, 255, 255)",

tokens/base.es6.js

@@ -58,11 +58,21 @@ /*
 export const boxShadowXl = "0px 12px 50px 0px rgba(37,32,31,.25)";
-export const breakpointDesktop = "71.25rem";
-export const breakpointMobile = "32.25rem";
-export const breakpointQueryAboveDesktop = "(min-width: 71.3125rem)";
-export const breakpointQueryAboveMobile = "(min-width: 32.3125rem)";
-export const breakpointQueryAboveTablet = "(min-width: 50.3125rem)";
-export const breakpointQueryMobile = "(max-width: 32.25rem)";
-export const breakpointQueryTablet = "(max-width: 50.25rem)";
-export const breakpointQueryTabletOnly = "(min-width: 32.3125rem) and (max-width: 50.25rem)";
-export const breakpointTablet = "50.25rem";
+export const breakpointDesktop = "80rem";
+export const breakpointDesktopMargin = "1rem * 3";
+export const breakpointMobile = "32rem";
+export const breakpointMobileMargin = "1.5rem";
+export const breakpointQueryAboveDesktop = "(min-width: 80.0625rem)";
+export const breakpointQueryAboveMobile = "(min-width: 32.0625rem)";
+export const breakpointQueryAboveTablet = "(min-width: 64.0625rem)";
+export const breakpointQueryMobile = "(max-width: 32rem)";
+export const breakpointQuerySmallMobile = "(max-width: 22.4375rem)";
+export const breakpointQuerySmallTablet = "(max-width: 48rem)";
+export const breakpointQuerySmallTabletOnly = "(min-width: 32.0625rem) and (max-width: 48rem)";
+export const breakpointQueryTablet = "(max-width: 64rem)";
+export const breakpointQueryTabletOnly = "(min-width: 32.0625rem) and (max-width: 64rem)";
+export const breakpointSmallMobile = "22.4375rem";
+export const breakpointSmallMobileMargin = "1rem";
+export const breakpointSmallTablet = "48rem";
+export const breakpointSmallTabletMargin = "1.5rem";
+export const breakpointTablet = "64rem";
+export const breakpointTabletMargin = "2rem";
 export const buttonActiveBackgroundColor = "rgb(0, 106, 97)";
@@ -388,5 +398,5 @@ export const buttonActiveBackgroundImage = "none";
 export const modalInitialOpacity = "0";
-export const modalMaxWidth = "32.25rem";
+export const modalMaxWidth = "32rem";
 export const modalOpacity = "1";
-export const modalWideMaxWidth = "50.25rem";
+export const modalWideMaxWidth = "64rem";
 export const onePixelRem = ".0625rem";
@@ -514,3 +524,5 @@ export const panelBackgroundColor = "rgb(255, 255, 255)";
 breakpointDesktop,
+breakpointDesktopMargin,
 breakpointMobile,
+breakpointMobileMargin,
 breakpointQueryAboveDesktop,
@@ -520,5 +532,13 @@ breakpointQueryAboveMobile,
 breakpointQueryMobile,
+breakpointQuerySmallMobile,
+breakpointQuerySmallTablet,
+breakpointQuerySmallTabletOnly,
 breakpointQueryTablet,
 breakpointQueryTabletOnly,
+breakpointSmallMobile,
+breakpointSmallMobileMargin,
+breakpointSmallTablet,
+breakpointSmallTabletMargin,
 breakpointTablet,
+breakpointTabletMargin,
 };
@@ -525,0 +545,0 @@ export const buttons = {

tokens/breakpoints.common.js

@@ -22,11 +22,21 @@ /*
 module.exports = {
-  breakpointDesktop: "71.25rem",
-  breakpointMobile: "32.25rem",
-  breakpointQueryAboveDesktop: "(min-width: 71.3125rem)",
-  breakpointQueryAboveMobile: "(min-width: 32.3125rem)",
-  breakpointQueryAboveTablet: "(min-width: 50.3125rem)",
-  breakpointQueryMobile: "(max-width: 32.25rem)",
-  breakpointQueryTablet: "(max-width: 50.25rem)",
-  breakpointQueryTabletOnly: "(min-width: 32.3125rem) and (max-width: 50.25rem)",
-  breakpointTablet: "50.25rem"
+  breakpointDesktop: "80rem",
+  breakpointDesktopMargin: "1rem * 3",
+  breakpointMobile: "32rem",
+  breakpointMobileMargin: "1.5rem",
+  breakpointQueryAboveDesktop: "(min-width: 80.0625rem)",
+  breakpointQueryAboveMobile: "(min-width: 32.0625rem)",
+  breakpointQueryAboveTablet: "(min-width: 64.0625rem)",
+  breakpointQueryMobile: "(max-width: 32rem)",
+  breakpointQuerySmallMobile: "(max-width: 22.4375rem)",
+  breakpointQuerySmallTablet: "(max-width: 48rem)",
+  breakpointQuerySmallTabletOnly: "(min-width: 32.0625rem) and (max-width: 48rem)",
+  breakpointQueryTablet: "(max-width: 64rem)",
+  breakpointQueryTabletOnly: "(min-width: 32.0625rem) and (max-width: 64rem)",
+  breakpointSmallMobile: "22.4375rem",
+  breakpointSmallMobileMargin: "1rem",
+  breakpointSmallTablet: "48rem",
+  breakpointSmallTabletMargin: "1.5rem",
+  breakpointTablet: "64rem",
+  breakpointTabletMargin: "2rem"
 };

tokens/breakpoints.es6.js

@@ -20,14 +20,26 @@ /*
  */
-export const breakpointDesktop = "71.25rem";
-export const breakpointMobile = "32.25rem";
-export const breakpointQueryAboveDesktop = "(min-width: 71.3125rem)";
-export const breakpointQueryAboveMobile = "(min-width: 32.3125rem)";
-export const breakpointQueryAboveTablet = "(min-width: 50.3125rem)";
-export const breakpointQueryMobile = "(max-width: 32.25rem)";
-export const breakpointQueryTablet = "(max-width: 50.25rem)";
-export const breakpointQueryTabletOnly = "(min-width: 32.3125rem) and (max-width: 50.25rem)";
-export const breakpointTablet = "50.25rem";
+export const breakpointDesktop = "80rem";
+export const breakpointDesktopMargin = "1rem * 3";
+export const breakpointMobile = "32rem";
+export const breakpointMobileMargin = "1.5rem";
+export const breakpointQueryAboveDesktop = "(min-width: 80.0625rem)";
+export const breakpointQueryAboveMobile = "(min-width: 32.0625rem)";
+export const breakpointQueryAboveTablet = "(min-width: 64.0625rem)";
+export const breakpointQueryMobile = "(max-width: 32rem)";
+export const breakpointQuerySmallMobile = "(max-width: 22.4375rem)";
+export const breakpointQuerySmallTablet = "(max-width: 48rem)";
+export const breakpointQuerySmallTabletOnly = "(min-width: 32.0625rem) and (max-width: 48rem)";
+export const breakpointQueryTablet = "(max-width: 64rem)";
+export const breakpointQueryTabletOnly = "(min-width: 32.0625rem) and (max-width: 64rem)";
+export const breakpointSmallMobile = "22.4375rem";
+export const breakpointSmallMobileMargin = "1rem";
+export const breakpointSmallTablet = "48rem";
+export const breakpointSmallTabletMargin = "1.5rem";
+export const breakpointTablet = "64rem";
+export const breakpointTabletMargin = "2rem";
 export const breakpoints = {
 breakpointDesktop,
+breakpointDesktopMargin,
 breakpointMobile,
+breakpointMobileMargin,
 breakpointQueryAboveDesktop,
@@ -37,5 +49,13 @@ breakpointQueryAboveMobile,
 breakpointQueryMobile,
+breakpointQuerySmallMobile,
+breakpointQuerySmallTablet,
+breakpointQuerySmallTabletOnly,
 breakpointQueryTablet,
 breakpointQueryTabletOnly,
+breakpointSmallMobile,
+breakpointSmallMobileMargin,
+breakpointSmallTablet,
+breakpointSmallTabletMargin,
 breakpointTablet,
+breakpointTabletMargin,
 };

tokens/breakpoints.raw.json

@@ -165,2 +165,5 @@ {
     },
+    "BREAKPOINT_SMALL_MOBILE": {
+      "value": "22.4375rem"
+    },
     "FONT_WEIGHT_BLACK": {
@@ -197,4 +200,7 @@ "value": "900"
     "BREAKPOINT_ABOVE_DESKTOP": {
-      "value": "71.3125rem"
+      "value": "80.0625rem"
     },
+    "BREAKPOINT_SMALL_TABLET": {
+      "value": "48rem"
+    },
     "SPACING_BASE": {
@@ -216,3 +222,3 @@ "value": "1.5rem"
     "BREAKPOINT_DESKTOP": {
-      "value": "71.25rem"
+      "value": "80rem"
     },
@@ -238,3 +244,3 @@ "SPACING_BASE_V2": {
     "BREAKPOINT_MOBILE": {
-      "value": "32.25rem"
+      "value": "32rem"
     },
@@ -260,3 +266,3 @@ "SPACING_XXL": {
     "BREAKPOINT_ABOVE_MOBILE": {
-      "value": "32.3125rem"
+      "value": "32.0625rem"
     },
@@ -276,3 +282,3 @@ "BORDER_RADIUS_PILL": {
     "BREAKPOINT_TABLET": {
-      "value": "50.25rem"
+      "value": "64rem"
     },
@@ -286,3 +292,3 @@ "BUTTON_HEIGHT": {
     "BREAKPOINT_ABOVE_TABLET": {
-      "value": "50.3125rem"
+      "value": "64.0625rem"
     },
@@ -353,3 +359,3 @@ "SPACING_SM": {
       "category": "breakpoints",
-      "value": "(min-width: 32.3125rem) and (max-width: 50.25rem)",
+      "value": "(min-width: 32.0625rem) and (max-width: 64rem)",
       "type": "media-query",
@@ -359,5 +365,26 @@ "originalValue": "(min-width: {!BREAKPOINT_ABOVE_MOBILE}) and (max-width: {!BREAKPOINT_TABLET})",
     },
+    "BREAKPOINT_SMALL_TABLET_MARGIN": {
+      "category": "breakpoints",
+      "value": "1.5rem",
+      "type": "size",
+      "originalValue": "{!SPACING_LG_V2}",
+      "name": "BREAKPOINT_SMALL_TABLET_MARGIN"
+    },
+    "BREAKPOINT_QUERY_SMALL_TABLET": {
+      "category": "breakpoints",
+      "value": "(max-width: 48rem)",
+      "type": "media-query",
+      "originalValue": "(max-width: {!BREAKPOINT_SMALL_TABLET})",
+      "name": "BREAKPOINT_QUERY_SMALL_TABLET"
+    },
+    "BREAKPOINT_SMALL_MOBILE_MARGIN": {
+      "category": "breakpoints",
+      "value": "1rem",
+      "type": "size",
+      "originalValue": "{!SPACING_BASE_V2}",
+      "name": "BREAKPOINT_SMALL_MOBILE_MARGIN"
+    },
     "BREAKPOINT_QUERY_MOBILE": {
       "category": "breakpoints",
-      "value": "(max-width: 32.25rem)",
+      "value": "(max-width: 32rem)",
       "type": "media-query",
@@ -367,5 +394,19 @@ "originalValue": "(max-width: {!BREAKPOINT_MOBILE})",
     },
+    "BREAKPOINT_QUERY_SMALL_TABLET_ONLY": {
+      "category": "breakpoints",
+      "value": "(min-width: 32.0625rem) and (max-width: 48rem)",
+      "type": "media-query",
+      "originalValue": "(min-width: {!BREAKPOINT_ABOVE_MOBILE}) and (max-width: {!BREAKPOINT_SMALL_TABLET})",
+      "name": "BREAKPOINT_QUERY_SMALL_TABLET_ONLY"
+    },
+    "BREAKPOINT_SMALL_MOBILE": {
+      "category": "breakpoints",
+      "value": "22.4375rem",
+      "type": "size",
+      "originalValue": "{!BREAKPOINT_SMALL_MOBILE}",
+      "name": "BREAKPOINT_SMALL_MOBILE"
+    },
     "BREAKPOINT_QUERY_ABOVE_MOBILE": {
       "category": "breakpoints",
-      "value": "(min-width: 32.3125rem)",
+      "value": "(min-width: 32.0625rem)",
       "type": "media-query",
@@ -377,3 +418,3 @@ "originalValue": "(min-width: {!BREAKPOINT_ABOVE_MOBILE})",
       "category": "breakpoints",
-      "value": "(max-width: 50.25rem)",
+      "value": "(max-width: 64rem)",
       "type": "media-query",
@@ -383,5 +424,12 @@ "originalValue": "(max-width: {!BREAKPOINT_TABLET})",
     },
+    "BREAKPOINT_SMALL_TABLET": {
+      "category": "breakpoints",
+      "value": "48rem",
+      "type": "size",
+      "originalValue": "{!BREAKPOINT_SMALL_TABLET}",
+      "name": "BREAKPOINT_SMALL_TABLET"
+    },
     "BREAKPOINT_QUERY_ABOVE_TABLET": {
       "category": "breakpoints",
-      "value": "(min-width: 50.3125rem)",
+      "value": "(min-width: 64.0625rem)",
       "type": "media-query",
@@ -393,3 +441,3 @@ "originalValue": "(min-width: {!BREAKPOINT_ABOVE_TABLET})",
       "category": "breakpoints",
-      "value": "71.25rem",
+      "value": "80rem",
       "type": "size",
@@ -401,3 +449,3 @@ "originalValue": "{!BREAKPOINT_DESKTOP}",
       "category": "breakpoints",
-      "value": "32.25rem",
+      "value": "32rem",
       "type": "size",
@@ -409,3 +457,3 @@ "originalValue": "{!BREAKPOINT_MOBILE}",
       "category": "breakpoints",
-      "value": "50.25rem",
+      "value": "64rem",
       "type": "size",
@@ -417,8 +465,36 @@ "originalValue": "{!BREAKPOINT_TABLET}",
       "category": "breakpoints",
-      "value": "(min-width: 71.3125rem)",
+      "value": "(min-width: 80.0625rem)",
       "type": "media-query",
       "originalValue": "(min-width: {!BREAKPOINT_ABOVE_DESKTOP})",
       "name": "BREAKPOINT_QUERY_ABOVE_DESKTOP"
+    },
+    "BREAKPOINT_TABLET_MARGIN": {
+      "category": "breakpoints",
+      "value": "2rem",
+      "type": "size",
+      "originalValue": "{!SPACING_XL_V2}",
+      "name": "BREAKPOINT_TABLET_MARGIN"
+    },
+    "BREAKPOINT_MOBILE_MARGIN": {
+      "category": "breakpoints",
+      "value": "1.5rem",
+      "type": "size",
+      "originalValue": "{!SPACING_LG_V2}",
+      "name": "BREAKPOINT_MOBILE_MARGIN"
+    },
+    "BREAKPOINT_QUERY_SMALL_MOBILE": {
+      "category": "breakpoints",
+      "value": "(max-width: 22.4375rem)",
+      "type": "media-query",
+      "originalValue": "(max-width: {!BREAKPOINT_SMALL_MOBILE})",
+      "name": "BREAKPOINT_QUERY_SMALL_MOBILE"
+    },
+    "BREAKPOINT_DESKTOP_MARGIN": {
+      "category": "breakpoints",
+      "value": "1rem * 3",
+      "type": "size",
+      "originalValue": "{!SPACING_BASE_V2} * 3",
+      "name": "BREAKPOINT_DESKTOP_MARGIN"
     }
   }
 }

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

272082

increased by3.97%

Lines of code

5967

increased by3.68%

No dependency changes