@skyscanner/backpack-web 13.0.0 → 14.0.0

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -80,7 +80,7 @@ const BpkAccordionItem = (props: Props) => {
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
     <div id={id} {...rest}>
-      <dt aria-labelledby={id} className={getClassName('bpk-accordion__title')}>
+      <dt className={getClassName('bpk-accordion__title')}>
         <button
           type="button"
           aria-expanded={expanded}
@@ -105,7 +105,6 @@ const BpkAccordionItem = (props: Props) => {
       </dt>
       <dd
         id={contentId}
-        aria-labelledby={contentId}
         className={getClassName('bpk-accordion__content-container')}
       >
         <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>

package/bpk-component-barchart/src/BpkBarchartBar.module.scss

@@ -22,7 +22,7 @@
   @include bpk-themeable-property(
     fill,
     --bpk-barchart-bar-background-color,
-    $bpk-color-sky-blue-tint-01
+    $bpk-line-day
   );
 
   &--interactive:not(.bpk-barchart-bar--selected) {
@@ -32,7 +32,7 @@
       @include bpk-themeable-property(
         fill,
         --bpk-barchart-bar-hover-background-color,
-        $bpk-color-sky-blue
+        $bpk-core-primary-day
       );
     }
 
@@ -40,7 +40,7 @@
       @include bpk-themeable-property(
         fill,
         --bpk-barchart-bar-active-background-color,
-        $bpk-color-sky-blue-shade-01
+        $bpk-core-accent-day
       );
     }
   }
@@ -49,7 +49,7 @@
     @include bpk-themeable-property(
       fill,
       --bpk-barchart-bar-selected-background-color,
-      $bpk-color-sky-blue-shade-01
+      $bpk-core-accent-day
     );
   }
 

package/bpk-component-barchart/src/BpkChartAxis.module.scss

@@ -21,7 +21,7 @@
 .bpk-chart {
   &__axis-tick {
     &-text {
-      fill: $bpk-color-sky-gray-tint-02;
+      fill: $bpk-text-secondary-day;
 
       @include bpk-text;
       @include bpk-caption;
@@ -29,7 +29,7 @@
   }
 
   &__axis-label {
-    fill: $bpk-color-sky-gray-tint-02;
+    fill: $bpk-text-secondary-day;
 
     @include bpk-text;
     @include bpk-caption;

package/bpk-component-barchart/src/BpkChartGridLines.module.scss

@@ -21,6 +21,6 @@
 .bpk-chart {
   &__grid-line {
     shape-rendering: crispedges;
-    stroke: $bpk-color-sky-gray-tint-06;
+    stroke: $bpk-line-day;
   }
 }

package/bpk-scrim-utils/README.md

@@ -41,7 +41,6 @@ const BoxWithScrim = withScrim(Box);
 | isIphone              | bool     | false    | `/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')` |
 | containerClassName    | string   | false    | ''                                                                               |
 | closeOnScrimClick     | bool     | false    | true                                                                             |
-| dark                  | bool     | false    | false                                                                            |
 
 ### Prop Details
 

package/bpk-scrim-utils/src/BpkScrim.js

@@ -33,7 +33,7 @@ const BpkScrim = (props) => (
   >
     <div
       role="presentation"
-      className={getClassName('bpk-scrim', props.dark && 'bpk-scrim--dark')}
+      className={getClassName('bpk-scrim')}
       onMouseDown={props.onClose}
       onTouchStart={props.onClose}
     />
@@ -41,12 +41,10 @@ const BpkScrim = (props) => (
 );
 
 BpkScrim.propTypes = {
-  dark: PropTypes.bool,
   onClose: PropTypes.func,
 };
 
 BpkScrim.defaultProps = {
-  dark: false,
   onClose: null,
 };
 

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -26,15 +26,12 @@
   left: 0;
   z-index: $bpk-zindex-scrim;
   transition: opacity $bpk-duration-sm ease-in-out;
-  background-color: $bpk-scrim-background-color;
+  background-color: $bpk-scrim-day;
+
+  // We will need to remove this on hex launch as opacity will be built into the above colour.
   opacity: $bpk-scrim-opacity;
   overflow: hidden;
 
-  &--dark {
-    background-color: $bpk-scrim-dark-background-color;
-    opacity: $bpk-scrim-dark-opacity;
-  }
-
   &--full-screen {
     @include bpk-breakpoint-mobile {
       opacity: $bpk-scrim-mobile-opacity;

package/bpk-scrim-utils/src/withScrim.js

@@ -47,7 +47,6 @@ const withScrim = (WrappedComponent) => {
     static propTypes = {
       getApplicationElement: PropTypes.func.isRequired,
       onClose: onClosePropType,
-      dark: PropTypes.bool,
       isIphone: PropTypes.bool,
       isIpad: PropTypes.bool,
       containerClassName: PropTypes.string,
@@ -55,7 +54,6 @@ const withScrim = (WrappedComponent) => {
     };
 
     static defaultProps = {
-      dark: false,
       onClose: null,
       isIphone: isDeviceIphone(),
       isIpad: isDeviceIpad(),
@@ -125,7 +123,6 @@ const withScrim = (WrappedComponent) => {
       const {
         closeOnScrimClick,
         containerClassName,
-        dark,
         getApplicationElement,
         isIpad,
         isIphone,
@@ -141,7 +138,7 @@ const withScrim = (WrappedComponent) => {
 
       return (
         <div className={classNames.join(' ')}>
-          <BpkScrim onClose={closeOnScrimClick ? onClose : null} dark={dark} />
+          <BpkScrim onClose={closeOnScrimClick ? onClose : null} />
           <WrappedComponent
             {...rest}
             isIphone={isIphone}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^10.4.0",
-    "@skyscanner/bpk-svgs": "^14.5.9",
+    "@skyscanner/bpk-foundations-web": "^12.0.0",
+    "@skyscanner/bpk-svgs": "^15.0.2",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^32.2.0",
+    "bpk-mixins": "^34.0.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",