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

package/package.json

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

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

@@ -109,7 +109,7 @@
 }
 
 .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;

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

@@ -1,5 +1,4 @@
 @use '../variables/animations';
-@use '../variables/elevation';
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
@@ -134,9 +133,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 +168,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 +211,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 +265,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 +349,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;
@@ -464,7 +468,7 @@ $dropdown-bg: system-tokens.$si-sys-background-1 !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 +520,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 +559,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;
@@ -615,7 +622,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 +641,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 +668,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-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

@@ -168,7 +168,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/_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/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

@@ -29,7 +29,7 @@ $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-active: var(--si-sys-background-active);
 $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);
@@ -68,23 +68,23 @@ $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-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);
+$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-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);

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,
@@ -327,23 +327,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 +586,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,
@@ -658,23 +658,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,