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

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

@@ -0,0 +1,271 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --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;
+  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
+  --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-color: var(--sbb-color-3);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-form-field-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+  --sbb-form-field-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-form-field-input-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-form-field-label-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-xs),
+        'lean': var(--sbb-text-font-size-xxs),
+      ),
+      $theme
+    )};
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(10)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(8.5)},
+        'lean': #{sbb.px-to-rem-build(5.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-input-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': 0,
+        'lean': #{sbb.px-to-rem-build(-2)},
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-form-field-border-color: ButtonBorder;
+}
+
+@mixin base-breakpoint-large {
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(11)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(10.5)},
+        'lean': #{sbb.px-to-rem-build(5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8)},
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  :is(sbb-form-field, sbb-timetable-form-field) {
+    :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+      @include sbb.ellipsis;
+      @include sbb.input-reset;
+
+      // Form elements are naturally in 'display: inline-block'; however, since the form-element container
+      // is in 'display: flex' (class "sbb-form-field__input"), they are block-ified, as per documentation:
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts#the_flex_container
+      // Setting 'display: flex' should not change anything on lyne-elements, but is useful for consumers of lyne-angular,
+      // since the rule is valid for Angular custom components which have an inner form element.
+      display: flex;
+
+      // Use !important here to not interfere with Firefox focus ring definition
+      // which appears in normalize CSS of several frameworks.
+      outline: none !important;
+      overflow: var(--sbb-form-field-overflow, hidden);
+      width: 100%;
+      box-sizing: border-box;
+      color: var(--sbb-form-field-text-color);
+
+      // Fill color needed for Safari
+      -webkit-text-fill-color: var(--sbb-form-field-text-color);
+      opacity: 1;
+      background-color: transparent;
+
+      // To be more specific than the styles in normalize.scss we need to use !important
+      // TODO: Find a better solution
+      font-size: var(--sbb-form-field-input-text-size) !important;
+      letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
+      font-family: var(--sbb-typo-font-family) !important;
+      line-height: var(--sbb-typo-line-height-text) !important;
+
+      &::placeholder {
+        @include sbb.placeholder;
+      }
+    }
+
+    &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
+      // This covers the placeholder of the sbb-date-input and sbb-time-input
+    &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+      color: transparent !important;
+      -webkit-text-fill-color: transparent !important;
+
+      @media (forced-colors: active) {
+        color: Canvas !important;
+        -webkit-text-fill-color: Canvas !important;
+      }
+    }
+
+    // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+    &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+      -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    }
+
+    // Fix positioning issue for select which occurs in Safari
+    :where(select) {
+      vertical-align: middle;
+    }
+
+    :where(select, sbb-select) {
+      padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+    }
+
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      :where(input, sbb-date-input, sbb-time-input) {
+      // We shrink the input's height to support all types of inputs (especially type=number).
+      // Factor 1.25 ensures, letters are not cut.
+      height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+
+      // Avoids Safari bug, where text gets misaligned with type=number
+      line-height: 1 !important;
+
+      // We add the missing block spacing to fit the line-height
+      margin-block: calc(
+        0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
+      );
+    }
+
+    // This rule matches the analogous one in the form-field.scss,
+    // and it's useful for Angular custom components, assuming that they have an internal form element.
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
+      margin-block-end: #{sbb.px-to-rem-build(-2)};
+    }
+
+    :where(textarea) {
+      @include sbb.scrollbar;
+
+      position: relative;
+      resize: none;
+
+      // White-space break needed for Firefox
+      white-space: break-spaces;
+      overflow-y: auto;
+      min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+      height: 100%;
+    }
+
+    &[size='l'] :where(textarea) {
+      padding-block-end: #{sbb.px-to-rem-build(5.5)};
+    }
+
+    &[negative] :where(textarea) {
+      @include sbb.scrollbar-variables--color-negative;
+    }
+
+    &:has(
+      :is(
+        :is(input, textarea, select):user-invalid,
+        :state(interacted):invalid,
+        .ng-touched.ng-invalid,
+        .sbb-invalid
+      )
+    ),
+    :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
+      --sbb-form-field-border-color: var(--sbb-color-error);
+      --sbb-form-field-text-color: var(--sbb-color-error);
+
+      &[negative] {
+        --sbb-form-field-border-color: var(--sbb-color-red85);
+        --sbb-form-field-text-color: var(--sbb-color-red85);
+      }
+
+      @media (forced-colors: active) {
+        --sbb-form-field-border-color: LinkText !important;
+        --sbb-form-field-text-color: LinkText !important;
+      }
+    }
+  }
+
+  :is(sbb-form-field, sbb-timetable-form-field):state(empty):not(
+      :state(readonly),
+      :state(disabled)
+    ) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      --sbb-form-field-background-color: light-dark(
+        color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+        color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+      );
+
+      &[negative] {
+        --sbb-form-field-background-color: color-mix(
+          in srgb,
+          var(--sbb-color-peach) 10%,
+          var(--sbb-background-color-1-negative)
+        );
+      }
+    }
+  }
+
+  // In high contrast we set, regardless of any state, an Asterix (*) for required fields, to ensure the requirement is visible.
+  :is(sbb-form-field, sbb-timetable-form-field):not(:state(readonly), :state(disabled)) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      @media (forced-colors: active) {
+        label::after {
+          content: ' *';
+          color: Highlight;
+        }
+      }
+    }
+  }
+}

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);
+}