refactor(theme)!: replace legacy shadow variables

docs/fundamentals/elevation.md

@@ -59,16 +59,12 @@ illustrations, or animations to enhance depth and spatial relationships.
 - `elevation-3`: For elements requiring stronger visual prominence, such as multi-layered highlights.
 - `elevation-4`: Reserved for rare or critical cases requiring maximum elevation distinction.
 
-| Elevation | Token                  | Color            | Opacity (light) | Opacity (dark) | X   | Y    | Blur |
-| --------- | ---------------------- | ---------------- | --------------- | -------------- | --- | ---- | ---- |
-| Level 1   | `$element-elevation-1` | `$element-black` | 16%             | 40%            | 0px | 0px  | 4px  |
-|           |                        | `$element-black` | 8%              | 20%            | 0px | 4px  | 4px  |
-| Level 2   | `$element-elevation-2` | `$element-black` | 16%             | 40%            | 0px | 0px  | 8px  |
-|           |                        | `$element-black` | 8%              | 20%            | 0px | 8px  | 8px  |
-| Level 3   | `$element-elevation-3` | `$element-black` | 16%             | 40%            | 0px | 0px  | 16px |
-|           |                        | `$element-black` | 8%              | 20%            | 0px | 40px | 16px |
-| Level 4   | `$element-elevation-4` | `$element-black` | 16%             | 40%            | 0px | 0px  | 32px |
-|           |                        | `$element-black` | 8%              | 20%            | 0px | 32px | 32px |
+| Elevation | System token                |
+| --------- | --------------------------- |
+| Level 1   | `--si-sys-effects-shadow-1` |
+| Level 2   | `--si-sys-effects-shadow-2` |
+| Level 3   | `--si-sys-effects-shadow-3` |
+| Level 4   | `--si-sys-effects-shadow-4` |
 
 ## Code ---
 
@@ -77,22 +73,24 @@ be accessed directly by using CSS utility classes.
 
 <si-docs-component example="elevation/elevation" height="120"></si-docs-component>
 
-### Sass variables
+### System tokens
 
-The shadow values for each _Element_ elevation level can also be alternatively
-used as SCSS variables within stylesheets. This also allows you to consume the
-inset alternatives to the outside shadow variants.
+Use the system tokens directly when applying an elevation in a stylesheet.
 
 ```scss
-@use '@siemens/element-theme/src/styles/variables';
+box-shadow: var(--si-sys-effects-shadow-1);
+box-shadow: var(--si-sys-effects-shadow-2);
+box-shadow: var(--si-sys-effects-shadow-3);
+box-shadow: var(--si-sys-effects-shadow-4);
+```
 
-box-shadow: variables.$element-elevation-1;
-box-shadow: variables.$element-elevation-2;
-box-shadow: variables.$element-elevation-3;
-box-shadow: variables.$element-elevation-4;
+The legacy elevation variables have been removed. Migrate to the corresponding
+`--si-sys-effects-shadow-*` token:
 
-box-shadow: variables.$element-elevation-inset-1;
-box-shadow: variables.$element-elevation-inset-2;
-box-shadow: variables.$element-elevation-inset-3;
-box-shadow: variables.$element-elevation-inset-4;
-```
+- `$element-elevation-1`, `$element-elevation-2`, `$element-elevation-3`, `$element-elevation-4`
+- `$element-elevation-inset-1`, `$element-elevation-inset-2`, `$element-elevation-inset-3`, `$element-elevation-inset-4`
+- `$box-shadow`, `$box-shadow-sm`, `$box-shadow-lg`, `$box-shadow-inset`, `$input-box-shadow`
+- `$popover-box-shadow`, `$modal-content-box-shadow-xs`, `$modal-content-box-shadow-sm-up`, `$thumbnail-box-shadow`
+
+The `--element-box-shadow-color-1` and `--element-box-shadow-color-2` custom
+properties have also been removed.

projects/dashboards-ng/src/components/widget-host/si-widget-host.component.html

@@ -25,7 +25,7 @@
     #card
     class="h-100 dragging-card"
     [class]="accentLine()"
-    [class.elevation-2]="keyboardActive()"
+    [class.elevation-3]="keyboardActive()"
     [class.si-widget-keyboard-active]="keyboardActive()"
     [attr.tabindex]="editable() ? 0 : null"
     [attr.role]="editable() ? 'application' : null"

projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss

@@ -28,7 +28,7 @@
   .ui-draggable-dragging,
   .ui-resizable-resizing {
     .dragging-card {
-      box-shadow: variables.$element-elevation-2 !important; // stylelint-disable-line declaration-no-important
+      box-shadow: variables.$si-sys-effects-shadow-3 !important; // stylelint-disable-line declaration-no-important
     }
 
     > .grid-stack-item-content {

projects/element-ng/ag-grid/parts/color-scheme.part.ts

@@ -172,8 +172,7 @@ export const elementColorScheme: Part = createPart({
     // Menu styles
     menuBackgroundColor: 'var(--element-base-1)',
     menuBorder: false,
-    menuShadow:
-      '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
+    menuShadow: 'var(--si-sys-effects-shadow-2)',
 
     // Pinning styles
     pinnedColumnBorder: {
@@ -186,8 +185,7 @@ export const elementColorScheme: Part = createPart({
     // Drag and drop styles
     dragAndDropImageBackgroundColor: 'var(--element-base-3)',
     dragAndDropImageBorder: false,
-    dragAndDropImageShadow:
-      '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
+    dragAndDropImageShadow: 'var(--si-sys-effects-shadow-2)',
     dragHandleColor: 'var(--element-text-primary)',
 
     // Range selection styles

projects/element-ng/ag-grid/parts/pinning-style.part.ts

@@ -14,17 +14,13 @@ import { createPart, type Part } from 'ag-grid-community';
 export const elementPinningStyle: Part = createPart({
   css: `
   .ag-floating-top {
-    box-shadow:
-      0 0 8px var(--element-box-shadow-color-1),
-      0 8px 8px var(--element-box-shadow-color-2);
+    box-shadow: var(--si-sys-effects-shadow-2);
     z-index: 1;
     position: relative;
   }
 
   .ag-floating-bottom {
-    box-shadow:
-      0 0 8px var(--element-box-shadow-color-1),
-      0 -8px 8px var(--element-box-shadow-color-2);
+    box-shadow: 0 0 8px rgb(0 0 0 / 16%), 0 -8px 8px rgb(0 0 0 / 8%);
     z-index: 1;
     position: relative;
   }

projects/element-ng/color-picker/si-color-picker.component.html

@@ -27,7 +27,7 @@
   (backdropClick)="overlayDetach()"
   (detach)="overlayDetach()"
 >
-  <div #colorPaletteRef role="grid" class="colors elevation-1 rounded-2 bg-base-1 p-4 mt-1">
+  <div #colorPaletteRef role="grid" class="colors elevation-3 rounded-2 bg-base-1 p-4 mt-1">
     <div role="row" class="colors-row gap-4">
       @for (paint of colorPalette(); track $index) {
         <div role="gridcell" class="swatch">

projects/element-ng/date-range-filter/si-date-range-filter.component.html

@@ -28,7 +28,7 @@
       >
         <div
           cdkTrapFocus
-          class="preset-select mobile elevation-2 rounded-2 w-100"
+          class="preset-select mobile elevation-3 rounded-2 w-100"
           cdkTrapFocusAutoCapture
         >
           <ng-container *ngTemplateOutlet="presets" />

projects/element-ng/datepicker/si-datepicker-overlay.component.ts

@@ -84,7 +84,7 @@ import { DatepickerConfig, DateRange } from './si-datepicker.model';
   `,
   styleUrl: './si-datepicker-overlay.component.scss',
   host: {
-    class: 'mt-md-1 d-flex elevation-2 rounded-2 overflow-auto align-items-stretch',
+    class: 'mt-md-1 d-flex elevation-3 rounded-2 overflow-auto align-items-stretch',
     '[class.flex-wrap]': 'isMobile()',
     '[class.mobile-datepicker-overlay]': 'isMobile()',
     '[class.fade]': 'isMobile()',

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss

@@ -96,7 +96,7 @@ nav {
 // the .nav-text-only sidebar and the mobile off-canvas drawer below sm.
 @mixin mobile-drawer-overlay {
   background: all-variables.$element-base-1;
-  box-shadow: all-variables.$element-elevation-1;
+  box-shadow: all-variables.$si-sys-effects-shadow-1;
 }
 
 :host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer {

projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss

@@ -108,7 +108,7 @@ si-search-bar {
     color: all-variables.$element-text-primary;
     background: all-variables.$element-base-1;
     text-align: end;
-    box-shadow: all-variables.$element-elevation-1;
+    box-shadow: all-variables.$si-sys-effects-shadow-1;
   }
 
   si-search-bar {

projects/element-ng/side-panel/si-side-panel-content.component.scss

@@ -147,7 +147,7 @@
       border-start-end-radius: 0 !important; // stylelint-disable-line declaration-no-important
       border-end-end-radius: 0 !important; // stylelint-disable-line declaration-no-important
       background: all-variables.$element-base-1;
-      box-shadow: all-variables.$element-elevation-1;
+      box-shadow: all-variables.$si-sys-effects-shadow-1;
       z-index: 2;
     }
   }

projects/element-ng/side-panel/si-side-panel.component.scss

@@ -69,7 +69,7 @@ $transition: opacity 0.15s linear;
     padding-inline-end: var(--rpanel-collapsed-width);
 
     &:not(.rpanel-collapsed) .side-panel {
-      box-shadow: all-variables.$element-elevation-2;
+      box-shadow: all-variables.$si-sys-effects-shadow-2;
     }
   }
 
@@ -109,7 +109,7 @@ $transition: opacity 0.15s linear;
 
     &:not(.rpanel-collapsed) {
       .side-panel {
-        box-shadow: all-variables.$element-elevation-2;
+        box-shadow: all-variables.$si-sys-effects-shadow-2;
       }
 
       .side-panel,

projects/element-ng/slider/si-slider.component.scss

@@ -135,7 +135,7 @@ $thumb-handle-size: calc($thumb-size + 2 * #{map.get(variables.$spacers, 4)});
     min-inline-size: $thumb-size;
     border-radius: 50%;
     border: 1px solid var(--thumb-state-color);
-    box-shadow: variables.$element-elevation-2;
+    box-shadow: variables.$si-sys-effects-shadow-1;
     background: variables.$element-base-1;
 
     &:hover:not(.dragging) {

projects/element-ng/status-bar/si-status-bar.component.html

@@ -15,7 +15,7 @@
 >
   <div
     class="status-bar-wrapper rounded-2"
-    [class.elevation-2]="expanded()"
+    [class.elevation-3]="expanded()"
     [class.pe-2]="muteButton() !== undefined"
   >
     @if (responsiveMode) {

projects/element-ng/status-bar/si-status-bar.component.scss

@@ -79,7 +79,7 @@ $blink-transition-duration: variables.$element-default-transition-duration;
   cursor: pointer;
 
   &.expanded {
-    box-shadow: 0 8px 8px var(--element-box-shadow-color-2);
+    box-shadow: variables.$si-sys-effects-shadow-2;
 
     si-icon {
       transform: rotate(180deg);

projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html

@@ -1,7 +1,7 @@
 @let toastValue = toast();
 @let autoClose = !toastValue.disableAutoClose;
 @let manualClose = !toastValue.disableManualClose;
-<div class="si-toast elevation-2" [class.si-toast-auto-close]="autoClose">
+<div class="si-toast elevation-3" [class.si-toast-auto-close]="autoClose">
   @if (autoClose) {
     <div
       class="si-toast-timer-bar"

projects/element-theme/src/styles/_variables.scss

@@ -3,7 +3,6 @@
 @forward './variables/semantic-tokens';
 @forward './variables/system-tokens';
 @forward './variables/typography';
-@forward './variables/elevation';
 @forward './variables/focus';
 @forward './variables/spacers';
 @forward './variables/zindex';

projects/element-theme/src/styles/bootstrap/_images.scss

@@ -1,4 +1,5 @@
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use './mixins/image';
 @use './variables';
 
@@ -19,7 +20,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();

projects/element-theme/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 {

projects/element-theme/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 {

projects/element-theme/src/styles/bootstrap/_variables.scss

@@ -1,5 +1,4 @@
 @use '../variables/animations';
-@use '../variables/elevation';
 @use '../variables/semantic-tokens';
 @use '../variables/system-tokens';
 @use '../variables/spacers';
@@ -132,11 +131,6 @@ $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;
-$box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
-
 $component-active-color: semantic-tokens.$element-ui-5 !default;
 
 $transition-base: all animations.element-transition-duration(0.2s) ease-in-out !default;
@@ -343,7 +337,6 @@ $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;
-$input-box-shadow: $box-shadow-inset !default;
 
 $input-border-radius: semantic-tokens.$element-input-radius !default;
 
@@ -461,7 +454,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-3 !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, 2);
@@ -513,7 +506,6 @@ $popover-inner-border-radius: functions.subtract(
   $popover-border-radius,
   $popover-border-width
 ) !default;
-$popover-box-shadow: $box-shadow !default;
 
 $popover-header-bg: system-tokens.$si-sys-background-3 !default;
 $popover-header-color: system-tokens.$si-sys-text-accent;
@@ -551,8 +543,6 @@ $modal-content-inner-border-radius: functions.subtract(
   $modal-content-border-radius,
   $modal-content-border-width
 ) !default;
-$modal-content-box-shadow-xs: $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up: $box-shadow !default;
 
 $modal-backdrop-bg: semantic-tokens.$element-base-translucent-1 !default;
 $modal-backdrop-opacity: 1 !default;
@@ -629,7 +619,6 @@ $thumbnail-bg: $body-bg !default;
 $thumbnail-border-width: $border-width !default;
 $thumbnail-border-color: $border-color !default;
 $thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: $box-shadow-sm !default;
 
 // Figures
 

projects/element-theme/src/styles/bootstrap/forms/_form-range.scss

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

projects/element-theme/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/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';

projects/element-theme/src/styles/components/_datatable.scss

@@ -3,6 +3,7 @@
 @use '../variables/animations';
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/utilities';
@@ -189,15 +190,15 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-row-left {
         .datatable-body-cell:last-child,
         .datatable-header-cell:last-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          box-shadow: system-tokens.$si-sys-effects-shadow-3;
           clip-path: inset(0 -8px 0 0);
         }
       }
 
       .datatable-row-right {
         .datatable-body-cell:first-child,
         .datatable-header-cell:first-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          box-shadow: system-tokens.$si-sys-effects-shadow-3;
           clip-path: inset(0 0 0 -8px);
         }
       }

projects/element-theme/src/styles/components/_drag_drop.scss

@@ -23,7 +23,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 
 .cdk-drag-preview {
   background-color: variables.$element-base-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;