@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779890843

package/dialog/dialog/dialog.global.scss

@@ -1,32 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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/expansion-panel/expansion-panel/expansion-panel.global.scss

@@ -1,21 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-@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/flip-card/flip-card-details/flip-card-details.global.scss

@@ -1,7 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-@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/form-field/error/error.global.scss

@@ -1,9 +0,0 @@
-@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);
-}

package/header/common/header-action.global.scss

@@ -1,41 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-header-action-color: var(--sbb-color-1);
-  --sbb-header-action-background-color: transparent;
-  --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
-  --sbb-header-action-min-height-m: var(--sbb-size-element-s);
-  --sbb-header-action-min-height: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-header-action-min-height-m),
-        'lean': var(--sbb-header-action-min-height-s),
-      ),
-      $theme
-    )};
-  --sbb-header-action-padding-inline-s: var(--sbb-spacing-fixed-4x);
-  --sbb-header-action-padding-inline-m: var(--sbb-spacing-fixed-5x);
-  --sbb-header-action-padding-inline: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-header-action-padding-inline-m),
-        'lean': var(--sbb-header-action-padding-inline-s),
-      ),
-      $theme
-    )};
-  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
-  --sbb-header-action-border-color: transparent;
-  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
-  --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
-  --sbb-header-action-active-border-color: var(--sbb-header-action-color);
-  --sbb-header-first-item-icon-shift: #{sbb.px-to-rem-build(2)};
-}
-
-@mixin base-forced-colors {
-  --sbb-header-action-border-color: CanvasText;
-  --sbb-header-action-color: LinkText;
-
-  // Hide border with forced colors, as state is displayed on border
-  --sbb-header-action-active-border-width: 0;
-}

package/header/header-environment/header-environment.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-header-environment-background-color: var(--sbb-color-granite);
-  --sbb-header-environment-color: var(--sbb-color-1-negative);
-  --sbb-header-environment-size: #{sbb.px-to-rem-build(38)};
-  --sbb-header-environment-rotate: 45deg;
-}

package/link/common/block-link.global.scss

@@ -1,15 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
-  --sbb-block-link-font-size: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-text-font-size-s),
-        'lean': var(--sbb-text-font-size-xs),
-      ),
-      $theme
-    )};
-}

package/menu/common/menu-action.global.scss

@@ -1,14 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
-  --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
-  --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-menu-action-color: var(--sbb-color-2-inverted);
-  --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-menu-action-forced-color-border-color: CanvasText;
-}

package/mini-calendar/mini-calendar-day/mini-calendar-day.global.scss

@@ -1,9 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
-  --sbb-mini-calendar-day-dimensions: #{sbb.px-to-rem-build(6)};
-  --sbb-mini-calendar-day-scale: 1.333;
-}

package/navigation/common/navigation-action.global.scss

@@ -1,11 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-navigation-action-color: var(--sbb-color-4-negative);
-  --sbb-navigation-action-icon-display: none;
-  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
-}

package/navigation/navigation/navigation.global.scss

@@ -1,36 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-navigation-grid-column: 1 / -1;
-  --sbb-navigation-animation-easing: ease-in;
-  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
-  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
-  --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
-  --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
-  --sbb-navigation-backdrop-animation-name: backdrop-open;
-  --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
-  --sbb-navigation-color: var(--sbb-color-1-negative);
-  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
-  --sbb-navigation-expanded-width: 100%;
-  --sbb-navigation-inset: 0 auto auto 0;
-  --sbb-navigation-translate: -100% 0;
-  --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
-  --sbb-navigation-content-translate: 0;
-  --sbb-navigation-width: 100%;
-  --sbb-navigation-height: 100dvh;
-}
-
-@mixin base-breakpoint-large {
-  --sbb-navigation-grid-column: 1 / 5;
-  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
-  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
-  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
-  --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
-}
-
-@mixin base-breakpoint-ultra {
-  --sbb-navigation-grid-column: 1 / 6;
-  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
-}

package/navigation/navigation-list/navigation-list.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
-  --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
-  --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
-}

package/navigation/navigation-marker/navigation-marker.global.scss

@@ -1,17 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
-  --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
-  --sbb-navigation-marker-position-y: unset;
-  --sbb-navigation-marker-width: #{sbb.px-to-rem-build(17)};
-  --sbb-navigation-marker-border: var(--sbb-border-width-1x);
-  --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
-  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
-  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
-  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
-}

package/navigation/navigation-section/navigation-section.global.scss

@@ -1,34 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-navigation-section-column: 1 / -1;
-  --sbb-navigation-section-position: fixed;
-  --sbb-navigation-section-pointer-events: none;
-  --sbb-navigation-section-animation-easing: ease-out;
-  --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
-  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
-  --sbb-navigation-section-translate: 100%;
-  --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
-  --sbb-navigation-section-width: 100dvw;
-  --sbb-navigation-section-height: 100dvh;
-  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
-}
-
-@mixin base-breakpoint-large {
-  --sbb-navigation-section-column: 5 / 13;
-  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
-  --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
-    var(--sbb-layout-base-offset-responsive);
-  --sbb-navigation-section-position: relative;
-  --sbb-navigation-section-translate: 0;
-  --sbb-navigation-section-content-padding-inline-start: 0;
-  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
-}
-
-@mixin base-breakpoint-ultra {
-  --sbb-navigation-section-column: 6 / 17;
-  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
-    var(--sbb-spacing-responsive-l);
-}

package/option/optgroup/optgroup.global.scss

@@ -1,17 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
-  --sbb-optgroup-label-padding-end: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-spacing-fixed-2x),
-        'lean': var(--sbb-spacing-fixed-1x),
-      ),
-      $theme
-    )};
-  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-optgroup-divider-color: var(--sbb-divider-color);
-}

package/option/option-hint/option-hint.global.scss

@@ -1,17 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-hint-padding-block-end: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-spacing-fixed-2x),
-        'lean': 0 var(--sbb-spacing-fixed-1x),
-      ),
-      $theme
-    )};
-  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
-}

package/option/option-panel-common.global.scss

@@ -1,11 +0,0 @@
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
-  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
-}

package/paginator/common/paginator-common.global.scss

@@ -1,14 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-size-element-m),
-        'lean': var(--sbb-size-element-xs),
-      ),
-      $theme
-    )};
-}

package/paginator/compact-paginator/compact-paginator.global.scss

@@ -1,9 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
-  --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
-  --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
-}

package/paginator/paginator/paginator.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-paginator-page-border-width: 0;
-  --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
-  --sbb-paginator-animation-easing: var(--sbb-animation-easing);
-  --sbb-paginator-font-size: var(--sbb-text-font-size-s);
-}

package/sidebar/sidebar/sidebar.global.scss

@@ -1,19 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-sidebar-background-color: var(--sbb-background-color-1);
-  --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
-  --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
-  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
-  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
-}
-
-@mixin rules {
-  // If there is a title, remove top spacing for the content
-  sbb-sidebar:has(sbb-sidebar-title) {
-    --_sbb-sidebar-padding-block-start: 0;
-  }
-}

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

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin rules {
-  // If there is no close button, avoid reserving any space for the button in the sidebar title
-  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-    position: absolute;
-  }
-}

package/stepper/stepper/stepper.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-stepper-orientation: row;
-  --sbb-stepper-border-width: var(--sbb-border-width-1x);
-  --sbb-stepper-marker-width: var(--sbb-border-width-3x);
-  --sbb-stepper-marker-color: var(--sbb-color-3);
-}