@sbb-esta/lyne-elements 3.12.0 → 4.0.0-next

package/core/styles/core.scss

@@ -1,6 +1,6 @@
 $theme: 'standard' !default;
 
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens with (
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
 @use './core/mediaqueries';
@@ -11,93 +11,104 @@ $theme: 'standard' !default;
 @use './mixins/inputs';
 @use './mixins/popover';
 @use './mixins/scrollbar';
-@use './mixins/shadows';
 @use './mixins/typo';
 
 @include helpers.box-sizing;
 
-// Core variables, are always needed
+// Core variables
 :root {
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
-  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+  @include sbb-css-tokens.base;
+
+  // 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
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Cursor
+  --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;
+  }
 
-  & {
-    // 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);
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 100000em;
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
-    // Overlay
-    --sbb-overlay-default-z-index: 1000;
-
-    // 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;
-    }
+  &:has(sbb-header[size='s']) {
+    --sbb-header-height: #{functions.px-to-rem-build(52)};
+  }
 
-    // Infinity border radius, can be used to achieve rounded border on start and end
-    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-    --sbb-border-radius-infinity: 100000em;
+  // When the input modality is either mouse or touch,
+  // the focus outline should be hidden.
+  // We achieve this by setting the outline style to none.
+  // This is primarily to work around Safari bugs.
+  &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+    --sbb-focus-outline-style: none;
+  }
 
-    &:has(sbb-header[size='s']) {
-      --sbb-header-height: #{functions.px-to-rem-build(52)};
-    }
+  @include mediaqueries.mq($from: small) {
+    @include sbb-css-tokens.breakpoint-small;
+  }
 
-    // When the input modality is either mouse or touch,
-    // the focus outline should be hidden.
-    // We achieve this by setting the outline style to none.
-    // This is primarily to work around Safari bugs.
-    &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
-      --sbb-focus-outline-style: none;
-    }
+  @include mediaqueries.mq($from: large) {
+    @include sbb-css-tokens.breakpoint-large;
 
-    @include mediaqueries.mq($from: medium) {
-      // Header
-      --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-      // Time Input
-      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
 
-      &:has(sbb-header[size='s']) {
-        --sbb-header-height: var(--sbb-spacing-fixed-14x);
-      }
+    &:has(sbb-header[size='s']) {
+      --sbb-header-height: var(--sbb-spacing-fixed-14x);
     }
   }
+
+  @include mediaqueries.mq($from: ultra) {
+    @include sbb-css-tokens.breakpoint-ultra;
+  }
 }
 
 @include font-face.font-declarations;
@@ -586,11 +597,11 @@ sbb-dialog-actions {
   sbb-dialog:state(overflows) & {
     --sbb-dialog-actions-border-color: transparent;
 
-    @include shadows.shadow-level-9-soft;
+    box-shadow: var(--sbb-box-shadow-level-9-soft);
   }
 
   sbb-dialog[negative]:state(overflows) & {
-    @include shadows.shadow-level-9-soft-negative;
+    box-shadow: var(--sbb-box-shadow-level-9-soft-negative);
   }
 }
 

package/core/styles/mixins/buttons.scss

@@ -1,15 +1,3 @@
-@use './a11y';
-@use '../core/mediaqueries';
-@use '../core/functions';
-@use './typo';
-
-$disabled: '[disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled]';
-$active: ':active, [data-active]';
-
-// ----------------------------------------------------------------------------------------------------
-// Buttons Mixins
-// ----------------------------------------------------------------------------------------------------
-
 @mixin button-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -23,162 +11,3 @@ $active: ':active, [data-active]';
   -webkit-tap-highlight-color: transparent;
   color: inherit;
 }
-
-// Icon-button style
-@mixin icon-button($button-selector, $icon-selector) {
-  @include icon-button-base(':host', #{$button-selector}, #{$icon-selector});
-
-  :host([negative]) {
-    @include icon-button-variables-negative;
-  }
-
-  :host(:is(#{$disabled})) {
-    @include icon-button-disabled(#{$button-selector});
-  }
-
-  :host(:is([data-focus-visible], :focus-visible)) {
-    @include icon-button-focus-visible(#{$button-selector});
-  }
-
-  :host([data-focus-visible]) {
-    // Basically the focus-outline mixin is made for use with focus-visible.
-    // As we use it here with data-focus-visible, we have to ensure that the outline is not overridden when mouse or touch is in use.
-    --sbb-focus-outline-style: initial;
-  }
-
-  :host(:not(#{$disabled}, #{$active}):hover) {
-    @include icon-button-hover(#{$button-selector});
-  }
-
-  :host(:not(#{$disabled}):is(#{$active})) {
-    @include icon-button-active(#{$button-selector});
-  }
-}
-
-// Variables used in the icon-button
-@mixin icon-button-variables {
-  --sbb-button-color-text: var(--sbb-color-3);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3);
-  --sbb-button-color-active-background: var(--sbb-background-color-4);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
-  --sbb-button-border-disabled-style: dashed;
-  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-transition-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
-
-  @include a11y.if-forced-colors {
-    --sbb-button-color-text: ButtonText !important;
-    --sbb-button-color-hover-background: Highlight !important;
-    --sbb-button-color-active-background: Highlight !important;
-    --sbb-button-color-disabled-background: Canvas !important;
-    --sbb-button-color-disabled-border: GrayText !important;
-    --sbb-button-color-disabled-text: GrayText !important;
-  }
-}
-
-// Variables used in the icon-button negative variant
-@mixin icon-button-variables-negative {
-  --sbb-button-color-text: var(--sbb-color-3-negative);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: var(--sbb-color-5);
-}
-
-// Default state for icon-button in form-field
-@mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
-  #{$host-selector} {
-    display: inline-block;
-    -webkit-tap-highlight-color: transparent;
-    height: fit-content;
-
-    // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize CSS of several frameworks.
-    outline: none !important;
-
-    @include icon-button-variables;
-
-    #{$button-selector} {
-      position: relative;
-      transition-duration: var(--sbb-button-transition-duration);
-      transition-timing-function: var(--sbb-button-transition-easing-function);
-      transition-property: color;
-      border-radius: var(--sbb-button-border-radius);
-      color: var(--sbb-button-color-text);
-      cursor: pointer;
-      user-select: none;
-      display: flex;
-
-      // Renders background in the background absolute to enable the hover animation
-      &::before {
-        position: absolute;
-        content: '';
-        inset: 0;
-        border-radius: var(--sbb-button-border-radius);
-        background-color: var(--sbb-button-color-default-background);
-        transition-duration: var(--sbb-button-transition-duration);
-        transition-timing-function: var(--sbb-button-transition-easing-function);
-        transition-property: inset, background-color;
-      }
-    }
-  }
-
-  #{$icon-selector} {
-    transition: transform var(--sbb-button-transition-duration)
-      var(--sbb-button-transition-easing-function);
-    transform: translateY(
-      var(--sbb-button-translate-y-content-hover, #{functions.px-to-rem-build(0)})
-    );
-    display: flex;
-  }
-}
-
-// Disabled state for icon-button in form-field
-@mixin icon-button-disabled($button-selector) {
-  #{$button-selector} {
-    color: var(--sbb-button-color-disabled-text);
-    cursor: default;
-    pointer-events: none;
-  }
-
-  #{$button-selector}::before {
-    background-color: var(--sbb-button-color-disabled-background);
-    border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)
-      var(--sbb-button-color-disabled-border);
-  }
-}
-
-@mixin icon-button-focus-visible($button-selector) {
-  #{$button-selector}::before {
-    @include a11y.focus-outline;
-  }
-}
-
-// Hover state for icon-button in form-field (exclude active state)
-@mixin icon-button-hover($button-selector) {
-  @include mediaqueries.hover-mq($hover: true) {
-    --sbb-button-translate-y-content-hover: #{functions.px-to-rem-build(-1)};
-  }
-
-  #{$button-selector}::before {
-    @include mediaqueries.hover-mq($hover: true) {
-      background-color: var(--sbb-button-color-hover-background);
-    }
-  }
-}
-
-// Active state for icon-button in form-field
-@mixin icon-button-active($button-selector) {
-  #{$button-selector}::before {
-    background-color: var(--sbb-button-color-active-background);
-  }
-}

package/core/styles/mixins/card.scss

@@ -2,7 +2,6 @@
 @use '../core/mediaqueries';
 @use './a11y';
 @use './buttons';
-@use './shadows';
 @use './typo';
 
 // -----------------------------------------------------------------------------
@@ -162,7 +161,7 @@
     --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
 
     #{$cardSelector} {
-      @include shadows.shadow-level-9-hard;
+      box-shadow: var(--sbb-box-shadow-level-9-hard);
     }
 
     @include a11y.if-forced-colors {

package/core/styles/mixins/lists.scss

@@ -186,7 +186,7 @@
   }
 
   &:where(.sbb-text-xl) {
-    @include mediaqueries.mq($from: medium) {
+    @include mediaqueries.mq($from: large) {
       --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)};
     }
   }

package/core/styles/mixins/panel.scss

@@ -24,7 +24,7 @@
   );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 
-  @include mediaqueries.mq($from: medium) {
+  @include mediaqueries.mq($from: large) {
     --sbb-panel-width: #{functions.px-to-rem-build(321)};
     --sbb-panel-inner-height: #{functions.px-to-rem-build(240.11)};
     --sbb-panel-triangle-height: #{functions.px-to-rem-build(47.45)};