npm - @sbb-esta/lyne-elements - Versions diffs - 3.6.0 → 3.8.0 - Mend

@sbb-esta/lyne-elements 3.6.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (491) hide show

package/core/styles/mixins/card.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -40,9 +40,11 @@
   //  We have to use the `not` selector as Chrome supports both, the -webkit-* and the following properties.
   //  As long as possible we use the -webkit-* approach as we have more styling possibilities there.
   @supports not selector(::-webkit-scrollbar) {
-    scrollbar-width: var(--sbb-scrollbar-width-firefox);
-    scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
-      var(--sbb-scrollbar-track-color, transparent);
+    & {
+      scrollbar-width: var(--sbb-scrollbar-width-firefox);
+      scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
+        var(--sbb-scrollbar-track-color, transparent);
+    }
   }
 }
@@ -59,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 {

package/core/styles/mixins/shadows.scss CHANGED Viewed

@@ -3,13 +3,11 @@
     var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-3-soft-2-color),
+      var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-soft-2),
     var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-3-soft-1-color);
+      var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-soft-1);
 }
 @mixin shadow-level-3-soft-negative {
@@ -17,13 +15,11 @@
     var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-3-soft-negative-2-color),
+      var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
     var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-3-soft-negative-1-color);
+      var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
 }
 @mixin shadow-level-3-hard {
@@ -31,13 +27,11 @@
     var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-3-hard-2-color),
+      var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-hard-2),
     var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-3-hard-1-color);
+      var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-hard-1);
 }
 @mixin shadow-level-3-hard-negative {
@@ -45,13 +39,11 @@
     var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-3-hard-negative-2-color),
+      var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-3-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-3-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-3-hard-negative-1-color);
+      var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
 }
 @mixin shadow-level-5-soft {
@@ -59,13 +51,11 @@
     var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-5-soft-2-color),
+      var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),
     var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-5-soft-1-color);
+      var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1);
 }
 @mixin shadow-level-5-soft-negative {
@@ -73,13 +63,11 @@
     var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-5-soft-negative-2-color),
+      var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
     var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-5-soft-negative-1-color);
+      var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
 }
 @mixin shadow-level-5-hard {
@@ -87,13 +75,11 @@
     var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-5-hard-2-color),
+      var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2),
     var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-5-hard-1-color);
+      var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1);
 }
 @mixin shadow-level-5-hard-negative {
@@ -101,13 +87,11 @@
     var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-5-hard-negative-2-color),
+      var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-5-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-5-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-5-hard-negative-1-color);
+      var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
 }
 @mixin shadow-level-9-soft {
@@ -115,13 +99,11 @@
     var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-9-soft-2-color),
+      var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2),
     var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-9-soft-1-color);
+      var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1);
 }
 @mixin shadow-level-9-soft-negative {
@@ -129,13 +111,11 @@
     var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-9-soft-negative-2-color),
+      var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
     var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
+      var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
 }
 @mixin shadow-level-9-hard {
@@ -143,13 +123,11 @@
     var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-9-hard-2-color),
+      var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-hard-2),
     var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-9-hard-1-color);
+      var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-hard-1);
 }
 @mixin shadow-level-9-hard-negative {
@@ -157,13 +135,11 @@
     var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-9-hard-negative-2-color),
+      var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-9-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-9-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-9-hard-negative-1-color);
+      var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
 }
 @mixin shadow-level-11-soft {
@@ -171,13 +147,11 @@
     var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-11-soft-2-color),
+      var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2),
     var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-11-soft-1-color);
+      var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1);
 }
 @mixin shadow-level-11-soft-negative {
@@ -185,13 +159,11 @@
     var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-11-soft-negative-2-color),
+      var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
     var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-11-soft-negative-1-color);
+      var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
 }
 @mixin shadow-level-11-hard {
@@ -199,13 +171,11 @@
     var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-11-hard-2-color),
+      var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-hard-2),
     var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-11-hard-1-color);
+      var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-hard-1);
 }
 @mixin shadow-level-11-hard-negative {
@@ -213,11 +183,9 @@
     var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-2-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-2-spread)
-      var(--sbb-shadow-elevation-level-11-hard-negative-2-color),
+      var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
       var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
       var(--sbb-shadow-elevation-level-11-shadow-1-blur)
-      var(--sbb-shadow-elevation-level-11-shadow-1-spread)
-      var(--sbb-shadow-elevation-level-11-hard-negative-1-color);
+      var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
 }

package/core/styles/mixins/table.scss CHANGED Viewed

@@ -10,11 +10,11 @@
   & {
     --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-    --sbb-table-border-color: var(--sbb-color-cloud);
-    --sbb-table-background-color: var(--sbb-color-white);
-    --sbb-table-row-striped-color: var(--sbb-color-milk);
-    --sbb-table-color: inherit;
-    --sbb-table-caption-color: var(--sbb-color-granite);
+    --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+    --sbb-table-background-color: var(--sbb-background-color-1);
+    --sbb-table-row-striped-color: var(--sbb-background-color-3);
+    --sbb-table-color: var(--sbb-color-1);
+    --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
     --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
     --sbb-table-sticky-shadow-width: 3rem;
     --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -93,8 +93,11 @@
 @mixin table-caption {
   @include typo.text-xs--regular;
+  // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   // Defaults are needed for cases where the caption is used outside a table
-  color: var(--sbb-table-caption-color, var(--sbb-color-granite));
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
@@ -121,9 +124,9 @@
 @mixin table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
-  --sbb-table-background-color: var(--sbb-color-midnight);
-  --sbb-table-color: var(--sbb-color-white);
-  --sbb-table-row-striped-color: var(--sbb-color-charcoal);
+  --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-color: var(--sbb-color-1-negative);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
@@ -157,7 +160,7 @@
 }
 @mixin table--theme-iron {
-  --sbb-table-cell-color: var(--sbb-color-iron);
+  --sbb-table-cell-color: var(--sbb-color-4);
   tbody > tr > td {
     color: var(--sbb-table-cell-color);

package/core/styles/mixins/timetable-form.scss ADDED Viewed

@@ -0,0 +1,63 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+@mixin sbb-timetable-form {
+  --sbb-timetable-form-content-max-width: #{functions.px-to-rem-build(740)};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(
+    to bottom,
+    var(--sbb-color-primary) 0 #{functions.px-to-rem-build(178)},
+    var(--sbb-background-color-3) #{functions.px-to-rem-build(178)} 100%
+  );
+  @include mediaqueries.mq($to: large) {
+    &:has(sbb-signet) {
+      padding-block-start: var(--sbb-spacing-fixed-4x);
+    }
+  }
+  sbb-signet {
+    width: var(--sbb-spacing-fixed-16x);
+    align-self: end;
+    margin-block-end: var(--sbb-spacing-fixed-2x);
+    margin-inline: 0;
+    @include mediaqueries.mq($from: large) {
+      position: absolute;
+      inset-block-start: var(--sbb-spacing-fixed-6x);
+      inset-inline-end: var(--sbb-spacing-fixed-6x);
+    }
+  }
+  & > * {
+    margin-inline: auto;
+    max-width: var(--sbb-timetable-form-content-max-width);
+    width: 100%;
+  }
+}
+@mixin timetable-form-block {
+  --sbb-form-field-focus-underline-z-index: 1;
+  width: 100%;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+    inset-inline: var(--sbb-form-field-padding-inline);
+    inset-block-end: 0;
+  }
+  sbb-datepicker-toggle {
+    margin-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}