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

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

@@ -1,5 +1,5 @@
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
 @use '../../variables/utilities';
 @use '../../variables/si-vars';
@@ -8,8 +8,8 @@
 @use 'sass:map';
 
 :is(.form-control, .form-select) {
-  --border-color: #{semantic-tokens.$element-ui-2};
-  --si-textarea-mask: #{semantic-tokens.$element-base-1};
+  --border-color: #{system-tokens.$si-sys-border-2};
+  --si-textarea-mask: #{system-tokens.$si-sys-background-1};
   // Formula:
   // (1.25rem / 0px) (feedback icon size)
   // + (action-size / 0px) (action-offset includes a padding)
@@ -27,8 +27,8 @@
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
   line-height: variables.$input-line-height;
-  color: semantic-tokens.$element-text-primary;
-  background-color: semantic-tokens.$element-base-1;
+  color: system-tokens.$si-sys-text-primary;
+  background-color: system-tokens.$si-sys-background-1;
   background-clip: padding-box;
   border: variables.$input-border-width solid var(--border-color);
   border-radius: variables.$input-border-radius;
@@ -65,32 +65,32 @@
   }
 
   &:autofill {
-    background: semantic-tokens.$element-base-information;
+    background: system-tokens.$si-sys-background-information-subtle;
   }
 
   &:is(:focus, :hover, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-    --border-color: #{semantic-tokens.$element-ui-1};
-    --si-textarea-mask: #{semantic-tokens.$element-base-input-experimental};
-    background-color: semantic-tokens.$element-base-input-experimental;
+    --border-color: #{system-tokens.$si-sys-border-1};
+    --si-textarea-mask: #{system-tokens.$si-sys-background-4};
+    background-color: system-tokens.$si-sys-background-4;
   }
 
   &:is(.readonly, [readonly]) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-primary;
+      color: system-tokens.$si-sys-text-primary;
     }
   }
 
   &:is(.disabled, :disabled) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
 
     &::placeholder {
@@ -216,7 +216,7 @@ select:is(.form-control, .form-select)[multiple] {
 
   option:checked,
   &:not(:disabled) option:not(:disabled):hover {
-    background: semantic-tokens.$element-base-0;
-    color: semantic-tokens.$element-text-active;
+    background: system-tokens.$si-sys-background-0;
+    color: system-tokens.$si-sys-text-accent;
   }
 }

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

@@ -1,4 +1,4 @@
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../variables';
 
 .form-control {
@@ -11,8 +11,8 @@
   }
 
   &::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text;
-    background: semantic-tokens.$element-action-secondary;
+    color: system-tokens.$si-sys-text-on-accent-secondary;
+    background: system-tokens.$si-sys-background-accent-secondary;
     border-color: inherit;
     border-block-width: 0;
     border-inline-width: 0 1px;
@@ -23,12 +23,12 @@
   }
 
   &:hover::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text-hover;
-    background: semantic-tokens.$element-action-secondary-hover;
+    color: system-tokens.$si-sys-text-on-accent-secondary-hover;
+    background: system-tokens.$si-sys-background-accent-secondary-hover;
   }
 
   &:active::file-selector-button {
-    color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-secondary-active;
+    color: system-tokens.$si-sys-text-on-accent-secondary-active;
+    background: system-tokens.$si-sys-background-accent-secondary-active;
   }
 }

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

@@ -1,4 +1,40 @@
+@use 'sass:map';
 @use '../mixins/form-layout';
+@use '../../variables/spacers';
+
+.si-form-fieldset,
+.si-form-input {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: map.get(spacers.$spacers, 6);
+
+  .form-item-content {
+    flex-grow: 1;
+  }
+}
+
+.si-form-fieldset {
+  .form-label {
+    margin-block-end: map.get(spacers.$spacers, 2);
+  }
+
+  .form-check:not(.form-check-inline) {
+    display: block;
+  }
+}
+
+:is(.si-form-fieldset, .si-form-input) .form-label:empty {
+  display: none;
+}
+
+// Maintain compatibility with the old si-form-item style which allows wrapping multiple checkboxes.
+:is(.si-form-fieldset, .si-form-input).form-check:not(.form-check-inline) {
+  display: block;
+}
+
+:is(.si-form-fieldset, .si-form-input).form-check:has(.form-check) {
+  padding-block: 0;
+}
 
 .form-col-layout {
   @include form-layout.form-col-layout;

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

@@ -1,8 +1,8 @@
 @use '../../variables/elevation';
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 
-$track-color: semantic-tokens.$element-ui-4 !default;
+$track-color: system-tokens.$si-sys-border-4 !default;
 $track-height: 4px !default;
 $thumb-size: 24px !default;
 
@@ -15,36 +15,36 @@ $thumb-size: 24px !default;
 
 @mixin range-thumb {
   box-shadow: var(--thumb-shadow);
-  border: 1px solid semantic-tokens.$element-action-secondary-border;
+  border: 1px solid system-tokens.$si-sys-border-accent;
   block-size: $thumb-size;
   inline-size: $thumb-size;
   border-radius: 50%;
-  background: semantic-tokens.$element-base-1;
+  background: system-tokens.$si-sys-background-1;
   cursor: pointer;
 
   &:hover {
-    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    border-color: system-tokens.$si-sys-border-accent-hover;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-secondary-text-hover 0%,
-      semantic-tokens.$element-action-secondary-text-hover 35%,
-      semantic-tokens.$element-action-secondary-hover 36%
+      system-tokens.$si-sys-text-accent-hover 0%,
+      system-tokens.$si-sys-text-accent-hover 35%,
+      system-tokens.$si-sys-background-accent-secondary-hover 36%
     );
   }
 
   &:active {
-    border-color: semantic-tokens.$element-action-primary-active;
+    border-color: system-tokens.$si-sys-border-accent-active;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-primary-active 0%,
-      semantic-tokens.$element-action-primary-active 35%,
-      semantic-tokens.$element-action-secondary-active 36%
+      system-tokens.$si-sys-background-accent-active 0%,
+      system-tokens.$si-sys-background-accent-active 35%,
+      system-tokens.$si-sys-background-accent-secondary-active 36%
     );
   }
 }
 
 .form-range {
-  --thumb-shadow: #{elevation.$element-elevation-1};
+  --thumb-shadow: #{system-tokens.$si-sys-effects-shadow-2};
   -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   background: transparent;
   inline-size: 100%;

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

@@ -6,6 +6,7 @@ $form-col-layout-label-width: 16ch !default;
 
 /* Turns every inner form-field into a column layout */
 @mixin form-col-layout {
+  .si-form-fieldset,
   .si-form-input:not(.form-check),
   .si-form-input.form-check:not(.form-check-inline) {
     display: flex;
@@ -40,12 +41,13 @@ $form-col-layout-label-width: 16ch !default;
     }
   }
 
-  si-form-fieldset.si-form-input {
+  .si-form-fieldset {
     align-items: start;
 
     > .form-label {
       align-self: start;
       padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important
+      margin-block-end: 0 !important; // stylelint-disable-line declaration-no-important
     }
   }
 }

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

@@ -1,7 +1,8 @@
 @use '../bootstrap/mixins/breakpoints';
 @use '../bootstrap/variables' as bootstrap-variables;
-@use '../variables';
+@use '../variables/si-vars';
 @use '../variables/elevation';
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -12,8 +13,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 +27,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 +43,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;
   }
@@ -94,7 +95,7 @@
   display: flex;
   flex-flow: column;
   padding-block: map.get(spacers.$spacers, 4);
-  border-block-start: 1px solid semantic-tokens.$element-ui-4;
+  border-block-start: 1px solid system-tokens.$si-sys-border-4;
 }
 
 .header-navigation {
@@ -106,13 +107,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 +131,13 @@
 }
 
 .header-toggle {
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   border: 0;
   padding: map.get(spacers.$spacers, 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,20 +148,20 @@
   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-block: map.get(spacers.$spacers, 5);
   padding-inline: map.get(spacers.$spacers, 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);
@@ -176,8 +177,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;
   }
 
@@ -193,13 +194,13 @@
   }
 
   &.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;
     }
   }
 }

package/src/styles/components/_datatable.scss

@@ -4,6 +4,7 @@
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use '../variables/utilities';
 
@@ -11,10 +12,10 @@
 
 $datatable-header-border-color: variables.$table-border-color !default;
 $datatable-header-background-color: variables.$table-bg !default;
-$datatable-header-color: semantic-tokens.$element-text-primary !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-header-height: 40px !default;
 $datatable-cell-min-width: 40px !default;
@@ -22,12 +23,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-selected 25%,
+  system-tokens.$si-sys-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 
@@ -104,6 +105,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 {
@@ -184,24 +203,6 @@ $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
@@ -224,7 +225,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     // 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;
@@ -238,7 +239,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;
@@ -246,7 +246,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
 
     .datatable-header-cell:focus-visible {
-      @include focus.make-outline-focus();
+      @include focus.make-outline-focus-inside();
     }
   }
 
@@ -322,7 +322,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-items: flex-end;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
-    color: semantic-tokens.$element-text-secondary;
+    color: system-tokens.$si-sys-text-secondary;
     font-size: typography.$si-font-size-caption;
     margin-block-start: -1px;
     position: relative;
@@ -341,7 +341,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;
       }
     }
   }

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,7 +23,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-preview {
-  background-color: variables.$element-base-3 !important;
+  background-color: variables.$si-sys-background-3 !important;
   box-shadow: variables.$element-elevation-2 !important;
   position: relative !important;
   inset-inline-start: -5px !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/_layout.scss

@@ -51,6 +51,11 @@
 .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)
@@ -62,7 +67,7 @@
   grid-area: subtitle;
   margin-block-start: map.get(variables.$spacers, 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,
@@ -82,6 +87,14 @@
       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) {

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;
 }
 

package/src/styles/components/_list-item.scss

@@ -49,7 +49,7 @@ ol:has(.list-item) {
 
   .list-item-timestamp {
     grid-area: timestamp;
-    color: variables.$element-text-secondary;
+    color: variables.$si-sys-text-secondary;
     margin-block-end: 0;
   }
 
@@ -79,7 +79,7 @@ ol:has(.list-item) {
         block-size: 0.375rem;
         inline-size: 0.375rem;
         border-radius: 50%;
-        background-color: variables.$element-ui-1;
+        background-color: variables.$si-sys-background-inverse;
         inset-inline-start: -0.625rem;
         inset-block-start: 50%;
         translate: 0 -50%;
@@ -102,11 +102,11 @@ ol:has(.list-item) {
     display: flex;
     flex-direction: row;
     align-items: center;
-    color: variables.$element-text-secondary;
+    color: variables.$si-sys-text-secondary;
     margin-block-end: map.get(variables.$spacers, 4);
 
     a:not(:hover) {
-      color: variables.$element-text-secondary;
+      color: variables.$si-sys-text-secondary;
     }
 
     .badge {
@@ -117,7 +117,7 @@ ol:has(.list-item) {
       inline-size: 0.125rem;
       block-size: 0.125rem;
       border-radius: 50%;
-      background-color: variables.$element-text-secondary;
+      background-color: variables.$si-sys-text-secondary;
       margin-inline: map.get(variables.$spacers, 2);
     }
   }
@@ -134,11 +134,11 @@ ol:has(.list-item) {
     color: inherit;
 
     &:hover {
-      background-color: variables.$element-base-1-hover;
+      background-color: variables.$si-sys-background-hover;
     }
 
     &:active {
-      background-color: variables.$element-base-1-selected;
+      background-color: variables.$si-sys-background-selected;
     }
 
     &:focus-visible {