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

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
 );
@@ -13,6 +14,29 @@ $theme: 'standard' !default;
 @use './mixins/scrollbar';
 @use './mixins/typo';
 
+@use '../../core/mixins/panel-common.global' as panel-common with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox/checkbox.global' as checkbox with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group with (
+  $theme: $theme
+);
+@use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
+  $theme: $theme
+);
+@use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
+  $theme: $theme
+);
+@use '../../selection-expansion-panel/selection-expansion-panel.global' as selection-expansion-panel
+  with (
+  $theme: $theme
+);
+@use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
+  $theme: $theme
+);
+
 @include helpers.box-sizing;
 
 // Core variables
@@ -20,10 +44,22 @@ $theme: 'standard' !default;
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.base;
 
+  @include panel-common.base;
+  @include checkbox.base;
+  @include checkbox-group.base;
+  @include checkbox-common.base;
+  @include selection-action-panel.base;
+  @include selection-expansion-panel.base;
+  @include visual-checkbox.base;
+
+  @include a11y.if-forced-colors {
+    @include sbb-css-tokens.forced-colors;
+    @include visual-checkbox.base-forced-colors;
+  }
+
   // Train formation
   --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
   // Header
@@ -39,37 +75,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 +123,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 +165,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 +197,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 +241,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 +255,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 +328,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 +349,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));
   }
 }
@@ -622,33 +658,31 @@ sbb-dialog-close-button {
   // The close button positioning needs the current dialog title size
   sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
   sbb-dialog:state(has-intermediate-element):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-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']) > &,
   sbb-dialog:state(has-intermediate-element):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-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/lean-theme.scss

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

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

@@ -1,6 +1,7 @@
 @use 'sass:selector';
 @use '../core/functions';
 @use '../core/mediaqueries';
+@use './a11y';
 @use './typo';
 
 @mixin list-reset {
@@ -64,7 +65,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 +109,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)
       )
   );
@@ -148,6 +149,13 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: 100%;
+
+      // If consumers override the `--sbb-icon-list-marker-icon-color` variable to set a custom color via inline style,
+      // it would have higher specificity over any rule, included the forced-colors one.
+      // This can be avoided forcing `background-color: CanvasText` in high-contrast mode.
+      @include a11y.if-forced-colors {
+        background-color: CanvasText;
+      }
     }
   }
 }
@@ -166,7 +174,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/overlay.scss

@@ -5,7 +5,6 @@
 
   --sbb-options-panel-position-x: 0;
   --sbb-options-panel-position-y: 0;
-  --sbb-options-panel-active-option-y: 0;
 
   // 85vh is not an exact value but looks optimized for mobile view.
   --sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));

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