@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779280803 → 5.0.0-next.3-dev.1779281392

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

@@ -0,0 +1,41 @@
+@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/header.global.scss

@@ -0,0 +1,62 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --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;
+  --sbb-header-position: fixed;
+  --sbb-header-height-s: #{sbb.px-to-rem-build(52)};
+  --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
+  --sbb-header-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-header-height-m),
+        'lean': var(--sbb-header-height-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-breakpoint-large {
+  --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
+  --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
+}
+
+@mixin rules {
+  // We would like to provide the height variable globally in order that global styles can be adapted to the header size.
+  // For example, the container margin can be adapted to the header height.
+  // In standard theme, size='s' overrides the default (size='m').
+  // In lean theme, size='m' overrides the default (size='s').
+  #{sbb.theme-pattern-select(('standard': ":root:has(sbb-header[size='s'])", 'lean': ":root:has(sbb-header[size='m'])"), $theme)} {
+    --sbb-header-height: #{sbb.theme-pattern-select(
+        (
+          'standard': var(--sbb-header-height-s),
+          'lean': var(--sbb-header-height-m),
+        ),
+        $theme
+      )};
+  }
+
+  // Move container below header
+  sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+    margin-block-start: var(--sbb-header-height);
+  }
+
+  // Helper class for the application name and version in sbb-header.
+  .sbb-header-info {
+    display: flex;
+    padding-inline: var(--sbb-spacing-fixed-4x);
+    gap: var(--sbb-spacing-fixed-1x);
+    align-items: baseline;
+    color: var(--sbb-color-1);
+    font-size: var(--sbb-text-font-size-xs);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+    strong + * {
+      font-size: var(--sbb-text-font-size-xxs);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+@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/icon-sidebar/icon-sidebar/icon-sidebar.global.scss

@@ -0,0 +1,21 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
+}
+
+@mixin rules {
+  // Move the current-page-border to the right side if the sidebar is right positioned
+  sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
+    --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
+  }
+
+  // Set the border radius at the left top side if the sidebar is right positioned
+  sbb-icon-sidebar-content + sbb-icon-sidebar {
+    border-start-end-radius: 0;
+    border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+  }
+}

package/lead-container/lead-container.global.scss

@@ -0,0 +1,31 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-lead-container-background-color: var(--sbb-background-color-1);
+  --sbb-lead-container-image-ratio: 2 / 1;
+  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
+  --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
+  --sbb-lead-container-image-border-radius: 0;
+}
+
+@mixin base-breakpoint-ultra {
+  --sbb-lead-container-image-ratio: 21 / 9;
+  --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
+}
+
+@mixin rules {
+  sbb-lead-container {
+    > [slot='image']:is(sbb-image, img, picture),
+    > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+      --sbb-image-object-fit: cover;
+
+      border-radius: var(--sbb-lead-container-image-border-radius);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+@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/link/link.library.global.scss

@@ -0,0 +1,121 @@
+@use '../core/styles' as sbb;
+
+@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));
+}
+
+@mixin common-variables--negative {
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+@mixin block-variables {
+  @include common-variables;
+
+  --sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));
+  --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));
+}
+
+@mixin block-variables--negative {
+  @include common-variables--negative;
+
+  --sbb-link-color-normal: var(--sbb-color-1-negative);
+  --sbb-link-color-hover: var(--sbb-color-4-negative);
+  --sbb-link-color-active: var(--sbb-color-silver);
+}
+
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-variables--active {
+  --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));
+  --sbb-link-text-decoration-line: underline;
+}
+
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-variables--active-negative {
+  --sbb-link-color-normal: var(--sbb-color-cement);
+  --sbb-link-text-decoration-line: underline;
+}
+
+@mixin variables {
+  @include common-variables;
+
+  --sbb-link-color-normal: inherit;
+}
+
+@mixin variables--negative {
+  @include common-variables--negative;
+
+  --sbb-link-color-hover: var(--sbb-color-graphite);
+  --sbb-link-color-active: var(--sbb-color-metal);
+}
+
+@mixin variables--button {
+  @media (forced-colors: active) {
+    --sbb-link-color-normal: ButtonText;
+    --sbb-link-color-hover: ButtonText;
+    --sbb-link-color-active: ButtonText;
+  }
+}
+
+@mixin base {
+  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)};
+  text-underline-offset: 0.3125em; // 5px
+
+  @media (forced-colors: active) {
+    text-decoration: underline;
+  }
+}
+
+@mixin focus-visible {
+  &:focus-visible {
+    @include sbb.focus-outline;
+
+    border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));
+  }
+}
+
+@mixin hover-rules {
+  @include sbb.hover-mq($hover: true) {
+    color: var(--sbb-link-color-hover);
+    text-decoration-line: var(--sbb-link-hover-text-decoration, underline);
+  }
+}
+
+@mixin hover {
+  &:hover {
+    @include hover-rules;
+  }
+}
+
+@mixin active-rules {
+  color: var(--sbb-link-color-active);
+}
+
+@mixin active {
+  &:active {
+    @include active-rules;
+  }
+}
+
+@mixin consolidation {
+  @include base;
+  @include focus-visible;
+  @include hover;
+
+  // Active definitions have to be after :hover definitions
+  @include active;
+}
+
+@mixin rules {
+  @include variables;
+  @include consolidation;
+}
+
+@mixin rules-negative {
+  @include variables;
+  @include variables--negative;
+  @include consolidation;
+}

package/loading-indicator/loading-indicator.global.scss

@@ -0,0 +1,10 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-loading-indicator-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-window-element-rotation: 55.24deg;
+  --sbb-loading-indicator-window-height: #{sbb.px-to-rem-build(18)};
+  --sbb-loading-indicator-window-element-width: #{sbb.px-to-rem-build(55)};
+}

package/loading-indicator-circle/loading-indicator-circle.global.scss

@@ -0,0 +1,19 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-circle-padding: #{sbb.px-to-rem-build(2)};
+  --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
+  --sbb-loading-indicator-circle-animated-width: 0.1875em;
+  --sbb-loading-indicator-circle-animated-height: 0.1875em;
+  --sbb-loading-indicator-circle-animated-border-radius: 50%;
+}
+
+@mixin base-forced-colors {
+  --sbb-loading-indicator-circle-animated-width: 50%;
+  --sbb-loading-indicator-circle-animated-height: 100%;
+  --sbb-loading-indicator-circle-animated-border-radius: 0;
+  --sbb-loading-indicator-circle-background: transparent;
+}

package/logo/logo.global.scss

@@ -0,0 +1,15 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-logo-panel-color: var(--sbb-color-brand);
+  --sbb-logo-signet-color: var(--sbb-color-white);
+  --sbb-logo-word-mark-color: light-dark(var(--sbb-color-black), var(--sbb-color-white));
+  --sbb-logo-aspect-ratio: 454 / 48;
+}
+
+@mixin base-forced-colors {
+  --sbb-logo-panel-color: ButtonText !important;
+  --sbb-logo-signet-color: Canvas !important;
+}

package/map-container/map-container.global.scss

@@ -0,0 +1,15 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-map-container-map-height-zero: #{sbb.px-to-rem-build(295)};
+  --sbb-map-container-map-height-small: #{sbb.px-to-rem-build(320)};
+  --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(400)};
+  --sbb-map-container-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
+}
+
+@mixin base-breakpoint-ultra {
+  --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(480)};
+}

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

@@ -0,0 +1,14 @@
+@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/menu/menu/menu.global.scss

@@ -0,0 +1,23 @@
+@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;
+
+  // 85vh is not an exact value but looks optimized for mobile view.
+  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
+  --sbb-menu-min-height: #{sbb.px-to-rem-build(48.5)};
+  --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);
+}
+
+@mixin base-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/message/message.global.scss

@@ -0,0 +1,20 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+}
+
+@mixin rules {
+  sbb-message {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      border-radius: var(--sbb-message-image-border-radius);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@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/mini-calendar/mini-calendar-month/mini-calendar-month.global.scss

@@ -0,0 +1,12 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-mini-calendar-month-offset: 0;
+  --sbb-mini-calendar-month-visibilty-year: hidden;
+  --sbb-mini-calendar-month-label-color: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-silver)
+  );
+}

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

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

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

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

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

@@ -0,0 +1,34 @@
+@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/notification/notification.global.scss

@@ -0,0 +1,53 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
+  --sbb-notification-border-width: var(--sbb-border-width-1x);
+  --sbb-notification-color: var(--sbb-color-2-negative-inverted);
+  --sbb-notification-icon-align-self: center;
+  --sbb-notification-margin: 0;
+  --sbb-notification-timing-function: ease-in;
+  --sbb-notification-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-s),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-notification-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-notification-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-notification-content-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin base-breakpoint-small {
+  --sbb-notification-icon-align-self: flex-start;
+  --sbb-notification-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+}

package/option/optgroup/optgroup.global.scss

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