@skyscanner/backpack-web 41.17.0 → 41.19.0

package/bpk-mixins/_badges.scss

@@ -39,9 +39,28 @@
   padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
   align-items: center;
 
-  @include radii.bpk-border-radius-xs;
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-badge-border-radius,
+    tokens.$bpk-border-radius-xs
+  );
   @include typography.bpk-text;
   @include typography.bpk-footnote;
+  @include utils.bpk-themeable-property(
+    font-size,
+    --bpk-badge-font-size,
+    tokens.$bpk-font-size-sm
+  );
+  @include utils.bpk-themeable-property(
+    font-weight,
+    --bpk-badge-font-weight,
+    tokens.$bpk-font-weight-book
+  );
+  @include utils.bpk-themeable-property(
+    line-height,
+    --bpk-badge-line-height,
+    tokens.$bpk-line-height-sm
+  );
 }
 
 /// Centered badge. Modifies the bpk-badge mixin.
@@ -121,9 +140,21 @@
 ///   }
 
 @mixin bpk-badge--normal {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-normal-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-normal-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-normal-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +168,21 @@
 ///   }
 
 @mixin bpk-badge--warning {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-warning-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-warning-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-warning-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-warning-icon-color,
+    tokens.$bpk-status-warning-spot-day
+  );
 }
 
 /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +196,21 @@
 ///   }
 
 @mixin bpk-badge--success {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-success-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-success-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-success-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-success-icon-color,
+    tokens.$bpk-status-success-spot-day
+  );
 }
 
 /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +224,21 @@
 ///   }
 
 @mixin bpk-badge--critical {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-danger-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-critical-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-critical-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-critical-icon-color,
+    tokens.$bpk-status-danger-spot-day
+  );
 }
 
 /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +252,21 @@
 ///   }
 
 @mixin bpk-badge--inverse {
-  background-color: tokens.$bpk-surface-default-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-inverse-background-color,
+    tokens.$bpk-surface-default-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-inverse-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-inverse-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Outline badge. Modifies the bpk-badge mixin.
@@ -201,11 +280,30 @@
 ///   }
 
 @mixin bpk-badge--outline {
-  background-color: transparent;
-  color: tokens.$bpk-text-on-dark-day;
+  // The inset border intentionally shares --bpk-badge-outline-text-color with the text colour.
+  // This means badgeOutlineTextColor controls both the text and the visible border simultaneously.
+  // There is no separate badgeOutlineBorderColor attribute by design — if independent colours are
+  // ever needed, a dedicated CSS variable and theme attribute should be introduced at that point.
   box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
     tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
+    var(--bpk-badge-outline-text-color, tokens.$bpk-text-on-dark-day);
+
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-outline-background-color,
+    transparent
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-outline-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-outline-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Strong badge. Modifies the bpk-badge mixin.
@@ -219,9 +317,21 @@
 ///   }
 
 @mixin bpk-badge--strong {
-  background-color: tokens.$bpk-core-primary-day;
-  color: tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-strong-background-color,
+    tokens.$bpk-core-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-strong-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-strong-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Brand badge. Modifies the bpk-badge mixin.
@@ -235,7 +345,19 @@
 ///   }
 
 @mixin bpk-badge--brand {
-  background-color: tokens.$bpk-core-accent-day;
-  color: tokens.$bpk-text-primary-inverse-day;
-  fill: tokens.$bpk-text-primary-inverse-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-brand-background-color,
+    tokens.$bpk-core-accent-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-brand-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-brand-icon-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
 }

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