@skyscanner/backpack-web 41.18.0 → 41.19.0

package/bpk-mixins/_buttons.scss

@@ -26,6 +26,112 @@
 /// @group buttons
 ////
 
+// --- Private: pressed/hover colour declarations ---
+// These mixins centralise pressed/hover token references.
+// hover and loading can include the same mixin — token values
+// are defined exactly once.
+
+@mixin _bpk-button-primary-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-hover-background-color,
+    tokens.$bpk-private-button-primary-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-hover-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+}
+
+@mixin _bpk-button-primary-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-dark-hover-background-color,
+    tokens.$bpk-private-button-primary-on-dark-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-dark-hover-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+}
+
+@mixin _bpk-button-primary-on-light-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-light-hover-background-color,
+    tokens.$bpk-private-button-primary-on-light-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-light-hover-text-color,
+    tokens.$bpk-text-on-dark-night
+  );
+}
+
+@mixin _bpk-button-secondary-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-hover-background-color,
+    tokens.$bpk-private-button-secondary-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-secondary-hover-text-color,
+    tokens.$bpk-text-primary-day
+  );
+}
+
+@mixin _bpk-button-secondary-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-on-dark-hover-background-color,
+    tokens.$bpk-private-button-secondary-on-dark-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-secondary-on-dark-hover-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+}
+
+@mixin _bpk-button-destructive-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-destructive-hover-background-color,
+    tokens.$bpk-private-button-destructive-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-destructive-hover-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+}
+
+@mixin _bpk-button-featured-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-featured-hover-background-color,
+    tokens.$bpk-private-button-featured-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-featured-hover-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+}
+
+@mixin _bpk-button-link-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-link-on-dark-hover-text-color,
+    tokens.$bpk-private-button-link-on-dark-pressed-foreground-day
+  );
+}
+
+// --- End private mixins ---
+
 /// Standard button.
 ///
 /// @example scss
@@ -39,13 +145,17 @@
   margin: 0;
   padding: (6 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base();
   border: 0;
-  border-radius: tokens.$bpk-button-border-radius;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   vertical-align: middle;
   user-select: none;
 
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-button-border-radius,
+    tokens.$bpk-button-border-radius
+  );
   @include typography.bpk-label-1;
   @include utils.bpk-themeable-property(
     color,
@@ -59,16 +169,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-hover-text-color,
-      tokens.$bpk-text-on-dark-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-hover-background-color,
-      tokens.$bpk-private-button-primary-pressed-background-day
-    );
+    @include _bpk-button-primary-hover;
   }
 
   &:active {
@@ -89,6 +190,11 @@
     color: tokens.$bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-hover;
+  }
 }
 
 /// Large button. Modifies the bpk-button mixin.
@@ -129,16 +235,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-on-dark-hover-text-color,
-      tokens.$bpk-text-on-light-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-on-dark-hover-background-color,
-      tokens.$bpk-private-button-primary-on-dark-pressed-background-day
-    );
+    @include _bpk-button-primary-on-dark-hover;
   }
 
   &:active {
@@ -158,6 +255,11 @@
     background-color: tokens.$bpk-private-button-primary-on-dark-disabled-background-day;
     color: tokens.$bpk-private-button-primary-on-dark-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-on-dark-hover;
+  }
 }
 
 /// PrimaryOnLight button. Modifies the bpk-button mixin.
@@ -183,16 +285,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-on-light-hover-text-color,
-      tokens.$bpk-text-on-dark-night
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-on-light-hover-background-color,
-      tokens.$bpk-private-button-primary-on-light-pressed-background-day
-    );
+    @include _bpk-button-primary-on-light-hover;
   }
 
   &:active {
@@ -212,6 +305,11 @@
     background-color: tokens.$bpk-private-button-primary-on-light-disabled-background-day;
     color: tokens.$bpk-private-button-primary-on-light-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-on-light-hover;
+  }
 }
 
 /// Secondary button. Modifies the bpk-button mixin.
@@ -237,16 +335,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-secondary-hover-text-color,
-      tokens.$bpk-text-primary-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-secondary-hover-background-color,
-      tokens.$bpk-private-button-secondary-pressed-background-day
-    );
+    @include _bpk-button-secondary-hover;
   }
 
   &:active {
@@ -266,6 +355,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-secondary-hover;
+  }
 }
 
 /// Secondary on dark button. Modifies the bpk-button mixin.
@@ -291,16 +385,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-secondary-on-dark-hover-text-color,
-      tokens.$bpk-text-on-dark-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-secondary-on-dark-hover-background-color,
-      tokens.$bpk-private-button-secondary-on-dark-pressed-background-day
-    );
+    @include _bpk-button-secondary-on-dark-hover;
   }
 
   &:active {
@@ -320,6 +405,11 @@
     background-color: tokens.$bpk-private-button-secondary-on-dark-disabled-background-day;
     color: tokens.$bpk-private-button-secondary-on-dark-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-secondary-on-dark-hover;
+  }
 }
 
 /// Destructive button. Modifies the bpk-button & bpk-button--secondary lib.
@@ -347,16 +437,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-destructive-hover-text-color,
-      tokens.$bpk-text-primary-inverse-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-destructive-hover-background-color,
-      tokens.$bpk-private-button-destructive-pressed-background-day
-    );
+    @include _bpk-button-destructive-hover;
   }
 
   &:active {
@@ -376,6 +457,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-destructive-hover;
+  }
 }
 
 /// Link-style button. Modifies the bpk-button mixin.
@@ -425,6 +511,18 @@
     text-decoration: none;
   }
 
+  // Loading state override: restore pressed appearance while disabled.
+  &.bpk-button--loading:disabled,
+  &.bpk-button--loading:disabled:active {
+    background: none;
+
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-button-link-loading-color,
+      tokens.$bpk-text-primary-day
+    );
+  }
+
   &-large {
     padding: $vertical-padding-large 0;
   }
@@ -433,7 +531,7 @@
 /// Link on dark button. Modifies the bpk-button & bpk-button--link lib.
 ///
 /// @require {mixin} bpk-button
-
+///
 /// @example scss
 ///   .selector {
 ///     @include bpk-button();
@@ -449,11 +547,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-link-on-dark-hover-text-color,
-      tokens.$bpk-private-button-link-on-dark-pressed-foreground-day
-    );
+    @include _bpk-button-link-on-dark-hover;
   }
 
   &:active {
@@ -480,6 +574,12 @@
       tokens.$bpk-private-button-link-on-dark-disabled-foreground-day
     );
   }
+
+  // Loading state override: restore pressed/hover appearance while disabled.
+  &.bpk-button--loading:disabled,
+  &.bpk-button--loading:disabled:active {
+    @include _bpk-button-link-on-dark-hover;
+  }
 }
 
 /// Button link icon only aligned. Modifies the bpk-button mixin.
@@ -532,7 +632,6 @@
 
   padding-right: $horizontal-padding;
   padding-left: $horizontal-padding;
-  border-radius: tokens.$bpk-button-border-radius;
 }
 
 /// Large icon-only button. Modifies the bpk-button & bpk-button--large lib.
@@ -555,7 +654,6 @@
 
   padding-right: $horizontal-padding;
   padding-left: $horizontal-padding;
-  border-radius: tokens.$bpk-button-border-radius;
 }
 
 /// Featured button. Modifies the bpk-button
@@ -582,16 +680,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-featured-hover-text-color,
-      tokens.$bpk-text-primary-inverse-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-featured-hover-background-color,
-      tokens.$bpk-private-button-featured-pressed-background-day
-    );
+    @include _bpk-button-featured-hover;
   }
 
   &:active {
@@ -611,6 +700,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-featured-hover;
+  }
 }
 
 /// Full width button. Modifies the bpk-button to horizontally fill its container

package/bpk-mixins/_chips.scss

@@ -24,15 +24,29 @@
 @use 'shadows';
 @use 'utils';
 
+// Private helper: applies a box-shadow border with CSS variable fallback.
+// bpk-border-sm() uses a box-shadow shorthand, so bpk-themeable-property cannot
+// embed a CSS variable inside it — this mixin applies the two-line fallback pattern manually.
+@mixin _bpk-chip-themeable-border($var-name, $fallback-color) {
+  box-shadow: 0 0 0 tokens.$bpk-border-size-sm $fallback-color inset;
+  box-shadow: 0 0 0 tokens.$bpk-border-size-sm
+    var(#{$var-name}, $fallback-color) inset;
+}
+
 @mixin bpk-chip {
   display: inline-flex;
   height: tokens.bpk-spacing-xl();
   padding: 0 tokens.bpk-spacing-base();
   align-items: center;
   border: none;
-  border-radius: tokens.$bpk-border-radius-xs * 2;
   cursor: pointer;
 
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-chip-border-radius,
+    tokens.$bpk-border-radius-sm
+  );
+
   &__leading-accessory-view {
     display: inline-flex;
     fill: currentcolor;
@@ -49,17 +63,33 @@
   }
 
   &--on-dark {
-    background-color: transparent;
-    color: tokens.$bpk-text-on-dark-day;
-
-    @include borders.bpk-border-sm(tokens.$bpk-line-on-dark-day);
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-on-dark-background-color,
+      transparent
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-on-dark-text-color,
+      tokens.$bpk-text-on-dark-day
+    );
+    @include _bpk-chip-themeable-border(
+      --bpk-chip-on-dark-border-color,
+      tokens.$bpk-line-on-dark-day
+    );
 
     @include utils.bpk-hover {
-      @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-on-dark-hover-border-color,
+        tokens.$bpk-surface-default-day
+      );
     }
 
     &:active:not(:disabled) {
-      @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-on-dark-active-border-color,
+        tokens.$bpk-surface-default-day
+      );
     }
 
     &-selected {
@@ -76,10 +106,20 @@
       @include borders.bpk-border-sm(transparent);
 
       @include utils.bpk-hover {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-on-dark-selected-hover-background-color,
+          tokens.$bpk-surface-default-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
 
       &:active:not(:disabled) {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-on-dark-selected-active-background-color,
+          tokens.$bpk-surface-default-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
     }
@@ -108,17 +148,38 @@
   }
 
   &--default {
-    background-color: transparent;
-    color: tokens.$bpk-text-primary-day;
-
-    @include borders.bpk-border-sm(tokens.$bpk-line-day);
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-default-background-color,
+      transparent
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-default-text-color,
+      tokens.$bpk-text-primary-day
+    );
+    @include _bpk-chip-themeable-border(
+      --bpk-chip-default-border-color,
+      tokens.$bpk-line-day
+    );
 
     @include utils.bpk-hover {
-      @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-default-hover-background-color,
+        transparent
+      );
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-default-hover-border-color,
+        tokens.$bpk-core-primary-day
+      );
     }
 
     &:active:not(:disabled) {
-      @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-default-active-border-color,
+        tokens.$bpk-core-primary-day
+      );
     }
 
     &-selected {
@@ -135,10 +196,20 @@
       @include borders.bpk-border-sm(transparent);
 
       @include utils.bpk-hover {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-default-selected-hover-background-color,
+          tokens.$bpk-core-primary-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
 
       &:active:not(:disabled) {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-default-selected-active-background-color,
+          tokens.$bpk-core-primary-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
     }
@@ -167,17 +238,32 @@
   }
 
   &--on-image {
-    background-color: tokens.$bpk-surface-default-day;
-    color: tokens.$bpk-text-primary-day;
-
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-on-image-background-color,
+      tokens.$bpk-surface-default-day
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-on-image-text-color,
+      tokens.$bpk-text-primary-day
+    );
     @include shadows.bpk-box-shadow-sm;
 
     @include utils.bpk-hover {
-      background-color: tokens.$bpk-canvas-contrast-day;
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-on-image-hover-background-color,
+        tokens.$bpk-canvas-contrast-day
+      );
     }
 
     &:active:not(:disabled) {
-      background-color: tokens.$bpk-canvas-contrast-day;
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-on-image-active-background-color,
+        tokens.$bpk-canvas-contrast-day
+      );
     }
 
     &-selected {

package/bpk-mixins/_index.scss

@@ -30,6 +30,7 @@
 @forward 'panels';
 @forward 'radii';
 @forward 'scroll-indicators';
+@forward 'segmented-control';
 @forward 'shadows';
 @forward 'spinners';
 @forward 'surfaces';