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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "51.0.0-rc.9",
+  "version": "51.0.0",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/bootstrap/_badges.scss

@@ -53,7 +53,7 @@
 
   &.bg-secondary {
     background-color: system-tokens.$si-sys-background-neutral !important;
-    color: system-tokens.$si-sys-text-primary;
+    color: system-tokens.$si-sys-text-on-neutral;
   }
 
   &.bg-info {

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,9 +203,11 @@
   }
 }
 
+// @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;
+  color: system-tokens.$si-sys-text-on-neutral;
 }
 
 .list-group-item-success {

package/src/styles/bootstrap/_utilities.scss

@@ -92,7 +92,8 @@ $status-colors: (
   '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
+  'critical-contrast': system-tokens.$si-sys-text-on-critical,
+  'neutral-contrast': system-tokens.$si-sys-text-on-neutral
 ) !default;
 
 @each $color, $value in $status-colors {

package/src/styles/bootstrap/_variables.scss

@@ -2,6 +2,7 @@
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/sizing';
 @use '../variables/typography';
 @use './functions';
 
@@ -363,15 +364,10 @@ $input-plaintext-color: $body-color !default;
 
 $input-height-border: $input-border-width * 2 !default;
 
-$input-height: calc(1lh + ($input-padding-y-full * 2));
+$input-height: map.get(sizing.$sizing, 80);
 
 // don't derive from $input-height as it generates a nested calc() expression
-$input-height-inner: calc($input-line-height + ($input-padding-y-full - 1px) * 2) !default;
-// Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied.
-// DEPRECATED: Calculate it yourself using $input-height-inner
-$input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default;
-// DEPRECATED: Calculate it yourself using $input-height-inner
-$input-height-inner-quarter: calc((#{$input-height-inner}) * 0.25) !default;
+$input-height-inner: calc(map.get(sizing.$sizing, 80) - (2 * 1px)) !default;
 
 $input-transition:
   border-color 0.15s ease-in-out,
@@ -464,7 +460,7 @@ $dropdown-font-size: $font-size-base !default;
 // this is to have room for icon and badges
 $dropdown-line-height: $badge-height;
 $dropdown-color: $body-color !default;
-$dropdown-bg: system-tokens.$si-sys-background-1 !default;
+$dropdown-bg: system-tokens.$si-sys-background-3 !default;
 $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
 $dropdown-divider-bg: system-tokens.$si-sys-border-4 !default;
 $dropdown-divider-margin-y: 4px !default;
@@ -610,6 +606,8 @@ $progress-bar-animation-timing: 1s linear infinite !default;
 $progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
 
 // List group
+// @deprecated All `$list-group-*` variables below belong to the deprecated
+// Bootstrap list group. Use the Element list (`.list` / `.list-item`) instead.
 
 $list-group-color: system-tokens.$si-sys-text-primary !default;
 $list-group-bg: system-tokens.$si-sys-background-1 !default;

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

@@ -197,7 +197,6 @@ select:is(.form-control, .form-select):not([multiple]) {
       )
       center,
     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
@@ -215,6 +214,7 @@ select:is(.form-control, .form-select)[multiple] {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   padding: 0;
+  block-size: unset;
 
   option {
     padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4);

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

@@ -89,19 +89,14 @@ ol:has(.list-item) {
     margin-block-end: 0;
 
     @include typography.si-font(
-      typography.$si-font-size-h5,
-      typography.$si-line-height-h5,
-      typography.$si-font-weight-h5
+      typography.$si-font-size-body-sbold,
+      typography.$si-line-height-body-sbold,
+      typography.$si-font-weight-body-sbold
     );
 
     &.unread {
       position: relative;
-
-      @include typography.si-font(
-        typography.$si-font-size-h5-bold,
-        typography.$si-line-height-h5-bold,
-        typography.$si-font-weight-h5-bold
-      );
+      font-weight: typography.$si-font-weight-bold;
 
       &::before {
         content: '';

package/src/styles/components/_search-bar.scss

@@ -45,7 +45,7 @@
   }
 
   .search-bar.variant-background-0 & {
-    background-color: system-tokens.$si-sys-background-4 !important; // stylelint-disable-line declaration-no-important
+    background-color: system-tokens.$si-sys-background-2 !important; // stylelint-disable-line declaration-no-important
   }
 }
 

package/src/styles/mixins/_utilities.scss

@@ -37,6 +37,9 @@
   .#{$prefix}accent-secondary-hover {
     background-color: tokens.$si-sys-background-accent-secondary-hover !important;
   }
+  .#{$prefix}active {
+    background-color: tokens.$si-sys-background-active !important;
+  }
   .#{$prefix}caution {
     background-color: tokens.$si-sys-background-caution !important;
   }
@@ -97,6 +100,12 @@
   .#{$prefix}neutral {
     background-color: tokens.$si-sys-background-neutral !important;
   }
+  .#{$prefix}neutral-active {
+    background-color: tokens.$si-sys-background-neutral-active !important;
+  }
+  .#{$prefix}neutral-hover {
+    background-color: tokens.$si-sys-background-neutral-hover !important;
+  }
   .#{$prefix}success {
     background-color: tokens.$si-sys-background-success !important;
   }
@@ -181,6 +190,9 @@
   .#{$prefix}on-information {
     color: tokens.$si-sys-text-on-information !important;
   }
+  .#{$prefix}on-neutral {
+    color: tokens.$si-sys-text-on-neutral !important;
+  }
   .#{$prefix}on-success {
     color: tokens.$si-sys-text-on-success !important;
   }

package/src/styles/variables/_system-tokens.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Siemens 2026
+ * Siemens Design Language Tokens
+ * Version 0.11.0
+ * Do not edit directly, this file was auto-generated.
+ */
+
 $si-sys-background-0: var(--si-sys-background-0);
 $si-sys-background-1: var(--si-sys-background-1);
 $si-sys-background-2: var(--si-sys-background-2);
@@ -9,6 +16,7 @@ $si-sys-background-accent-hover: var(--si-sys-background-accent-hover);
 $si-sys-background-accent-secondary: var(--si-sys-background-accent-secondary);
 $si-sys-background-accent-secondary-active: var(--si-sys-background-accent-secondary-active);
 $si-sys-background-accent-secondary-hover: var(--si-sys-background-accent-secondary-hover);
+$si-sys-background-active: var(--si-sys-background-active);
 $si-sys-background-caution: var(--si-sys-background-caution);
 $si-sys-background-caution-active: var(--si-sys-background-caution-active);
 $si-sys-background-caution-hover: var(--si-sys-background-caution-hover);
@@ -29,7 +37,8 @@ $si-sys-background-information-hover: var(--si-sys-background-information-hover)
 $si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
 $si-sys-background-inverse: var(--si-sys-background-inverse);
 $si-sys-background-neutral: var(--si-sys-background-neutral);
-$si-sys-background-active: var(--si-sys-background-active);
+$si-sys-background-neutral-active: var(--si-sys-background-neutral-active);
+$si-sys-background-neutral-hover: var(--si-sys-background-neutral-hover);
 $si-sys-background-success: var(--si-sys-background-success);
 $si-sys-background-success-active: var(--si-sys-background-success-active);
 $si-sys-background-success-hover: var(--si-sys-background-success-hover);
@@ -57,9 +66,6 @@ $si-sys-border-success: var(--si-sys-border-success);
 $si-sys-border-warning: var(--si-sys-border-warning);
 $si-sys-border-warning-secondary: var(--si-sys-border-warning-secondary);
 $si-sys-code-1: var(--si-sys-code-1);
-$si-sys-code-10: var(--si-sys-code-10);
-$si-sys-code-11: var(--si-sys-code-11);
-$si-sys-code-12: var(--si-sys-code-12);
 $si-sys-code-2: var(--si-sys-code-2);
 $si-sys-code-3: var(--si-sys-code-3);
 $si-sys-code-4: var(--si-sys-code-4);
@@ -68,15 +74,10 @@ $si-sys-code-6: var(--si-sys-code-6);
 $si-sys-code-7: var(--si-sys-code-7);
 $si-sys-code-8: var(--si-sys-code-8);
 $si-sys-code-9: var(--si-sys-code-9);
+$si-sys-code-10: var(--si-sys-code-10);
+$si-sys-code-11: var(--si-sys-code-11);
+$si-sys-code-12: var(--si-sys-code-12);
 $si-sys-data-categorical-1: var(--si-sys-data-categorical-1);
-$si-sys-data-categorical-10: var(--si-sys-data-categorical-10);
-$si-sys-data-categorical-11: var(--si-sys-data-categorical-11);
-$si-sys-data-categorical-12: var(--si-sys-data-categorical-12);
-$si-sys-data-categorical-13: var(--si-sys-data-categorical-13);
-$si-sys-data-categorical-14: var(--si-sys-data-categorical-14);
-$si-sys-data-categorical-15: var(--si-sys-data-categorical-15);
-$si-sys-data-categorical-16: var(--si-sys-data-categorical-16);
-$si-sys-data-categorical-17: var(--si-sys-data-categorical-17);
 $si-sys-data-categorical-2: var(--si-sys-data-categorical-2);
 $si-sys-data-categorical-3: var(--si-sys-data-categorical-3);
 $si-sys-data-categorical-4: var(--si-sys-data-categorical-4);
@@ -85,6 +86,14 @@ $si-sys-data-categorical-6: var(--si-sys-data-categorical-6);
 $si-sys-data-categorical-7: var(--si-sys-data-categorical-7);
 $si-sys-data-categorical-8: var(--si-sys-data-categorical-8);
 $si-sys-data-categorical-9: var(--si-sys-data-categorical-9);
+$si-sys-data-categorical-10: var(--si-sys-data-categorical-10);
+$si-sys-data-categorical-11: var(--si-sys-data-categorical-11);
+$si-sys-data-categorical-12: var(--si-sys-data-categorical-12);
+$si-sys-data-categorical-13: var(--si-sys-data-categorical-13);
+$si-sys-data-categorical-14: var(--si-sys-data-categorical-14);
+$si-sys-data-categorical-15: var(--si-sys-data-categorical-15);
+$si-sys-data-categorical-16: var(--si-sys-data-categorical-16);
+$si-sys-data-categorical-17: var(--si-sys-data-categorical-17);
 $si-sys-data-rating-average: var(--si-sys-data-rating-average);
 $si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
 $si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);
@@ -171,6 +180,7 @@ $si-sys-text-on-critical: var(--si-sys-text-on-critical);
 $si-sys-text-on-danger: var(--si-sys-text-on-danger);
 $si-sys-text-on-danger-secondary: var(--si-sys-text-on-danger-secondary);
 $si-sys-text-on-information: var(--si-sys-text-on-information);
+$si-sys-text-on-neutral: var(--si-sys-text-on-neutral);
 $si-sys-text-on-success: var(--si-sys-text-on-success);
 $si-sys-text-on-warning: var(--si-sys-text-on-warning);
 $si-sys-text-on-warning-secondary: var(--si-sys-text-on-warning-secondary);

package/src/theme/_theme-element.scss

@@ -305,6 +305,18 @@ $theme-element-light: (
   si-sys-text-on-danger-secondary: base.$color-red-500,
   si-sys-text-critical: data.$color-data-orchid-700,
   si-sys-text-on-critical: base.$color-white,
+  si-sys-code-1: data.$color-data-royal-blue-900,
+  si-sys-code-2: base.$color-teal,
+  si-sys-code-3: data.$color-data-blue-900,
+  si-sys-code-4: data.$color-data-yellow-900,
+  si-sys-code-5: data.$color-data-yellow-900,
+  si-sys-code-6: data.$color-data-turquoise-700,
+  si-sys-code-7: data.$color-data-orchid-500,
+  si-sys-code-8: base.$color-deep-blue-600,
+  si-sys-code-9: base.$color-deep-blue-600,
+  si-sys-code-10: data.$color-data-purple-900,
+  si-sys-code-11: data.$color-data-interactive-coral-700,
+  si-sys-code-12: base.$color-red-700,
   si-sys-border-1: base.$color-deep-blue-900,
   si-sys-border-2: base.$color-deep-blue-600,
   si-sys-border-3: base.$color-deep-blue-400,
@@ -636,6 +648,18 @@ $theme-element-dark: (
   si-sys-text-on-danger-secondary: base.$color-red-300,
   si-sys-text-critical: data.$color-data-orchid-100,
   si-sys-text-on-critical: base.$color-white,
+  si-sys-code-1: data.$color-data-deep-blue-100,
+  si-sys-code-2: data.$color-data-royal-blue-200,
+  si-sys-code-3: data.$color-data-blue-200,
+  si-sys-code-4: data.$color-data-orange-200,
+  si-sys-code-5: data.$color-data-yellow-200,
+  si-sys-code-6: data.$color-data-green-200,
+  si-sys-code-7: data.$color-data-orchid-200,
+  si-sys-code-8: data.$color-data-sand-500,
+  si-sys-code-9: base.$color-deep-blue-500,
+  si-sys-code-10: data.$color-data-purple-400,
+  si-sys-code-11: data.$color-data-turquoise-100,
+  si-sys-code-12: base.$color-red-300,
   si-sys-border-1: base.$color-white,
   si-sys-border-2: base.$color-deep-blue-400,
   si-sys-border-3: base.$color-deep-blue-600,