@skyscanner/backpack-web 25.8.3 → 26.0.0-beta.1

package/bpk-mixins/src/mixins/_utils.scss

@@ -0,0 +1,249 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+////
+/// @group utils
+////
+
+/// Hide visually and from screen readers.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hidden();
+///   }
+
+@mixin bpk-hidden {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+/// Hide only visually, but have it available for screen readers:
+///
+/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///   }
+
+@mixin bpk-visually-hidden {
+  position: absolute;
+  width: 1px; /* stylelint-disable-line unit-disallowed-list */
+  height: 1px; /* stylelint-disable-line unit-disallowed-list */
+  margin: -1px; /* stylelint-disable-line unit-disallowed-list */
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:
+///
+/// https://www.drupal.org/node/897638
+///
+/// @require {mixin} bpk-visually-hidden
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///     @include bpk-visually-hidden--focusable();
+///   }
+
+@mixin bpk-visually-hidden--focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
+
+/// Hide visually and from screen readers, but maintain layout.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-invisible();
+///   }
+
+@mixin bpk-invisible {
+  visibility: hidden;
+}
+
+/// Clearfix: contain floats.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-clearfix();
+///   }
+
+@mixin bpk-clearfix {
+  &::before,
+  &::after {
+    content: '';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+/// Target RTL specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-rtl() {
+///       /* RTL scss goes here */
+///     }
+///   }
+
+@mixin bpk-rtl {
+  html[dir='rtl'] & {
+    @content;
+  }
+}
+
+/// :hover pseudo selector wrapper which prevents styles displaying on touch devices
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hover() {
+///       /* Non-touch specific hover scss goes here */
+///     }
+///   }
+
+@mixin bpk-hover {
+  .bpk-no-touch-support &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+
+  // Duplicating the above rule with `:global(...)` pseudo selector around the
+  // global `.bpk-no-touch-support` class to provide support for CSS modules.
+  // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped
+  //   leaving a duplicate rule which in turn will be 'uglified' out - so no worries there
+  // - when processed through node-sass only, the `:global(...)` pseudo selector will be left
+  //   intact and ignored by all browsers
+  // stylelint-disable-next-line selector-pseudo-class-no-unknown
+  :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+}
+
+/// Target locale specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-locale('ja-JP') {
+///       /* ja-JP scss goes here */
+///     }
+///   }
+
+@mixin bpk-locale($locale) {
+  html[lang='#{$locale}'] &,
+  html[lang='#{to_lower_case($locale)}'] & {
+    @content;
+  }
+}
+
+/// Create a Backpack themeable property with
+/// fallback support for old browsers and when
+/// the CSS variable is not defined.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);
+///   }
+
+@mixin bpk-themeable-property($property, $variableName, $fallback) {
+  #{$property}: $fallback;
+  #{$property}: var($variableName, $fallback);
+}
+
+/// Create a property that uses the Backpack primary color blue-500.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-apply-primary-color-to(color);
+///   }
+@mixin bpk-apply-primary-color-to($property) {
+  @include bpk-themeable-property(
+    $property,
+    --bpk-primary-color,
+    $bpk-color-sky-blue
+  );
+}
+
+/// Replace part of a string with another string.
+///
+/// @param {string} $string - The string inside which the replacement should take place.
+/// @param {string} $search - The substring to be replaced.
+/// @param {string} $replace [''] - The string to replace $search.
+
+@function str-replace($string, $search, $replace: '') {
+  /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+/// Increases the tappable area of the element to the
+/// minimum required for touch devices.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-touch-area;
+///   }
+
+@mixin bpk-touch-tappable {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    top: calc((-#{$bpk-spacing-xxl} / 2) + 50%);
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    left: calc((-#{$bpk-spacing-xxl} / 2) + 50%);
+    content: '';
+    width: $bpk-spacing-xxl;
+    height: $bpk-spacing-xxl;
+  }
+}

package/bpk-stylesheets/base.css

@@ -0,0 +1,20 @@
+/*
+ * 
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * 
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
+

package/bpk-stylesheets/base.js

@@ -0,0 +1 @@
+(()=>{"use strict";(()=>{if("undefined"==typeof document)return;const o=[];o.push("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch?"touch-support":"no-touch-support"),document.documentElement.className+=` ${o.map((o=>`bpk-${o}`)).join(" ")}`})()})();

package/bpk-stylesheets/font.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-f9356ad6.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-46f9f429.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-ab1dbcbe.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-10532ac3.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-db5d0ac5.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-8eec3f3a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-c08dc28b.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-865e167a.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-d0ae478a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-81517f37.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-bbdb6b0c.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-226fe64c.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-8545937e.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-a099c9f7.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-ec4cc5a7.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-01b5d138.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-4d6d36e3.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-dc9284dc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bb3c9434.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bba2eb55.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-314703cc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-c2149c91.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-a34cd594.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-7e516ee5.ttf") format("ttf")}

package/{bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css → bpk-stylesheets/font.js}

@@ -1,18 +1,19 @@
 /*
  * Backpack - Skyscanner's Design System
- * 
+ *
  * Copyright 2016 Skyscanner Ltd
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *   http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dark-example-wrapper{border-radius:.5rem;background-color:#05203c;background-color:var(--bpk-docs-sidebar-background, #05203c)}.bpk-dark-example-wrapper--padded{padding:1.125rem}
+ */
+
+import './font.scss';

package/bpk-stylesheets/font.scss

@@ -0,0 +1,107 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$base-url: 'https://js.skyscnr.com/sttc/bpk-fonts';
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Book-f9356ad6.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Book-46f9f429.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Book-ab1dbcbe.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Italic-10532ac3.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Italic-db5d0ac5.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Italic-8eec3f3a.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 500;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Medium-c08dc28b.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Medium-865e167a.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Medium-d0ae478a.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 500;
+  src:
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-81517f37.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-bbdb6b0c.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-226fe64c.ttf')
+      format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Bold-8545937e.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Bold-a099c9f7.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Bold-ec4cc5a7.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 700;
+  src:
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-01b5d138.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-4d6d36e3.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-dc9284dc.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 900;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Black-bb3c9434.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Black-bba2eb55.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Black-314703cc.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 900;
+  src:
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-c2149c91.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-a34cd594.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-7e516ee5.ttf')
+      format('ttf');
+}

package/bpk-stylesheets/index.js

@@ -0,0 +1,42 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './index.scss';
+
+(() => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const classNames = [];
+
+  // touch support
+  classNames.push(
+    'ontouchstart' in window || // eslint-disable-line no-undef
+      (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
+      ? 'touch-support'
+      : 'no-touch-support',
+  );
+
+  // add more feature tests here...
+
+  // eslint-disable-next-line no-undef
+  document.documentElement.className += ` ${classNames
+    .map((className) => `bpk-${className}`)
+    .join(' ')}`;
+})();

package/bpk-stylesheets/index.scss

@@ -0,0 +1,76 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~normalize.css';
+@import '../bpk-mixins/index.scss';
+
+// stylelint-disable-next-line selector-max-type
+html {
+  font-size: $bpk-font-size-root;
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
+
+  &::before,
+  &::after {
+    box-sizing: inherit;
+  }
+}
+
+/* stylelint-disable selector-class-pattern */
+body {
+  color: $bpk-font-color-base;
+  font-family: $bpk-font-family-base;
+  font-size: $bpk-font-size-base;
+  line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+
+  :global(&.scaffold-font-size) {
+    font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
+  }
+
+  :global(&.enable-font-smoothing) {
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+:global(.hidden),
+:global(.hide) {
+  @include bpk-hidden;
+}
+
+:global(.visuallyhidden),
+:global(.visually-hidden) {
+  @include bpk-visually-hidden;
+}
+
+:global(.visuallyhidden.focusable),
+:global(.visually-hidden.focusable) {
+  @include bpk-visually-hidden--focusable;
+}
+
+:global(.invisible) {
+  @include bpk-invisible;
+}
+
+:global(.clearfix) {
+  @include bpk-clearfix;
+}
+
+/* stylelint-enable */

package/bpk-theming/src/BpkThemeProvider.js

@@ -127,7 +127,6 @@ BpkThemeProvider.propTypes = {
   theme: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
   themeAttributes: themeAttributesPropType,
-  // eslint-disable-line react/require-default-props
   // (disabled because isRequired is inside the custom validator)
   component: PropTypes.elementType,
   style: PropTypes.object // eslint-disable-line react/forbid-prop-types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "25.8.3",
+  "version": "26.0.0-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,10 +25,9 @@
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^16.1.0",
-    "@skyscanner/bpk-svgs": "^16.4.0",
+    "@skyscanner/bpk-svgs": "^17.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^41.1.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",
@@ -36,6 +35,7 @@
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
+    "normalize.css": "4.2.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
@@ -46,6 +46,7 @@
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
+    "node-sass": ">=4.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

package/bpk-storybook-utils/src/BpkDarkExampleWrapper.js

@@ -1,38 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDarkExampleWrapper.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkDarkExampleWrapper = props => {
-  const {
-    padded,
-    ...rest
-  } = props;
-  return (
-    /*#__PURE__*/
-    /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-    _jsx("div", {
-      className: getClassName('bpk-dark-example-wrapper', padded && 'bpk-dark-example-wrapper--padded'),
-      ...rest
-    })
-  );
-};
-BpkDarkExampleWrapper.defaultProps = {
-  padded: false
-};
-export default BpkDarkExampleWrapper;