@siemens/ix — CSS Overview

The iX product foundation (@siemens/ix@5.2.0): CSS delivery, shadow-DOM components, and theming architecture. All page chrome uses --theme-* variables.

§1 — Stats and Performance

248 KB

siemens-ix.css

13 KB

classic-dark.css

13 KB

classic-light.css

271

--theme-* vars

116

components

SCSS modules

25+

component-token vars

color schemas

3 files

separate delivery

§2 — CSS Delivery Model

Click any node to trace downstream delivery. iX uses a 2D theme model: family × colour schema.

iX uses a 2D theme model: family (classic, brand) × color schema (dark, light). The core CSS, theme files, and Stencil components are delivered as separate artifacts. ThemeSwitcher toggles data-ix-theme and data-ix-color-schema attributes.

§3 — Token Architecture and Color Examples

Layer	Example	Role
Core ramps	`scss/theme/core/_common.scss`	Neutral/accent ramps shared by every theme family
Theme	`--theme-color-primary`, `--theme-color-1`	271 semantic tokens in classic-dark.css / classic-light.css
Component	`--theme-btn-primary--background`	41 per-component SCSS modules with targeted override API

Live token swatches

--theme-color-1

--theme-color-2

--theme-color-std-text

--theme-color-soft-text

--theme-color-primary

--theme-color-success

--theme-color-alarm

--theme-color-info

Tokens compile from SCSS core ramps → per-family theme SCSS → emitted CSS custom properties. The 41 component modules (scss/theme/core/components/*.scss) declare per-component token APIs (e.g. --theme-btn-primary--background) that resolve from semantic tokens.

§4 — Components (Shadow DOM vs Light DOM)

Shadow DOM (supported)

Primary

Secondary

Outline

Ghost

Danger

Disabled

Toggle option

Light DOM (not supported)

⚠️ iX has no supported light-DOM class API. Like iris, the component CSS is shadow-scoped. The difference: iX exposes component-level variable modules for theming, while iris does not (yet). Neither exposes classes for direct HTML application without the web component runtime.

Exported (theming API) available

41 SCSS modules — scss/theme/core/components/*.scss
Component tokens — --theme-btn-primary--background etc.
Per-theme CSS files — loadable separately
ThemeSwitcher — programmatic API for theme changes
Brand extensibility — author a new theme family

Not exported (light-DOM gap) missing

No class-based API — no .ix-button for light DOM
No CSS-only path — components require JS runtime
No documented DOM contract — internal markup is private
No pre-compiled per-component CSS — only token modules

§5 — Theming and Override Methods

Override method	Scope	Shadow DOM	Light DOM
CSS variable on `:root`	Global	✓	✓
`data-ix-color-schema` toggle	Global	✓	✓
ThemeSwitcher JS API	Global	✓	✓
SCSS component `@mixin`	Build-time	✓	n/a
Per-component token var	Instance	✓	n/a

/* Override via CSS variables at runtime */
:root { --theme-btn-primary--background: hotpink; }

/* Or via SCSS mixin at build time */
@use '@siemens/ix/scss/theme/core/components/button' as btn;
@include btn.setVars {
  --theme-btn-primary--background: hotpink;
}

iX provides the richest override surface: CSS variables, SCSS mixins, and the ThemeSwitcher JS API. Component-level tokens allow targeted overrides without reaching into component internals.

§6 — Gap Analysis

Feature	iX	iris	Dual
CSS-only usage (no JS)	[ ]	[ ]	[x]
Per-file imports	[x] theme separate	[ ] monolithic	[ ] monolithic
Component token overrides	[x] 25+ vars	[ ] 1 var	[x] 118 vars
Naming convention	[ ] generic shadow	[ ] generic shadow	[x] SUIT CSS
Utility classes	[ ] none	[x] 84 typo utils	[x] 73 u-*
CSS Grid system	[ ] none	[ ] none	[x] .Grid-cell
Tree-shaking (CSS)	[ ] bundled	[ ] bundled	[ ] bundled
Framework wrapper needed	[x] Stencil	[x] Stencil	[ ] no