This document lists breaking changes introduced in Siemens Industrial Experience V6.
The Stencil collection has four newly optional peer dependencies:
@floating-ui/dom, animejs, luxon, and @stencil/core.
@siemens/ix-icons remains a required peer. Collection metadata and output
consumers must install all five packages:
pnpm add @floating-ui/dom @siemens/ix-icons @stencil/core animejs luxonUse the equivalent command for npm, pnpm, or another package manager.
@siemens/ix-icons remains required for all @siemens/ix consumers. Root,
custom-elements, loader, hydrate, and framework consumers do not need to install
the other four optional peers solely for IX because those outputs bundle the
runtime libraries.
IX components now use SI Theme 6 system and reference tokens instead of legacy
IX --theme-* tokens. This is a semantic migration, not a prefix removal:
select a purpose-specific background, border, or text token for each use.
The mappings below use code-facing CSS custom-property names. Source hierarchy
paths have been flattened to the legacy --theme-* and new --si-sys-* syntax;
trailing * markers in the source mapping are metadata and are omitted here.
The existing typography and shadow examples map as follows:
--theme-body -> --si-sys-typography-body and --theme-shadow-4 ->
--si-sys-effects-shadow-4.
Replace legacy token references according to how the value is used. For example:
/* Before */
color: var(--theme-color-std-text);
/* After */
color: var(--si-sys-text-primary);Sass code can use the new public system-token module:
@use '@siemens/ix/scss/tokens/system' as sys;
color: #{sys.$si-sys-text-primary};Replacement tokens are not guaranteed to have the same CSS value type as the
legacy token. --si-sys-effects-shadow-* tokens contain a complete
box-shadow value, including offsets, blur/spread where applicable, and color.
Assign a complete shadow token directly to box-shadow. Do not mechanically
substitute one where a legacy --theme-color-shadow-* token supplied only the
color component of a longer shadow declaration; these color tokens have no
direct replacement and require manual reconstruction or review. Likewise,
--si-sys-typography-* tokens contain complete font shorthand values, so use
them with font, not as a font-family or size fragment.
/* A complete shadow token can be replaced directly. */
/* Before */
box-shadow: var(--theme-shadow-4);
/* After */
box-shadow: var(--si-sys-effects-shadow-4);
/* Do not mechanically replace a legacy color component this way. */
/* Before */
box-shadow: 0 2px 4px var(--theme-color-shadow-1);
/* Incorrect */
box-shadow: 0 2px 4px var(--si-sys-effects-shadow-1);These two legacy tokens resolve to the CSS keyword transparent, not to a
system-token variable. They are also listed as investigate entries in the
source guide, but are considered resolved here and are not repeated in the
manual-review table.
| Legacy token | Replacement |
|---|---|
--theme-color-0 |
transparent |
--theme-color-ghost |
transparent |
Apply these replacements wherever the legacy token is used.
| Legacy token | Replacement |
|---|---|
--theme-color-1 |
--si-sys-background-0 |
--theme-color-2 |
--si-sys-background-1 |
--theme-color-ghost--hover |
--si-sys-background-hover |
--theme-color-ghost--active |
--si-sys-background-selected |
--theme-color-ghost--selected |
--si-sys-background-selected |
--theme-color-ghost--selected-hover |
--si-sys-background-hover |
--theme-color-ghost--selected-active |
--si-sys-background-selected |
--theme-color-ghost-alt |
--si-sys-background-1 |
--theme-color-ghost-alt--hover |
--si-sys-background-hover |
--theme-color-ghost-alt--active |
--si-sys-background-selected |
--theme-color-ghost-alt--selected |
--si-sys-background-selected |
--theme-color-ghost-alt--selected-hover |
--si-sys-background-hover |
--theme-color-ghost-alt--selected-active |
--si-sys-background-selected |
--theme-color-primary--contrast |
--si-sys-text-on-accent |
--theme-color-secondary |
--si-sys-background-accent-secondary |
--theme-color-secondary--hover |
--si-sys-background-accent-secondary-hover |
--theme-color-secondary--active |
--si-sys-background-accent-secondary-active |
--theme-color-component-1 |
--si-sys-background-1 |
--theme-color-component-1--hover |
--si-sys-background-hover |
--theme-color-component-1--active |
--si-sys-background-selected |
--theme-color-component-7--hover |
--si-sys-background-accent-secondary-hover |
--theme-color-component-7--active |
--si-sys-background-accent-secondary-active |
--theme-color-component-error |
--si-sys-background-danger-subtle |
--theme-color-component-info |
--si-sys-background-information-subtle |
--theme-color-1--hover |
--si-sys-background-hover |
--theme-color-1--active |
--si-sys-background-selected |
--theme-color-ghost-primary--hover |
--si-sys-background-accent-secondary-hover |
--theme-color-ghost-primary--active |
--si-sys-background-accent-secondary-active |
--theme-color-component-warning |
--si-sys-background-warning-subtle |
| Legacy token | Replacement |
|---|---|
--theme-color-alarm--hover |
--si-sys-background-danger-hover |
--theme-color-alarm--active |
--si-sys-background-danger-active |
--theme-color-alarm--contrast |
--si-sys-text-on-danger |
--theme-color-success--hover |
--si-sys-background-success-hover |
--theme-color-success--active |
--si-sys-background-success-active |
--theme-color-success--contrast |
--si-sys-text-on-success |
--theme-color-info--hover |
--si-sys-background-information-hover |
--theme-color-info--active |
--si-sys-background-information-active |
--theme-color-info--contrast |
--si-sys-text-on-information |
--theme-color-alarm-40 |
--si-sys-background-danger-subtle |
--theme-color-alarm-10 |
--si-sys-background-danger-subtle |
--theme-color-success-40 |
--si-sys-background-success-subtle |
--theme-color-info-40 |
--si-sys-background-information-subtle |
--theme-color-neutral-40 |
--si-sys-data-sequential-deep-blue-4 |
--theme-color-critical-40 |
--si-sys-background-critical-subtle |
--theme-color-warning--contrast |
--si-sys-text-on-warning |
--theme-color-warning-40 |
--si-sys-background-caution-subtle |
--theme-color-warning-10 |
--si-sys-background-caution-subtle |
--theme-color-warning--hover |
--si-sys-background-warning-hover |
--theme-color-warning--active |
--si-sys-background-warning-active |
--theme-color-critical--hover |
--si-sys-background-critical-hover |
--theme-color-critical--active |
--si-sys-background-critical-active |
--theme-color-critical--contrast |
--si-sys-text-on-warning |
--theme-color-neutral--hover |
--si-sys-background-hover |
--theme-color-neutral--active |
--si-sys-background-selected |
--theme-color-neutral--contrast |
--si-sys-text-primary |
| Legacy token | Replacement |
|---|---|
--theme-color-contrast-text |
--si-sys-text-primary |
--theme-color-std-text |
--si-sys-text-primary |
--theme-color-soft-text |
--si-sys-text-secondary |
--theme-color-weak-text |
--si-sys-text-disabled |
--theme-color-inv-contrast-text |
--si-sys-text-inverse |
--theme-color-inv-std-text |
--si-sys-text-inverse |
--theme-color-alarm-text |
--si-sys-text-danger |
--theme-color-inv-soft-text |
--si-sys-text-inverse |
--theme-color-inv-weak-text |
--si-sys-text-inverse |
--theme-color-warning-text |
--si-sys-text-warning |
--theme-color-logo |
--si-sys-effects-logo |
--theme-color-logo-login |
--si-sys-effects-logo |
| Legacy token | Replacement |
|---|---|
--theme-color-std-bdr |
--si-sys-border-2 |
--theme-color-soft-bdr |
--si-sys-border-3 |
--theme-color-weak-bdr |
--si-sys-border-4 |
--theme-color-focus-bdr |
--si-sys-effects-focus |
--theme-color-contrast-bdr |
--si-sys-border-1 |
--theme-color-hard-bdr |
--si-sys-border-2 |
--theme-color-alarm-bdr |
--si-sys-border-danger |
--theme-color-x-weak-bdr |
--si-sys-border-4 |
--theme-color-warning-bdr |
--si-sys-background-warning |
--theme-color-lightbox |
--si-sys-effects-backdrop |
| Legacy token | Replacement |
|---|---|
--theme-chart-1 |
--si-sys-data-categorical-2 |
--theme-chart-2 |
--si-sys-data-categorical-4 |
--theme-chart-3 |
--si-sys-data-categorical-1 |
--theme-chart-4 |
--si-sys-data-categorical-6 |
--theme-chart-5 |
--si-sys-data-categorical-17 |
--theme-chart-6 |
--si-sys-data-categorical-5 |
--theme-chart-7 |
--si-sys-data-categorical-13 |
--theme-chart-8 |
--si-sys-data-sequential-royal-blue-4 |
--theme-chart-9 |
--si-sys-data-categorical-8 |
--theme-chart-10 |
--si-sys-data-categorical-7 |
--theme-chart-11 |
--si-sys-data-categorical-9 |
--theme-chart-12 |
--si-sys-data-categorical-11 |
--theme-chart-13 |
--si-sys-data-categorical-12 |
--theme-chart-14 |
--si-sys-data-sequential-orange-4 |
--theme-chart-15 |
--si-sys-data-sequential-orange-1 |
--theme-chart-16 |
--si-sys-data-sequential-sand-1 |
--theme-chart-17 |
--si-sys-data-categorical-16 |
--theme-chart-grid-fill |
--si-sys-background-1 |
Choose the replacement from the column matching the use site:
background-color,background, or a shape/surfacefill: use Background/fill.border-color,border, oroutline: use Border/outline.coloron text or icons, or an icon SVGfill: use Text/icon.
For fill, icon fill is text/icon use; shape or surface fill is
background/fill use. An em dash means the source guide defines no replacement
for that context.
| Legacy token | Background/fill | Border/outline | Text/icon |
|---|---|---|---|
--theme-color-primary |
--si-sys-background-accent |
--si-sys-border-accent |
--si-sys-text-accent |
--theme-color-primary--hover |
--si-sys-background-accent-hover |
--si-sys-border-accent-hover |
--si-sys-text-accent-hover |
--theme-color-primary--active |
--si-sys-background-accent-active |
--si-sys-border-accent-active |
--si-sys-text-accent-active |
--theme-color-dynamic |
--si-sys-background-accent-hover |
--si-sys-border-accent-hover |
--si-sys-text-accent-hover |
--theme-color-component-9 |
--si-sys-background-accent-hover |
--si-sys-border-accent-hover |
--si-sys-text-accent-hover |
--theme-color-alarm |
--si-sys-background-danger |
--si-sys-border-danger |
--si-sys-text-danger |
--theme-color-success |
--si-sys-background-success |
--si-sys-border-success |
--si-sys-text-success |
--theme-color-info |
--si-sys-background-information |
--si-sys-border-information |
--si-sys-text-information |
--theme-color-5 |
— | --si-sys-border-4 |
--si-sys-text-disabled |
--theme-color-6 |
— | --si-sys-border-3 |
--si-sys-text-disabled |
--theme-color-7 |
— | --si-sys-border-2 |
--si-sys-text-secondary |
--theme-color-8 |
— | --si-sys-border-2 |
--si-sys-text-secondary |
--theme-color-warning |
--si-sys-background-warning |
--si-sys-border-warning |
--si-sys-text-warning |
--theme-color-critical |
--si-sys-background-critical |
--si-sys-border-critical |
--si-sys-text-critical |
--theme-color-neutral |
--si-sys-background-neutral |
--si-sys-border-3 |
--si-sys-text-secondary |
The following investigate entries need review at the component or usage site. Where the suggested replacement is No direct replacement, preserve or recreate the intended component-specific value rather than substituting a generic token.
| Legacy token | Suggested replacement | Migration guidance |
|---|---|---|
--theme-color-primary--disabled |
No direct replacement | Assess --si-sys-border-3, --si-sys-border-4, or --si-sys-border-accent for the component. |
--theme-color-dynamic--hover |
--si-sys-background-accent-hover |
Verify the intended state and use in each component. |
--theme-color-dynamic--active |
--si-sys-background-accent-active |
Verify the intended state and use in each component. |
--theme-color-dynamic-alt |
--si-sys-background-accent-hover |
Verify the intended state and use in each component. |
--theme-color-dynamic-alt--hover |
--si-sys-background-accent-active |
Verify the intended state and use in each component. |
--theme-color-dynamic-alt--active |
--si-sys-background-accent |
Verify the intended state and use in each component. |
--theme-color-component-2 |
No direct replacement | Component-level value; review or recreate the legacy #FFFFFF 15% value. |
--theme-color-component-3 |
No direct replacement | Component-level value; review or recreate the legacy #FFFFFF 30% value. |
--theme-color-component-4 |
No direct replacement | Component-level value; review or recreate the legacy #FFFFFF 45% value. |
--theme-color-component-6 |
No direct replacement | Component-level value; review or recreate the legacy #FFFFFF 75% value. |
--theme-color-component-7 |
No direct replacement | Component-level value; review or recreate the legacy #16565C value. |
--theme-color-component-8 |
No direct replacement | Component-level value; review or recreate the legacy #001F39 value. |
--theme-color-component-8--hover |
No direct replacement | Component-level value; review or recreate the legacy #001F39 value. |
--theme-color-component-9--hover |
No direct replacement | Component-level value; review or recreate the legacy #00E5AA value. |
--theme-color-component-9--active |
No direct replacement | Component-level value; review or recreate the legacy #00997F value. |
--theme-color-component-9--disabled |
No direct replacement | Component-level value; review or recreate the legacy #00FFB9 30% value. |
--theme-color-component-10 |
No direct replacement | Component-level value; review or recreate the legacy #00FFB9 75% value. |
--theme-color-component-10--hover |
No direct replacement | Component-level value; review or recreate the legacy #00E5AA 75% value. |
--theme-color-component-10--active |
No direct replacement | Component-level value; review or recreate the legacy #00997F 90% value. |
--theme-color-component-10--disabled |
No direct replacement | Component-level value; review or recreate the legacy #00FFB9 20% value. |
--theme-color-backdrop |
No direct replacement | No replacement; preserve the legacy #000028 85% backdrop if required. |
--theme-color-backdrop-3 |
No direct replacement | No replacement; preserve the legacy #161632 85% backdrop if required. |
--theme-color-shadow-1 |
No direct replacement | Set the shadow color directly in shadow styles; legacy value is #000000 60%. |
--theme-color-shadow-2 |
No direct replacement | Set the shadow color directly in shadow styles; legacy value is #000000. |
--theme-color-gradient-effect-1 |
No direct replacement | Error Pages only; replaced by SDL. Legacy value is #00FFB9. |
--theme-color-gradient-effect-2 |
No direct replacement | Error Pages only; replaced by SDL. Legacy value is #00CCCC. |
--theme-chart-axes |
--si-sys-border-3 |
Verify the replacement on the component. |
--theme-chart-grid-lines |
--si-sys-background-3 |
Verify the replacement on the component. |
--theme-chart-ticks |
--si-sys-border-2 |
Verify the replacement on the component. |
--theme-chart-tooltip-fill |
--si-sys-background-3 |
Verify the replacement on the component. |
--theme-chart-tooltip-bdr |
--si-sys-border-2 |
Verify the replacement on the component. |
--theme-chart-1-40 |
--si-sys-data-sequential-turquoise-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-2-40 |
--si-sys-data-sequential-interactive-coral-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-3-40 |
--si-sys-data-sequential-interactive-coral-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-4-40 |
--si-sys-data-sequential-deep-blue-3 |
Verify; alternatively use the base color with alpha. |
--theme-chart-5-40 |
--si-sys-data-sequential-deep-blue-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-6-40 |
--si-sys-data-sequential-royal-blue-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-7-40 |
--si-sys-data-sequential-royal-blue-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-8-40 |
--si-sys-data-sequential-turquoise-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-9-40 |
--si-sys-data-categorical-17 |
Verify; alternatively use the base color with alpha. |
--theme-chart-10-40 |
--si-sys-data-sequential-royal-blue-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-11-40 |
--si-sys-data-sequential-orchid-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-12-40 |
--si-sys-data-sequential-plum-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-13-40 |
--si-sys-data-sequential-plum-3 |
Verify; alternatively use the base color with alpha. |
--theme-chart-14-40 |
--si-sys-data-sequential-sand-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-15-40 |
--si-sys-data-sequential-sand-4 |
Verify; alternatively use the base color with alpha. |
--theme-chart-16-40 |
--si-sys-data-sequential-sand-3 |
Verify; alternatively use the base color with alpha. |
--theme-chart-17-40 |
--si-sys-data-sequential-sand-4 |
Verify; alternatively use the base color with alpha. |
The getComputedCSSProperty helper exported by @siemens/ix-echarts no longer
adds the --theme- prefix to its argument. It now resolves the supplied CSS
custom-property name without modification.
Pass the complete SI Theme 6 system-token name, including the leading --:
// Before: resolves --theme-color-primary
getComputedCSSProperty('color-primary');
// After
getComputedCSSProperty('--si-sys-background-accent');Replace every legacy short token name with its mapped system token. Select the appropriate background, border, or text token for conditional mappings based on how ECharts renders the value.
Standard IX foundation and theme CSS no longer emits generated
--theme-<component>-* custom properties such as
--theme-btn-primary--background. IX components and global style utilities now
declare scoped, purpose-based --ix-* properties where they are used.
Replace component overrides with the corresponding --ix-* property on the
component:
/* Before */
[data-ix-theme] {
--theme-btn-primary--background: var(--si-sys-background-accent);
}
/* After */
ix-button {
--ix-button-primary--background: var(--si-sys-background-accent);
}The generated aliases remain available as a temporary, opt-in Sass layer for downstream styles that still reference them:
@use '@siemens/ix/scss/deprecated/components' as deprecated;
[data-ix-theme] {
@include deprecated.setComponentVars;
}This deprecated mixin restores the alias declarations for downstream CSS. It
does not reconnect those aliases to migrated IX components; component
customization must use the component's --ix-* properties.
The default siemens-ix.css stylesheet now contains the combined classic theme
and IX foundation. Foundation applies body typography, text color, background,
and document-wide scrollbar styles. It does not normalize native HTML elements,
reset the body margin, style native links or form controls, or provide utility
classes.
Use the canonical default import for self-contained IX components:
@import '@siemens/ix/css/default.css';The existing @siemens/ix/dist/siemens-ix/siemens-ix.css import path remains
available and resolves to the same default bundle. It includes the foundation
body and scrollbar defaults but not the previous reset, utility, or native form
styles.
Global application styles are available as explicit opt-ins:
| Import | Side effects |
|---|---|
@siemens/ix/css/foundation.css |
Required variables, body presentation, and global scrollbars |
@siemens/ix/css/reset.css |
Native element normalization and box sizing |
@siemens/ix/css/base.css |
Theme font/color inheritance and body margin reset |
@siemens/ix/css/scrollbar.css |
Scoped scrollbars below [data-ix-scrollbars] |
@siemens/ix/css/utilities.css |
Typography, links, tables, groups, and shadows |
@siemens/ix/css/globals.css |
Reset, base, scrollbar, and utilities |
@siemens/ix/css/legacy.css |
Previous native form and global style behavior |
Import foundation before a separately selected theme:
@import '@siemens/ix/css/foundation.css';
@import '@siemens/ix/css/theme/classic-light.css';To retain the previous aggregate behavior while migrating, combine the new default and legacy bundles:
@import '@siemens/ix/css/default.css';
@import '@siemens/ix/css/legacy.css';Applications that keep the existing distribution path can restore the same behavior with:
@import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
@import '@siemens/ix/css/legacy.css';Foundation styles enable scrollbars automatically. Add disable-scrollbar to
body to disable that behavior. The scoped scrollbar stylesheet can then
enable themed scrollbars for a selected subtree:
<body class="disable-scrollbar">
<main data-ix-scrollbars>
<!-- Scrollable descendants use IX scrollbar styling. -->
</main>
</body>The package no longer exports every file below @siemens/ix/scss/*. Supported
Sass entry points are now explicit and mirror the CSS bundles:
@use '@siemens/ix/scss/default';
@use '@siemens/ix/scss/globals';
@use '@siemens/ix/scss/tokens/system' as sys;Theme modules, retained public mixins, and
@siemens/ix/scss/deprecated/components remain explicitly exported. Replace
imports from internal components, entries, legacy, misc, and
mixins/internal folders with a supported public entry point or local styles.
The former @siemens/ix/scss/misc/common-variables path remains as a v6
compatibility export for generated custom themes; new Sass code should use
@siemens/ix/scss/tokens/legacy.
The unused legacy Sass modules below have been removed:
@siemens/ix/scss/legacy/components/dropdown@siemens/ix/scss/legacy/components/modal@siemens/ix/scss/legacy/components/button-group
These modules were not included in the compiled IX CSS. Remove direct imports
and use the corresponding IX components. For CSS class-based button groups, use
the supported .ix-button-group styles.
The following unused or implementation-specific Sass modules have been removed:
@siemens/ix/scss/mixins/field@siemens/ix/scss/mixins/reduce-motion@siemens/ix/scss/mixins/shadows@siemens/ix/scss/mixins/internal/dropdown-item@siemens/ix/scss/mixins/shadow-dom/focus-visible@siemens/ix/scss/mixins/shadow-dom/host-disabled@siemens/ix/scss/mixins/shadow-dom/hover
The unused hover.host-focus, hover.host-focus-visible, input.label, and
input.element-form mixins have also been removed.
Use @siemens/ix/scss/mixins/hover for retained interaction helpers. Replace
shadows.box-shadow($level) with
box-shadow: var(--si-sys-effects-shadow-#{$level}); the variable supplies the
complete shadow declaration value. Reduced-motion timing overrides remain part
of the standard IX foundation CSS and no longer require a separate mixin.
@siemens/ix-icons now passes its color value directly to var(...).
Properties that forward a color to an icon, and ix-event-list-item.itemColor,
therefore require the complete CSS custom-property name:
<!-- Before -->
<ix-icon color="si-sys-text-primary"></ix-icon>
<ix-icon-button icon-color="color-primary"></ix-icon-button>
<ix-event-list-item item-color="color-alarm"></ix-event-list-item>
<!-- After -->
<ix-icon color="--si-sys-text-primary"></ix-icon>
<ix-icon-button icon-color="--si-sys-text-accent"></ix-icon-button>
<ix-event-list-item item-color="--si-sys-background-danger"></ix-event-list-item>The exported NotificationColor string literals now include the leading --.
ix-content-header titles and subtitles now wrap when horizontal space is limited. Previously, they remained on a single line and used an ellipsis for overflowing text.
To preserve the previous single-line behavior, set text-overflow="ellipsis":
<ix-content-header header-title="Content title" header-subtitle="Supporting context" text-overflow="ellipsis"></ix-content-header>Ellipsis visually truncates the text without adding a tooltip. Keep the default wrapping behavior when the complete text must remain visible.
- Every
ix-content-headerthat must remain single-line usestext-overflow="ellipsis".