@sbb-esta/lyne-elements-dev 5.10.0-dev.1791359253 → 5.10.0-dev.1791362600

package/lean-safety-theme.css

@@ -1382,28 +1382,136 @@ summary {
   --sbb-error-icon-size: 1.0625rem;
   --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
+  --sbb-form-field-background-color-required-highlight: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
+  --sbb-form-field-background-color-required-highlight: 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))
+  );
+  --sbb-form-field-background-color-required-highlight-negative: color-mix(
+    in srgb,
+    var(--sbb-color-peach) 10%,
+    var(--sbb-background-color-1-negative)
+  );
   --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-border-color-disabled: var(--sbb-color-graphite);
+  --sbb-form-field-border-color-disabled: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-focus: var(--sbb-border-color-3);
+  --sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
+  --sbb-form-field-border-color-error: var(--sbb-color-error);
+  --sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
+  --sbb-form-field-border-color-readonly: var(--sbb-color-graphite);
+  --sbb-form-field-border-color-readonly: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
   --sbb-form-field-label-color: var(--sbb-color-metal);
   --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-label-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-label-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-readonly: var(--sbb-color-granite);
+  --sbb-form-field-label-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
   --sbb-form-field-prefix-color: var(--sbb-color-metal);
   --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-prefix-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-focus: var(--sbb-color-3);
+  --sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-prefix-color-readonly: var(--sbb-color-granite);
+  --sbb-form-field-prefix-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
+  --sbb-form-field-border-style: solid;
+  --sbb-form-field-border-style-disabled: dashed;
+  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
+  --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
+  --sbb-form-field-color: var(--sbb-color-3);
+  --sbb-form-field-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-min-width: 9.375rem;
+  --sbb-form-field-max-width: 18.75rem;
   --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-text-color-disabled: var(--sbb-color-3);
+  --sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-text-color-error: var(--sbb-color-error);
+  --sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
   --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-arrow-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-placeholder-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-placeholder-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
   --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
   --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
-  --sbb-form-field-min-height: var(--sbb-size-element-xs);
-  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
-  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);
-  --_sbb-form-field-label-to-input-overlapping: 0.625rem;
-  --_sbb-form-field-floating-label-transform: 0.34375rem;
-  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;
-  --_sbb-form-field-input-margin-block-end: -0.125rem;
+  --sbb-form-field-min-height-s: var(--sbb-size-element-xs);
+  --sbb-form-field-min-height-m: var(--sbb-size-element-m);
+  --sbb-form-field-min-height-l: var(--sbb-size-element-l);
+  --sbb-form-field-min-height: var(--sbb-form-field-min-height-s);
+  --sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
+  --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-s);
+  --sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
+  --sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
+  --sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
+  --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-s);
+  --sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
+  --sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
+  --sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
+  --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-s);
+  --_sbb-form-field-label-to-input-overlapping-s: 0.625rem;
+  --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);
+  --_sbb-form-field-floating-label-transform-s: 0.34375rem;
+  --_sbb-form-field-floating-label-transform-m: 0.53125rem;
+  --_sbb-form-field-floating-label-transform-l: 0.53125rem;
+  --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);
+  --_sbb-form-field-spacer-margin-block-end-s: -0.53125rem;
+  --_sbb-form-field-spacer-margin-block-end-m: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+  );
+  --_sbb-form-field-spacer-margin-block-end-l: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+  );
+  --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);
+  --_sbb-form-field-input-margin-block-end-s: -0.125rem;
+  --_sbb-form-field-input-margin-block-end-m: 0;
+  --_sbb-form-field-input-margin-block-end-l: 0;
+  --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-s);
   --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);
@@ -2041,6 +2149,23 @@ summary {
     --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
+    --sbb-form-field-border-color-disabled: GrayText;
+    --sbb-form-field-border-color-disabled-negative: GrayText;
+    --sbb-form-field-border-color-negative: ButtonBorder;
+    --sbb-form-field-border-color-focus: Highlight;
+    --sbb-form-field-border-color-focus-negative: Highlight;
+    --sbb-form-field-border-color-error: LinkText;
+    --sbb-form-field-border-color-error-negative: LinkText;
+    --sbb-form-field-label-color-disabled: GrayText;
+    --sbb-form-field-label-color-disabled-negative: GrayText;
+    --sbb-form-field-prefix-color-disabled: GrayText;
+    --sbb-form-field-prefix-color-disabled-negative: GrayText;
+    --sbb-form-field-prefix-color-focus: Highlight;
+    --sbb-form-field-prefix-color-focus-negative: Highlight;
+    --sbb-form-field-text-color-disabled: GrayText;
+    --sbb-form-field-text-color-disabled-negative: GrayText;
+    --sbb-form-field-text-color-error: LinkText;
+    --sbb-form-field-text-color-error-negative: LinkText;
     --sbb-header-action-border-color: CanvasText;
     --sbb-header-action-color: LinkText;
     --sbb-header-action-active-border-width: 0;
@@ -2163,9 +2288,22 @@ summary {
       )
       var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-flip-card-min-height: 20rem;
-    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;
-    --_sbb-form-field-floating-label-transform: 0.3125rem;
-    --_sbb-form-field-spacer-margin-block-end: -0.5rem;
+    --_sbb-form-field-label-to-input-overlapping-s: 0.6875rem;
+    --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);
+    --_sbb-form-field-floating-label-transform-s: 0.3125rem;
+    --_sbb-form-field-floating-label-transform-m: 0.65625rem;
+    --_sbb-form-field-floating-label-transform-l: 0.65625rem;
+    --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);
+    --_sbb-form-field-spacer-margin-block-end-s: -0.5rem;
+    --_sbb-form-field-spacer-margin-block-end-m: calc(
+      -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+    );
+    --_sbb-form-field-spacer-margin-block-end-l: calc(
+      -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+    );
+    --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);
     --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
     --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
     --sbb-menu-max-width: 20rem;
@@ -3061,10 +3199,8 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  -webkit-text-fill-color: var(--sbb-color-granite);
-  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  color: var(--sbb-form-field-placeholder-color-disabled);
+  -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
   vertical-align: middle;
@@ -3143,42 +3279,27 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
-  --sbb-form-field-border-color: var(--sbb-color-error);
-  --sbb-form-field-text-color: var(--sbb-color-error);
+  --sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
+  --sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
 }
 :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid])[negative] {
-  --sbb-form-field-border-color: var(--sbb-color-red85);
-  --sbb-form-field-text-color: var(--sbb-color-red85);
-}
-@media (forced-colors: active) {
-  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
-  :is(:state(interacted),[state--interacted]):invalid,
-  .ng-touched.ng-invalid,
-  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
-    --sbb-form-field-border-color: LinkText !important;
-    --sbb-form-field-text-color: LinkText !important;
-  }
+  --sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
+  --sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
 }
 
 :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
-  --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
-  --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))
-  );
+  --sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
 }
 :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
-  --sbb-form-field-background-color: color-mix(
-    in srgb,
-    var(--sbb-color-peach) 10%,
-    var(--sbb-background-color-1-negative)
+  --sbb-form-field-background-color: var(
+    --sbb-form-field-background-color-required-highlight-negative
   );
 }
 
@@ -3843,9 +3964,10 @@ sbb-toggle:has(:focus-visible) {
 }
 
 .sbb-input {
+  --_sbb-input-border-width: var(--sbb-form-field-border-width);
   display: inline-block;
-  min-width: 9.375rem;
-  width: min(18.75rem, 100%);
+  min-width: var(--sbb-form-field-min-width);
+  width: min(var(--sbb-form-field-max-width), 100%);
   min-height: var(--sbb-form-field-min-height);
   max-height: var(--sbb-form-field-max-height);
   appearance: none;
@@ -3858,9 +3980,9 @@ sbb-toggle:has(:focus-visible) {
   color: var(--sbb-form-field-text-color);
   -webkit-text-fill-color: var(--sbb-form-field-text-color);
   opacity: 1;
-  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
+  border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
   border-radius: var(--sbb-form-field-border-radius);
-  padding-inline: var(--sbb-form-field-padding-inline);
+  padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
   font-size: var(--sbb-form-field-input-text-size) !important;
   font-weight: normal;
   letter-spacing: var(--sbb-letter-spacing-text) !important;
@@ -3874,62 +3996,39 @@ sbb-toggle:has(:focus-visible) {
 }
 
 .sbb-input:read-only, .sbb-input:disabled {
-  --sbb-form-field-background-color: var(--sbb-background-color-3);
-  --sbb-form-field-border-color: var(--sbb-color-graphite);
-  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
+  background-color: var(--sbb-form-field-background-color-disabled);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:read-only, .sbb-input:disabled {
-    --sbb-form-field-border-color: ButtonBorder;
-  }
-}
 .sbb-input:disabled {
-  --sbb-form-field-border-style: dashed;
+  border-style: var(--sbb-form-field-border-style-disabled);
+  color: var(--sbb-form-field-text-color-disabled);
+  border-color: var(--sbb-form-field-border-color-disabled);
 }
 
 .sbb-input:disabled::placeholder {
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  -webkit-text-fill-color: var(--sbb-color-granite);
-  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  color: var(--sbb-form-field-placeholder-color-disabled);
+  -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:disabled {
-    --sbb-form-field-label-color: GrayText !important;
-    --sbb-form-field-prefix-color: GrayText !important;
-    --sbb-form-field-text-color: GrayText !important;
-    --sbb-form-field-border-color: GrayText !important;
-  }
+.sbb-input:read-only {
+  border-color: var(--sbb-form-field-border-color-readonly);
 }
+
 .sbb-input:focus-visible {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
   outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));
 }
 
 .sbb-input:focus {
-  --sbb-form-field-border-color: var(--sbb-border-color-3);
-  --sbb-form-field-border-width: var(--sbb-border-width-2x);
+  --_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
+  border-color: var(--sbb-form-field-border-color-focus);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:focus {
-    --sbb-form-field-border-color: Highlight;
-    --sbb-form-field-prefix-color: Highlight;
-  }
-}
 .sbb-input:user-invalid {
-  --sbb-form-field-border-color: var(--sbb-color-error);
-  --sbb-form-field-text-color: var(--sbb-color-error);
+  border-color: var(--sbb-form-field-border-color-error);
+  color: var(--sbb-form-field-text-color-error);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:user-invalid {
-    --sbb-form-field-border-color: LinkText !important;
-    --sbb-form-field-text-color: LinkText !important;
-  }
-}
 .sbb-figure {
   display: grid;
   grid-template-rows: auto;