@sbb-esta/lyne-elements 3.7.0 → 3.9.0

package/core/overlay.js

@@ -1,15 +1,19 @@
-import { overlayGapFixCorners as t } from "./overlay/overlay.js";
+import { overlayGapFixCorners as r } from "./overlay/overlay.js";
 import { setOverlayPosition as i } from "./overlay/overlay-option-panel.js";
-import { removeAriaComboBoxAttributes as s, removeAriaOverlayTriggerAttributes as a, setAriaComboBoxAttributes as n, setAriaOverlayTriggerAttributes as l } from "./overlay/overlay-trigger-attributes.js";
-import { getElementPosition as g, getElementRectangle as v, isEventOnElement as x } from "./overlay/position.js";
+import { SbbOverlayOutsidePointerEventListener as s, sbbOverlayOutsidePointerEventListener as a } from "./overlay/overlay-outside-pointer-event-listener.js";
+import { removeAriaComboBoxAttributes as l, removeAriaOverlayTriggerAttributes as v, setAriaComboBoxAttributes as b, setAriaOverlayTriggerAttributes as g } from "./overlay/overlay-trigger-attributes.js";
+import { getElementPosition as A, getElementPositionHorizontal as O, getElementRectangle as E, isEventOnElement as p } from "./overlay/position.js";
 export {
-  g as getElementPosition,
-  v as getElementRectangle,
-  x as isEventOnElement,
-  t as overlayGapFixCorners,
-  s as removeAriaComboBoxAttributes,
-  a as removeAriaOverlayTriggerAttributes,
-  n as setAriaComboBoxAttributes,
-  l as setAriaOverlayTriggerAttributes,
+  s as SbbOverlayOutsidePointerEventListener,
+  A as getElementPosition,
+  O as getElementPositionHorizontal,
+  E as getElementRectangle,
+  p as isEventOnElement,
+  r as overlayGapFixCorners,
+  l as removeAriaComboBoxAttributes,
+  v as removeAriaOverlayTriggerAttributes,
+  a as sbbOverlayOutsidePointerEventListener,
+  b as setAriaComboBoxAttributes,
+  g as setAriaOverlayTriggerAttributes,
   i as setOverlayPosition
 };

package/core/styles/core.scss

@@ -1,4 +1,8 @@
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens;
+$theme: 'standard' !default;
+
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens with (
+  $theme: $theme
+);
 @use './core/mediaqueries';
 @use './core/functions';
 @use './mixins/a11y';
@@ -98,10 +102,24 @@
 
 @include font-face.font-declarations;
 
+// TODO: discuss where to add these classes
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
 html {
   @include typo.text;
 
   color: var(--sbb-font-default-color);
+  background-color: var(--sbb-background-color-1);
 }
 
 // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
@@ -153,8 +171,8 @@ html {
 
   // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
   &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-    color: var(--sbb-color-granite);
-    -webkit-text-fill-color: var(--sbb-color-granite);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 
   // Fix positioning issue for select which occurs in Safari
@@ -211,12 +229,12 @@ html {
     )
   ),
   :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
-    --sbb-form-field-border-color: var(--sbb-color-red125);
-    --sbb-form-field-text-color: var(--sbb-color-red125);
+    --sbb-form-field-border-color: var(--sbb-color-error);
+    --sbb-form-field-text-color: var(--sbb-color-error);
 
     &[negative] {
-      --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
-      --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+      --sbb-form-field-border-color: var(--sbb-color-red85);
+      --sbb-form-field-text-color: var(--sbb-color-red85);
     }
 
     @include a11y.if-forced-colors {
@@ -239,7 +257,8 @@ html {
   sbb-popover,
   sbb-select,
   sbb-skiplink-list,
-  sbb-toast
+  sbb-toast,
+  sbb-tooltip
 ):not(:defined) {
   display: none;
 }
@@ -254,7 +273,8 @@ html {
   sbb-navigation,
   sbb-overlay,
   sbb-popover,
-  sbb-toast
+  sbb-toast,
+  sbb-tooltip
 ) {
   @include popover.popover-reset;
 }
@@ -280,10 +300,11 @@ sbb-breadcrumb-group:not(:defined) {
   padding-inline: var(--sbb-spacing-fixed-4x);
   gap: var(--sbb-spacing-fixed-1x);
   align-items: baseline;
+  color: var(--sbb-color-1);
 
   strong + * {
     font-size: var(--sbb-font-size-text-xxs);
-    color: var(--sbb-color-granite);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 }
 
@@ -560,7 +581,7 @@ sbb-toggle:has(:focus-visible) {
 
 sbb-dialog-actions {
   sbb-dialog[negative] & {
-    --sbb-dialog-actions-border-color: var(--sbb-color-iron);
+    --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
   }
 
   sbb-dialog:state(overflows) & {
@@ -616,7 +637,20 @@ sbb-notification:has(sbb-title) {
 
 sbb-status:has(sbb-title) {
   --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
   --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
 }
+
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+// Sets ellipsis on all sbb-option child elements
+.sbb-options-nowrap {
+  --sbb-option-text-overflow: ellipsis;
+  --sbb-option-overflow: hidden;
+  --sbb-option-white-space: nowrap;
+}

package/core/styles/mixins/badge.scss

@@ -8,8 +8,8 @@
   justify-content: center;
   padding-inline: var(--sbb-spacing-fixed-1x);
   border-radius: var(--sbb-border-radius-infinity);
-  background-color: var(--sbb-color-red);
-  color: var(--sbb-color-white);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
 }

package/core/styles/mixins/buttons.scss

@@ -57,13 +57,13 @@ $active: ':active, [data-active]';
 
 // Variables used in the icon-button
 @mixin icon-button-variables {
-  --sbb-button-color-text: var(--sbb-color-charcoal);
-  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-hover-background: var(--sbb-color-milk);
-  --sbb-button-color-active-background: var(--sbb-color-cloud);
-  --sbb-button-color-disabled-background: var(--sbb-color-milk);
-  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
-  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-text: var(--sbb-color-3);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
   --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
@@ -85,13 +85,13 @@ $active: ':active, [data-active]';
 
 // Variables used in the icon-button negative variant
 @mixin icon-button-variables-negative {
-  --sbb-button-color-text: var(--sbb-color-milk);
-  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-hover-background: var(--sbb-color-charcoal);
-  --sbb-button-color-active-background: var(--sbb-color-iron);
-  --sbb-button-color-disabled-background: var(--sbb-color-charcoal);
-  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
-  --sbb-button-color-disabled-text: var(--sbb-color-smoke);
+  --sbb-button-color-text: var(--sbb-color-3-negative);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-5);
 }
 
 // Default state for icon-button in form-field

package/core/styles/mixins/card.scss

@@ -10,7 +10,7 @@
 // -----------------------------------------------------------------------------
 
 @mixin card-variables {
-  --sbb-card-background-color: var(--sbb-color-white);
+  --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-duration: var(
     --sbb-disable-animation-duration,
@@ -23,7 +23,10 @@
 
   // As the card has always a white/milk background, we have to fix the focus outline color
   // to default color for cases where the card is used in a negative context.
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
 
   @include a11y.if-forced-colors {
     --sbb-card-border-color: CanvasText;
@@ -32,27 +35,27 @@
 }
 
 @mixin card-variables--milk {
-  --sbb-card-background-color: var(--sbb-color-milk);
+  --sbb-card-background-color: var(--sbb-background-color-3);
   --sbb-card-border-color: transparent;
 }
 
 @mixin card-variables--transparent-bordered {
   --sbb-card-background-color: transparent;
-  --sbb-card-border-color: var(--sbb-color-cloud);
+  --sbb-card-border-color: var(--sbb-border-color-4-inverted);
   --sbb-card-border-width: var(--sbb-border-width-1x);
   --sbb-focus-outline-color: inherit;
 }
 
 @mixin card-variables--transparent-bordered-dashed {
   --sbb-card-background-color: transparent;
-  --sbb-card-border-color: var(--sbb-color-cement);
+  --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));
   --sbb-card-border-width: var(--sbb-border-width-1x);
   --sbb-card-border-style: dashed;
   --sbb-focus-outline-color: inherit;
 }
 
 @mixin card-variables--active {
-  --sbb-card-border-color: var(--sbb-color-charcoal);
+  --sbb-card-border-color: var(--sbb-border-color-3);
   --sbb-card-border-width: var(--sbb-border-width-2x);
   --sbb-card-border-style: solid;
 

package/core/styles/mixins/chip.scss

@@ -3,23 +3,23 @@
 @use './typo';
 
 @mixin chip-label-variables--color-milk {
-  --sbb-chip-label-color: var(--sbb-color-granite);
-  --sbb-chip-label-background-color: var(--sbb-color-milk);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
 }
 
 @mixin chip-label-variables--color-charcoal {
-  --sbb-chip-label-color: var(--sbb-color-white);
-  --sbb-chip-label-background-color: var(--sbb-color-charcoal);
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);
 }
 
 @mixin chip-label-variables--color-white {
-  --sbb-chip-label-color: var(--sbb-color-granite);
-  --sbb-chip-label-background-color: var(--sbb-color-white);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-1);
 }
 
 @mixin chip-label-variables--color-granite {
-  --sbb-chip-label-color: var(--sbb-color-white);
-  --sbb-chip-label-background-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));
 }
 
 @mixin chip-label-variables--size-xxs {

package/core/styles/mixins/image.scss

@@ -18,10 +18,13 @@
   grid-row: 2;
   grid-column: 1;
   padding-block-start: var(--sbb-spacing-fixed-4x);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   @include typo.text-xs--regular;
 }
 
 @mixin figure-overlap-base {
+  // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
+  color-scheme: only light;
   position: relative;
   order: 1; // Alternative to z-index
   grid-row: 1;

package/core/styles/mixins/link.scss

@@ -4,9 +4,12 @@
 @use '../core/functions';
 
 @mixin link-common-variables {
-  --sbb-link-color-hover: var(--sbb-color-red125);
-  --sbb-link-color-active: var(--sbb-color-red150);
-  --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, white);
+  --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));
+  --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));
+  --sbb-link-text-decoration-color: light-dark(
+    color-mix(in srgb, currentcolor 80%, white),
+    color-mix(in srgb, currentcolor 80%, black)
+  );
   --sbb-link-text-decoration-color-hover: currentcolor;
 }
 
@@ -19,20 +22,22 @@
 @mixin block-link-variables {
   @include link-common-variables;
 
-  --sbb-link-color-normal: var(--sbb-color-granite);
+  --sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));
+  --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));
 }
 
 @mixin block-link-variables--negative {
   @include link-common-variables--negative;
 
-  --sbb-link-color-normal: var(--sbb-color-white);
-  --sbb-link-color-hover: var(--sbb-color-cloud);
+  --sbb-link-color-normal: var(--sbb-color-1-negative);
+  --sbb-link-color-hover: var(--sbb-color-4-negative);
   --sbb-link-color-active: var(--sbb-color-silver);
 }
 
 // To display a current active page, e.g. if the CSS class sbb-active is set
 @mixin block-link-variables--active {
-  --sbb-link-color-normal: var(--sbb-color-black);
+  --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));
   --sbb-link-text-decoration-line: underline;
   --sbb-link-text-decoration-color: currentcolor;
 }

package/core/styles/mixins/lists.scss

@@ -159,6 +159,7 @@
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
   --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
+  --sbb-step-list-color: var(--sbb-color-2);
 
   // Additional space from overall li padding to the text because text
   // has to be centered to marker number.
@@ -174,7 +175,7 @@
   margin: 0;
   padding: 0;
   counter-reset: steps;
-  color: var(--sbb-color-iron);
+  color: var(--sbb-step-list-color);
 
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -194,7 +195,7 @@
   > li {
     position: relative;
     counter-increment: steps;
-    background-color: var(--sbb-color-milk);
+    background-color: var(--sbb-background-color-3);
     padding-block: calc(
         var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
       )
@@ -218,8 +219,9 @@
       width: var(--sbb-step-list-dimensions);
       margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
       inset-inline-start: var(--sbb-step-list-padding-inline);
-      color: var(--sbb-color-charcoal);
-      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      color: var(--sbb-step-list-color);
+      border: var(--sbb-border-width-1x) solid
+        light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
       border-radius: 50%;
     }
 

package/core/styles/mixins/overlay.scss

@@ -25,19 +25,22 @@
   --sbb-options-panel-gap-fix-top: calc(
     var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
   );
-  --sbb-options-panel-background-color: var(--sbb-color-white);
+  --sbb-options-panel-background-color: var(--sbb-background-color-1);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
 }
 
 @mixin options-panel-overlay-negative-variables {
   @include scrollbar.scrollbar-variables--color-negative;
 
-  --sbb-options-panel-background-color: var(--sbb-color-midnight);
+  --sbb-options-panel-background-color: var(--sbb-background-color-1-negative);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.

package/core/styles/mixins/panel.scss

@@ -13,9 +13,9 @@
   --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
   --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
   --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
-  --sbb-panel-color: var(--sbb-color-white);
-  --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
-  --sbb-panel-background-color-hover: var(--sbb-color-red);
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
   --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
   --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
   --sbb-panel-animation-duration: var(

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -8,10 +8,13 @@
 @mixin pearl-chain-bullet-variables {
   --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
   --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
-  --sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);
-  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
-  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
-  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
+  --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
+  --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
+  --sbb-pearl-chain-bullet-color-irrelevant: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-granite)
+  );
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
   --sbb-pearl-chain-bullet-animation-duration: 1920ms;
   --sbb-pearl-chain-bullet-animation-easing: ease-out;
@@ -119,7 +122,8 @@
     }
 
     50% {
-      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)} var(--sbb-color-red-alpha-20);
+      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
+        color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
     }
 
     100% {

package/core/styles/mixins/scrollbar.scss

@@ -61,21 +61,27 @@
 }
 
 @mixin scrollbar-variables--color-positive {
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
 }
 
 @mixin scrollbar-variables--color-positive-track-visible {
-  --sbb-scrollbar-track-color: var(--sbb-color-cloud);
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
 }
 
 @mixin scrollbar-variables--color-negative {
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
 }
 
 @mixin scrollbar-variables--color-negative-track-visible {
-  --sbb-scrollbar-track-color: var(--sbb-color-iron);
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
 @mixin scrollbar-variables--track-invisible {