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

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

@@ -1,3 +1,29 @@
+// @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';
@@ -6,6 +32,7 @@
 @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,14 +131,17 @@
   }
 }
 
+// @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-body-sm;
   padding-block: variables.$list-group-item-padding-y;
@@ -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: system-tokens.$si-sys-background-neutral;
-  color: system-tokens.$si-sys-text-primary;
+  background-color: system-tokens.$si-sys-color-background-neutral;
+  color: system-tokens.$si-sys-color-text-on-neutral;
 }
 
 .list-group-item-success {
-  color: system-tokens.$si-sys-text-success;
-  background: system-tokens.$si-sys-background-success-subtle;
+  color: system-tokens.$si-sys-color-text-success;
+  background: system-tokens.$si-sys-color-background-success-subtle;
 }
 
 .list-group-item-warning {
-  color: system-tokens.$si-sys-text-warning;
-  background: system-tokens.$si-sys-background-warning-subtle;
+  color: system-tokens.$si-sys-color-text-warning;
+  background: system-tokens.$si-sys-color-background-warning-subtle;
 }
 
 .list-group-item-caution {
-  background-color: system-tokens.$si-sys-background-caution-subtle;
-  color: system-tokens.$si-sys-text-caution;
+  background-color: system-tokens.$si-sys-color-background-caution-subtle;
+  color: system-tokens.$si-sys-color-text-caution;
 }
 
 .list-group-item-danger {
-  color: system-tokens.$si-sys-text-danger;
-  background: system-tokens.$si-sys-background-danger-subtle;
+  color: system-tokens.$si-sys-color-text-danger;
+  background: system-tokens.$si-sys-color-background-danger-subtle;
 }
 
 .list-group-item-info {
-  color: system-tokens.$si-sys-text-information;
-  background: system-tokens.$si-sys-background-information-subtle;
+  color: system-tokens.$si-sys-color-text-information;
+  background: system-tokens.$si-sys-color-background-information-subtle;
 }

package/src/styles/bootstrap/_modals.scss

@@ -132,7 +132,7 @@
   background-color: variables.$modal-content-bg;
   background-clip: padding-box;
   border-radius: variables.$modal-content-border-radius;
-  box-shadow: system-tokens.$si-sys-effects-shadow-3;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -195,7 +195,7 @@
   }
 
   .modal-content {
-    box-shadow: system-tokens.$si-sys-effects-shadow-2;
+    box-shadow: system-tokens.$si-sys-color-effects-shadow-2;
   }
 
   .modal-sm {

package/src/styles/bootstrap/_nav.scss

@@ -17,9 +17,9 @@ $nav-tabs-min-width: 100px;
 
   .nav-link {
     &: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;
+      color: system-tokens.$si-sys-color-text-on-accent-secondary-hover;
+      background: system-tokens.$si-sys-color-background-accent-secondary-hover;
+      border-color: system-tokens.$si-sys-color-border-accent-hover;
     }
   }
 }
@@ -58,12 +58,12 @@ $nav-tabs-min-width: 100px;
     inset-inline: 0;
     inset-block-end: 0;
     block-size: 1px;
-    background: system-tokens.$si-sys-border-4;
+    background: system-tokens.$si-sys-color-border-4;
   }
 
   &:focus-visible::before {
     // because otherwise the focus is cut off
-    background: system-tokens.$si-sys-effects-focus;
+    background: system-tokens.$si-sys-color-effects-focus;
   }
 
   .nav-link {
@@ -86,7 +86,7 @@ $nav-tabs-min-width: 100px;
     }
 
     &.active {
-      border-color: system-tokens.$si-sys-border-accent-hover;
+      border-color: system-tokens.$si-sys-color-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;

package/src/styles/bootstrap/_pagination.scss

@@ -28,11 +28,11 @@ $page-button-size: 1.5rem;
   background: transparent;
   font-size: typography.$si-font-size-h5;
   font-weight: typography.$si-font-weight-h5;
-  color: system-tokens.$si-sys-text-primary;
+  color: system-tokens.$si-sys-color-text-primary;
   border: 0;
 
   &:is(.active, :hover:not(:disabled)):not(.separator) {
-    background: system-tokens.$si-sys-background-active;
+    background: system-tokens.$si-sys-color-background-active;
   }
 
   &:has(.icon) {

package/src/styles/bootstrap/_popovers.scss

@@ -28,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: system-tokens.$si-sys-effects-shadow-3;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
   border-radius: semantic-tokens.$element-radius-2;
 
   &.auto-width {

package/src/styles/bootstrap/_utilities.scss

@@ -37,10 +37,10 @@
 
 // Deprecated legacy utilities. Use system-token text utilities instead.
 $text-colors: (
-  'body': system-tokens.$si-sys-text-primary,
-  'tertiary': system-tokens.$si-sys-text-disabled,
-  'info': system-tokens.$si-sys-text-information,
-  'muted': system-tokens.$si-sys-text-disabled
+  'body': system-tokens.$si-sys-color-text-primary,
+  'tertiary': system-tokens.$si-sys-color-text-disabled,
+  'info': system-tokens.$si-sys-color-text-information,
+  'muted': system-tokens.$si-sys-color-text-disabled
 ) !default;
 
 @each $color, $value in $text-colors {
@@ -51,26 +51,26 @@ $text-colors: (
 
 // Deprecated legacy utilities. Use system-token background utilities instead.
 $background-colors: (
-  'primary': system-tokens.$si-sys-background-accent,
-  'secondary': system-tokens.$si-sys-text-secondary,
-  'tertiary': system-tokens.$si-sys-text-disabled,
-  'success': system-tokens.$si-sys-background-success,
-  'info': system-tokens.$si-sys-background-information,
-  'warning': system-tokens.$si-sys-background-warning,
-  'danger': system-tokens.$si-sys-background-danger,
-  'base-0': system-tokens.$si-sys-background-0,
-  'base-1': system-tokens.$si-sys-background-1,
-  'base-2': system-tokens.$si-sys-background-2,
-  'base-3': system-tokens.$si-sys-background-3,
-  'base-4': system-tokens.$si-sys-background-4,
-  'base-success': system-tokens.$si-sys-background-success-subtle,
-  'base-info': system-tokens.$si-sys-background-information-subtle,
-  'base-caution': system-tokens.$si-sys-background-caution-subtle,
-  'base-warning': system-tokens.$si-sys-background-warning-subtle,
-  'base-danger': system-tokens.$si-sys-background-danger-subtle,
-  'base-critical': system-tokens.$si-sys-background-critical-subtle,
-  'base-translucent-1': system-tokens.$si-sys-effects-backdrop,
-  'base-translucent-2': system-tokens.$si-sys-background-inverse
+  'primary': system-tokens.$si-sys-color-background-accent,
+  'secondary': system-tokens.$si-sys-color-text-secondary,
+  'tertiary': system-tokens.$si-sys-color-text-disabled,
+  'success': system-tokens.$si-sys-color-background-success,
+  'info': system-tokens.$si-sys-color-background-information,
+  'warning': system-tokens.$si-sys-color-background-warning,
+  'danger': system-tokens.$si-sys-color-background-danger,
+  'base-0': system-tokens.$si-sys-color-background-0,
+  'base-1': system-tokens.$si-sys-color-background-1,
+  'base-2': system-tokens.$si-sys-color-background-2,
+  'base-3': system-tokens.$si-sys-color-background-3,
+  'base-4': system-tokens.$si-sys-color-background-4,
+  'base-success': system-tokens.$si-sys-color-background-success-subtle,
+  'base-info': system-tokens.$si-sys-color-background-information-subtle,
+  'base-caution': system-tokens.$si-sys-color-background-caution-subtle,
+  'base-warning': system-tokens.$si-sys-color-background-warning-subtle,
+  'base-danger': system-tokens.$si-sys-color-background-danger-subtle,
+  'base-critical': system-tokens.$si-sys-color-background-critical-subtle,
+  'base-translucent-1': system-tokens.$si-sys-color-effects-backdrop,
+  'base-translucent-2': system-tokens.$si-sys-color-background-inverse
 ) !default;
 
 @each $color, $value in $background-colors {
@@ -80,19 +80,20 @@ $background-colors: (
 }
 
 $status-colors: (
-  'success': system-tokens.$si-sys-background-success,
-  'info': system-tokens.$si-sys-background-information,
-  'caution': system-tokens.$si-sys-background-caution,
-  'warning': system-tokens.$si-sys-background-warning,
-  'danger': system-tokens.$si-sys-background-danger,
-  'critical': system-tokens.$si-sys-background-critical,
-  'neutral': system-tokens.$si-sys-background-neutral,
-  'success-contrast': system-tokens.$si-sys-text-on-success,
-  'info-contrast': system-tokens.$si-sys-text-on-information,
-  'caution-contrast': system-tokens.$si-sys-text-on-caution,
-  'warning-contrast': system-tokens.$si-sys-text-on-warning,
-  'danger-contrast': system-tokens.$si-sys-text-on-danger,
-  'critical-contrast': system-tokens.$si-sys-text-on-critical
+  'success': system-tokens.$si-sys-color-background-success,
+  'info': system-tokens.$si-sys-color-background-information,
+  'caution': system-tokens.$si-sys-color-background-caution,
+  'warning': system-tokens.$si-sys-color-background-warning,
+  'danger': system-tokens.$si-sys-color-background-danger,
+  'critical': system-tokens.$si-sys-color-background-critical,
+  'neutral': system-tokens.$si-sys-color-background-neutral,
+  'success-contrast': system-tokens.$si-sys-color-text-on-success,
+  'info-contrast': system-tokens.$si-sys-color-text-on-information,
+  'caution-contrast': system-tokens.$si-sys-color-text-on-caution,
+  'warning-contrast': system-tokens.$si-sys-color-text-on-warning,
+  'danger-contrast': system-tokens.$si-sys-color-text-on-danger,
+  'critical-contrast': system-tokens.$si-sys-color-text-on-critical,
+  'neutral-contrast': system-tokens.$si-sys-color-text-on-neutral
 ) !default;
 
 @each $color, $value in $status-colors {