@skyscanner/backpack-web 38.22.0 → 39.0.0

package/bpk-mixins/_icons.scss

@@ -18,8 +18,8 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import 'utils.scss';
+@use 'tokens';
+@use 'utils';
 
 ////
 /// @group svgs
@@ -38,7 +38,10 @@
 /// @access private
 
 @mixin _bpk-svg--align-to-large-button() {
-  margin-top: ($bpk-private-button-line-height - $bpk-icon-size-lg) / 2;
+  margin-top: (
+      tokens.$bpk-private-button-line-height - tokens.$bpk-icon-size-lg
+    ) *
+    0.5;
   vertical-align: top;
 }
 
@@ -82,7 +85,7 @@
 ///   }
 
 @mixin bpk-icon--rtl-support() {
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     transform: scaleX(-1);
   }
 }

package/bpk-mixins/_index.scss

@@ -16,23 +16,23 @@
  * limitations under the License.
  */
 
-/* stylelint-disable at-rule-disallowed-list */
+@forward 'tokens';
+@forward 'badges';
+@forward 'borders';
+@forward 'breakpoints';
+@forward 'buttons';
+@forward 'cards';
+@forward 'chips';
+@forward 'forms';
+@forward 'icons';
+@forward 'layers';
+@forward 'margins';
+@forward 'panels';
+@forward 'radii';
+@forward 'scroll-indicators';
+@forward 'shadows';
+@forward 'spinners';
+@forward 'typography';
+@forward 'utils';
 
-@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';
+@warn "You're using blank import of all mixins. This might affect performance of your build tool and your bundle size. \nConsider switching to more granular imports, e.g. @use '@skyscanner/backpack-web/bpk-mixins/buttons'";

package/bpk-mixins/_layers.scss

@@ -18,10 +18,10 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import 'radii.scss';
-@import 'shadows.scss';
-@import 'utils.scss';
+@use 'tokens';
+@use 'radii';
+@use 'shadows';
+@use 'utils';
 
 ////
 /// @group layers
@@ -35,14 +35,14 @@
 ///   }
 
 @mixin bpk-layer(
-  $background-color: $bpk-color-white,
-  $border-color: $bpk-surface-highlight-day
+  $background-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-surface-highlight-day
 ) {
-  border: $bpk-one-pixel-rem solid $border-color;
+  border: tokens.$bpk-one-pixel-rem solid $border-color;
   background-color: $background-color;
 
-  @include bpk-border-radius-sm;
-  @include bpk-box-shadow-lg;
+  @include radii.bpk-border-radius-sm;
+  @include shadows.bpk-box-shadow-lg;
 }
 
 /// Layer arrow base styles.
@@ -64,7 +64,7 @@
   }
 
   &::before {
-    border: ($arrow-size + $bpk-one-pixel-rem) solid transparent;
+    border: ($arrow-size + tokens.$bpk-one-pixel-rem) solid transparent;
   }
 
   &::after {
@@ -82,26 +82,26 @@
 
 @mixin bpk-layer-arrow-top(
   $arrow-size,
-  $arrow-color: $bpk-color-white,
-  $border-color: $bpk-color-sky-gray-tint-06
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
 ) {
   bottom: 100%;
   width: ($arrow-size * 2);
   height: $arrow-size;
 
   &::before {
-    top: -1 * ($arrow-size + $bpk-one-pixel-rem);
-    margin-left: -1 * $bpk-one-pixel-rem;
+    top: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-left: -1 * tokens.$bpk-one-pixel-rem;
     border-bottom-color: $border-color;
 
-    @include bpk-rtl {
-      margin-right: -1 * $bpk-one-pixel-rem;
+    @include utils.bpk-rtl {
+      margin-right: -1 * tokens.$bpk-one-pixel-rem;
       margin-left: 0;
     }
   }
 
   &::after {
-    top: -1 * $arrow-size + $bpk-one-pixel-rem;
+    top: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
     border-bottom-color: $arrow-color;
   }
 }
@@ -116,21 +116,21 @@
 
 @mixin bpk-layer-arrow-right(
   $arrow-size,
-  $arrow-color: $bpk-color-white,
-  $border-color: $bpk-color-sky-gray-tint-06
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
 ) {
   left: 100%;
   width: $arrow-size;
   height: ($arrow-size * 2);
 
   &::before {
-    right: -1 * ($arrow-size + $bpk-one-pixel-rem);
-    margin-top: -1 * $bpk-one-pixel-rem;
+    right: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-top: -1 * tokens.$bpk-one-pixel-rem;
     border-left-color: $border-color;
   }
 
   &::after {
-    right: -1 * $arrow-size + $bpk-one-pixel-rem;
+    right: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
     border-left-color: $arrow-color;
   }
 }
@@ -145,26 +145,26 @@
 
 @mixin bpk-layer-arrow-bottom(
   $arrow-size,
-  $arrow-color: $bpk-color-white,
-  $border-color: $bpk-color-sky-gray-tint-06
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
 ) {
   top: 100%;
   width: ($arrow-size * 2);
   height: $arrow-size;
 
   &::before {
-    bottom: -1 * ($arrow-size + $bpk-one-pixel-rem);
-    margin-left: -1 * $bpk-one-pixel-rem;
+    bottom: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-left: -1 * tokens.$bpk-one-pixel-rem;
     border-top-color: $border-color;
 
-    @include bpk-rtl {
-      margin-right: -1 * $bpk-one-pixel-rem;
+    @include utils.bpk-rtl {
+      margin-right: -1 * tokens.$bpk-one-pixel-rem;
       margin-left: 0;
     }
   }
 
   &::after {
-    bottom: -1 * $arrow-size + $bpk-one-pixel-rem;
+    bottom: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
     border-top-color: $arrow-color;
   }
 }
@@ -179,21 +179,21 @@
 
 @mixin bpk-layer-arrow-left(
   $arrow-size,
-  $arrow-color: $bpk-color-white,
-  $border-color: $bpk-color-sky-gray-tint-06
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
 ) {
   right: 100%;
   width: $arrow-size;
   height: ($arrow-size * 2);
 
   &::before {
-    left: -1 * ($arrow-size + $bpk-one-pixel-rem);
-    margin-top: -1 * $bpk-one-pixel-rem;
+    left: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-top: -1 * tokens.$bpk-one-pixel-rem;
     border-right-color: $border-color;
   }
 
   &::after {
-    left: -1 * $arrow-size + $bpk-one-pixel-rem;
+    left: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
     border-right-color: $arrow-color;
   }
 }

package/bpk-mixins/_margins.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'utils.scss';
+@use 'utils';
 
 /// RTL aware leading margin
 ///
@@ -38,7 +38,7 @@
     margin-right: 0;
   }
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     @if $resetOppositeMargin {
       margin-left: 0;
     }
@@ -65,7 +65,7 @@
 
   margin-right: $margin;
 
-  @include bpk-rtl {
+  @include utils.bpk-rtl {
     margin-left: $margin;
 
     @if $resetOppositeMargin {

package/bpk-mixins/_panels.scss

@@ -18,9 +18,9 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import 'borders.scss';
-@import 'radii.scss';
+@use 'tokens';
+@use 'borders';
+@use 'radii';
 
 ////
 /// @group panels
@@ -34,9 +34,9 @@
 ///   }
 @mixin bpk-panel {
   display: block;
-  background-color: $bpk-card-background-color;
+  background-color: tokens.$bpk-card-background-color;
 
-  @include bpk-border-radius-md;
+  @include radii.bpk-border-radius-md;
 }
 
 /// Adds padding to panels. Modifies the bpk-panel mixin.
@@ -49,7 +49,7 @@
 ///     @include bpk-panel--padded();
 ///   }
 @mixin bpk-panel--padded {
-  padding: $bpk-card-padding;
+  padding: tokens.$bpk-card-padding;
 }
 
 /// Controls if we have a keyline or not on the panel
@@ -63,7 +63,7 @@
 ///     @include bpk-panel--keyline();
 ///   }
 @mixin bpk-panel--keyline {
-  @include bpk-border-sm($bpk-panel-border-color);
+  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
 }
 
 /// Makes panel full width by removing the border radius
@@ -91,6 +91,6 @@
 ///   }
 @mixin bpk-panel--full-width-keyline {
   box-shadow:
-    $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;
+    tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset,
+    tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset;
 }

package/bpk-mixins/_radii.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
+@use 'tokens';
 
 ////
 /// @group radii
@@ -32,7 +32,7 @@
 ///   }
 
 @mixin bpk-border-radius-xs {
-  border-radius: $bpk-border-radius-xs;
+  border-radius: tokens.$bpk-border-radius-xs;
 }
 
 /// Small border radius.
@@ -43,7 +43,7 @@
 ///   }
 
 @mixin bpk-border-radius-sm {
-  border-radius: $bpk-border-radius-sm;
+  border-radius: tokens.$bpk-border-radius-sm;
 }
 
 /// Medium border radius.
@@ -54,7 +54,7 @@
 ///   }
 
 @mixin bpk-border-radius-md {
-  border-radius: $bpk-border-radius-md;
+  border-radius: tokens.$bpk-border-radius-md;
 }
 
 /// Large border radius.
@@ -65,7 +65,7 @@
 ///   }
 
 @mixin bpk-border-radius-lg {
-  border-radius: $bpk-border-radius-lg;
+  border-radius: tokens.$bpk-border-radius-lg;
 }
 
 /// Extra large border radius.
@@ -76,5 +76,5 @@
 ///   }
 
 @mixin bpk-border-radius-xl {
-  border-radius: $bpk-border-radius-xl;
+  border-radius: tokens.$bpk-border-radius-xl;
 }

package/bpk-mixins/_scroll-indicators.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
+@use 'tokens';
 
 ////
 /// @group scroll-indicator
@@ -37,7 +37,7 @@
   content: ' ';
   display: block;
   z-index: 1;
-  width: bpk-spacing-xl();
+  width: tokens.bpk-spacing-xl();
   background-image: linear-gradient(
     $gradient-direction,
     rgba($gradient-color, 1),

package/bpk-mixins/_shadows.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
+@use 'tokens';
 
 ////
 /// @group box-shadows
@@ -32,7 +32,7 @@
 ///   }
 
 @mixin bpk-box-shadow-sm {
-  box-shadow: $bpk-box-shadow-sm;
+  box-shadow: tokens.$bpk-box-shadow-sm;
 }
 
 /// Large box shadow.
@@ -43,7 +43,7 @@
 ///   }
 
 @mixin bpk-box-shadow-lg {
-  box-shadow: $bpk-box-shadow-lg;
+  box-shadow: tokens.$bpk-box-shadow-lg;
 }
 
 /// Extra large box shadow.
@@ -54,5 +54,5 @@
 ///   }
 
 @mixin bpk-box-shadow-xl {
-  box-shadow: $bpk-box-shadow-xl;
+  box-shadow: tokens.$bpk-box-shadow-xl;
 }

package/bpk-mixins/_spinners.scss

@@ -18,9 +18,9 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@import 'tokens.scss';
-@import './icons.scss';
-@import './utils.scss';
+@use 'tokens';
+@use 'icons';
+@use 'utils';
 
 @keyframes bpk-keyframe-spin {
   100% {
@@ -38,8 +38,8 @@
 ///   }
 
 @mixin bpk-spinner() {
-  width: bpk-spacing-base();
-  height: bpk-spacing-base();
+  width: tokens.bpk-spacing-base();
+  height: tokens.bpk-spacing-base();
   animation: bpk-keyframe-spin 600ms linear infinite;
 }
 
@@ -54,8 +54,8 @@
 ///   }
 
 @mixin bpk-spinner--lg() {
-  width: bpk-spacing-lg();
-  height: bpk-spacing-lg();
+  width: tokens.bpk-spacing-lg();
+  height: tokens.bpk-spacing-lg();
 }
 
 /// Extra large spinner. Modifies the bpk-spinner mixin.
@@ -69,8 +69,8 @@
 ///   }
 
 @mixin bpk-spinner--xl() {
-  width: bpk-spacing-xl();
-  height: bpk-spacing-xl();
+  width: tokens.bpk-spacing-xl();
+  height: tokens.bpk-spacing-xl();
 }
 
 /// Align spinner to button. Modifies the bpk-spinner mixin.
@@ -98,5 +98,5 @@
 ///   }
 
 @mixin bpk-spinner--align-to-large-button() {
-  @include bpk-icon-lg--align-to-large-button;
+  @include icons.bpk-icon-lg--align-to-large-button;
 }

package/bpk-mixins/_tokens.scss

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