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

package/dialog/_dialog.global.scss

@@ -0,0 +1,77 @@
+@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);
+  --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 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);
+}
+
+@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);
+    }
+  }
+
+  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);
+    }
+  }
+
+  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-header/expansion-panel-header.global.scss → _expansion-panel.global.scss}

@@ -1,8 +1,33 @@
-@use '../../core/styles' as sbb;
+@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
+    )};
+  --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
+    )};
   --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);
@@ -36,6 +61,6 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-expansion-panel-header-text-color: ButtonText;
 }

package/file-selector/{common/file-selector.global.scss → _file-selector.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 

package/flip-card/{flip-card/flip-card.global.scss → _flip-card.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -10,9 +10,10 @@ $theme: 'standard' !default;
   --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)};
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
 }
 
@@ -22,4 +23,16 @@ $theme: 'standard' !default;
   sbb-flip-card .sbb-action {
     pointer-events: all;
   }
+
+  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 → _footer.global.scss}

@@ -12,6 +12,6 @@ $theme: 'standard' !default;
   --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
 }
 
-@mixin base-breakpoint-small {
+@mixin breakpoint-small {
   --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
 }

package/form-field/{form-field/form-field.global.scss → _form-field.global.scss}

@@ -1,8 +1,11 @@
-@use '../../core/styles' as sbb;
+@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);
   --sbb-form-field-background-color: var(--sbb-background-color-1);
   --sbb-form-field-border-color: var(--sbb-border-color-5);
   --sbb-form-field-border-style: solid;
@@ -73,11 +76,11 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-form-field-border-color: ButtonBorder;
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-fixed-1x),

package/header/{header/header.global.scss → _header.global.scss}

@@ -1,8 +1,35 @@
-@use '../../core/styles' as sbb;
+@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)};
   --sbb-header-background: var(--sbb-background-color-1);
   --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
   --sbb-header-inset-inline-end: 0;
@@ -16,9 +43,21 @@ $theme: 'standard' !default;
       ),
       $theme
     )};
+  --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;
+}
+
+@mixin 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;
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
   --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
 }

package/icon-sidebar/{icon-sidebar/icon-sidebar.global.scss → _icon-sidebar.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 

package/lead-container/{lead-container.global.scss → _lead-container.global.scss}

@@ -13,7 +13,7 @@ $theme: 'standard' !default;
   --sbb-lead-container-image-border-radius: 0;
 }
 
-@mixin base-breakpoint-ultra {
+@mixin breakpoint-ultra {
   --sbb-lead-container-image-ratio: 21 / 9;
   --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
 }