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

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 {

package/core.css

@@ -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.
  */
 *,
 ::before,
@@ -627,10 +626,10 @@
    */
   --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
    */
@@ -905,7 +904,7 @@
   --sbb-box-shadow-level-11-hard-negative:
     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);
   --sbb-focus-outline-color-dark: var(--sbb-color-white);
@@ -916,19 +915,25 @@
   );
   --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: var(--sbb-typo-scale-2-5x);
+  --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
+  --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
+  --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
+  --sbb-heading-font-size-5: var(--sbb-typo-scale-1-125x);
+  --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
+  --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s);
+  --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x);
+  --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x);
+  /* 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);
   --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
@@ -958,36 +963,25 @@
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
-  --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
-  --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
-  --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
-  --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
-  --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
-  --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
-  --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
-  --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
-  --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
-  --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
 }
 :root.sbb-lean {
-  --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
-  --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
-  --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
-  --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
-  --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
-  --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
-  --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
-  --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
-  --sbb-title-margin-block-end-level-6: 0;
+  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
+  --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
+  --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
+  --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
+  --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
+  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
+  --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-2x);
+  --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-1x);
+  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
 }
 :root {
   --sbb-border-radius-infinity: 100000em;
@@ -1001,7 +995,7 @@
 @media (min-width: calc(37.5rem)) {
   :root {
     /* Title */
-    --sbb-font-size-title-1: var(--sbb-typo-scale-3x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-3x);
     /* Spacing */
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
     --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
@@ -1015,18 +1009,18 @@
 @media (min-width: calc(64rem)) {
   :root {
     /* 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: var(--sbb-typo-scale-3-5x);
+    --sbb-heading-font-size-2: var(--sbb-typo-scale-2-5x);
+    --sbb-heading-font-size-3: var(--sbb-typo-scale-2x);
+    --sbb-heading-font-size-4: var(--sbb-typo-scale-1-5x);
+    --sbb-heading-font-size-5: var(--sbb-typo-scale-1-25x);
+    --sbb-heading-font-size-6: var(--sbb-typo-scale-default);
+    /* 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);
     --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-large);
@@ -1047,6 +1041,11 @@
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+  }
+  :root.sbb-lean {
+    --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
+  }
+  :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
   }
@@ -1057,7 +1056,7 @@
 @media (min-width: calc(90rem)) {
   :root {
     /* Title */
-    --sbb-font-size-title-1: var(--sbb-typo-scale-4x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
     /* Spacing */
     --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
@@ -1103,10 +1102,10 @@
 html {
   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);
-  color: var(--sbb-font-default-color);
+  color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
 
@@ -1117,11 +1116,11 @@ html {
 }
 
 :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   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);
   overflow: hidden;
   white-space: nowrap;
@@ -1141,7 +1140,7 @@ html {
   background-color: transparent;
   font-size: var(--sbb-form-field-input-text-size) !important;
   font-family: var(--sbb-typo-font-family) !important;
-  line-height: var(--sbb-typo-line-height-body-text) !important;
+  line-height: var(--sbb-typo-line-height-text) !important;
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
   color: var(--sbb-color-5);
@@ -1173,7 +1172,7 @@ html {
 :is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
   height: calc(var(--sbb-form-field-input-text-size) * 1.25);
   line-height: 1 !important;
-  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
+  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25));
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
@@ -1224,7 +1223,7 @@ html {
   resize: none;
   white-space: break-spaces;
   overflow-y: auto;
-  min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  min-height: calc(var(--sbb-typo-line-height-text) * 1em);
 }
 :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
@@ -1326,7 +1325,7 @@ sbb-toast) {
 
 sbb-breadcrumb-group:not(:defined) {
   display: block;
-  height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));
+  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
   overflow: hidden;
 }
 
@@ -1335,11 +1334,11 @@ sbb-breadcrumb-group:not(:defined) {
 }
 
 .sbb-header-info {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   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);
   display: flex;
   padding-inline: var(--sbb-spacing-fixed-4x);
@@ -1348,7 +1347,7 @@ sbb-breadcrumb-group:not(:defined) {
   color: var(--sbb-color-1);
 }
 .sbb-header-info strong + * {
-  font-size: var(--sbb-font-size-text-xxs);
+  font-size: var(--sbb-text-font-size-xxs);
   color: var(--sbb-color-granite);
   color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
 }
@@ -1543,51 +1542,44 @@ sbb-toggle:has(:focus-visible) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
-sbb-dialog[negative] sbb-dialog-actions {
-  --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
-}
-sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
-  --sbb-dialog-actions-border-color: transparent;
-  box-shadow: var(--sbb-box-shadow-level-9-soft);
-}
-sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
-  box-shadow: var(--sbb-box-shadow-level-9-soft-negative);
+sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
+  padding-inline-end: 0;
 }
 
-sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
+sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
   padding-block-start: 0;
 }
-
-sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
-  margin-inline-end: 0;
+sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
+  --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);
 }
 
-sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button {
+sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
   position: absolute;
   z-index: 1;
 }
-sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
+sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
 }
-sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
+sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
 }
 
 sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles);
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
 }
 sbb-notification:has(sbb-title)[size=s] {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-6);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
 }
 
 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-status-title-font-size: var(--sbb-heading-font-size-5);
+  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
 }
 
 .sbb-overlay-outlet {