@sbb-esta/lyne-elements 3.6.0 → 3.8.0

package/core/styles/mixins/typo.scss

@@ -116,7 +116,7 @@
 }
 
 @mixin title--negative {
-  --sbb-title-text-color-normal: var(--sbb-color-milk);
+  --sbb-title-text-color-normal: var(--sbb-color-3-negative);
 }
 
 // @deprecated, non-standard values, title rules combined with title level mixins are the alternative
@@ -214,8 +214,8 @@
 }
 
 @mixin placeholder {
-  color: var(--sbb-color-metal);
-  -webkit-text-fill-color: var(--sbb-color-metal);
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
   opacity: 1;
 }
 
@@ -230,7 +230,7 @@
   @include text-xs--regular;
 
   padding: 0;
-  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 }
 
 %sub-sup {

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -97,14 +97,24 @@ $sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
 $sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
 $sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
 $sbb-color-red-mode-dark: #ff3838;
+$sbb-color-red85: #ff3838;
 $sbb-color-red125: #c60018;
 $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
 $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
-$sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
+$sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
 $sbb-color-red150: #a20013;
 $sbb-color-royal: #06348b;
+$sbb-color-royal85: #4077df;
 $sbb-color-royal125: #032668;
 $sbb-color-royal150: #021c4e;
+$sbb-color-royal-light: #06348b;
+$sbb-color-royal-dark: #0053ef;
+$sbb-color-royal85-light: #4077df;
+$sbb-color-royal85-dark: #4077df;
+$sbb-color-royal125-light: #032668;
+$sbb-color-royal125-dark: #245ecb;
+$sbb-color-royal150-light: #021c4e;
+$sbb-color-royal150-dark: #000000;
 $sbb-color-white: #ffffff;
 $sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
 $sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -114,16 +124,38 @@ $sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
 $sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
 $sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
 $sbb-color-sky: #0074bf;
+$sbb-color-sky-light: #0074bf;
+$sbb-color-sky-dark: #128ede;
 $sbb-color-night: #143a85;
+$sbb-color-night-light: #143a85;
+$sbb-color-night-dark: #6587ca;
 $sbb-color-violet: #6f2282;
+$sbb-color-violet-light: #6f2282;
+$sbb-color-violet-dark: #b36cc5;
 $sbb-color-pink: #c7387a;
+$sbb-color-pink-light: #c7387a;
+$sbb-color-pink-dark: #e45295;
 $sbb-color-autumn: #cf3b00;
+$sbb-color-autumn-light: #cf3b00;
+$sbb-color-autumn-dark: #f05313;
 $sbb-color-orange: #f27e00;
+$sbb-color-orange-light: #f27e00;
+$sbb-color-orange-dark: #fb8e19;
 $sbb-color-peach: #fcbb00;
+$sbb-color-peach-light: #fcbb00;
+$sbb-color-peach-dark: #ffc727;
 $sbb-color-lemon: #ffde15;
+$sbb-color-lemon-light: #ffde15;
+$sbb-color-lemon-dark: #ffe547;
 $sbb-color-brown: #a05400;
+$sbb-color-brown-light: #a05400;
+$sbb-color-brown-dark: #000000;
 $sbb-color-green: #008233;
+$sbb-color-green-light: #008233;
+$sbb-color-green-dark: #109d47;
 $sbb-color-turquoise: #007e84;
+$sbb-color-turquoise-light: #007e84;
+$sbb-color-turquoise-dark: #00a59b;
 /// Original Value: 3px
 $sbb-focus-outline-offset: 0.1875rem;
 $sbb-hover-image-brightness: 1.075;
@@ -164,6 +196,22 @@ $sbb-layout-base-offset-responsive-wide: 4.5rem;
 $sbb-layout-base-offset-responsive-ultra: 7.5rem;
 /// Original Value: 1200px
 $sbb-layout-base-page-max-width: 75rem;
+$sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
+$sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
+$sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
+$sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
+$sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
+$sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
+$sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
+$sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
+$sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
+$sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
+$sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
+$sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
+$sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
+$sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
+$sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
+$sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
 /// Original Value: 0px
 $sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
 /// Original Value: 2px

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,8 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Aug 2025 06:28:50 GMT
+ * Generated on Thu, 18 Sep 2025 10:59:58 GMT
  */
 
+@use 'sass:map';
+$theme: 'standard' !default;
+
 @mixin lyne-design-tokens-css-variables {
   --sbb-animation-duration-1x: 0.04s;
   --sbb-animation-duration-2x: 0.08s;
@@ -151,14 +154,24 @@
   --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
+  --sbb-color-red85: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
-  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
+  --sbb-color-royal85: #4077df;
   --sbb-color-royal125: #032668;
   --sbb-color-royal150: #021c4e;
+  --sbb-color-royal-light: #06348b;
+  --sbb-color-royal-dark: #0053ef;
+  --sbb-color-royal85-light: #4077df;
+  --sbb-color-royal85-dark: #4077df;
+  --sbb-color-royal125-light: #032668;
+  --sbb-color-royal125-dark: #245ecb;
+  --sbb-color-royal150-light: #021c4e;
+  --sbb-color-royal150-dark: #000000;
   --sbb-color-white: #ffffff;
   --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
   --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -168,16 +181,38 @@
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
   --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0074bf;
+  --sbb-color-sky-light: #0074bf;
+  --sbb-color-sky-dark: #128ede;
   --sbb-color-night: #143a85;
+  --sbb-color-night-light: #143a85;
+  --sbb-color-night-dark: #6587ca;
   --sbb-color-violet: #6f2282;
+  --sbb-color-violet-light: #6f2282;
+  --sbb-color-violet-dark: #b36cc5;
   --sbb-color-pink: #c7387a;
+  --sbb-color-pink-light: #c7387a;
+  --sbb-color-pink-dark: #e45295;
   --sbb-color-autumn: #cf3b00;
+  --sbb-color-autumn-light: #cf3b00;
+  --sbb-color-autumn-dark: #f05313;
   --sbb-color-orange: #f27e00;
+  --sbb-color-orange-light: #f27e00;
+  --sbb-color-orange-dark: #fb8e19;
   --sbb-color-peach: #fcbb00;
+  --sbb-color-peach-light: #fcbb00;
+  --sbb-color-peach-dark: #ffc727;
   --sbb-color-lemon: #ffde15;
+  --sbb-color-lemon-light: #ffde15;
+  --sbb-color-lemon-dark: #ffe547;
   --sbb-color-brown: #a05400;
+  --sbb-color-brown-light: #a05400;
+  --sbb-color-brown-dark: #000000;
   --sbb-color-green: #008233;
+  --sbb-color-green-light: #008233;
+  --sbb-color-green-dark: #109d47;
   --sbb-color-turquoise: #007e84;
+  --sbb-color-turquoise-light: #007e84;
+  --sbb-color-turquoise-dark: #00a59b;
   /**
    * Original Value: 3px
    */
@@ -250,6 +285,22 @@
    * Original Value: 1200px
    */
   --sbb-layout-base-page-max-width: 75rem;
+  --sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
+  --sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
+  --sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
+  --sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
+  --sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
+  --sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
+  --sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
   /**
    * Original Value: 0px
    */
@@ -949,13 +1000,160 @@
    * Due to technical limitations these variables are only provided as CSS variables.
    */
 
-  /* Font Color */
-  --sbb-font-default-color: var(--sbb-color-charcoal);
+  /* Colors */
+  --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
+  --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
+  --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
+  --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
+  --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
+  --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
+  --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
+  --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
+  --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
+  --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
+  --sbb-color-turquoise: light-dark(
+    var(--sbb-color-turquoise-light),
+    var(--sbb-color-turquoise-dark)
+  );
+  --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
+  --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
+  --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
+  --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
+
+  --sbb-color-primary: #{map.get(
+      (
+        'standard': var(--sbb-color-red),
+        'off-brand': var(--sbb-color-royal),
+        'safety': var(--sbb-color-metal),
+      ),
+      $theme
+    )};
+  --sbb-color-primary85: #{map.get(
+      (
+        'standard': var(--sbb-color-red85),
+        'off-brand': var(--sbb-color-royal85),
+        'safety': var(--sbb-color-smoke),
+      ),
+      $theme
+    )};
+  /* @deprecated */
+  --sbb-color-primary-85: var(--sbb-color-primary85);
+  --sbb-color-primary125: #{map.get(
+      (
+        'standard': var(--sbb-color-red125),
+        'off-brand': var(--sbb-color-royal125),
+        'safety': var(--sbb-color-granite),
+      ),
+      $theme
+    )};
+  /* @deprecated */
+  --sbb-color-primary-125: var(--sbb-color-primary125);
+  --sbb-color-primary150: #{map.get(
+      (
+        'standard': var(--sbb-color-red150),
+        'off-brand': var(--sbb-color-royal150),
+        'safety': var(--sbb-color-anthracite),
+      ),
+      $theme
+    )};
+  /* @deprecated */
+  --sbb-color-primary-150: var(--sbb-color-primary150);
+
+  --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
+  --sbb-color-success: var(--sbb-color-green);
+  --sbb-color-warning: var(--sbb-color-peach);
+  --sbb-color-brand: #{map.get(
+      (
+        'standard': var(--sbb-color-red),
+        'off-brand': var(--sbb-color-red),
+        'safety': var(--sbb-color-metal),
+      ),
+      $theme
+    )};
+
+  --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-background-color-1-negative: var(--sbb-color-midnight);
+  --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
+  --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-background-color-2-negative: var(--sbb-color-charcoal);
+  --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
+  --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-background-color-3-negative: var(--sbb-color-charcoal);
+  --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
+  --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-background-color-4-negative: var(--sbb-color-iron);
+  --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
+
+  --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-color-1-negative: var(--sbb-color-white);
+  --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
+  --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-color-2-negative: var(--sbb-color-white);
+  --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-color-3-negative: var(--sbb-color-milk);
+  --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-color-4-negative: var(--sbb-color-cloud);
+  --sbb-color-4-negative-inverted: var(--sbb-color-iron);
+  --sbb-color-5: var(--sbb-color-smoke);
+
+  --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-border-color-1-negative: var(--sbb-color-white);
+  --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
+  --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-border-color-2-negative: var(--sbb-color-white);
+  --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-border-color-3-negative: var(--sbb-color-milk);
+  --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-border-color-4-negative: var(--sbb-color-cloud);
+  --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
+  --sbb-border-color-5: var(--sbb-color-smoke);
+
+  --sbb-shadow-color-soft-1: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
+  );
+  --sbb-shadow-color-soft-2: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
+  );
+  --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
+  --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
+  --sbb-shadow-color-hard-1: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+  --sbb-shadow-color-hard-2: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
+  );
+  --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
+
+  --sbb-font-default-color: var(--sbb-color-2);
 
   /* Focus outline */
   --sbb-focus-outline-color-default: var(--sbb-color-black);
   --sbb-focus-outline-color-dark: var(--sbb-color-white);
-  --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)
+  );
   --sbb-focus-outline-width: var(--sbb-border-width-1x);
 
   /* Title */

package/core/styles/off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'off-brand'
+);

package/core/styles/safety-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'safety'
+);

package/core/styles/standard-theme.scss

@@ -1,13 +1,3 @@
-@use './_index' as sbb;
-
-@use './normalize';
-@use './core';
-@use './typography';
-@use './a11y';
-@use './badge';
-@use './animation';
-@use './image';
-@use './layout';
-@use './lists';
-@use './scrollbar';
-@use './table';
+@use './theme' with (
+  $theme: 'standard'
+);

package/core/styles/theme.scss

@@ -0,0 +1,18 @@
+$theme: 'standard' !default;
+
+@use './_index' as sbb;
+
+@use './normalize';
+@use './core' with (
+  $theme: $theme
+);
+@use './typography';
+@use './a11y';
+@use './badge';
+@use './animation';
+@use './image';
+@use './layout';
+@use './lists';
+@use './scrollbar';
+@use './table';
+@use './timetable-form';

package/core/styles/timetable-form.scss

@@ -0,0 +1,27 @@
+@use './core/functions';
+@use './core/mediaqueries';
+@use './mixins/timetable-form' as mixin;
+
+.sbb-timetable-form {
+  @include mixin.sbb-timetable-form;
+}
+
+sbb-timetable-form {
+  sbb-date-input {
+    min-width: #{functions.px-to-rem-build(133)}; // From FIGMA spec
+  }
+
+  .sbb-timetable-form-block {
+    @include mixin.timetable-form-block;
+  }
+
+  @include mediaqueries.mq($to: small) {
+    .sbb-timetable-form-mobile-block {
+      @include mixin.timetable-form-block;
+    }
+
+    .sbb-timetable-form-mobile-hidden {
+      display: none;
+    }
+  }
+}