@skyscanner/backpack-web 41.17.0 → 41.19.0

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';

package/bpk-mixins/_segmented-control.scss

@@ -0,0 +1,263 @@
+/*
+ * 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 */
+
+@use 'tokens';
+@use 'typography';
+@use 'utils';
+@use 'shadows';
+
+////
+/// @group segmented-control-v2
+////
+
+/// Segmented control group container.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///   }
+
+@mixin bpk-segmented-control-v2 {
+  position: relative;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  border-radius: tokens.$bpk-border-radius-sm;
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+  overflow: hidden;
+}
+
+/// Canvas default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-default();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-default {
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+}
+
+/// Canvas contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-day;
+}
+
+/// Adds a box shadow to the group container. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--shadow();
+///   }
+
+@mixin bpk-segmented-control-v2--shadow {
+  @include shadows.bpk-box-shadow-sm;
+}
+
+/// Visually hidden group label (satisfies aria-labelledby generated by Ark-UI).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__label();
+///   }
+
+@mixin bpk-segmented-control-v2__label {
+  @include utils.bpk-visually-hidden;
+}
+
+/// Segmented control item (label wrapper).
+/// Creates a grid cell in the root grid, and a stacking context for ItemText + ItemControl.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item();
+///   }
+
+@mixin bpk-segmented-control-v2__item {
+  display: grid;
+  cursor: pointer;
+}
+
+/// Segmented control item control (background layer, aria-hidden).
+/// Sits behind ItemText via CSS grid stacking (grid-area: 1 / 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-control();
+///   }
+
+@mixin bpk-segmented-control-v2__item-control {
+  display: none;
+}
+
+/// Segmented control item text (content layer, visible to accessibility tree).
+/// Sits above ItemControl via CSS grid stacking (grid-area: 1 / 1, z-index: 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text {
+  display: flex;
+  z-index: 1;
+  min-height: tokens.bpk-spacing-xl();
+
+  // Content layer: stacked above item-control via shared grid-area
+  grid-area: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  transition: color tokens.$bpk-duration-xs ease-in-out;
+  color: tokens.$bpk-text-primary-day;
+  overflow: hidden;
+  border-inline-start: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day;
+  pointer-events: none;
+
+  @include typography.bpk-label-2;
+
+  // stylelint-disable-next-line selector-max-type
+  svg {
+    fill: currentcolor;
+  }
+
+  &[data-state='checked'] {
+    color: tokens.$bpk-text-on-dark-day;
+  }
+}
+
+/// Surface contrast item text colors. Modifies the bpk-segmented-control-v2__item-text mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__item-text
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///     @include bpk-segmented-control-v2__item-text--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text--surface-contrast {
+  color: tokens.$bpk-text-on-dark-day;
+  border-inline-start-color: tokens.$bpk-line-on-dark-day;
+}
+
+/// Segmented control indicator (floating selection background, positioned by Ark-UI CSS variables).
+/// Mirrors ItemControl visually but uses absolute positioning driven by --left/--top/--height
+/// injected by Ark. --transition-duration is set to 0ms to prevent sliding animation.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator {
+  position: absolute;
+  top: var(--top);
+  left: var(--left);
+  width: var(--width);
+  height: var(--height);
+  background-color: tokens.$bpk-core-primary-day;
+
+  --transition-duration: 0ms;
+}
+
+/// Canvas contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-on-day;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.17.0",
+  "version": "41.19.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@ark-ui/react": "^5.34.1",
     "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",