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

package/src/styles/bootstrap/_list-group.scss

@@ -1,11 +1,38 @@
+// @deprecated The Bootstrap list group is deprecated in favor of the Element list
+// (`.list` / `.list-item`, see `../components/_list-item.scss`).
+
+// The list group predates the Element list and is only a thin container with
+// borders. It has no notion of the Element list anatomy (indicator, title,
+// description, metadata, quick actions) and therefore cannot express the current
+// design. Do not use it for new code.
+
+// Rough mapping, the markup has to be restructured, this is not a class rename:
+// `.list-group` -> `.list`, optionally with `.list-divider`, `.list-filled` or `.list-outline`
+// `.list-group-item` -> `.list-item`, children need explicit slot classes
+//                       (`.list-item-title`, `.list-item-description`, ...)
+// `.list-group-item-action` -> `.list-item.list-item-action`
+// `.list-group-flush` -> `.list.list-divider` to preserve dividers; otherwise
+//                        `.list`, which has no outer border
+// `.list-group-md` / `.list-group-lg` -> no replacement, the item height follows its content
+// `.list-group-horizontal*` -> no replacement, use flex or grid utilities
+// `.list-group-numbered` -> no replacement, use an ordered list with a custom counter
+//                           because `.list-item` removes list markers
+// `.list-group-item-*` -> no replacement, use background and text utilities
+// `.list-header` -> no replacement, use a heading element
+
+// These styles remain available for existing applications and there is no removal
+// planned at this point. They will not receive further design updates and may be
+// removed in a future major version.
+
 @use 'sass:map';
 
 @use '../variables/focus';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
 @use 'variables';
 
+// @deprecated Use `.list` instead.
 .list-group {
   display: flex;
   flex-direction: column;
@@ -13,6 +40,8 @@
   border-radius: variables.$list-group-border-radius;
 }
 
+// @deprecated No replacement, use an ordered list with a custom counter because
+// `.list-item` removes list markers.
 .list-group-numbered {
   list-style-type: none;
   counter-reset: section;
@@ -24,6 +53,7 @@
   }
 }
 
+// @deprecated Use `.list-item.list-item-action` instead.
 .list-group-item-action {
   inline-size: 100%; // For `<button>`s (anchors become 100% by default though)
   color: variables.$list-group-action-color;
@@ -47,6 +77,7 @@
   }
 }
 
+// @deprecated Use `.list-item` instead.
 .list-group-item {
   position: relative;
   display: block;
@@ -100,16 +131,19 @@
   }
 }
 
+// @deprecated No replacement, the height of a `.list-item` follows its content.
 .list-group-lg .list-group-item {
   min-block-size: calc(3rem + 2 * variables.$list-group-item-padding-y);
 }
 
+// @deprecated No replacement, the height of a `.list-item` follows its content.
 .list-group-md .list-group-item {
   min-block-size: calc(2rem + 2 * variables.$list-group-item-padding-y);
 }
 
+// @deprecated No replacement, use a heading element.
 .list-header {
-  font-size: typography.$si-font-size-caption;
+  font-size: typography.$si-font-size-body-sm;
   padding-block: variables.$list-group-item-padding-y;
   padding-inline: variables.$list-group-item-padding-x;
   color: variables.$headings-color;
@@ -117,6 +151,7 @@
   border: 1px solid variables.$list-group-border-color;
 }
 
+// @deprecated No replacement, use flex or grid utilities.
 @each $breakpoint in map.keys(variables.$grid-breakpoints) {
   @include breakpoints.media-breakpoint-up($breakpoint) {
     $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
@@ -154,6 +189,7 @@
   }
 }
 
+// @deprecated Use `.list` instead, the Element list has no outer border.
 .list-group-flush {
   border-radius: 0;
 
@@ -167,32 +203,34 @@
   }
 }
 
+// @deprecated No replacement for the `.list-group-item-*` variants below,
+// use the background and text utilities on a `.list-item` instead.
 .list-group-item-secondary {
-  background-color: semantic-tokens.$element-ui-4;
-  color: semantic-tokens.$element-text-primary;
+  background-color: system-tokens.$si-sys-background-neutral;
+  color: system-tokens.$si-sys-text-on-neutral;
 }
 
 .list-group-item-success {
-  color: semantic-tokens.$element-text-success;
-  background: semantic-tokens.$element-base-success;
+  color: system-tokens.$si-sys-text-success;
+  background: system-tokens.$si-sys-background-success-subtle;
 }
 
 .list-group-item-warning {
-  color: semantic-tokens.$element-text-warning;
-  background: semantic-tokens.$element-base-warning;
+  color: system-tokens.$si-sys-text-warning;
+  background: system-tokens.$si-sys-background-warning-subtle;
 }
 
 .list-group-item-caution {
-  background-color: semantic-tokens.$element-base-caution;
-  color: semantic-tokens.$element-text-caution;
+  background-color: system-tokens.$si-sys-background-caution-subtle;
+  color: system-tokens.$si-sys-text-caution;
 }
 
 .list-group-item-danger {
-  color: semantic-tokens.$element-text-danger;
-  background: semantic-tokens.$element-base-danger;
+  color: system-tokens.$si-sys-text-danger;
+  background: system-tokens.$si-sys-background-danger-subtle;
 }
 
 .list-group-item-info {
-  color: semantic-tokens.$element-text-information;
-  background: semantic-tokens.$element-base-information;
+  color: system-tokens.$si-sys-text-information;
+  background: system-tokens.$si-sys-background-information-subtle;
 }

package/src/styles/bootstrap/_mixins.scss

@@ -28,3 +28,4 @@
 @forward './mixins/clearfix';
 @forward './mixins/container';
 @forward './mixins/grid';
+@forward './mixins/form-layout';

package/src/styles/bootstrap/_modals.scss

@@ -1,4 +1,5 @@
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use '../variables/zindex';
 @use '../variables/si-vars';
@@ -67,7 +68,7 @@
 }
 
 .modal-dialog-scrollable {
-  block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+  block-size: calc(100% - (variables.$modal-dialog-margin * 2));
 
   .modal-content {
     max-block-size: 100%;
@@ -82,7 +83,7 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  min-block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+  min-block-size: calc(100% - (variables.$modal-dialog-margin * 2));
 }
 
 .modal-header {
@@ -97,7 +98,7 @@
 
   .icon {
     font-size: si-vars.$si-icon-font-size-lg;
-    margin-inline-end: map.get(spacers.$spacers, 4);
+    margin-inline-end: map.get(spacers.$spacers-inline, 4);
   }
 
   .modal-title {
@@ -131,7 +132,7 @@
   background-color: variables.$modal-content-bg;
   background-clip: padding-box;
   border-radius: variables.$modal-content-border-radius;
-  box-shadow: variables.$modal-content-box-shadow-xs;
+  box-shadow: system-tokens.$si-sys-effects-shadow-3;
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -141,7 +142,7 @@
   // Enable `flex-grow: 1` so that the body take up as much space as possible
   // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
-  padding-block: map.get(spacers.$spacers, 5) variables.$modal-inner-padding;
+  padding-block: map.get(spacers.$spacers-block, 5) variables.$modal-inner-padding;
   // use margin instead of padding so that the scrollbar isn't on the edge of the dialog
   margin-inline: variables.$modal-inner-padding;
   padding-inline: 0;
@@ -157,7 +158,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: (variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5);
+  padding: calc(variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5);
   border-end-start-radius: variables.$modal-content-inner-border-radius;
   border-end-end-radius: variables.$modal-content-inner-border-radius;
 
@@ -165,7 +166,7 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: (variables.$modal-footer-margin-between * 0.5);
+    margin: calc(variables.$modal-footer-margin-between * 0.5);
   }
 }
 
@@ -186,15 +187,15 @@
   }
 
   .modal-dialog-scrollable {
-    block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+    block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2));
   }
 
   .modal-dialog-centered {
-    min-block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+    min-block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2));
   }
 
   .modal-content {
-    box-shadow: variables.$modal-content-box-shadow-sm-up;
+    box-shadow: system-tokens.$si-sys-effects-shadow-2;
   }
 
   .modal-sm {

package/src/styles/bootstrap/_nav.scss

@@ -1,5 +1,6 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
+@use '../variables/typography';
 @use './variables';
 
 @use 'sass:map';
@@ -16,9 +17,9 @@ $nav-tabs-min-width: 100px;
 
   .nav-link {
     &:hover {
-      color: semantic-tokens.$element-action-secondary-text-hover;
-      background: semantic-tokens.$element-action-secondary-hover;
-      border-color: semantic-tokens.$element-action-secondary-border-hover;
+      color: system-tokens.$si-sys-text-on-accent-secondary-hover;
+      background: system-tokens.$si-sys-background-accent-secondary-hover;
+      border-color: system-tokens.$si-sys-border-accent-hover;
     }
   }
 }
@@ -56,13 +57,13 @@ $nav-tabs-min-width: 100px;
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: variables.$nav-tabs-border-width;
-    background: semantic-tokens.$element-ui-4;
+    block-size: 1px;
+    background: system-tokens.$si-sys-border-4;
   }
 
   &:focus-visible::before {
     // because otherwise the focus is cut off
-    background: semantic-tokens.$element-focus-default;
+    background: system-tokens.$si-sys-effects-focus;
   }
 
   .nav-link {
@@ -78,19 +79,27 @@ $nav-tabs-min-width: 100px;
     border-start-start-radius: variables.$btn-border-radius;
     border-start-end-radius: variables.$btn-border-radius;
     cursor: pointer;
+    font-weight: typography.$si-font-weight-body-lg;
 
     .badge {
       margin-inline-end: 0;
     }
 
     &.active {
-      border-color: semantic-tokens.$element-action-secondary-border-hover;
+      border-color: system-tokens.$si-sys-border-accent-hover;
+      font-size: typography.$si-font-size-body-lg-sbold;
+      font-weight: typography.$si-font-weight-body-lg-sbold;
+      line-height: typography.$si-line-height-body-lg-sbold;
     }
 
     &:hover {
       isolation: isolate;
     }
 
+    &:not(.active):hover {
+      color: variables.$nav-link-color;
+    }
+
     &.disabled {
       color: variables.$nav-link-disabled-color;
       background-color: transparent;

package/src/styles/bootstrap/_pagination.scss

@@ -1,3 +1,4 @@
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -10,7 +11,7 @@ $page-button-size: 1.5rem;
 .pagination {
   display: flex;
   margin: 0;
-  padding-block: map.get(spacers.$spacers, 4);
+  padding-block: map.get(spacers.$spacers-block, 4);
   @include lists.list-unstyled();
 }
 
@@ -22,16 +23,16 @@ $page-button-size: 1.5rem;
   min-inline-size: $page-button-size;
   block-size: $page-button-size;
   padding-block: 0;
-  padding-inline: map.get(spacers.$spacers, 2);
-  margin-inline: map.get(spacers.$spacers, 1);
+  padding-inline: map.get(spacers.$spacers-inline, 2);
+  margin-inline: map.get(spacers.$spacers-inline, 1);
   background: transparent;
   font-size: typography.$si-font-size-h5;
   font-weight: typography.$si-font-weight-h5;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   border: 0;
 
   &:is(.active, :hover:not(:disabled)):not(.separator) {
-    background: semantic-tokens.$element-base-1-selected;
+    background: system-tokens.$si-sys-background-active;
   }
 
   &:has(.icon) {

package/src/styles/bootstrap/_popovers.scss

@@ -1,5 +1,6 @@
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/zindex';
 @use './mixins/reset-text';
 @use './variables';
@@ -27,7 +28,7 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg);
   word-wrap: break-word;
   background-color: $si-popover-bg;
   background-clip: padding-box;
-  box-shadow: variables.$popover-box-shadow;
+  box-shadow: system-tokens.$si-sys-effects-shadow-3;
   border-radius: semantic-tokens.$element-radius-2;
 
   &.auto-width {
@@ -74,7 +75,7 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg);
   }
 
   + .popover-body {
-    padding-block-start: map.get(spacers.$spacers, 4);
+    padding-block-start: map.get(spacers.$spacers-block, 4);
   }
 
   &:has(> .icon) {

package/src/styles/bootstrap/_reboot.scss

@@ -1,4 +1,5 @@
 @use '../variables/typography';
+@use '../selectors';
 @use './variables';
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -25,7 +26,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+#{selectors.$root} {
   @if variables.$enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
@@ -41,7 +42,7 @@
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
 // scss-docs-start reboot-body-rules
-body {
+#{selectors.$body} {
   margin: 0; // 1
   font-family: var(--#{variables.$variable-prefix}body-font-family);
   font-size: var(--#{variables.$variable-prefix}body-font-size);
@@ -341,6 +342,11 @@ table {
 }
 
 caption {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm,
+    typography.$si-line-height-body-sm,
+    typography.$si-font-weight-body-sm
+  );
   padding-block: variables.$table-cell-padding-y;
   color: variables.$table-caption-color;
   text-align: start;
@@ -408,7 +414,7 @@ textarea {
 input,
 textarea {
   &:disabled {
-    color: variables.$text-muted;
+    color: variables.$text-disabled;
 
     &::placeholder {
       color: variables.$input-placeholder-disabled-color;

package/src/styles/bootstrap/_root.scss

@@ -1,9 +1,10 @@
 @use './variables';
+@use '../selectors';
 
 @use 'sass:meta';
 
 // this is _root.scss without the automatic `to-rgb` brain damage
-:root {
+#{selectors.$root} {
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};

package/src/styles/bootstrap/_tables.scss

@@ -18,7 +18,7 @@
   --#{variables.$variable-prefix}table-hover-bg: #{variables.$table-hover-bg};
 
   inline-size: 100%;
-  margin-block-end: spacers.$spacer;
+  margin-block-end: map.get(spacers.$spacers-block, 6);
   color: variables.$table-color;
   vertical-align: variables.$table-cell-vertical-align;
   border-color: variables.$table-border-color;
@@ -55,17 +55,17 @@
     vertical-align: middle;
 
     &:first-child {
-      padding-inline-start: map.get(spacers.$spacers, 6);
+      padding-inline-start: map.get(spacers.$spacers-inline, 6);
     }
 
     &:last-child {
-      padding-inline-end: map.get(spacers.$spacers, 6);
+      padding-inline-end: map.get(spacers.$spacers-inline, 6);
     }
   }
 
   thead {
     border-width: 0;
-    border-block-end: map.get(spacers.$spacers, 2) solid variables.$table-border-color;
+    border-block-end: map.get(spacers.$spacers-block, 2) solid variables.$table-border-color;
 
     th {
       vertical-align: baseline;
@@ -96,7 +96,9 @@
     }
 
     :is(th, td) {
-      block-size: 64px;
+      block-size: calc(
+        2lh + 2 * map.get(spacers.$spacers-block, 2) + 2 * map.get(spacers.$spacers-block, 5)
+      );
     }
   }
 }
@@ -118,7 +120,7 @@
 
   tbody {
     :is(th, td) {
-      block-size: 48px;
+      block-size: calc(2lh + 2 * map.get(spacers.$spacers-block, 4));
     }
   }
 }