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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "51.0.0-rc.8",
+  "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/_buttons.scss

@@ -103,7 +103,7 @@ button {
 .btn-ghost {
   --btn-bg: #{system-tokens.$si-sys-background-1};
   --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
-  --btn-bg-active: #{system-tokens.$si-sys-background-selected};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
   --btn-color: #{system-tokens.$si-sys-text-primary};
   --btn-color-hover: #{system-tokens.$si-sys-text-primary};
   --btn-color-active: #{system-tokens.$si-sys-text-primary};
@@ -164,7 +164,7 @@ button {
 .btn-secondary-ghost,
 .btn-tertiary-ghost {
   --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
-  --btn-bg-active: #{system-tokens.$si-sys-background-selected};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
   --btn-color: #{system-tokens.$si-sys-text-primary};
   --btn-color-hover: #{system-tokens.$si-sys-text-primary};
   --btn-color-active: #{system-tokens.$si-sys-text-primary};
@@ -228,7 +228,7 @@ button {
   --btn-font-weight: #{typography.$si-font-weight-normal};
   --btn-bg: transparent;
   --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
-  --btn-bg-active: #{system-tokens.$si-sys-background-selected};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
   --btn-color: #{system-tokens.$si-sys-text-primary};
   --btn-color-active: #{system-tokens.$si-sys-text-primary};
 

package/src/styles/bootstrap/_card.scss

@@ -92,7 +92,7 @@
     &:active {
       &,
       .card-footer {
-        background-color: system-tokens.$si-sys-background-selected;
+        background-color: system-tokens.$si-sys-background-active;
       }
     }
   }

package/src/styles/bootstrap/_dropdowns.scss

@@ -134,7 +134,7 @@
   // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
   &:is(:active, .active) {
     color: var(--si-sys-text-primary);
-    background-color: var(--si-sys-background-selected);
+    background-color: var(--si-sys-background-active);
   }
 
   &:is(.disabled, :disabled) {

package/src/styles/bootstrap/_images.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use './mixins/image';
 @use './variables';
 
@@ -20,7 +21,7 @@
   background-color: variables.$thumbnail-bg;
   border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
   border-radius: variables.$thumbnail-border-radius;
-  box-shadow: variables.$thumbnail-box-shadow;
+  box-shadow: system-tokens.$si-sys-effects-shadow-1;
 
   // Keep them at most 100% wide
   @include image.img-fluid();

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,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,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/_modals.scss

@@ -1,4 +1,5 @@
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use '../variables/zindex';
 @use '../variables/si-vars';
@@ -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;
 }
@@ -194,7 +195,7 @@
   }
 
   .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

@@ -87,9 +87,9 @@ $nav-tabs-min-width: 100px;
 
     &.active {
       border-color: system-tokens.$si-sys-border-accent-hover;
-      font-size: typography.$si-font-size-body-lg-bold;
-      font-weight: typography.$si-font-weight-body-lg-bold;
-      line-height: typography.$si-line-height-body-lg-bold;
+      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 {

package/src/styles/bootstrap/_pagination.scss

@@ -32,7 +32,7 @@ $page-button-size: 1.5rem;
   border: 0;
 
   &:is(.active, :hover:not(:disabled)):not(.separator) {
-    background: system-tokens.$si-sys-background-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 {

package/src/styles/bootstrap/_reboot.scss

@@ -343,9 +343,9 @@ table {
 
 caption {
   @include typography.si-font(
-    typography.$si-font-size-caption,
-    typography.$si-line-height-caption,
-    typography.$si-font-weight-caption
+    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;

package/src/styles/bootstrap/_type.scss

@@ -112,6 +112,7 @@ h1,
   );
 }
 
+// DEPRECATED: Use .si-h1 instead.
 .si-h1-bold {
   @include typography.si-font(
     typography.$si-font-size-h1-bold,
@@ -140,6 +141,7 @@ h3,
   );
 }
 
+// DEPRECATED: Use .si-h4 instead.
 .si-h4-bold {
   @include typography.si-font(
     typography.$si-font-size-h4-bold,
@@ -250,6 +252,7 @@ h6,
   );
 }
 
+// DEPRECATED: Use .si-body-sm instead.
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -308,6 +311,7 @@ h6,
   );
 }
 
+// DEPRECATED: Use .si-display-lg-sbold instead of .si-display-bold.
 .si-display-bold,
 .display-3 {
   @include typography.si-font(

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

@@ -1,8 +1,8 @@
 @use '../variables/animations';
-@use '../variables/elevation';
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/sizing';
 @use '../variables/typography';
 @use './functions';
 
@@ -134,9 +134,13 @@ $border-radius-sm: semantic-tokens.$element-radius-1 !default;
 $border-radius-lg: semantic-tokens.$element-radius-2 !default;
 $border-radius-pill: 50rem !default;
 
-$box-shadow: elevation.$element-elevation-2 !default;
-$box-shadow-sm: elevation.$element-elevation-1 !default;
-$box-shadow-lg: elevation.$element-elevation-3 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
+$box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
+$box-shadow-sm: system-tokens.$si-sys-effects-shadow-1 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
+$box-shadow-lg: system-tokens.$si-sys-effects-shadow-3 !default;
+// DEPRECATED: There is no replacement.
 $box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
 
 $component-active-color: semantic-tokens.$element-ui-5 !default;
@@ -165,7 +169,7 @@ $font-family-code: $font-family-monospace !default;
 // $font-size-base effects the font size of the body text
 $font-size-base: typography.$si-font-size-body !default;
 $font-size-lg: typography.$si-font-size-body-lg !default;
-$font-size-sm: typography.$si-font-size-caption !default;
+$font-size-sm: typography.$si-font-size-body-sm !default;
 
 $font-weight-lighter: typography.$si-font-weight-lighter;
 $font-weight-light: typography.$si-font-weight-light;
@@ -208,7 +212,7 @@ $lead-font-size: typography.$si-font-size-body-lg !default;
 $lead-line-height: typography.$si-line-height-body-lg !default;
 $lead-font-weight: typography.$si-font-weight-body-lg !default;
 
-$small-font-size: typography.$si-font-size-caption !default;
+$small-font-size: typography.$si-font-size-body-sm !default;
 
 $sub-sup-font-size: 0.75em !default;
 
@@ -262,7 +266,7 @@ $table-striped-color: $table-color !default;
 $table-striped-bg: system-tokens.$si-sys-background-0 !default;
 
 $table-active-color: $table-color !default;
-$table-active-bg: system-tokens.$si-sys-background-selected !default;
+$table-active-bg: system-tokens.$si-sys-background-active !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg: system-tokens.$si-sys-background-hover !default;
@@ -346,6 +350,7 @@ $input-color: system-tokens.$si-sys-text-primary !default;
 $input-border-color: system-tokens.$si-sys-border-2 !default;
 $input-focus-border-color: system-tokens.$si-sys-border-1 !default;
 $input-border-width: $border-width !default;
+// DEPRECATED: There is no replacement.
 $input-box-shadow: $box-shadow-inset !default;
 
 $input-border-radius: semantic-tokens.$element-input-radius !default;
@@ -359,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,
@@ -460,11 +460,11 @@ $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;
-$dropdown-box-shadow: elevation.$element-elevation-2 !default;
+$dropdown-box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
 $dropdown-link-color: system-tokens.$si-sys-text-primary !default;
 $dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
 $dropdown-item-padding-y: map.get(spacers.$spacers-block, 2);
@@ -516,6 +516,7 @@ $popover-inner-border-radius: functions.subtract(
   $popover-border-radius,
   $popover-border-width
 ) !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
 $popover-box-shadow: $box-shadow !default;
 
 $popover-header-bg: system-tokens.$si-sys-background-3 !default;
@@ -554,7 +555,9 @@ $modal-content-inner-border-radius: functions.subtract(
   $modal-content-border-radius,
   $modal-content-border-width
 ) !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
 $modal-content-box-shadow-xs: $box-shadow-sm !default;
+// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
 $modal-content-box-shadow-sm-up: $box-shadow !default;
 
 $modal-backdrop-bg: system-tokens.$si-sys-effects-backdrop !default;
@@ -603,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;
@@ -615,7 +620,7 @@ $list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.2
 
 $list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
 $list-group-active-color: $body-color !default;
-$list-group-active-bg: system-tokens.$si-sys-background-selected !default;
+$list-group-active-bg: system-tokens.$si-sys-background-active !default;
 $list-group-active-border-color: $border-color !default;
 
 $list-group-disabled-color: system-tokens.$si-sys-text-disabled !default;
@@ -634,6 +639,7 @@ $thumbnail-bg: $body-bg !default;
 $thumbnail-border-width: $border-width !default;
 $thumbnail-border-color: $border-color !default;
 $thumbnail-border-radius: $border-radius !default;
+// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
 $thumbnail-box-shadow: $box-shadow-sm !default;
 
 // Figures
@@ -660,7 +666,7 @@ $breadcrumb-border-radius: 0 !default;
 $code-font-size: typography.$si-font-size-body !default;
 $code-line-height: typography.$si-line-height-body !default;
 $code-color: system-tokens.$si-sys-text-primary !default;
-$code-background: system-tokens.$si-sys-background-selected !default;
+$code-background: system-tokens.$si-sys-background-active !default;
 $code-padding-y: map.get(spacers.$spacers-block, 1) !default;
 $code-padding-x: map.get(spacers.$spacers-inline, 2) !default;
 $code-border-radius: semantic-tokens.$element-radius-1 !default;

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

@@ -26,7 +26,6 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
 .form-check {
   padding-block: map.get(spacers.$spacers-block, 1);
   padding-inline-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4));
-  margin-block-end: map.get(spacers.$spacers-block, 2);
 
   @extend %form-check-spacing;
 
@@ -37,7 +36,6 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
 
 .form-check-inline {
   display: inline-block;
-  margin-block-end: 0;
   margin-inline-end: variables.$form-check-inline-margin-end;
   @extend %form-check-spacing;
 }
@@ -55,7 +53,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
   }
 
   &:is(:active, .active) {
-    background: system-tokens.$si-sys-background-selected;
+    background: system-tokens.$si-sys-background-active;
   }
 
   &:is([disabled], .disabled) {

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/bootstrap/forms/_form-range.scss

@@ -1,4 +1,3 @@
-@use '../../variables/elevation';
 @use '../../variables/focus';
 @use '../../variables/system-tokens';
 

package/src/styles/bootstrap/forms/_validation.scss

@@ -62,7 +62,7 @@
   font-size: variables.$form-feedback-font-size;
   display: none;
   inline-size: 100%;
-  line-height: typography.$si-line-height-caption;
+  line-height: typography.$si-line-height-body-sm;
   margin-block: map.get(spacers.$spacers-block, 1);
   margin-inline: map.get(spacers.$spacers-inline, 1);
 }

package/src/styles/bootstrap/mixins/_badge-text.scss

@@ -7,7 +7,7 @@
 @mixin badge-text {
   min-inline-size: 0.875rem;
   border-radius: 0.4375rem;
-  font-size: typography.$si-font-size-caption;
+  font-size: typography.$si-font-size-body-sm;
   line-height: 0.875rem;
   padding-block: 0;
   padding-inline: map.get(spacers.$spacers-inline, 2);

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

@@ -1,7 +1,6 @@
 @use '../bootstrap/mixins/breakpoints';
 @use '../bootstrap/variables' as bootstrap-variables;
 @use '../variables/si-vars';
-@use '../variables/elevation';
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';

package/src/styles/components/_datatable.scss

@@ -3,8 +3,8 @@
 @use '../variables/animations';
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
-@use '../variables/spacers';
 @use '../variables/system-tokens';
+@use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/utilities';
 
@@ -28,7 +28,7 @@ $datatable-ghost-cell-strip-background: system-tokens.$si-sys-background-hover !
 $datatable-ghost-cell-strip-background-image: linear-gradient(
   90deg,
   system-tokens.$si-sys-background-hover 0%,
-  system-tokens.$si-sys-background-selected 25%,
+  system-tokens.$si-sys-background-active 25%,
   system-tokens.$si-sys-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
@@ -335,7 +335,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
     color: system-tokens.$si-sys-text-secondary;
-    font-size: typography.$si-font-size-caption;
+    font-size: typography.$si-font-size-body-sm;
     margin-block-start: -1px;
     position: relative;
     z-index: 11;

package/src/styles/components/_drag_drop.scss

@@ -24,7 +24,7 @@
 
 .cdk-drag-preview {
   background-color: variables.$si-sys-background-3 !important;
-  box-shadow: variables.$element-elevation-2 !important;
+  box-shadow: variables.$si-sys-effects-shadow-3 !important;
   position: relative !important;
   inset-inline-start: -5px !important;
   inset-block-start: -10px !important;

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/_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: '';
@@ -168,7 +163,7 @@ ol:has(.list-item) {
     }
 
     &:active {
-      background-color: variables.$si-sys-background-selected;
+      background-color: variables.$si-sys-background-active;
     }
 
     &:focus-visible {

package/src/styles/components/_pills.scss

@@ -11,7 +11,7 @@
   max-inline-size: 100%;
 
   &.active {
-    background: variables.$si-sys-background-selected;
+    background: variables.$si-sys-background-active;
   }
 
   &.pill-interactive {

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/components/_skeleton.scss

@@ -14,7 +14,7 @@
   background: linear-gradient(
     90deg,
     system-tokens.$si-sys-background-hover 0%,
-    system-tokens.$si-sys-background-selected 25%,
+    system-tokens.$si-sys-background-active 25%,
     system-tokens.$si-sys-background-hover 50%
   );
   background-size: 200% 100%;

package/src/styles/components/_widgets.scss

@@ -7,10 +7,10 @@
 @use './skeleton';
 
 .si-value-widget-value {
-  @extend .si-display-bold;
+  @extend .si-display-lg-sbold;
   display: inline-block;
   min-block-size: calc(
-    #{variables.$si-font-size-display-bold} * #{variables.$si-line-height-display-bold}
+    #{variables.$si-font-size-display-lg-sbold} * #{variables.$si-line-height-display-lg-sbold}
   );
 }
 
@@ -19,10 +19,10 @@
 * the line height.
 */
 .si-value-widget-value-skeleton {
-  @extend .si-display-bold;
+  @extend .si-display-lg-sbold;
   @extend .si-skeleton;
   display: inline-block;
-  block-size: #{variables.$si-font-size-display-bold};
+  block-size: #{variables.$si-font-size-display-lg-sbold};
   vertical-align: middle;
   inline-size: 100%;
 }

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/_elevation.scss

@@ -1,25 +1,27 @@
-$element-elevation-1:
-  0 0 4px var(--element-box-shadow-color-1),
-  0 4px 4px var(--element-box-shadow-color-2);
-$element-elevation-2:
-  0 0 8px var(--element-box-shadow-color-1),
-  0 8px 8px var(--element-box-shadow-color-2);
-$element-elevation-3:
-  0 0 16px var(--element-box-shadow-color-1),
-  0 16px 16px var(--element-box-shadow-color-2);
-$element-elevation-4:
-  0 0 32px var(--element-box-shadow-color-1),
-  0 32px 32px var(--element-box-shadow-color-2);
+@use 'system-tokens';
 
+// @deprecated Use $si-sys-effects-shadow-1 instead.
+$element-elevation-1: system-tokens.$si-sys-effects-shadow-1;
+// @deprecated Use $si-sys-effects-shadow-2 instead.
+$element-elevation-2: system-tokens.$si-sys-effects-shadow-2;
+// @deprecated Use $si-sys-effects-shadow-3 instead.
+$element-elevation-3: system-tokens.$si-sys-effects-shadow-3;
+// @deprecated Use $si-sys-effects-shadow-4 instead.
+$element-elevation-4: system-tokens.$si-sys-effects-shadow-4;
+
+// @deprecated There is no replacement.
 $element-elevation-inset-1:
   inset 0 0 4px var(--element-box-shadow-color-1),
   inset 0 4px 4px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-2:
   inset 0 0 8px var(--element-box-shadow-color-1),
   inset 0 8px 8px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-3:
   inset 0 0 16px var(--element-box-shadow-color-1),
   inset 0 16px 16px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-4:
   inset 0 0 32px var(--element-box-shadow-color-1),
   inset 0 32px 32px var(--element-box-shadow-color-2);

package/src/styles/variables/_si-vars.scss

@@ -21,7 +21,7 @@ $btn-width-normal: map.get(sizing.$sizing, 120);
 $si-application-header-height: calc(map.get(sizing.$sizing, 100) + 1px);
 $si-titlebar-padding-y: map.get(spacers.$spacers-block, 3);
 $si-titlebar-height: calc(1.5rem + 2 * $si-titlebar-padding-y);
-$si-system-banner-padding-y: map.get(spacers.$spacers-block, 1);
+$si-system-banner-padding-y: map.get(spacers.$spacers-block, 2);
 $si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top

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-selected: var(--si-sys-background-selected);
+$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,23 +74,26 @@ $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-data-categorial-1: var(--si-sys-data-categorial-1);
-$si-sys-data-categorial-10: var(--si-sys-data-categorial-10);
-$si-sys-data-categorial-11: var(--si-sys-data-categorial-11);
-$si-sys-data-categorial-12: var(--si-sys-data-categorial-12);
-$si-sys-data-categorial-13: var(--si-sys-data-categorial-13);
-$si-sys-data-categorial-14: var(--si-sys-data-categorial-14);
-$si-sys-data-categorial-15: var(--si-sys-data-categorial-15);
-$si-sys-data-categorial-16: var(--si-sys-data-categorial-16);
-$si-sys-data-categorial-17: var(--si-sys-data-categorial-17);
-$si-sys-data-categorial-2: var(--si-sys-data-categorial-2);
-$si-sys-data-categorial-3: var(--si-sys-data-categorial-3);
-$si-sys-data-categorial-4: var(--si-sys-data-categorial-4);
-$si-sys-data-categorial-5: var(--si-sys-data-categorial-5);
-$si-sys-data-categorial-6: var(--si-sys-data-categorial-6);
-$si-sys-data-categorial-7: var(--si-sys-data-categorial-7);
-$si-sys-data-categorial-8: var(--si-sys-data-categorial-8);
-$si-sys-data-categorial-9: var(--si-sys-data-categorial-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-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);
+$si-sys-data-categorical-5: var(--si-sys-data-categorical-5);
+$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/styles/variables/_typography.scss

@@ -33,6 +33,7 @@ $si-font-size-h1: var(--si-sys-typography-font-size-h1);
 $si-line-height-h1: var(--si-sys-typography-line-height-h1);
 $si-font-weight-h1: $si-font-weight-sbold;
 
+// DEPRECATED: Use the $si-*-h1 variables instead.
 $si-font-size-h1-bold: $si-font-size-h1;
 $si-line-height-h1-bold: $si-line-height-h1;
 $si-font-weight-h1-bold: $si-font-weight-bold;
@@ -49,6 +50,7 @@ $si-font-size-h4: var(--si-sys-typography-font-size-h4);
 $si-line-height-h4: var(--si-sys-typography-line-height-h4);
 $si-font-weight-h4: $si-font-weight-sbold;
 
+// DEPRECATED: Use the $si-*-h4 variables instead.
 $si-font-size-h4-bold: $si-font-size-h4;
 $si-line-height-h4-bold: $si-line-height-h4;
 $si-font-weight-h4-bold: $si-font-weight-bold;
@@ -69,6 +71,7 @@ $si-font-size-body-lg: var(--si-sys-typography-font-size-body-lg);
 $si-line-height-body-lg: var(--si-sys-typography-line-height-body-lg);
 $si-font-weight-body-lg: $si-font-weight-normal;
 
+// DEPRECATED: Use the $si-*-body-lg-sbold variables instead.
 $si-font-size-body-lg-bold: var(--si-sys-typography-font-size-body-lg);
 $si-line-height-body-lg-bold: $si-line-height-body-lg;
 $si-font-weight-body-lg-bold: $si-font-weight-sbold;
@@ -101,6 +104,7 @@ $si-font-size-body-sm-sbold: $si-font-size-body-sm;
 $si-line-height-body-sm-sbold: $si-line-height-body-sm;
 $si-font-weight-body-sm-sbold: $si-font-weight-sbold;
 
+// DEPRECATED: Use the $si-*-body-sm variables instead.
 $si-font-size-caption: $si-font-size-body-sm;
 $si-line-height-caption: $si-line-height-body-sm;
 $si-font-weight-caption: $si-font-weight-normal;
@@ -129,6 +133,7 @@ $si-font-size-display-lg-sbold: $si-font-size-display-lg;
 $si-line-height-display-lg-sbold: $si-line-height-display-lg;
 $si-font-weight-display-lg-sbold: $si-font-weight-sbold;
 
+// DEPRECATED: Use the $si-*-display-lg-sbold variables instead.
 $si-font-size-display-bold: $si-font-size-display-lg;
 $si-line-height-display-bold: $si-line-height-display-lg;
 $si-font-weight-display-bold: $si-font-weight-bold;

package/src/styles/variables/_utilities.scss

@@ -2,6 +2,7 @@
 
 @use '../bootstrap/variables';
 @use 'spacers';
+@use 'system-tokens';
 
 $_margins-inline: map.merge(
   spacers.$spacers-inline,
@@ -57,9 +58,16 @@ $utilities: (
     property: box-shadow,
     class: shadow,
     values: (
+      // Deprecated: Use shadow-2 instead.
       null: variables.$box-shadow,
+      // Deprecated: Use shadow-1 instead.
       sm: variables.$box-shadow-sm,
+      // Deprecated: Use shadow-3 instead.
       lg: variables.$box-shadow-lg,
+      1: system-tokens.$si-sys-effects-shadow-1,
+      2: system-tokens.$si-sys-effects-shadow-2,
+      3: system-tokens.$si-sys-effects-shadow-3,
+      4: system-tokens.$si-sys-effects-shadow-4,
       none: none
     )
   ),

package/src/theme/_theme-element.scss

@@ -255,7 +255,7 @@ $theme-element-light: (
   si-sys-background-3: base.$color-white,
   si-sys-background-4: base.$color-experimental-deep-blue-25,
   si-sys-background-hover: base.$color-light-sand,
-  si-sys-background-selected: base.$color-sand,
+  si-sys-background-active: base.$color-sand,
   si-sys-background-accent: base.$color-interactive-blue-500,
   si-sys-background-accent-hover: base.$color-teal,
   si-sys-background-accent-active: base.$color-interactive-blue-700,
@@ -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,
@@ -327,23 +339,23 @@ $theme-element-light: (
   si-sys-effects-shadow-1: base.$color-white,
   si-sys-effects-shadow-2: base.$color-light-sand,
   si-sys-effects-shadow-3: base.$color-white,
-  si-sys-data-categorial-1: data.$color-data-petrol,
-  si-sys-data-categorial-2: data.$color-data-turquoise-900,
-  si-sys-data-categorial-3: data.$color-data-green-700,
-  si-sys-data-categorial-4: data.$color-data-turquoise-700,
-  si-sys-data-categorial-5: data.$color-data-royal-blue-500,
-  si-sys-data-categorial-6: data.$color-data-interactive-coral-900,
-  si-sys-data-categorial-7: data.$color-data-purple-700,
-  si-sys-data-categorial-8: data.$color-data-purple-900,
-  si-sys-data-categorial-9: data.$color-data-orchid-700,
-  si-sys-data-categorial-10: data.$color-data-red-700,
-  si-sys-data-categorial-11: data.$color-data-plum-900,
-  si-sys-data-categorial-12: data.$color-data-plum-500,
-  si-sys-data-categorial-13: data.$color-data-royal-blue-700,
-  si-sys-data-categorial-14: data.$color-data-orange-900,
-  si-sys-data-categorial-15: data.$color-data-yellow-900,
-  si-sys-data-categorial-16: data.$color-data-sand-700,
-  si-sys-data-categorial-17: data.$color-data-deep-blue-700,
+  si-sys-data-categorical-1: data.$color-data-petrol,
+  si-sys-data-categorical-2: data.$color-data-turquoise-900,
+  si-sys-data-categorical-3: data.$color-data-green-700,
+  si-sys-data-categorical-4: data.$color-data-turquoise-700,
+  si-sys-data-categorical-5: data.$color-data-royal-blue-500,
+  si-sys-data-categorical-6: data.$color-data-interactive-coral-900,
+  si-sys-data-categorical-7: data.$color-data-purple-700,
+  si-sys-data-categorical-8: data.$color-data-purple-900,
+  si-sys-data-categorical-9: data.$color-data-orchid-700,
+  si-sys-data-categorical-10: data.$color-data-red-700,
+  si-sys-data-categorical-11: data.$color-data-plum-900,
+  si-sys-data-categorical-12: data.$color-data-plum-500,
+  si-sys-data-categorical-13: data.$color-data-royal-blue-700,
+  si-sys-data-categorical-14: data.$color-data-orange-900,
+  si-sys-data-categorical-15: data.$color-data-yellow-900,
+  si-sys-data-categorical-16: data.$color-data-sand-700,
+  si-sys-data-categorical-17: data.$color-data-deep-blue-700,
   si-sys-data-sequential-avocado-1: data.$color-data-avocado-400,
   si-sys-data-sequential-avocado-2: data.$color-data-avocado-500,
   si-sys-data-sequential-avocado-3: data.$color-data-avocado-700,
@@ -586,7 +598,7 @@ $theme-element-dark: (
   si-sys-background-3: base.$color-grayish-navy,
   si-sys-background-4: base.$color-experimental-deep-blue-850,
   si-sys-background-hover: base.$color-dark-grayish-navy,
-  si-sys-background-selected: base.$color-grayish-navy,
+  si-sys-background-active: base.$color-grayish-navy,
   si-sys-background-accent: base.$color-interactive-coral,
   si-sys-background-accent-hover: base.$color-bold-green,
   si-sys-background-accent-active: base.$color-interactive-blue-700,
@@ -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,
@@ -658,23 +682,23 @@ $theme-element-dark: (
   si-sys-effects-shadow-1: base.$color-deep-blue-800,
   si-sys-effects-shadow-2: base.$color-deep-blue-700,
   si-sys-effects-shadow-3: base.$color-grayish-navy,
-  si-sys-data-categorial-1: data.$color-data-light-petrol,
-  si-sys-data-categorial-2: data.$color-data-bold-green,
-  si-sys-data-categorial-3: data.$color-data-green-400,
-  si-sys-data-categorial-4: data.$color-data-turquoise-100,
-  si-sys-data-categorial-5: data.$color-data-royal-blue-400,
-  si-sys-data-categorial-6: data.$color-data-interactive-coral-100,
-  si-sys-data-categorial-7: data.$color-data-purple-500,
-  si-sys-data-categorial-8: data.$color-data-purple-200,
-  si-sys-data-categorial-9: data.$color-data-orchid-400,
-  si-sys-data-categorial-10: data.$color-data-red-500,
-  si-sys-data-categorial-11: data.$color-data-plum-400,
-  si-sys-data-categorial-12: data.$color-data-plum-200,
-  si-sys-data-categorial-13: data.$color-data-royal-blue-200,
-  si-sys-data-categorial-14: data.$color-data-orange-400,
-  si-sys-data-categorial-15: data.$color-data-yellow-400,
-  si-sys-data-categorial-16: data.$color-data-sand-500,
-  si-sys-data-categorial-17: data.$color-data-deep-blue-500,
+  si-sys-data-categorical-1: data.$color-data-light-petrol,
+  si-sys-data-categorical-2: data.$color-data-bold-green,
+  si-sys-data-categorical-3: data.$color-data-green-400,
+  si-sys-data-categorical-4: data.$color-data-turquoise-100,
+  si-sys-data-categorical-5: data.$color-data-royal-blue-400,
+  si-sys-data-categorical-6: data.$color-data-interactive-coral-100,
+  si-sys-data-categorical-7: data.$color-data-purple-500,
+  si-sys-data-categorical-8: data.$color-data-purple-200,
+  si-sys-data-categorical-9: data.$color-data-orchid-400,
+  si-sys-data-categorical-10: data.$color-data-red-500,
+  si-sys-data-categorical-11: data.$color-data-plum-400,
+  si-sys-data-categorical-12: data.$color-data-plum-200,
+  si-sys-data-categorical-13: data.$color-data-royal-blue-200,
+  si-sys-data-categorical-14: data.$color-data-orange-400,
+  si-sys-data-categorical-15: data.$color-data-yellow-400,
+  si-sys-data-categorical-16: data.$color-data-sand-500,
+  si-sys-data-categorical-17: data.$color-data-deep-blue-500,
   si-sys-data-sequential-avocado-1: data.$color-data-avocado-200,
   si-sys-data-sequential-avocado-2: data.$color-data-avocado-400,
   si-sys-data-sequential-avocado-3: data.$color-data-avocado-500,