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

package/alert/alert/alert.global.scss

@@ -0,0 +1,45 @@
+@use '../../core/styles/index' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-alert-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
+  --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-timing-function: ease-in;
+  --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
+  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
+  --sbb-alert-title-margin-block: 0;
+  --sbb-alert-font-size: var(--sbb-text-font-size-s);
+  --sbb-alert-gap: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-alert-close-icon-margin: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  // Use outline here to not influence content position.
+  // Due to overflow hidden of inner elements it's placed on host.
+  --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
+  --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
+}
+
+@mixin base-breakpoint-large {
+  --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
+  --sbb-alert-icon-size-l: #{sbb.px-to-rem-build(34)};
+}
+
+@mixin base-breakpoint-small {
+  --sbb-alert-close-button-divider-display: block;
+}

package/alert/alert-group/alert-group.global.scss

@@ -0,0 +1,8 @@
+@use '../../core/styles/index' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
+}

package/badge/badge.global.scss

@@ -0,0 +1,44 @@
+@use '../core/styles' as sbb;
+
+@mixin base-rules {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  border-radius: var(--sbb-border-radius-infinity);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xxs);
+  font-weight: bold;
+
+  // Transparent outline is visible in forced colors mode to ensure readability
+  outline: var(--sbb-border-width-1x) solid transparent;
+}
+
+@mixin rules {
+  [sbb-badge] {
+    --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
+
+    position: relative;
+
+    &::after {
+      @include base-rules;
+
+      content: attr(sbb-badge);
+      position: absolute;
+      inset-block-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where([sbb-badge-position='before'])::after {
+      inset-inline-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where(:not([sbb-badge-position]), [sbb-badge-position='after'])::after {
+      inset-inline-end: var(--sbb-badge-position-offset);
+    }
+  }
+}

package/breadcrumb/breadcrumb/breadcrumb.global.scss

@@ -0,0 +1,16 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
+  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
+  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
+  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
+}
+
+@mixin base-forced-colors {
+  --sbb-breadcrumb-color: ButtonText;
+  --sbb-breadcrumb-color-active: Highlight;
+}

package/breadcrumb/breadcrumb-group/breadcrumb-group.global.scss

@@ -0,0 +1,26 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-breadcrumb-group-wrap: nowrap;
+  --sbb-breadcrumb-group-visibility: hidden;
+  --sbb-breadcrumb-group-ellipsis-color: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-breadcrumb-group-ellipsis-background-color: transparent;
+  --sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
+  --sbb-breadcrumb-group-ellipsis-border-color: light-dark(
+    var(--sbb-color-silver),
+    var(--sbb-color-anthracite)
+  );
+}
+
+@mixin rules {
+  sbb-breadcrumb-group:not(:defined) {
+    display: block;
+    height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
+    overflow: hidden;
+  }
+}

package/button/common/button-common.global.scss

@@ -0,0 +1,58 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-button-min-height-size-m),
+        'lean': var(--sbb-button-min-height-size-s),
+      ),
+      $theme
+    )};
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-button-padding-inline-size-m),
+        'lean': var(--sbb-button-padding-inline-size-s),
+      ),
+      $theme
+    )};
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+}
+
+@mixin base-breakpoint-large {
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
+}

package/button/common/mini-button-common.global.scss

@@ -0,0 +1,18 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+}

package/button/mini-button-group/mini-button-group.global.scss

@@ -0,0 +1,35 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
+  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
+  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
+  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
+  --sbb-mini-button-group-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-min-height-m),
+        'lean': var(--sbb-mini-button-group-min-height-s),
+      ),
+      $theme
+    )};
+  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
+  --sbb-mini-button-group-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-padding-inline-m),
+        'lean': var(--sbb-mini-button-group-padding-inline-s),
+      ),
+      $theme
+    )};
+}

package/calendar/calendar/calendar.global.scss

@@ -0,0 +1,31 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-calendar-cell-background-color: transparent;
+  --sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);
+  --sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);
+  --sbb-calendar-cell-padding: #{sbb.px-to-rem-build(2)};
+  --sbb-calendar-cell-border-width: var(--sbb-border-width-2x);
+  --sbb-calendar-cell-disabled-height: #{sbb.px-to-rem-build(1.5)};
+  --sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
+  --sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-control-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
+  --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(44)};
+  --sbb-calendar-control-view-change-color: var(--sbb-color-3);
+  --sbb-calendar-control-view-change-background: var(--sbb-background-color-1);
+  --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
+    var(--sbb-spacing-fixed-2x);
+  --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-table-animation-shift: #{sbb.px-to-rem-build(0.1)};
+  --sbb-calendar-table-column-spaces: 12;
+  --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
+
+  // While changing views, there would be a few frames where the height of the calendar collapses to just
+  // the height of the controls and then grow back to the height of the next view.
+  // By using 0.1ms this can be avoided.
+  --sbb-calendar-table-animation-duration: 0.1ms;
+}

package/calendar/common/calendar-cell-base-element.global.scss

@@ -0,0 +1,23 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
+    var(--sbb-border-color-1-inverted);
+  --sbb-calendar-cell-color: var(--sbb-color-2);
+  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
+  --sbb-calendar-cell-justify-content: normal;
+  --sbb-calendar-cell-inset: #{sbb.px-to-rem-build(1)};
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-font-weight: unset;
+  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-cell-year-month-width: #{sbb.px-to-rem-build(77)};
+  --sbb-calendar-cell-year-month-height: #{sbb.px-to-rem-build(44)};
+  --sbb-calendar-day-width: #{sbb.px-to-rem-build(44)};
+  --sbb-calendar-day-height: #{sbb.px-to-rem-build(48)};
+  --sbb-calendar-day-extra-display: block;
+  --sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);
+  --sbb-calendar-day-crossed-out-top: 33%;
+  --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
+}

package/card/card/card.global.scss

@@ -0,0 +1,22 @@
+$theme: 'standard' !default;
+
+@use '../../core/styles' as sbb;
+@use '../card.library.global' as card with (
+  $theme: $theme
+);
+
+@mixin base {
+  @include card.variables--global;
+}
+
+@mixin base-forced-colors {
+  @include card.variables--global-forced-colors;
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-card .sbb-action {
+    pointer-events: all;
+  }
+}

package/card/card-badge/card-badge.global.scss

@@ -0,0 +1,19 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-card-badge-color: var(--sbb-color-2-inverted);
+  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
+  --sbb-card-badge-border-color: transparent;
+  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
+  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-badge-skew: skew(16deg, 0deg);
+}
+
+@mixin base-forced-colors {
+  --sbb-card-badge-border-display: block;
+  --sbb-card-badge-inline-border-display: none;
+}

package/card/card.library.global.scss

@@ -0,0 +1,203 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+// -----------------------------------------------------------------------------
+// Card: Mixins & CSS custom properties
+// -----------------------------------------------------------------------------
+@mixin variables--global {
+  @include variables--white;
+
+  --sbb-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-animation-easing: var(--sbb-animation-easing);
+  --sbb-card-border-style: solid;
+  --sbb-card-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-s),
+        'lean': var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-card-padding-block-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+  --sbb-card-with-badge-padding-block-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+}
+
+@mixin variables--global-forced-colors {
+  --sbb-card-border-color: CanvasText;
+  --sbb-card-border-width: var(--sbb-border-width-2x);
+}
+
+@mixin variables {
+  @include variables--global;
+
+  @media (forced-colors: active) {
+    @include variables--global-forced-colors;
+  }
+}
+
+@mixin variables--white {
+  --sbb-card-background-color: var(--sbb-background-color-1);
+  --sbb-card-border-color: transparent;
+}
+
+@mixin variables--milk {
+  --sbb-card-background-color: var(--sbb-background-color-3);
+  --sbb-card-border-color: transparent;
+}
+
+@mixin variables--transparent-bordered {
+  --sbb-card-background-color: transparent;
+  --sbb-card-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-card-border-width: var(--sbb-border-width-1x);
+  --sbb-focus-outline-color: inherit;
+}
+
+@mixin variables--transparent-bordered-dashed {
+  --sbb-card-background-color: transparent;
+  --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));
+  --sbb-card-border-width: var(--sbb-border-width-1x);
+  --sbb-card-border-style: dashed;
+  --sbb-focus-outline-color: inherit;
+}
+
+@mixin variables--active {
+  --sbb-card-border-color: var(--sbb-border-color-3);
+  --sbb-card-border-width: var(--sbb-border-width-2x);
+  --sbb-card-border-style: solid;
+
+  @media (forced-colors: active) {
+    --sbb-card-border-color: Highlight;
+  }
+}
+
+// Card sizing
+@mixin variables--spacing-default {
+  --sbb-card-padding-block: var(--sbb-card-padding-block-default);
+  --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);
+  --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);
+}
+
+@mixin variables--spacing-3x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin variables--spacing-xxxs-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin variables--spacing-xxxs-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+}
+
+@mixin variables--spacing-4x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin variables--spacing-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin variables--spacing-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+}
+
+@mixin variables--spacing-l {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
+}
+
+@mixin variables--button {
+  @media (forced-colors: active) {
+    --sbb-card-color: ButtonText;
+  }
+}
+
+@mixin variables--link {
+  @media (forced-colors: active) {
+    --sbb-card-color: LinkText;
+    --sbb-card-border-color: CanvasText;
+  }
+}
+
+@mixin rules {
+  // As the card has always a white/milk background, we have to fix the focus outline color
+  // to default color for cases where the card is used in a negative context.
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
+  --sbb-card-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-1x)
+  );
+
+  display: block;
+  position: relative;
+  padding-inline: var(--sbb-card-padding-inline);
+  padding-block: var(--sbb-card-padding-block);
+  border-radius: var(--sbb-card-border-radius);
+  background-color: var(--sbb-card-background-color);
+  box-shadow: none;
+  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);
+  color: var(--sbb-card-color);
+
+  // Apply border as after element to let it be inline
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: transparent;
+    border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);
+    border-radius: var(--sbb-card-border-radius);
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    // Propagate card text color to title text color to ensure correct color in forced colors mode
+    --sbb-title-color: var(--sbb-card-color);
+  }
+}
+
+@mixin state--hover {
+  @include sbb.hover-mq($hover: true) {
+    --sbb-card-hover-shift: #{sbb.px-to-rem-build(-2)};
+
+    box-shadow: var(--sbb-box-shadow-level-9-hard);
+
+    @media (forced-colors: active) {
+      --sbb-card-border-color: Highlight;
+    }
+  }
+}
+
+@mixin wrapper {
+  display: block;
+  height: 100%;
+}

package/carousel/carousel/carousel.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-carousel-background-color: var(--sbb-background-color-1);
+  --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+}

package/checkbox/checkbox.global.scss

@@ -0,0 +1,10 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --sbb-checkbox-label-icon-justify-content: space-between;
+  --sbb-checkbox-label-icon-flex-grow: 1;
+  --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
+}

package/checkbox/common/checkbox-common.global.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-checkbox-dimension-xs: #{sbb.px-to-rem-build(20)};
+  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-checkbox-dimension-m),
+        'lean': var(--sbb-checkbox-dimension-xs),
+      ),
+      $theme
+    )};
+  --sbb-checkbox-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-checkbox-label-color: var(--sbb-color-color-3);
+  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+}

package/chip/chip/chip.global.scss

@@ -0,0 +1,16 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-chip-background-color: var(--sbb-background-color-3);
+  --sbb-chip-background-color-active: var(--sbb-background-color-1);
+  --sbb-chip-background-color-hover: var(--sbb-background-color-1);
+  --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-chip-border-radius: var(--sbb-border-radius-2x);
+  --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-color-hover: var(--sbb-color-2);
+  --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-height: #{sbb.px-to-rem-build(24)};
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+}