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

package/link/{link.library.global.scss → _link.global.scss}

@@ -1,5 +1,7 @@
 @use '../core/styles' as sbb;
 
+$theme: 'standard' !default;
+
 @mixin common-variables {
   --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));
   --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));
@@ -58,7 +60,7 @@
   }
 }
 
-@mixin base {
+@mixin base-rules {
   color: var(--sbb-link-color-normal);
   text-decoration-line: var(--sbb-link-text-decoration-line, underline);
   text-decoration-thickness: #{sbb.px-to-rem-build(1)};
@@ -101,7 +103,7 @@
 }
 
 @mixin consolidation {
-  @include base;
+  @include base-rules;
   @include focus-visible;
   @include hover;
 
@@ -109,13 +111,25 @@
   @include active;
 }
 
-@mixin rules {
+@mixin element-rules {
   @include variables;
   @include consolidation;
 }
 
-@mixin rules-negative {
+@mixin element-rules-negative {
   @include variables;
   @include variables--negative;
   @include consolidation;
 }
+
+@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/loading-indicator-circle/{loading-indicator-circle.global.scss → _loading-indicator-circle.global.scss}

@@ -11,7 +11,7 @@ $theme: 'standard' !default;
   --sbb-loading-indicator-circle-animated-border-radius: 50%;
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-loading-indicator-circle-animated-width: 50%;
   --sbb-loading-indicator-circle-animated-height: 100%;
   --sbb-loading-indicator-circle-animated-border-radius: 0;

package/logo/{logo.global.scss → _logo.global.scss}

@@ -9,7 +9,7 @@ $theme: 'standard' !default;
   --sbb-logo-aspect-ratio: 454 / 48;
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-logo-panel-color: ButtonText !important;
   --sbb-logo-signet-color: Canvas !important;
 }

package/map-container/{map-container.global.scss → _map-container.global.scss}

@@ -10,6 +10,6 @@ $theme: 'standard' !default;
   --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
 }
 
-@mixin base-breakpoint-ultra {
+@mixin breakpoint-ultra {
   --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(480)};
 }

package/menu/{menu/menu.global.scss → _menu.global.scss}

@@ -1,12 +1,16 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
-  --sbb-menu-animation-easing: ease;
-  --sbb-menu-max-width: 100%;
-  --sbb-menu-min-width: 100%;
-  --sbb-menu-container-height: 100dvh;
+  --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;
 
   // 85vh is not an exact value but looks optimized for mobile view.
   --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
@@ -14,9 +18,13 @@ $theme: 'standard' !default;
   --sbb-menu-border-radius: var(--sbb-border-radius-4x);
   --sbb-menu-color: var(--sbb-color-2-inverted);
   --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-menu-animation-easing: ease;
+  --sbb-menu-max-width: 100%;
+  --sbb-menu-min-width: 100%;
+  --sbb-menu-container-height: 100dvh;
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-menu-max-width: #{sbb.px-to-rem-build(320)};
   --sbb-menu-min-width: #{sbb.px-to-rem-build(180)};
   --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);

package/mini-calendar/{mini-calendar-month/mini-calendar-month.global.scss → _mini-calendar.global.scss}

@@ -1,8 +1,11 @@
-@use '../../core/styles' as sbb;
+@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;
   --sbb-mini-calendar-month-offset: 0;
   --sbb-mini-calendar-month-visibilty-year: hidden;
   --sbb-mini-calendar-month-label-color: light-dark(

package/navigation/_navigation.global.scss

@@ -0,0 +1,78 @@
+@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);
+  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
+  --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;
+  --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);
+  --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);
+  --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 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);
+  --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 breakpoint-ultra {
+  --sbb-navigation-grid-column: 1 / 6;
+  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
+  --sbb-navigation-section-column: 6 / 17;
+  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
+    var(--sbb-spacing-responsive-l);
+}

package/notification/{notification.global.scss → _notification.global.scss}

@@ -41,7 +41,7 @@ $theme: 'standard' !default;
   --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin base-breakpoint-small {
+@mixin breakpoint-small {
   --sbb-notification-icon-align-self: flex-start;
   --sbb-notification-padding-inline: #{sbb.theme-pattern-select(
       (