@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.9

package/src/styles/bootstrap/forms/_form-control.scss

@@ -1,6 +1,7 @@
 @use '../../variables/focus';
 @use '../../variables/system-tokens';
 @use '../../variables/spacers';
+@use '../../variables/sizing';
 @use '../../variables/utilities';
 @use '../../variables/si-vars';
 @use '../variables';
@@ -16,7 +17,7 @@
   // + 3px (min padding between input and first action or validation icon)
   --si-input-padding-inline-end: calc(
     var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset, 0px) +
-      #{map.get(spacers.$spacers, 2) - variables.$input-border-width}
+      #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width}
   );
   display: block;
   inline-size: 100%;
@@ -40,14 +41,15 @@
     calc((#{variables.$input-height-inner} - #{variables.$form-feedback-icon-size}) * 0.5);
   background-position-x: right
     calc(
-      #{map.get(spacers.$spacers, 2) - variables.$input-border-width} +
+      map.get(spacers.$spacers-block, 2) - variables.$input-border-width +
         var(--si-action-icon-offset, 0px)
     );
 
   @include utilities.rtl {
     background-position-x: left
       calc(
-        map.get(spacers.$spacers, 1) + var(--si-action-icon-offset, variables.$input-border-width)
+        map.get(spacers.$spacers-block, 1) +
+          var(--si-action-icon-offset, variables.$input-border-width)
       );
   }
 
@@ -61,7 +63,9 @@
   // form-control must not add extra `padding-inline-end` for it.
   &:has(.form-control-actions) {
     background-image: none;
-    --si-input-padding-inline-end: #{map.get(spacers.$spacers, 2) - variables.$input-border-width};
+    --si-input-padding-inline-end: calc(
+      #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width}
+    );
   }
 
   &:autofill {
@@ -117,10 +121,11 @@
 .form-control:not(textarea):not(select[multiple]) {
   // force height to fix line-height issue in firefox
   block-size: variables.$input-height;
+  min-block-size: map.get(sizing.$sizing, 80);
 }
 
 .addon-second-icon {
-  --input-addon-inset-end: #{map.get(spacers.$spacers, 9)};
+  --input-addon-inset-end: #{map.get(spacers.$spacers-block, 9)};
 }
 
 // Wrapper for trailing actions (buttons, icons, unit labels) inside
@@ -135,7 +140,7 @@
   display: inline-flex;
   align-items: center;
   block-size: variables.$input-height-inner;
-  padding-inline-start: map.get(spacers.$spacers, 1);
+  padding-inline-start: map.get(spacers.$spacers-inline, 1);
 }
 
 .form-control .form-control-actions::before {
@@ -143,13 +148,13 @@
   margin-block: auto;
   inline-size: variables.$form-feedback-icon-size;
   block-size: variables.$form-feedback-icon-size;
-  padding-inline-end: map.get(spacers.$spacers, 1);
+  padding-inline-end: map.get(spacers.$spacers-inline, 1);
   content: var(--si-feedback-icon, none);
 }
 
 .form-control + .form-control-actions {
   position: absolute;
-  inset-inline-end: map.get(spacers.$spacers, 2);
+  inset-inline-end: map.get(spacers.$spacers-inline, 2);
   inset-block-start: variables.$input-border-width;
   z-index: 2;
 }
@@ -187,15 +192,16 @@ select:is(.form-control, .form-select):not([multiple]) {
     // + spacer-1(between arrow and validation)
     right
       calc(
-        #{map.get(spacers.$spacers, 2) - variables.$input-border-width +
-          map.get(spacers.$spacers, 1)} + #{si-vars.$si-icon-font-size}
+        map.get(spacers.$spacers-block, 2) - variables.$input-border-width +
+          map.get(spacers.$spacers-block, 1) + si-vars.$si-icon-font-size
       )
       center,
-    right map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
+    right calc(map.get(spacers.$spacers-block, 2) - variables.$input-border-width) top 50%;
   background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size;
 
   @include utilities.rtl {
-    background-position: left map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
+    background-position: left
+      calc(map.get(spacers.$spacers-inline, 2) - variables.$input-border-width) top 50%;
   }
 
   .app--dark & {
@@ -211,7 +217,7 @@ select:is(.form-control, .form-select)[multiple] {
   padding: 0;
 
   option {
-    padding: map.get(spacers.$spacers, 4);
+    padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4);
   }
 
   option:checked,

package/src/styles/bootstrap/forms/_form-file.scss

@@ -16,8 +16,8 @@
     border-color: inherit;
     border-block-width: 0;
     border-inline-width: 0 1px;
-    margin-block: -(variables.$input-padding-y);
-    margin-inline: -(variables.$input-padding-x) variables.$input-padding-x;
+    margin-block: calc(variables.$input-padding-y * -1);
+    margin-inline: calc(variables.$input-padding-x * -1) variables.$input-padding-x;
     block-size: inherit;
     padding-inline: variables.$btn-padding-x;
   }

package/src/styles/bootstrap/forms/_form-label.scss

@@ -14,7 +14,7 @@
 
 .form-label {
   display: inline-block;
-  padding-block: map.get(spacers.$spacers, 2);
+  padding-block: map.get(spacers.$spacers-block, 2);
 
   .text-end & {
     padding-inline-end: variables.$input-padding-x;

package/src/styles/bootstrap/forms/_form-layout.scss

@@ -6,7 +6,7 @@
 .si-form-input {
   display: flex;
   flex-direction: column;
-  margin-block-end: map.get(spacers.$spacers, 6);
+  margin-block-end: map.get(spacers.$spacers-block, 6);
 
   .form-item-content {
     flex-grow: 1;
@@ -15,7 +15,7 @@
 
 .si-form-fieldset {
   .form-label {
-    margin-block-end: map.get(spacers.$spacers, 2);
+    margin-block-end: map.get(spacers.$spacers-block, 2);
   }
 
   .form-check:not(.form-check-inline) {

package/src/styles/bootstrap/forms/_form-range.scss

@@ -1,4 +1,3 @@
-@use '../../variables/elevation';
 @use '../../variables/focus';
 @use '../../variables/system-tokens';
 

package/src/styles/bootstrap/forms/_validation.scss

@@ -62,9 +62,9 @@
   font-size: variables.$form-feedback-font-size;
   display: none;
   inline-size: 100%;
-  line-height: typography.$si-line-height-caption;
-  margin-block: map.get(spacers.$spacers, 1);
-  margin-inline: map.get(spacers.$spacers, 1);
+  line-height: typography.$si-line-height-body-sm;
+  margin-block: map.get(spacers.$spacers-block, 1);
+  margin-inline: map.get(spacers.$spacers-inline, 1);
 }
 
 @mixin form-validation-state-enh($state, $color, $icon, $text-color) {

package/src/styles/bootstrap/mixins/_badge-text.scss

@@ -7,11 +7,11 @@
 @mixin badge-text {
   min-inline-size: 0.875rem;
   border-radius: 0.4375rem;
-  font-size: typography.$si-font-size-caption;
+  font-size: typography.$si-font-size-body-sm;
   line-height: 0.875rem;
   padding-block: 0;
-  padding-inline: map.get(spacers.$spacers, 2);
+  padding-inline: map.get(spacers.$spacers-inline, 2);
   font-family: variables.$font-family-sans-serif;
-  font-weight: typography.$si-font-weight-semibold;
+  font-weight: typography.$si-font-weight-sbold;
   text-align: center;
 }

package/src/styles/bootstrap/mixins/_form-layout.scss

@@ -12,13 +12,13 @@ $form-col-layout-label-width: 16ch !default;
     display: flex;
     flex-direction: row;
     align-items: start;
-    column-gap: map.get(spacers.$spacers, 6);
+    column-gap: map.get(spacers.$spacers-inline, 6);
 
     > .form-label {
       flex: 0 0 var(--si-form-label-width, #{$form-col-layout-label-width});
       max-inline-size: var(--si-form-label-width, #{$form-col-layout-label-width});
       align-self: start;
-      padding-block: variables.$input-padding-y + variables.$input-border-width;
+      padding-block: variables.$input-padding-y-full;
       line-height: variables.$input-line-height;
 
       &:empty {
@@ -37,7 +37,7 @@ $form-col-layout-label-width: 16ch !default;
 
     .form-check-input {
       margin-inline-start: 0;
-      margin-inline-end: map.get(spacers.$spacers, 4);
+      margin-inline-end: map.get(spacers.$spacers-inline, 4);
     }
   }
 
@@ -46,7 +46,7 @@ $form-col-layout-label-width: 16ch !default;
 
     > .form-label {
       align-self: start;
-      padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important
+      padding-block: map.get(spacers.$spacers-block, 1) 0 !important; // stylelint-disable-line declaration-no-important
       margin-block-end: 0 !important; // stylelint-disable-line declaration-no-important
     }
   }

package/src/styles/bootstrap/mixins/_grid.scss

@@ -133,15 +133,15 @@
       // Gutters
       //
       // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in variables.$gutters {
+      @each $key, $block-value in variables.$gutters-block {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --#{variables.$variable-prefix}gutter-x: #{$value};
+          --#{variables.$variable-prefix}gutter-x: #{map.get(variables.$gutters-inline, $key)};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --#{variables.$variable-prefix}gutter-y: #{$value};
+          --#{variables.$variable-prefix}gutter-y: #{$block-value};
         }
       }
     }

package/src/styles/bootstrap/mixins/_utilities.scss

@@ -17,6 +17,7 @@
 
   @each $key, $value in $values {
     $properties: map.get($utility, property);
+    $property-values: map.get($utility, property-values);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
     @if meta.type-of($properties) == 'string' {
@@ -45,7 +46,9 @@
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: '';
     @if ($key) {
-      @if ($property-class == '' and $infix == '') {
+      @if map.get($utility, negative) {
+        $property-class-modifier: '-n' + $key;
+      } @else if ($property-class == '' and $infix == '') {
         $property-class-modifier: $key;
       } @else {
         $property-class-modifier: '-' + $key;
@@ -79,14 +82,22 @@
                 --#{variables.$variable-prefix}#{$local-var}: #{$value};
               }
             }
-            #{$property}: $value $important;
+            @if $property-values {
+              #{$property}: map.get(map.get($property-values, $property), $key) $important;
+            } @else {
+              #{$property}: $value $important;
+            }
           }
         }
 
         @each $pseudo in $state {
           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
             @each $property in $properties {
-              #{$property}: $value $important;
+              @if $property-values {
+                #{$property}: map.get(map.get($property-values, $property), $key) $important;
+              } @else {
+                #{$property}: $value $important;
+              }
             }
           }
         }

package/src/styles/components/_application-header.scss

@@ -1,7 +1,6 @@
 @use '../bootstrap/mixins/breakpoints';
 @use '../bootstrap/variables' as bootstrap-variables;
 @use '../variables/si-vars';
-@use '../variables/elevation';
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
@@ -81,7 +80,7 @@
 .application-name {
   font-size: typography.$si-font-size-body-lg;
   font-weight: typography.$si-font-weight-body-lg;
-  padding: map.get(spacers.$spacers, 5);
+  padding: map.get(spacers.$spacers-block, 5) map.get(spacers.$spacers-inline, 5);
   margin: 0;
   line-height: normal;
   white-space: nowrap;
@@ -94,7 +93,7 @@
   flex-basis: 100%;
   display: flex;
   flex-flow: column;
-  padding-block: map.get(spacers.$spacers, 4);
+  padding-block: map.get(spacers.$spacers-block, 4);
   border-block-start: 1px solid system-tokens.$si-sys-border-4;
 }
 
@@ -133,7 +132,7 @@
 .header-toggle {
   color: system-tokens.$si-sys-text-primary;
   border: 0;
-  padding: map.get(spacers.$spacers, 5);
+  padding: map.get(spacers.$spacers-block, 5) map.get(spacers.$spacers-inline, 5);
   background-color: transparent; // remove default button style
 
   &:is(:hover, .show, :active) {
@@ -153,8 +152,8 @@
   font-size: typography.$si-font-size-h4;
   line-height: typography.$si-line-height-h4;
   font-weight: typography.$si-font-weight-h4;
-  padding-block: map.get(spacers.$spacers, 5);
-  padding-inline: map.get(spacers.$spacers, 5);
+  padding-block: map.get(spacers.$spacers-block, 5);
+  padding-inline: map.get(spacers.$spacers-inline, 5);
   background: none;
   box-shadow: none;
   border: 0;
@@ -164,7 +163,7 @@
     margin-block: -0.125rem;
 
     ~ .item-title {
-      padding-inline-start: map.get(spacers.$spacers, 5);
+      padding-inline-start: map.get(spacers.$spacers-inline, 5);
     }
   }
 
@@ -190,7 +189,7 @@
     background: var(--si-header-item-border);
 
     block-size: 100%;
-    inline-size: map.get(spacers.$spacers, 2);
+    inline-size: map.get(spacers.$spacers-inline, 2);
   }
 
   &.header-selection-item {
@@ -249,7 +248,7 @@
 
         &::after {
           inline-size: 100%;
-          block-size: map.get(spacers.$spacers, 2);
+          block-size: map.get(spacers.$spacers-block, 2);
         }
       }
     }

package/src/styles/components/_datatable.scss

@@ -3,8 +3,8 @@
 @use '../variables/animations';
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
-@use '../variables/spacers';
 @use '../variables/system-tokens';
+@use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/utilities';
 
@@ -16,6 +16,7 @@ $datatable-header-color: system-tokens.$si-sys-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
 $datatable-summary-background-color: system-tokens.$si-sys-background-2 !default;
+$datatable-striped-background-color: variables.$table-striped-bg !default;
 
 $datatable-header-height: 40px !default;
 $datatable-cell-min-width: 40px !default;
@@ -27,7 +28,7 @@ $datatable-ghost-cell-strip-background: system-tokens.$si-sys-background-hover !
 $datatable-ghost-cell-strip-background-image: linear-gradient(
   90deg,
   system-tokens.$si-sys-background-hover 0%,
-  system-tokens.$si-sys-background-selected 25%,
+  system-tokens.$si-sys-background-active 25%,
   system-tokens.$si-sys-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
@@ -56,6 +57,17 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     --si-datatable-row-min-height: 24px;
   }
 
+  // Zebra striping, the counterpart of `.table-striped` for HTML tables.
+  // Interactive states are excluded so that hover, active and focus keep precedence.
+  &.table-striped {
+    .datatable-row-wrapper .datatable-body-row.datatable-row-odd:not(.active, :hover, :focus) {
+      &,
+      :is(.datatable-row-left, .datatable-row-right) {
+        background-color: $datatable-striped-background-color;
+      }
+    }
+  }
+
   // any kind of selection: apply a row hover state
   &:is(
     .single-selection,
@@ -130,7 +142,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       inline-size: 13px;
       block-size: 13px;
       margin-block: 0;
-      margin-inline: 0 map.get(spacers.$spacers, 6);
+      margin-inline: 0 map.get(spacers.$spacers-inline, 6);
       position: relative;
 
       > input {
@@ -184,11 +196,11 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       }
 
       &:first-child {
-        padding-inline-start: map.get(spacers.$spacers, 5);
+        padding-inline-start: map.get(spacers.$spacers-inline, 5);
       }
 
       &:last-child {
-        padding-inline-end: map.get(spacers.$spacers, 5);
+        padding-inline-end: map.get(spacers.$spacers-inline, 5);
       }
     }
 
@@ -219,7 +231,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
 
     .sort-btn {
       color: $datatable-header-color !important; // stylelint-disable-line declaration-no-important
-      margin-inline-start: map.get(spacers.$spacers, 1);
+      margin-inline-start: map.get(spacers.$spacers-inline, 1);
     }
 
     // Resizable handle
@@ -295,7 +307,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-group-cell {
         display: flex;
         align-items: center;
-        padding-inline-start: map.get(spacers.$spacers, 6);
+        padding-inline-start: map.get(spacers.$spacers-inline, 6);
       }
     }
 
@@ -323,15 +335,15 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
     color: system-tokens.$si-sys-text-secondary;
-    font-size: typography.$si-font-size-caption;
+    font-size: typography.$si-font-size-body-sm;
     margin-block-start: -1px;
     position: relative;
     z-index: 11;
 
     .datatable-footer-inner {
       background-color: variables.$table-bg;
-      padding-inline-start: map.get(spacers.$spacers, 6);
-      padding-inline-end: map.get(spacers.$spacers, 4);
+      padding-inline-start: map.get(spacers.$spacers-inline, 6);
+      padding-inline-end: map.get(spacers.$spacers-inline, 4);
       position: relative;
 
       &::before {
@@ -357,7 +369,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
   .datatable-tree-button {
     border: 0;
     background: none;
-    margin-inline: map.get(spacers.$spacers, 2);
+    margin-inline: map.get(spacers.$spacers-inline, 2);
     padding: 0;
 
     &[disabled] {

package/src/styles/components/_drag_drop.scss

@@ -24,7 +24,7 @@
 
 .cdk-drag-preview {
   background-color: variables.$si-sys-background-3 !important;
-  box-shadow: variables.$element-elevation-2 !important;
+  box-shadow: variables.$si-sys-effects-shadow-3 !important;
   position: relative !important;
   inset-inline-start: -5px !important;
   inset-block-start: -10px !important;

package/src/styles/components/_elevation.scss

@@ -1,21 +1,26 @@
-@use '../variables/elevation';
+@use '../variables/system-tokens';
 
-.shadow-none {
+// @deprecated Use .shadow-none instead.
+.elevation-none {
   box-shadow: none;
 }
 
+// @deprecated Use .shadow-1 instead.
 .elevation-1 {
-  box-shadow: elevation.$element-elevation-1;
+  box-shadow: system-tokens.$si-sys-effects-shadow-1;
 }
 
+// @deprecated Use .shadow-2 instead.
 .elevation-2 {
-  box-shadow: elevation.$element-elevation-2;
+  box-shadow: system-tokens.$si-sys-effects-shadow-2;
 }
 
+// @deprecated Use .shadow-3 instead.
 .elevation-3 {
-  box-shadow: elevation.$element-elevation-3;
+  box-shadow: system-tokens.$si-sys-effects-shadow-3;
 }
 
+// @deprecated Use .shadow-4 instead.
 .elevation-4 {
-  box-shadow: elevation.$element-elevation-4;
+  box-shadow: system-tokens.$si-sys-effects-shadow-4;
 }

package/src/styles/components/_layout.scss

@@ -10,11 +10,11 @@
 }
 
 .si-layout-main-padding {
-  padding-block: map.get(variables.$spacers, 6) 0;
-  padding-inline: map.get(variables.$spacers, 6);
+  padding-block: map.get(variables.$spacers-block, 6) 0;
+  padding-inline: map.get(variables.$spacers-inline, 6);
 
   @include breakpoints.media-breakpoint-up(md) {
-    padding-inline: map.get(variables.$spacers, 9);
+    padding-inline: map.get(variables.$spacers-inline, 9);
   }
 }
 
@@ -25,16 +25,16 @@
 }
 
 .si-layout-status {
-  margin-block-end: map.get(variables.$spacers, 4);
-  margin-block-start: -#{map.get(variables.$spacers, 4)};
+  margin-block-end: map.get(variables.$spacers-block, 4);
+  margin-block-start: map.get(variables.$negative-spacers-block, 4);
 }
 
 .si-layout-breadcrumb {
   display: block;
-  margin-block-end: map.get(variables.$spacers, 4);
+  margin-block-end: map.get(variables.$spacers-block, 4);
 
   &.si-layout-top-element {
-    margin-block-end: map.get(variables.$spacers, 6);
+    margin-block-end: map.get(variables.$spacers-block, 6);
   }
 }
 
@@ -45,7 +45,7 @@
     'title title'
     'subtitle subtitle'
     'actions actions';
-  margin-block-end: map.get(variables.$spacers, 8);
+  margin-block-end: map.get(variables.$spacers-block, 8);
 }
 
 .si-layout-title {
@@ -65,7 +65,7 @@
 
 .si-layout-subtitle {
   grid-area: subtitle;
-  margin-block-start: map.get(variables.$spacers, 4);
+  margin-block-start: map.get(variables.$spacers-block, 4);
   margin-block-end: 0;
   color: variables.$si-sys-text-secondary;
   @include variables.si-font(
@@ -77,13 +77,13 @@
 
 .si-layout-actions {
   grid-area: actions;
-  margin-block-start: map.get(variables.$spacers, 6);
+  margin-block-start: map.get(variables.$spacers-block, 6);
 }
 
 @include breakpoints.media-breakpoint-up(sm) {
   .si-layout-breadcrumb {
     margin-block-end: map.get(
-      variables.$spacers,
+      variables.$spacers-block,
       4
     ) !important; // stylelint-disable-line declaration-no-important
   }
@@ -111,7 +111,7 @@
   .si-layout-status {
     margin-block-start: 0;
     margin-block-end: map.get(
-      variables.$spacers,
+      variables.$spacers-block,
       6
     ) !important; // stylelint-disable-line declaration-no-important
   }