Surfaces & thèmes

Primary

data-elevation: 1

data-elevation: 2

data-elevation: 3

data-elevation: 4

Secondary

data-elevation: secondary-0

data-elevation: secondary-1

data-elevation: secondary-2

Encre

data-elevation: dark-high

data-elevation: dark-medium

data-elevation: dark-low

Highlight

data-elevation: highlight

data-elevation: highlight-ink

Teintées

data-elevation: success

data-elevation: warning

Thème et surface sont indépendants

Axe	Portée	Déclaration	Pilote
Thème	Global, un par page	`<html data-theme="light\|dark">`	Le voile de fond, la polarité par défaut
Surface	Locale, imbricable	`data-surface="light\|dark"`	Tous les tokens que lisent les composants

Le contrat

/* Tier 1 — primitives. Ne changent jamais. */
:root { --ice-blue-900: #182D46; … }

/* Tier 2 — LE CONTRAT. Mêmes noms des deux côtés. */
[data-surface="light"], :root[data-theme="light"] { --fg-1: var(--ice-blue-900); … }
[data-surface="dark"],  :root[data-theme="dark"]  { --fg-1: var(--white);        … }

/* Tier 3 — les composants ne lisent que le tier 2. */
.ice-card { color: var(--fg-high); }

L’imbrication

Niveau 1 — sombre · data-elevation: 3

Technolien source

Niveau 2 — claire · data-elevation: 4

Technolien source

Niveau 3 — sombre · data-elevation: 3

Technolien source

Niveau 4 — claire · data-elevation: 4

Technolien source