@skyscanner/backpack-web 31.10.0 → 32.0.0

package/bpk-mixins/{src/mixins/_buttons.scss → _buttons.scss}

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
 @import 'typography.scss';
+@import 'utils.scss';
 
 ////
 /// @group buttons
@@ -319,7 +322,7 @@
   }
 }
 
-/// Destructive button. Modifies the bpk-button & bpk-button--secondary mixins.
+/// Destructive button. Modifies the bpk-button & bpk-button--secondary lib.
 ///
 /// @require {mixin} bpk-button
 /// @require {mixin} bpk-button--secondary
@@ -420,7 +423,7 @@
   }
 }
 
-/// Link on dark button. Modifies the bpk-button & bpk-button--link mixins.
+/// Link on dark button. Modifies the bpk-button & bpk-button--link lib.
 ///
 /// @require {mixin} bpk-button
 
@@ -489,7 +492,7 @@
   border-radius: $bpk-button-border-radius;
 }
 
-/// Large icon-only button. Modifies the bpk-button & bpk-button--large mixins.
+/// Large icon-only button. Modifies the bpk-button & bpk-button--large lib.
 ///
 /// @require {mixin} bpk-button
 /// @require {mixin} bpk-button--large

package/bpk-mixins/{src/mixins/_cards.scss → _cards.scss}

@@ -16,7 +16,12 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'radii.scss';
+@import 'shadows.scss';
+@import 'utils.scss';
 
 ////
 /// @group cards

package/bpk-mixins/{src/mixins/_chips.scss → _chips.scss}

@@ -16,6 +16,14 @@
  * limitations under the License.
  */
 
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'borders.scss';
+@import 'margins.scss';
+@import 'shadows.scss';
+@import 'utils.scss';
+
 @mixin bpk-chip {
   display: inline-flex;
   height: bpk-spacing-xl();

package/bpk-mixins/{src/mixins/_forms.scss → _forms.scss}

@@ -16,7 +16,11 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'typography.scss';
+@import 'utils.scss';
 
 ////
 /// @group forms

package/bpk-mixins/_icons.scss

@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'utils.scss';
+
+////
+/// @group svgs
+////
+
+/// Button alignment utility.
+///
+/// @access private
+
+@mixin _bpk-svg--align-to-button() {
+  vertical-align: text-bottom;
+}
+
+/// Large button alignment utility.
+///
+/// @access private
+
+@mixin _bpk-svg--align-to-large-button() {
+  margin-top: ($bpk-private-button-line-height - $bpk-icon-size-lg) / 2;
+  vertical-align: top;
+}
+
+/// Align to button. Modifies the bpk-icon-sm mixin.
+///
+/// @require {mixin} bpk-icon-sm
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-sm(flight-sky-gray-tint-02);
+///     @include bpk-icon-sm--align-to-button();
+///   }
+
+@mixin bpk-icon-sm--align-to-button() {
+  @include _bpk-svg--align-to-button;
+}
+
+/// Align to large button. Modifies the bpk-icon-lg mixin.
+///
+/// @require {mixin} bpk-icon-lg
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-lg(flight-sky-gray-tint-02);
+///     @include bpk-icon-lg--align-to-large-button();
+///   }
+
+@mixin bpk-icon-lg--align-to-large-button() {
+  @include _bpk-svg--align-to-large-button;
+}
+
+/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.
+///
+/// @require {mixin} bpk-icon-sm
+/// @require {mixin} bpk-icon-lg
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-sm(flight-sky-gray-tint-02);
+///     @include bpk-icon--rtl-support();
+///   }
+
+@mixin bpk-icon--rtl-support() {
+  @include bpk-rtl {
+    transform: scaleX(-1);
+  }
+}

package/bpk-mixins/_index.scss

@@ -16,20 +16,23 @@
  * limitations under the License.
  */
 
-@import 'src/bonds.scss';
-@import 'src/mixins/badges.scss';
-@import 'src/mixins/borders.scss';
-@import 'src/mixins/breakpoints.scss';
-@import 'src/mixins/buttons.scss';
-@import 'src/mixins/cards.scss';
-@import 'src/mixins/chips.scss';
-@import 'src/mixins/forms.scss';
-@import 'src/mixins/layers.scss';
-@import 'src/mixins/margins.scss';
-@import 'src/mixins/panels.scss';
-@import 'src/mixins/radii.scss';
-@import 'src/mixins/scroll-indicators.scss';
-@import 'src/mixins/shadows.scss';
-@import 'src/mixins/svgs.scss';
-@import 'src/mixins/typography.scss';
-@import 'src/mixins/utils.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'badges.scss';
+@import 'borders.scss';
+@import 'breakpoints.scss';
+@import 'buttons.scss';
+@import 'cards.scss';
+@import 'chips.scss';
+@import 'forms.scss';
+@import 'icons.scss';
+@import 'layers.scss';
+@import 'margins.scss';
+@import 'panels.scss';
+@import 'radii.scss';
+@import 'scroll-indicators.scss';
+@import 'shadows.scss';
+@import 'spinners.scss';
+@import 'typography.scss';
+@import 'utils.scss';

package/bpk-mixins/{src/mixins/_layers.scss → _layers.scss}

@@ -16,9 +16,12 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
 @import 'radii.scss';
 @import 'shadows.scss';
+@import 'utils.scss';
 
 ////
 /// @group layers
@@ -87,18 +90,18 @@
   height: $arrow-size;
 
   &::before {
-    top: -($arrow-size + $bpk-one-pixel-rem);
-    margin-left: -$bpk-one-pixel-rem;
+    top: -1 * ($arrow-size + $bpk-one-pixel-rem);
+    margin-left: -1 * $bpk-one-pixel-rem;
     border-bottom-color: $border-color;
 
     @include bpk-rtl {
-      margin-right: -$bpk-one-pixel-rem;
+      margin-right: -1 * $bpk-one-pixel-rem;
       margin-left: 0;
     }
   }
 
   &::after {
-    top: -$arrow-size + $bpk-one-pixel-rem;
+    top: -1 * $arrow-size + $bpk-one-pixel-rem;
     border-bottom-color: $arrow-color;
   }
 }
@@ -121,13 +124,13 @@
   height: ($arrow-size * 2);
 
   &::before {
-    right: -($arrow-size + $bpk-one-pixel-rem);
-    margin-top: -$bpk-one-pixel-rem;
+    right: -1 * ($arrow-size + $bpk-one-pixel-rem);
+    margin-top: -1 * $bpk-one-pixel-rem;
     border-left-color: $border-color;
   }
 
   &::after {
-    right: -$arrow-size + $bpk-one-pixel-rem;
+    right: -1 * $arrow-size + $bpk-one-pixel-rem;
     border-left-color: $arrow-color;
   }
 }
@@ -150,18 +153,18 @@
   height: $arrow-size;
 
   &::before {
-    bottom: -($arrow-size + $bpk-one-pixel-rem);
-    margin-left: -$bpk-one-pixel-rem;
+    bottom: -1 * ($arrow-size + $bpk-one-pixel-rem);
+    margin-left: -1 * $bpk-one-pixel-rem;
     border-top-color: $border-color;
 
     @include bpk-rtl {
-      margin-right: -$bpk-one-pixel-rem;
+      margin-right: -1 * $bpk-one-pixel-rem;
       margin-left: 0;
     }
   }
 
   &::after {
-    bottom: -$arrow-size + $bpk-one-pixel-rem;
+    bottom: -1 * $arrow-size + $bpk-one-pixel-rem;
     border-top-color: $arrow-color;
   }
 }
@@ -184,13 +187,13 @@
   height: ($arrow-size * 2);
 
   &::before {
-    left: -($arrow-size + $bpk-one-pixel-rem);
-    margin-top: -$bpk-one-pixel-rem;
+    left: -1 * ($arrow-size + $bpk-one-pixel-rem);
+    margin-top: -1 * $bpk-one-pixel-rem;
     border-right-color: $border-color;
   }
 
   &::after {
-    left: -$arrow-size + $bpk-one-pixel-rem;
+    left: -1 * $arrow-size + $bpk-one-pixel-rem;
     border-right-color: $arrow-color;
   }
 }

package/bpk-mixins/{src/mixins/_margins.scss → _margins.scss}

@@ -16,6 +16,10 @@
  * limitations under the License.
  */
 
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'utils.scss';
+
 /// RTL aware leading margin
 ///
 /// @param {string} $margin The desired leading margin.

package/bpk-mixins/{src/mixins/_panels.scss → _panels.scss}

@@ -16,7 +16,11 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'borders.scss';
+@import 'radii.scss';
 
 ////
 /// @group panels
@@ -62,6 +66,6 @@
 @mixin bpk-panel--full-width {
   border-radius: 0;
   box-shadow:
-    $bpk-panel-border-color 0 #{-$bpk-one-pixel-rem} 0 0 inset,
+    $bpk-panel-border-color 0 -1 * $bpk-one-pixel-rem 0 0 inset,
     $bpk-panel-border-color 0 $bpk-one-pixel-rem 0 0 inset;
 }

package/bpk-mixins/{src/mixins/_radii.scss → _radii.scss}

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
 
 ////
 /// @group radii

package/bpk-mixins/{src/mixins/_scroll-indicators.scss → _scroll-indicators.scss}

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
 
 ////
 /// @group scroll-indicator

package/bpk-mixins/{src/mixins/_shadows.scss → _shadows.scss}

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
 
 ////
 /// @group box-shadows

package/bpk-mixins/{src/mixins/_svgs.scss → _spinners.scss}

@@ -16,7 +16,10 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import './icons.scss';
 @import './utils.scss';
 
 @keyframes bpk-keyframe-spin {
@@ -25,72 +28,6 @@
   }
 }
 
-////
-/// @group svgs
-////
-
-/// Button alignment utility.
-///
-/// @access private
-
-@mixin _bpk-svg--align-to-button() {
-  vertical-align: text-bottom;
-}
-
-/// Large button alignment utility.
-///
-/// @access private
-
-@mixin _bpk-svg--align-to-large-button() {
-  margin-top: ($bpk-private-button-line-height - $bpk-icon-size-lg) / 2;
-  vertical-align: top;
-}
-
-/// Align to button. Modifies the bpk-icon-sm mixin.
-///
-/// @require {mixin} bpk-icon-sm
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-sm(flight-sky-gray-tint-02);
-///     @include bpk-icon-sm--align-to-button();
-///   }
-
-@mixin bpk-icon-sm--align-to-button() {
-  @include _bpk-svg--align-to-button;
-}
-
-/// Align to large button. Modifies the bpk-icon-lg mixin.
-///
-/// @require {mixin} bpk-icon-lg
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-lg(flight-sky-gray-tint-02);
-///     @include bpk-icon-lg--align-to-large-button();
-///   }
-
-@mixin bpk-icon-lg--align-to-large-button() {
-  @include _bpk-svg--align-to-large-button;
-}
-
-/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.
-///
-/// @require {mixin} bpk-icon-sm
-/// @require {mixin} bpk-icon-lg
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-sm(flight-sky-gray-tint-02);
-///     @include bpk-icon--rtl-support();
-///   }
-
-@mixin bpk-icon--rtl-support() {
-  @include bpk-rtl {
-    transform: scaleX(-1);
-  }
-}
-
 /// Small spinner.
 ///
 /// @param {key} $spinner - The key of the desired SVG datauri from the $bpk-spinners map.
@@ -161,5 +98,5 @@
 ///   }
 
 @mixin bpk-spinner--align-to-large-button() {
-  @include _bpk-svg--align-to-large-button;
+  @include bpk-icon-lg--align-to-large-button;
 }

package/bpk-mixins/{src/_bonds.scss → _tokens.scss}

@@ -16,4 +16,6 @@
  * limitations under the License.
  */
 
+/* stylelint-disable at-rule-disallowed-list */
+
 @import '~@skyscanner/bpk-foundations-web/tokens/base.default';

package/bpk-mixins/{src/mixins/_typography.scss → _typography.scss}

@@ -16,8 +16,12 @@
  * limitations under the License.
  */
 
-@import '../bonds.scss';
-@import './borders.scss';
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+@import 'borders.scss';
+@import 'radii.scss';
+@import 'utils.scss';
 
 ////
 /// @group typography

package/bpk-mixins/{src/mixins/_utils.scss → _utils.scss}

@@ -16,6 +16,10 @@
  * limitations under the License.
  */
 
+/* stylelint-disable at-rule-disallowed-list */
+
+@import 'tokens.scss';
+
 ////
 /// @group utils
 ////

package/bpk-scrim-utils/src/bpk-scrim-content.module.css

@@ -14,5 +14,5 @@
  * 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-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
+ */
+.bpk-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}

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

@@ -14,5 +14,5 @@
  * 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-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,0.7);overflow:hidden}@media (max-width: 32rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:0.7}
+ */
+.bpk-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,.7);overflow:hidden}@media(max-width: 32rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:.7}

package/bpk-stylesheets/base.css

@@ -16,5 +16,4 @@
  * 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}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}
-
+ *//*! 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:.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 silver;margin:0 2px;padding:.35em .625em .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:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}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}body &.scaffold-font-size{font-size:13px}body &.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}

package/bpk-stylesheets/font.css

@@ -14,5 +14,5 @@
  * 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")}
+ */
+@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-stylesheets/index.scss

@@ -16,12 +16,16 @@
  * limitations under the License.
  */
 
-@import '~normalize.css';
-@import '../bpk-mixins/index.scss';
+/* stylelint-disable at-rule-disallowed-list, scss/at-import-partial-extension */
+
+@use '../bpk-mixins/tokens';
+@use '../bpk-mixins/utils';
+
+@import './normalize';
 
 // stylelint-disable-next-line selector-max-type
 html {
-  font-size: $bpk-font-size-root;
+  font-size: tokens.$bpk-font-size-root;
   box-sizing: border-box;
 }
 
@@ -36,9 +40,9 @@ html {
 
 /* stylelint-disable selector-class-pattern */
 body {
-  color: $bpk-font-color-base;
-  font-family: $bpk-font-family-base;
-  font-size: $bpk-font-size-base;
+  color: tokens.$bpk-font-color-base;
+  font-family: tokens.$bpk-font-family-base;
+  font-size: tokens.$bpk-font-size-base;
   line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
 
   :global(&.scaffold-font-size) {
@@ -51,30 +55,30 @@ body {
 }
 
 :focus-visible {
-  @include bpk-focus-indicator;
+  @include utils.bpk-focus-indicator;
 }
 
 :global(.hidden),
 :global(.hide) {
-  @include bpk-hidden;
+  @include utils.bpk-hidden;
 }
 
 :global(.visuallyhidden),
 :global(.visually-hidden) {
-  @include bpk-visually-hidden;
+  @include utils.bpk-visually-hidden;
 }
 
 :global(.visuallyhidden.focusable),
 :global(.visually-hidden.focusable) {
-  @include bpk-visually-hidden--focusable;
+  @include utils.bpk-visually-hidden--focusable;
 }
 
 :global(.invisible) {
-  @include bpk-invisible;
+  @include utils.bpk-invisible;
 }
 
 :global(.clearfix) {
-  @include bpk-clearfix;
+  @include utils.bpk-clearfix;
 }
-
-/* stylelint-enable */
+/* stylelint-enable selector-class-pattern */
+/* stylelint-enable at-rule-disallowed-list */