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

package/visual-checkbox/{visual-checkbox.global.scss → _visual-checkbox.global.scss}

@@ -26,7 +26,7 @@ $theme: 'standard' !default;
   --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-visual-checkbox-selection-color: Canvas;
   --sbb-visual-checkbox-selection-color-negative: Canvas;
   --sbb-visual-checkbox-selection-color-disabled: Canvas;

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

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

@@ -1,16 +0,0 @@
-@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/button/common/mini-button-common.global.scss

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

@@ -1,35 +0,0 @@
-@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/common/calendar-cell-base-element.global.scss

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

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

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

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

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

package/container/container/container.global.scss

@@ -1,21 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-container-background-border-radius: 0;
-  --sbb-container-color: inherit;
-}
-
-@mixin rules {
-  sbb-container {
-    > [slot='image']:is(sbb-image, img),
-    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-      --sbb-image-object-fit: cover;
-
-      border-radius: var(--sbb-container-background-border-radius);
-      height: 100%;
-      position: absolute;
-    }
-  }
-}