@siemens/element-theme 51.0.0-rc.1 → 51.0.0-rc.10

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,7 @@
 @use '../bootstrap/mixins/breakpoints';
 @use '../bootstrap/variables' as bootstrap-variables;
-@use '../variables';
-@use '../variables/elevation';
+@use '../variables/si-vars';
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -12,8 +12,8 @@
 .has-application-header,
 .has-navbar-fixed-top {
   padding-block-start: calc(
-    variables.$si-application-header-height + variables.$si-titlebar-spacing +
-      variables.$si-system-banner-spacing
+    si-vars.$si-application-header-height + si-vars.$si-titlebar-spacing +
+      si-vars.$si-system-banner-spacing
   );
 }
 
@@ -26,10 +26,10 @@
     var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)
   );
   z-index: zindex.$zindex-application-header;
-  background: semantic-tokens.$element-base-1;
-  min-block-size: variables.$si-application-header-height;
+  background: system-tokens.$si-sys-background-1;
+  min-block-size: si-vars.$si-application-header-height;
   align-items: stretch;
-  border-block-end: 1px solid semantic-tokens.$element-ui-4;
+  border-block-end: 1px solid system-tokens.$si-sys-border-4;
 
   // hide border when mobile styles are applied and either the dropdown-menu is shown or navigation is expanded
   &:has(.dropdown-menu.show),
@@ -42,7 +42,7 @@
     order: 2;
     flex-basis: 100%;
     box-shadow: none;
-    border-block-start: 1px solid semantic-tokens.$element-ui-4;
+    border-block-start: 1px solid system-tokens.$si-sys-border-4;
     margin-block: 0;
     border-radius: 0;
   }
@@ -80,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;
@@ -93,8 +93,8 @@
   flex-basis: 100%;
   display: flex;
   flex-flow: column;
-  padding-block: map.get(spacers.$spacers, 4);
-  border-block-start: 1px solid semantic-tokens.$element-ui-4;
+  padding-block: map.get(spacers.$spacers-block, 4);
+  border-block-start: 1px solid system-tokens.$si-sys-border-4;
 }
 
 .header-navigation {
@@ -106,13 +106,13 @@
 
   .header-item {
     &.active {
-      --si-header-item-border: #{semantic-tokens.$element-action-primary};
-      color: semantic-tokens.$element-action-primary;
+      --si-header-item-border: #{system-tokens.$si-sys-border-accent};
+      color: system-tokens.$si-sys-text-accent;
     }
 
     &:hover {
-      --si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
-      color: semantic-tokens.$element-action-primary-hover;
+      --si-header-item-border: #{system-tokens.$si-sys-border-accent-hover};
+      color: system-tokens.$si-sys-text-accent-hover;
     }
   }
 }
@@ -130,13 +130,13 @@
 }
 
 .header-toggle {
-  color: semantic-tokens.$element-text-primary;
+  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) {
-    background: semantic-tokens.$element-base-1-hover;
+    background: system-tokens.$si-sys-background-hover;
     text-decoration: none;
   }
 }
@@ -147,23 +147,23 @@
   flex-basis: 0;
   align-items: center;
   position: relative;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   inline-size: 100%;
   font-size: typography.$si-font-size-h4;
   line-height: typography.$si-line-height-h4;
   font-weight: typography.$si-font-weight-h4;
-  padding-block: 13px;
-  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;
   white-space: nowrap;
 
-  .icon-lg {
-    margin-block: -3px;
+  .icon {
+    margin-block: -0.125rem;
 
     ~ .item-title {
-      padding-inline-start: map.get(spacers.$spacers, 5);
+      padding-inline-start: map.get(spacers.$spacers-inline, 5);
     }
   }
 
@@ -176,8 +176,8 @@
   }
 
   &:hover {
-    color: semantic-tokens.$element-text-primary;
-    background-color: semantic-tokens.$element-base-1-hover;
+    color: system-tokens.$si-sys-text-primary;
+    background-color: system-tokens.$si-sys-background-hover;
     text-decoration: none;
   }
 
@@ -189,17 +189,17 @@
     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 {
-    color: semantic-tokens.$element-action-secondary-text;
+    color: system-tokens.$si-sys-text-accent;
     font-size: typography.$si-font-size-h5;
     font-weight: typography.$si-font-weight-h5;
     line-height: typography.$si-line-height-h5;
 
     &:hover {
-      color: semantic-tokens.$element-action-secondary-text-hover;
+      color: system-tokens.$si-sys-text-accent-hover;
     }
   }
 }
@@ -248,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,6 +3,7 @@
 @use '../variables/animations';
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/utilities';
@@ -10,11 +11,12 @@
 @use 'sass:map';
 
 $datatable-header-border-color: variables.$table-border-color !default;
-$datatable-header-background-color: transparent !default;
-$datatable-header-color: semantic-tokens.$element-text-primary !default;
+$datatable-header-background-color: variables.$table-bg !default;
+$datatable-header-color: system-tokens.$si-sys-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
-$datatable-summary-background-color: semantic-tokens.$element-base-4 !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;
@@ -22,12 +24,12 @@ $datatable-body-row-min-height: 48px !default;
 
 $datatable-ghost-cell-container-background: variables.$table-bg !default;
 
-$datatable-ghost-cell-strip-background: semantic-tokens.$element-base-1-hover !default;
+$datatable-ghost-cell-strip-background: system-tokens.$si-sys-background-hover !default;
 $datatable-ghost-cell-strip-background-image: linear-gradient(
   90deg,
-  semantic-tokens.$element-base-1-hover 0%,
-  semantic-tokens.$element-base-1-selected 25%,
-  semantic-tokens.$element-base-1-hover 50%
+  system-tokens.$si-sys-background-hover 0%,
+  system-tokens.$si-sys-background-active 25%,
+  system-tokens.$si-sys-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 
@@ -46,10 +48,26 @@ $datatable-ghost-cell-strip-radius: 0 !default;
   background-color: variables.$table-bg;
   border-radius: semantic-tokens.$element-radius-2;
 
+  // Compat for v26. This element hos no class.
+  [role='table'] {
+    flex: 1;
+  }
+
   &.table-custom {
     --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,
@@ -99,6 +117,24 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
   }
 
+  &.scroll-horz {
+    .datatable-row-left {
+      .datatable-body-cell:last-child,
+      .datatable-header-cell:last-child {
+        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        clip-path: inset(0 -8px 0 0);
+      }
+    }
+
+    .datatable-row-right {
+      .datatable-body-cell:first-child,
+      .datatable-header-cell:first-child {
+        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        clip-path: inset(0 0 0 -8px);
+      }
+    }
+  }
+
   // 'checkbox' selection
   :is(.datatable-header-cell, .datatable-body-cell) {
     label.datatable-checkbox {
@@ -106,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 {
@@ -160,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);
       }
     }
 
@@ -179,36 +215,15 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
-
-    .horizontal-overflow {
-      .datatable-row-left {
-        .datatable-body-cell:last-child,
-        .datatable-header-cell:last-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
-          clip-path: inset(0 -8px 0 0);
-        }
-      }
-
-      .datatable-row-right {
-        .datatable-body-cell:first-child,
-        .datatable-header-cell:first-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
-          clip-path: inset(0 0 0 -8px);
-        }
-      }
-    }
   }
 
   // Header Styles
   .datatable-header {
     padding: 0;
-    display: flex;
-    align-items: center;
     border-block-end: 4px solid $datatable-header-border-color;
     background-color: $datatable-header-background-color;
     color: $datatable-header-color;
     block-size: $datatable-header-height;
-    vertical-align: baseline;
     font-size: typography.$si-font-size-h5;
     font-weight: typography.$si-font-weight-h5;
     line-height: typography.$si-line-height-h5;
@@ -216,13 +231,13 @@ $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
     .resizeable:hover {
       .resize-handle {
-        background-color: semantic-tokens.$element-base-0;
+        background-color: system-tokens.$si-sys-background-0;
         inline-size: 2px;
         border-radius: 2px;
         padding-block: 0;
@@ -236,7 +251,6 @@ $datatable-ghost-cell-strip-radius: 0 !default;
 
     :is(.datatable-row-left, .datatable-row-right) {
       background-color: variables.$table-bg;
-      display: flex;
 
       .datatable-header-cell {
         flex-shrink: 0;
@@ -244,14 +258,14 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
 
     .datatable-header-cell:focus-visible {
-      @include focus.make-outline-focus();
+      @include focus.make-outline-focus-inside();
     }
   }
 
   // Summary Styles
   .datatable-summary-row .datatable-body-row {
     background-color: $datatable-summary-background-color;
-    font-weight: typography.$si-font-weight-title-2;
+    font-weight: typography.$si-font-weight-h5;
   }
 
   // Body Styles
@@ -293,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);
       }
     }
 
@@ -312,29 +326,24 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
-
-    .datatable-body-row:has(.datatable-row-group) {
-      min-inline-size: fit-content;
-    }
   }
 
   // Footer Styles
   .datatable-footer {
     display: flex;
     align-items: flex-end;
-    flex: 1;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
-    color: semantic-tokens.$element-text-secondary;
-    font-size: typography.$si-font-size-caption;
+    color: system-tokens.$si-sys-text-secondary;
+    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 {
@@ -344,7 +353,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         inset-inline-start: 0;
         inline-size: 100%;
         block-size: 1px;
-        background-color: var(--element-base-0);
+        background-color: system-tokens.$si-sys-background-0;
       }
     }
   }
@@ -360,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

@@ -1,8 +1,9 @@
 @use '../variables';
+@use '../selectors';
 
 /* stylelint-disable declaration-no-important */
 
-body:has(.cdk-drag-preview, .ui-draggable-dragging) {
+#{selectors.$body}:has(.cdk-drag-preview, .ui-draggable-dragging) {
   cursor: grabbing !important;
 
   .cdk-drop-list:not(.cdk-drop-list-dragging) {
@@ -22,8 +23,8 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-preview {
-  background-color: variables.$element-base-3 !important;
-  box-shadow: variables.$element-elevation-2 !important;
+  background-color: variables.$si-sys-background-3 !important;
+  box-shadow: variables.$si-sys-effects-shadow-3 !important;
   position: relative !important;
   inset-inline-start: -5px !important;
   inset-block-start: -10px !important;
@@ -36,7 +37,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-handle {
-  color: variables.$element-ui-2;
+  color: variables.$si-sys-text-secondary;
 }
 
 .cdk-drag-disabled {
@@ -70,7 +71,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 
 .cdk-drop-list:not([cdkDropListHasAnchor]) .cdk-drag-placeholder {
   opacity: 0.3;
-  background-color: variables.$element-base-information !important;
+  background-color: variables.$si-sys-background-information-subtle !important;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   min-block-size: 45px;
   font-size: 0; // hide direct text
@@ -92,7 +93,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 
 .droppable-container {
   &.drop-border {
-    border: 1px dashed variables.$element-ui-2;
+    border: 1px dashed variables.$si-sys-border-2;
   }
 
   .cdk-drag-placeholder {

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,12 +45,17 @@
     '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 {
   grid-area: title;
   margin-block-end: 0;
+  @include variables.si-font(
+    variables.$si-font-size-h3,
+    variables.$si-line-height-h3,
+    variables.$si-font-weight-h3
+  );
 
   &.si-layout-top-element + .si-layout-subtitle {
     margin-inline: var(--si-layout-header-first-element-offset, 0)
@@ -60,9 +65,9 @@
 
 .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.$element-text-secondary;
+  color: variables.$si-sys-text-secondary;
   @include variables.si-font(
     variables.$si-font-size-body,
     variables.$si-line-height-body,
@@ -72,16 +77,24 @@
 
 .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
   }
+
+  .si-layout-title {
+    @include variables.si-font(
+      variables.$si-font-size-h2,
+      variables.$si-line-height-h2,
+      variables.$si-font-weight-h2
+    );
+  }
 }
 
 @include breakpoints.media-breakpoint-up(md) {
@@ -98,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
   }

package/src/styles/components/_links.scss

@@ -1,4 +1,4 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/si-vars';
 
 @use 'sass:math';
@@ -10,7 +10,7 @@ $si-link-icon-line-height: math.div(14em, 16);
 $si-link-icon-spacing: math.div(4em, 16);
 
 a:active {
-  color: semantic-tokens.$element-action-primary-active;
+  color: system-tokens.$si-sys-text-accent-active;
   text-decoration: underline;
 }