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

package/title/title-common.global.scss

@@ -0,0 +1,7 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-title-color: var(--sbb-color-3);
+}

package/title/title.global.scss

@@ -0,0 +1,12 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
+  // Due to margin collapsing, the wrong paragraph space wins.
+  // To prevent the mistakenly large gap, we reset the paragraph space.
+  sbb-title + p {
+    margin-block-start: 0;
+  }
+}

package/toast/toast.global.scss

@@ -0,0 +1,18 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-toast-max-width: #{sbb.px-to-rem-build(400)};
+  --sbb-toast-animation-timing-function: ease;
+  --sbb-toast-text-color: var(--sbb-color-3-inverted);
+  --sbb-toast-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-toast-margin: var(--sbb-spacing-responsive-s);
+  --sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-toast-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toast-container-position: fixed;
+  --sbb-toast-horizontal-position: initial;
+  --sbb-toast-vertical-position: initial;
+  --sbb-toast-gap: var(--sbb-spacing-fixed-2x);
+}

package/toggle/toggle/toggle.global.scss

@@ -0,0 +1,44 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-toggle-height-s: var(--sbb-size-element-xxs);
+  --sbb-toggle-height-m: var(--sbb-size-element-m);
+  --sbb-toggle-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-toggle-height-m),
+        'lean': var(--sbb-toggle-height-s),
+      ),
+      $theme
+    )};
+  --sbb-toggle-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-toggle-padding-inline-m: var(--sbb-spacing-responsive-xs);
+  --sbb-toggle-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-toggle-padding-inline-m),
+        'lean': var(--sbb-toggle-padding-inline-s),
+      ),
+      $theme
+    )};
+  --sbb-toggle-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-background-inset: #{sbb.px-to-rem-build(2)};
+  --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-toggle-font-size: var(--sbb-text-font-size-m);
+  --sbb-toggle-grid-template-columns: auto auto;
+  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-selected-option-border-style: solid;
+  --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
+  --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
+}
+
+@mixin base-forced-colors {
+  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
+  --sbb-toggle-selected-option-border-color: Highlight;
+}
+
+@mixin rules {
+  sbb-toggle:has(:focus-visible) {
+    @include sbb.focus-outline;
+  }
+}

package/toggle/toggle-option/toggle-option.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
+  --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
+}

package/toggle-check/toggle-check.global.scss

@@ -0,0 +1,32 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-toggle-check-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-s),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-toggle-check-color: var(--sbb-color-2);
+  --sbb-toggle-check-checked-color: var(--sbb-color-primary);
+  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
+  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
+  --sbb-toggle-check-circle-border-style: solid;
+  --sbb-toggle-check-circle-diameter: #{sbb.px-to-rem-build(28)};
+  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
+  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
+  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
+}
+
+@mixin base-forced-colors {
+  --sbb-toggle-check-background-color: CanvasText;
+  --sbb-toggle-check-circle-background-color: Canvas;
+}

package/tooltip/tooltip.global.scss

@@ -0,0 +1,20 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-tooltip-animation-easing: ease-out;
+  --sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
+  --sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-tooltip-color: var(--sbb-color-2-inverted);
+  --sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);
+  --sbb-tooltip-border-radius: var(--sbb-border-radius-8x);
+  --sbb-tooltip-font-size: var(--sbb-text-font-size-xs);
+  --sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);
+  --sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-overlay-position-area: block-start;
+  --sbb-overlay-position-try-fallbacks:
+    block-start span-inline-end, block-start span-inline-start, block-end,
+    block-end span-inline-end, block-end span-inline-start;
+}

package/train/train-blocked-passage/train-blocked-passage.global.scss

@@ -0,0 +1,16 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
+  --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+}
+
+@mixin forced-colors {
+  --sbb-train-blocked-passage-background-color: CanvasText;
+  --sbb-train-blocked-passage-bar-color: Canvas;
+}

package/train/train-formation/train-formation.global.scss

@@ -0,0 +1,26 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
+  --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: light-dark(
+    var(--sbb-color-cement),
+    var(--sbb-color-smoke)
+  );
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
+  --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
+  --sbb-train-formation-text-color: var(--sbb-color-3);
+  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
+  --_sbb-train-formation-flex-direction: row;
+  --_sbb-train-formation-flex-direction-inverted: column;
+}
+
+@mixin forced-colors {
+  --sbb-train-formation-sector-line-color: CanvasText;
+}

package/train/train-wagon-common.global.scss

@@ -0,0 +1,42 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-train-wagon-shape-color: var(--sbb-color-3);
+  --sbb-train-wagon-vertical-gap: #{sbb.px-to-rem-build(2)};
+  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-main-icon-height: #{sbb.px-to-rem-build(20)};
+  --sbb-train-wagon-attribute-icon-gap: #{sbb.px-to-rem-build(2)};
+  --sbb-train-wagon-attribute-icon-height: #{sbb.px-to-rem-build(14)};
+  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
+  --sbb-train-wagon-attributes-max-width: #{sbb.px-to-rem-build(55)};
+  --sbb-train-wagon-attributes-mean-width: #{sbb.px-to-rem-build(28)};
+  --sbb-train-wagon-occupancy-height: #{sbb.px-to-rem-build(12)};
+  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
+  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
+  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
+  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
+
+  // We have to subtract the gap of the wagon (2px) from the value in Figma (32)px,
+  // as this is the min gap to the shape of the
+  // information content, but in Figma, the gap is not respected.
+  --sbb-train-wagon-information-min-width: #{sbb.px-to-rem-build(30)};
+  --sbb-train-wagon-class-dimension: #{sbb.px-to-rem-build(18)};
+  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
+  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
+  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
+  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
+  --sbb-train-wagon-class-font-weight: bold;
+  --sbb-train-wagon-class-first-thickness: #{sbb.px-to-rem-build(4)};
+  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
+  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
+}
+
+@mixin forced-colors {
+  --sbb-train-wagon-shape-color: CanvasText;
+}

package/visual-checkbox/visual-checkbox.global.scss

@@ -0,0 +1,38 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-visual-checkbox-dimension: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-checkbox-dimension-m),
+        'lean': var(--sbb-checkbox-dimension-xs),
+      ),
+      $theme
+    )};
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
+  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
+  --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
+  --sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
+  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
+  --sbb-visual-checkbox-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-visual-checkbox-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-visual-checkbox-background-color-negative-disabled: var(--sbb-background-color-3-negative);
+  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-color-disabled: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-style: solid;
+  --sbb-visual-checkbox-border-style-disabled: dashed;
+  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
+  --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
+}
+
+@mixin base-forced-colors {
+  --sbb-visual-checkbox-selection-color: Canvas;
+  --sbb-visual-checkbox-selection-color-negative: Canvas;
+  --sbb-visual-checkbox-selection-color-disabled: Canvas;
+  --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
+  --sbb-visual-checkbox-border-color: ButtonBorder;
+  --sbb-visual-checkbox-border-color-disabled: GrayText;
+  --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
+  --sbb-visual-checkbox-border-style-disabled: solid;
+}