Peels

Themes

Three independent axes — color, typography, spacing — applicable globally or on any subtree.

Colors

Contract roles rendered per theme, in light and dark.

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

Typography

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

Spacing

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 & pitfalls

Re-declare inherited properties

font-family, color and color-scheme resolve once on the ancestor that declares them. In a re-themed subtree, the component must re-declare them to pick up the new roles.

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

Load the theme file

The attribute alone is not enough: the themes/<theme>/color.css file (and type.css, space.css) must be loaded on the page. peels.css includes the default theme; peels-extended.css includes them all.

Real case: this site's header

The navigation bar carries data-theme="doc": it keeps its identity on peels-themed demo pages — living proof of scoped theming.