@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.2

package/core/styles/mixins/typo.scss

@@ -3,68 +3,80 @@
 // ----------------------------------------------------------------------------------------------------
 
 @mixin title-rules {
-  margin-block: var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);
+  margin-block: var(--sbb-title-margin-block, 0);
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));
-  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   font-size: var(--sbb-title-font-size);
 }
 
 @mixin title--level-1 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-1);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
 }
 
 @mixin title--level-1-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-margin-block-start-level-1);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-1);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-1-lean,
+    var(--sbb-heading-margin-block-1)
+  );
 }
 
 @mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
 }
 
 @mixin title--level-2-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-2);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-2-lean,
+    var(--sbb-heading-margin-block-2)
+  );
 }
 
 @mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
 }
 
 @mixin title--level-3-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-3);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-3-lean,
+    var(--sbb-heading-margin-block-3)
+  );
 }
 
 @mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
 }
 
 @mixin title--level-4-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-4);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-4-lean,
+    var(--sbb-heading-margin-block-4)
+  );
 }
 
 @mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
 }
 
 @mixin title--level-5-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-5);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-5-lean,
+    var(--sbb-heading-margin-block-5)
+  );
 }
 
 @mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-line-height: var(--sbb-typo-line-height-text);
 }
 
 @mixin title--level-6-spacing {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-6);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-6-lean,
+    var(--sbb-heading-margin-block-6)
+  );
 }
 
 @mixin title-1($exclude-spacing: false) {
@@ -119,24 +131,14 @@
   --sbb-title-text-color-normal: var(--sbb-color-3-negative);
 }
 
-// @deprecated, non-standard values, title rules combined with title level mixins are the alternative
-@mixin title($exclude-spacing: false) {
-  @if not($exclude-spacing) {
-    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
-  }
-
-  @include title-rules;
-}
-
 // ----------------------------------------------------------------------------------------------------
 // Typo: Text Style Mixins
 // ----------------------------------------------------------------------------------------------------
 @mixin text {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
@@ -145,7 +147,7 @@
 }
 
 @mixin text-xl--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
   @include text;
 }
 
@@ -155,7 +157,7 @@
 }
 
 @mixin text-l--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-l);
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
   @include text;
 }
 
@@ -165,7 +167,7 @@
 }
 
 @mixin text-m--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   @include text;
 }
 
@@ -175,7 +177,7 @@
 }
 
 @mixin text-s--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   @include text;
 }
 
@@ -185,7 +187,7 @@
 }
 
 @mixin text-xs--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   @include text;
 }
 
@@ -195,7 +197,7 @@
 }
 
 @mixin text-xxs--regular {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   @include text;
 }
 

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

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Tue, 28 Oct 2025 06:41:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 $theme: 'standard' !default;
@@ -645,10 +644,10 @@ $theme: 'standard' !default;
    */
   --sbb-spacing-responsive-xxl-ultra: 7.5rem;
   --sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --sbb-typo-letter-spacing-titles: 0;
-  --sbb-typo-letter-spacing-body-text: 0.03em;
-  --sbb-typo-line-height-titles: 1.3;
-  --sbb-typo-line-height-body-text: 1.75;
+  --sbb-typo-letter-spacing-heading: 0em;
+  --sbb-typo-letter-spacing-text: 0.03em;
+  --sbb-typo-line-height-heading: 1.4;
+  --sbb-typo-line-height-text: 1.75;
   /**
    * Original Value: 12px
    */
@@ -728,7 +727,7 @@ $theme: 'standard' !default;
       (
         'standard': var(--sbb-color-red),
         'off-brand': var(--sbb-color-royal),
-        'safety': var(--sbb-color-metal),
+        'safety': var(--sbb-color-royal),
       ),
       $theme
     )};
@@ -736,7 +735,7 @@ $theme: 'standard' !default;
       (
         'standard': var(--sbb-color-red85),
         'off-brand': var(--sbb-color-royal85),
-        'safety': var(--sbb-color-smoke),
+        'safety': var(--sbb-color-royal85),
       ),
       $theme
     )};
@@ -744,7 +743,7 @@ $theme: 'standard' !default;
       (
         'standard': var(--sbb-color-red125),
         'off-brand': var(--sbb-color-royal125),
-        'safety': var(--sbb-color-granite),
+        'safety': var(--sbb-color-royal125),
       ),
       $theme
     )};
@@ -752,7 +751,7 @@ $theme: 'standard' !default;
       (
         'standard': var(--sbb-color-red150),
         'off-brand': var(--sbb-color-royal150),
-        'safety': var(--sbb-color-anthracite),
+        'safety': var(--sbb-color-royal150),
       ),
       $theme
     )};
@@ -927,7 +926,7 @@ $theme: 'standard' !default;
     var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1-negative);
 
-  --sbb-font-default-color: var(--sbb-color-2);
+  --sbb-font-color-default: var(--sbb-color-2);
 
   /* Focus outline */
   --sbb-focus-outline-color-default: var(--sbb-color-black);
@@ -939,19 +938,99 @@ $theme: 'standard' !default;
   --sbb-focus-outline-width: var(--sbb-border-width-1x);
 
   /* Title */
-  --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
-  --sbb-font-size-title-2: var(--sbb-typo-scale-2x);
-  --sbb-font-size-title-3: var(--sbb-typo-scale-1-5x);
-  --sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-title-7: var(--sbb-typo-scale-0-75x);
-  --sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-text-m: var(--sbb-typo-scale-default);
-  --sbb-font-size-text-s: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-text-xs: var(--sbb-typo-scale-0-75x);
-  --sbb-font-size-text-xxs: var(--sbb-typo-scale-0-75x);
+  --sbb-heading-font-size-1: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-2-5x),
+        'lean': var(--sbb-typo-scale-2x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-2: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-2x),
+        'lean': var(--sbb-typo-scale-1-5x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-3: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-1-5x),
+        'lean': var(--sbb-typo-scale-1-25x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-4: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-1-25x),
+        'lean': var(--sbb-typo-scale-1-125x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-5: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-1-125x),
+        'lean': var(--sbb-typo-scale-0-875x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-6: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-0-875x),
+        'lean': var(--sbb-typo-scale-0-75x),
+      ),
+      $theme
+    )};
+
+  --sbb-heading-margin-block-1: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s),
+        'lean': var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+  --sbb-heading-margin-block-2: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+  --sbb-heading-margin-block-3: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-heading-margin-block-4: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-heading-margin-block-5: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-heading-margin-block-6: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x),
+        'lean': var(--sbb-spacing-responsive-s) 0,
+      ),
+      $theme
+    )};
+
+  /* Text */
+  --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
+  --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
+  --sbb-text-font-size-m: var(--sbb-typo-scale-default);
+  --sbb-text-font-size-s: var(--sbb-typo-scale-0-875x);
+  --sbb-text-font-size-xs: var(--sbb-typo-scale-0-75x);
+  --sbb-text-font-size-xxs: var(--sbb-typo-scale-0-75x);
 
   /* Spacing */
   --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
@@ -986,7 +1065,13 @@ $theme: 'standard' !default;
 
 @mixin breakpoint-small {
   /* Title */
-  --sbb-font-size-title-1: var(--sbb-typo-scale-3x);
+  --sbb-heading-font-size-1: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-3x),
+        'lean': var(--sbb-typo-scale-2x),
+      ),
+      $theme
+    )};
 
   /* Spacing */
   --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
@@ -1001,18 +1086,55 @@ $theme: 'standard' !default;
 
 @mixin breakpoint-large {
   /* Title */
-  --sbb-font-size-title-1: var(--sbb-typo-scale-3-5x);
-  --sbb-font-size-title-2: var(--sbb-typo-scale-2-5x);
-  --sbb-font-size-title-3: var(--sbb-typo-scale-2x);
-  --sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
-  --sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-title-6: var(--sbb-typo-scale-default);
-  --sbb-font-size-title-7: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
-  --sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-text-s: var(--sbb-typo-scale-default);
-  --sbb-font-size-text-xs: var(--sbb-typo-scale-0-875x);
+  --sbb-heading-font-size-1: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-3-5x),
+        'lean': var(--sbb-typo-scale-2-5x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-2: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-2-5x),
+        'lean': var(--sbb-typo-scale-2x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-3: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-2x),
+        'lean': var(--sbb-typo-scale-1-5x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-4: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-1-5x),
+        'lean': var(--sbb-typo-scale-1-25x),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-5: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-1-25x),
+        'lean': var(--sbb-typo-scale-default),
+      ),
+      $theme
+    )};
+  --sbb-heading-font-size-6: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-default),
+        'lean': var(--sbb-typo-scale-0-875x),
+      ),
+      $theme
+    )};
+
+  /* Text */
+  --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
+  --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
+  --sbb-text-font-size-m: var(--sbb-typo-scale-1-125x);
+  --sbb-text-font-size-s: var(--sbb-typo-scale-default);
+  --sbb-text-font-size-xs: var(--sbb-typo-scale-0-875x);
 
   /* Spacing */
   --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-large);
@@ -1040,7 +1162,13 @@ $theme: 'standard' !default;
 
 @mixin breakpoint-ultra {
   /* Title */
-  --sbb-font-size-title-1: var(--sbb-typo-scale-4x);
+  --sbb-heading-font-size-1: #{theme-pattern-select(
+      (
+        'standard': var(--sbb-typo-scale-4x),
+        'lean': var(--sbb-typo-scale-2-5x),
+      ),
+      $theme
+    )};
 
   /* Spacing */
   --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);

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

@@ -340,10 +340,10 @@ $sbb-spacing-responsive-xxl-large: 6rem;
 /// Original Value: 120px
 $sbb-spacing-responsive-xxl-ultra: 7.5rem;
 $sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$sbb-typo-letter-spacing-titles: 0;
-$sbb-typo-letter-spacing-body-text: 0.03em;
-$sbb-typo-line-height-titles: 1.3;
-$sbb-typo-line-height-body-text: 1.75;
+$sbb-typo-letter-spacing-heading: 0em;
+$sbb-typo-letter-spacing-text: 0.03em;
+$sbb-typo-line-height-heading: 1.4;
+$sbb-typo-line-height-text: 1.75;
 /// Original Value: 12px
 $sbb-typo-scale-0-75x: 0.75rem;
 /// Original Value: 13px

package/core/styles/typography.scss

@@ -18,27 +18,27 @@ sup {
 }
 
 .sbb-text-xxs {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
 }
 
 .sbb-text-xs {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
 }
 
 .sbb-text-s {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
 }
 
 .sbb-text-m {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
 }
 
 .sbb-text-l {
-  --sbb-text-font-size: var(--sbb-font-size-text-l);
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
 }
 
 .sbb-text-xl {
-  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
 }
 
 .sbb-text--bold {