Thèmes

Trois axes indépendants — couleur, typographie, espacement — applicables globalement ou sur n'importe quel sous-arbre.

Couleurs

Les rôles du contrat rendus par thème, en clair et en sombre.

Peels

Tricolore — orange (brand) + violet (action) + corail (accent)

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Doc

Design system — Cloud Dancer + action teal + accent bleu

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Neutral

Monochrome — gris pur, zéro chroma

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Itadori

Palette riche — 3 couleurs distinctes

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Rosé Pine

Palette nommée — mapping direct

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Ferrari

Charte de marque — brand rouge, action noire

Light

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Dark

brand --brand
action --action
accent --accent
neutral-bg --neutral-bg
neutral-bg-elevated --neutral-bg-elevated
neutral-bg-sunken --neutral-bg-sunken
neutral-text --neutral-text
neutral-text-muted --neutral-text-muted
neutral-border --neutral-border

Typographie

`data-type-theme="default"`

Aa — Le CSS pur jus

The quick brown fox jumps over the lazy dog. Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwi.

--peels-font-mono: 1234567890

`data-type-theme="doc"`

Aa — Le CSS pur jus

The quick brown fox jumps over the lazy dog. Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwi.

--peels-font-mono: 1234567890

`data-type-theme="editorial"`

Aa — Le CSS pur jus

The quick brown fox jumps over the lazy dog. Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwi.

--peels-font-mono: 1234567890

`data-type-theme="mono"`

Aa — Le CSS pur jus

The quick brown fox jumps over the lazy dog. Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwi.

--peels-font-mono: 1234567890

Espacement

`data-space-theme="compact"`

Un premier paragraphe.

Un deuxième paragraphe.

Un troisième paragraphe.

`data-space-theme="default"`

Un premier paragraphe.

Un deuxième paragraphe.

Un troisième paragraphe.

`data-space-theme="airy"`

Un premier paragraphe.

Un deuxième paragraphe.

Un troisième paragraphe.

Scoping & pièges

Redéclarer les propriétés héritées

font-family, color et color-scheme sont résolus une fois sur l'ancêtre qui les déclare. Dans un sous-arbre rethémé, le composant doit les redéclarer pour bénéficier des nouveaux rôles.

[data-theme="doc"] {
  font-family: var(--peels-font-ui);
  color: var(--peels-text-body);
  color-scheme: inherit;
}

Charger le fichier de thème

L'attribut ne suffit pas : le fichier themes/<theme>/color.css (et type.css, space.css) doit être chargé sur la page. peels.css inclut le thème par défaut ; peels-extended.css les inclut tous.

Cas réel : le header de ce site

La barre de navigation porte data-theme="doc" : elle garde son identité sur les pages démo en thème peels — preuve vivante du scoping.