diff --git a/docs/fundamentals/elevation.md b/docs/fundamentals/elevation.md index cb8a09ee01..c47cbfba39 100644 --- a/docs/fundamentals/elevation.md +++ b/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. -### 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. diff --git a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.html b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.html index 9d714472e7..1ec3bfc101 100644 --- a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.html +++ b/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" diff --git a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss index 2e03a524cd..13b49cd90d 100644 --- a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss +++ b/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 { diff --git a/projects/element-ng/ag-grid/parts/color-scheme.part.ts b/projects/element-ng/ag-grid/parts/color-scheme.part.ts index 8c571e87e8..620c50bfc4 100644 --- a/projects/element-ng/ag-grid/parts/color-scheme.part.ts +++ b/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 diff --git a/projects/element-ng/ag-grid/parts/pinning-style.part.ts b/projects/element-ng/ag-grid/parts/pinning-style.part.ts index 70e2c437b8..3b9f6b84e1 100644 --- a/projects/element-ng/ag-grid/parts/pinning-style.part.ts +++ b/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; } diff --git a/projects/element-ng/color-picker/si-color-picker.component.html b/projects/element-ng/color-picker/si-color-picker.component.html index 83b39453e1..6895a8bc10 100644 --- a/projects/element-ng/color-picker/si-color-picker.component.html +++ b/projects/element-ng/color-picker/si-color-picker.component.html @@ -27,7 +27,7 @@ (backdropClick)="overlayDetach()" (detach)="overlayDetach()" > -
+
@for (paint of colorPalette(); track $index) {
diff --git a/projects/element-ng/date-range-filter/si-date-range-filter.component.html b/projects/element-ng/date-range-filter/si-date-range-filter.component.html index 5d9280d96a..6c93f7727b 100644 --- a/projects/element-ng/date-range-filter/si-date-range-filter.component.html +++ b/projects/element-ng/date-range-filter/si-date-range-filter.component.html @@ -28,7 +28,7 @@ >
diff --git a/projects/element-ng/datepicker/si-datepicker-overlay.component.ts b/projects/element-ng/datepicker/si-datepicker-overlay.component.ts index 3560dd79e6..60a7f4ad65 100644 --- a/projects/element-ng/datepicker/si-datepicker-overlay.component.ts +++ b/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()', diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss index 11a9deeee5..10dde334d2 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss +++ b/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 { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss index bf55f22694..44a6c4ea53 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss +++ b/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 { diff --git a/projects/element-ng/side-panel/si-side-panel-content.component.scss b/projects/element-ng/side-panel/si-side-panel-content.component.scss index 2c66230096..5a881c6428 100644 --- a/projects/element-ng/side-panel/si-side-panel-content.component.scss +++ b/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; } } diff --git a/projects/element-ng/side-panel/si-side-panel.component.scss b/projects/element-ng/side-panel/si-side-panel.component.scss index 4834692900..f3bdf7bc36 100644 --- a/projects/element-ng/side-panel/si-side-panel.component.scss +++ b/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, diff --git a/projects/element-ng/slider/si-slider.component.scss b/projects/element-ng/slider/si-slider.component.scss index 399fcbf80f..3567acd3e4 100644 --- a/projects/element-ng/slider/si-slider.component.scss +++ b/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) { diff --git a/projects/element-ng/status-bar/si-status-bar.component.html b/projects/element-ng/status-bar/si-status-bar.component.html index b5b8ae0cda..11ff56680e 100644 --- a/projects/element-ng/status-bar/si-status-bar.component.html +++ b/projects/element-ng/status-bar/si-status-bar.component.html @@ -15,7 +15,7 @@ >
@if (responsiveMode) { diff --git a/projects/element-ng/status-bar/si-status-bar.component.scss b/projects/element-ng/status-bar/si-status-bar.component.scss index 10e1b49812..5f8c042a82 100644 --- a/projects/element-ng/status-bar/si-status-bar.component.scss +++ b/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); diff --git a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html b/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html index 24d344dc9a..0e7acd2f40 100644 --- a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html +++ b/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; -
+
@if (autoClose) {