@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779281125 → 5.0.0-next.3-dev.1779298726

package/chip/chip-group/chip-group.global.scss

@@ -0,0 +1,62 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-group-input-min-width: #{sbb.px-to-rem-build(150)};
+  --_sbb-chip-group-margin-block-start-default: #{sbb.px-to-rem-build(2)};
+  --_sbb-chip-group-margin-block-start-default-large: #{sbb.px-to-rem-build(3.5)};
+  --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default) 0;
+  --_sbb-chip-group-margin-block-with-label-s: #{sbb.px-to-rem-build(6)} #{sbb.px-to-rem-build(5)};
+  --_sbb-chip-group-margin-block-without-label-s: 0 #{sbb.px-to-rem-build(7)};
+  --_sbb-chip-group-margin-block-without-label-m: #{sbb.px-to-rem-build(3)}
+    #{sbb.px-to-rem-build(11)};
+  --_sbb-chip-group-margin-block-without-label-l: var(--_sbb-chip-group-margin-block-start-default)
+    #{sbb.px-to-rem-build(16)};
+  --_sbb-chip-group-margin-block-with-label-l: var(--_sbb-chip-group-margin-block-start-default)
+    #{sbb.px-to-rem-build(7.5)};
+  --_sbb-chip-group-margin-block-with-label-m: var(--_sbb-chip-group-margin-block-start-default)
+    var(--_sbb-chip-group-margin-block-start-default-large);
+  --sbb-chip-group-margin-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--_sbb-chip-group-margin-block-base-lm),
+        'lean': 0,
+      ),
+      $theme
+    )};
+  --sbb-chip-group-margin-block-no-label-not-empty: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--_sbb-chip-group-margin-block-without-label-m),
+        'lean': var(--_sbb-chip-group-margin-block-without-label-s),
+      ),
+      $theme
+    )};
+  --sbb-chip-group-margin-block-with-label-not-empty: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--_sbb-chip-group-margin-block-with-label-m),
+        'lean': var(--_sbb-chip-group-margin-block-with-label-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-breakpoint-large {
+  --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default-large) 0;
+  --_sbb-chip-group-margin-block-with-label-s: #{sbb.px-to-rem-build(5)} #{sbb.px-to-rem-build(3)};
+  --_sbb-chip-group-margin-block-without-label-s: 0 #{sbb.px-to-rem-build(5)};
+  --_sbb-chip-group-margin-block-without-label-m: #{sbb.px-to-rem-build(3)}
+    #{sbb.px-to-rem-build(14)};
+  --_sbb-chip-group-margin-block-without-label-l: var(
+      --_sbb-chip-group-margin-block-start-default-large
+    )
+    #{sbb.px-to-rem-build(20)};
+  --_sbb-chip-group-margin-block-with-label-l: var(
+      --_sbb-chip-group-margin-block-start-default-large
+    )
+    #{sbb.px-to-rem-build(7.5)};
+  --_sbb-chip-group-margin-block-with-label-m: var(
+      --_sbb-chip-group-margin-block-start-default-large
+    )
+    var(--_sbb-chip-group-margin-block-start-default-large);
+}

package/chip-label/chip-label.global.scss

@@ -0,0 +1,11 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
+}

package/clock/clock.global.scss

@@ -0,0 +1,9 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
+  --sbb-clock-face-color: var(--sbb-color-1);
+  --sbb-clock-background-color: var(--sbb-background-color-1);
+}

package/container/container/container.global.scss

@@ -0,0 +1,21 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+}
+
+@mixin rules {
+  sbb-container {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-object-fit: cover;
+
+      border-radius: var(--sbb-container-background-border-radius);
+      height: 100%;
+      position: absolute;
+    }
+  }
+}

package/container/sticky-bar/sticky-bar.global.scss

@@ -0,0 +1,17 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
+}

package/core/base-elements/selection-group-base-element.global.scss

@@ -0,0 +1,12 @@
+@use '../styles' as sbb;
+@use './selection-group-base-element' as group;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  @include group.horizontal-orientation;
+
+  --sbb-selection-group-width: auto;
+  --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-selection-group-elements-flex: none;
+}

package/core/mixins/panel-common.global.scss

@@ -0,0 +1,41 @@
+@use '../styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  // For consistency, a few variables are also consumed in selection-action-panel and selection-expansion-panel
+  --sbb-selection-panel-background-default: var(--sbb-background-color-1);
+  --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
+  --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
+  --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
+  --sbb-selection-panel-border-color-borderless: transparent;
+  --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
+  --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
+  --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
+  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-selection-panel-input-padding-block-m)
+          var(--sbb-selection-panel-input-padding-inline-m),
+        'lean': var(--sbb-selection-panel-input-padding-block-xs)
+          var(--sbb-selection-panel-input-padding-inline-xs),
+      ),
+      $theme
+    )};
+  --sbb-selection-panel-checkbox-dimension: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-checkbox-dimension-m),
+        'lean': var(--sbb-checkbox-dimension-xs),
+      ),
+      $theme
+    )};
+  --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
+  --sbb-selection-panel-suffix-color: var(--sbb-color-3);
+  --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+}

package/dialog/dialog/dialog.global.scss

@@ -0,0 +1,32 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-dialog-color: var(--sbb-color-2);
+  --sbb-dialog-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
+  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
+  --sbb-dialog-width: auto;
+  --sbb-dialog-max-width: 100%;
+  --sbb-dialog-height: auto;
+  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
+  --sbb-dialog-inset-block: 0 auto;
+  --sbb-dialog-inset-inline: 0 auto;
+  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
+  --sbb-dialog-animation-easing: ease;
+  --sbb-dialog-pointer-events: none;
+  --sbb-dialog-backdrop-visibility: hidden;
+  --sbb-dialog-backdrop-pointer-events: none;
+  --sbb-dialog-backdrop-color: transparent;
+  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
+}
+
+@mixin base-breakpoint-small {
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
+  --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
+  --sbb-dialog-max-width: 90vw;
+  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
+}

package/dialog/dialog-close-button/dialog-close-button.global.scss

@@ -0,0 +1,35 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
+  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+}
+
+@mixin rules {
+  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: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']) > &,
+    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']) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5'])
+      > *
+      > & {
+      --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
+    }
+  }
+}

package/dialog/dialog-content/dialog-content.global.scss

@@ -0,0 +1,13 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-dialog-content {
+    // If there is a title, reduce the top spacing for the content
+    sbb-dialog:has(> sbb-dialog-title) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
+      padding-block-start: var(--sbb-spacing-fixed-1x);
+    }
+  }
+}

package/dialog/dialog-title/dialog-title.global.scss

@@ -0,0 +1,13 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  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;
+    }
+  }
+}

package/divider/divider.global.scss

@@ -0,0 +1,9 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-divider-color: var(--sbb-background-color-4);
+  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
+  --sbb-divider-border-width: var(--sbb-border-width-1x);
+}

package/expansion-panel/expansion-panel/expansion-panel.global.scss

@@ -0,0 +1,21 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
+  --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
+  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
+
+  // Vars which will be used by child components
+  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
+  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
+  --sbb-expansion-panel-title-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-title-gap-l),
+        'lean': var(--sbb-expansion-panel-title-gap-s),
+      ),
+      $theme
+    )};
+}

package/expansion-panel/expansion-panel-content/expansion-panel-content.global.scss

@@ -0,0 +1,16 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
+  --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-content-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-content-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-content-padding-inline-s),
+      ),
+      $theme
+    )};
+}

package/expansion-panel/expansion-panel-header/expansion-panel-header.global.scss

@@ -0,0 +1,41 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
+  --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
+  --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
+  --sbb-expansion-panel-header-justify-content: space-between;
+  --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-gap-l),
+        'lean': var(--sbb-expansion-panel-header-gap-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
+  --sbb-expansion-panel-header-padding-block-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-block-l),
+        'lean': var(--sbb-expansion-panel-header-padding-block-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-header-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-expansion-panel-header-text-color: ButtonText;
+}

package/file-selector/common/file-selector.global.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-file-selector-color: var(--sbb-color-2);
+  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-file-selector-background-color: var(--sbb-background-color-1);
+  --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
+  --_sbb-file-selector-dropzone-icon-medium-display: #{sbb.theme-pattern-select(
+      (
+        'standard': block,
+        'lean': none,
+      ),
+      $theme
+    )};
+  --_sbb-file-selector-dropzone-icon-small-display: #{sbb.theme-pattern-select(
+      (
+        'standard': none,
+        'lean': block,
+      ),
+      $theme
+    )};
+}

package/flip-card/flip-card/flip-card.global.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
+}
+
+@mixin base-breakpoint-large {
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-flip-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-flip-card .sbb-action {
+    pointer-events: all;
+  }
+}

package/flip-card/flip-card-details/flip-card-details.global.scss

@@ -0,0 +1,7 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+}

package/flip-card/flip-card-summary/flip-card-summary.global.scss

@@ -0,0 +1,17 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-flip-card-summary {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: auto;
+      --sbb-image-object-fit: cover;
+
+      border-radius: 0;
+      display: block;
+      height: 100%;
+    }
+  }
+}

package/footer/footer.global.scss

@@ -0,0 +1,17 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(76)};
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
+  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
+  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+}
+
+@mixin base-breakpoint-small {
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
+}

package/form-field/error/error.global.scss

@@ -0,0 +1,9 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: #{sbb.px-to-rem-build(17)};
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
+}