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

package/core/styles/core.scss

@@ -1,5 +1,6 @@
 $theme: 'standard' !default;
 
+@use 'sass:string';
 @use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
@@ -39,37 +40,29 @@ $theme: 'standard' !default;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
 
-  // Title
-  --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);
-
-  &.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;
+  // TODO: Remove complete block when new lean theme is complete
+  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
+  // Only render the block in standard theme as fallback for CSS class usage
+  @if not string.index($theme, 'lean') {
+    &.sbb-lean {
+      --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;
+    }
   }
 
   // Infinity border radius, can be used to achieve rounded border on start and end
@@ -95,6 +88,14 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    // TODO: Remove complete block when new lean theme is complete
+    // Only render the block in standard theme as fallback for CSS class usage
+    @if not string.index($theme, 'lean') {
+      &.sbb-lean {
+        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
+      }
+    }
+
     // Header
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
@@ -129,7 +130,7 @@ $theme: 'standard' !default;
 html {
   @include typo.text;
 
-  color: var(--sbb-font-default-color);
+  color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
 
@@ -161,7 +162,7 @@ html {
     // TODO: Find a better solution
     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;
 
     &::placeholder {
       @include typo.placeholder;
@@ -205,7 +206,7 @@ html {
 
     // We add the missing block spacing to fit the line-height
     margin-block: calc(
-      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25))
+      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
     );
   }
 
@@ -219,7 +220,7 @@ html {
       // White-space break needed for Firefox
       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));
     }
   }
 
@@ -292,7 +293,7 @@ html {
 // Ensure stable breadcrumb height during hydrating
 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;
 }
 
@@ -313,7 +314,7 @@ sbb-breadcrumb-group:not(:defined) {
   color: var(--sbb-color-1);
 
   strong + * {
-    font-size: var(--sbb-font-size-text-xxs);
+    font-size: var(--sbb-text-font-size-xxs);
     color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 }
@@ -589,67 +590,64 @@ sbb-toggle:has(:focus-visible) {
   }
 }
 
-sbb-dialog-actions {
-  sbb-dialog[negative] & {
-    --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
+sbb-dialog-title {
+  // Hide margin on the right side. Distance to button is defined by flex gap already.
+  sbb-dialog:has(> sbb-dialog-close-button) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
+    padding-inline-end: 0;
   }
+}
 
-  sbb-dialog:state(overflows) & {
-    --sbb-dialog-actions-border-color: transparent;
-
-    box-shadow: var(--sbb-box-shadow-level-9-soft);
+sbb-dialog-content {
+  // If there is a title, remove top spacing for the content
+  sbb-dialog:has(> sbb-dialog-title) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
+    padding-block-start: 0;
   }
 
-  sbb-dialog[negative]:state(overflows) & {
-    box-shadow: var(--sbb-box-shadow-level-9-soft-negative);
+  // Set the negative scrollbar colors for dialog content when dialog is negative
+  sbb-dialog[negative] > &,
+  sbb-dialog[negative]:state(has-intermediate-element) > * > & {
+    @include scrollbar.scrollbar-variables--color-negative;
   }
 }
 
-// If there is a title, remove top spacing for the content
-sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
-  padding-block-start: 0;
-}
-
-// Hide margin on the right side. Distance to button is defined by flex gap already.
-sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
-  margin-inline-end: 0;
-}
-
 sbb-dialog-close-button {
   // If there is no dialog title, the close button should be positioned absolute
-  sbb-dialog:not(:has(> sbb-dialog-title)) > & {
+  sbb-dialog:not(:has(> sbb-dialog-title)) > &,
+  sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
     position: absolute;
     z-index: 1;
   }
 
   // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > & {
-    // TODO: Adapt to lean size title
-    --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
+  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
+    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
   }
 
   // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > & {
-    // TODO: Adapt to lean size title
-    --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
+  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
+    --_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);
 
   &[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: 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 {

package/core/styles/mixins/chip.scss

@@ -25,19 +25,19 @@
 @mixin chip-label-variables--size-xxs {
   --sbb-chip-label-padding-block: 0em;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
 }
 
 @mixin chip-label-variables--size-xs {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
 }
 
 @mixin chip-label-variables--size-s {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
 }
 
 @mixin chip-label-rules {
@@ -49,7 +49,7 @@
   align-items: center;
   justify-content: center;
   height: calc(
-    var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) +
+    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) +
       var(--sbb-chip-label-padding-block) * 2
   );
   background-color: var(--sbb-chip-label-background-color);

package/core/styles/mixins/lists.scss

@@ -64,7 +64,7 @@
           width: 1em;
           align-items: center;
           justify-content: center;
-          inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
+          inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
           inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
 
           // Scale 1.3 to match Figma specs.
@@ -108,7 +108,7 @@
   --sbb-icon-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );
@@ -166,7 +166,7 @@
   --sbb-step-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );

package/core/styles/mixins/panel.scss

@@ -11,7 +11,7 @@
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
   --sbb-panel-triangle-height: #{functions.px-to-rem-build(33)};
   --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-line-height: var(--sbb-typo-line-height-heading);
   --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
   --sbb-panel-color: var(--sbb-color-1-negative);
   --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
@@ -71,6 +71,6 @@
   font-size: var(--sbb-panel-font-size);
   font-weight: 300;
   line-height: var(--sbb-panel-line-height);
-  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   color: var(--sbb-panel-color);
 }

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;
 }