Token-Vergleich

Beide Marken nutzen dieselben Komponenten.

Semantische Tokens steuern Farben, Abstände und Zustände. Die DOM-Struktur und das Verhalten ändern sich nicht.

Theme

kredit

Helle Farben und deutliche Handlungsaufforderungen.

  • --kredit-primary#0098CC
  • --kredit-green#50AF47
  • --kredit-link#00769E
  • --kredit-text#1F2B43
  • --kredit-surface#F6F6F6
  • --kredit-border#8C8C8C

Wie im Ausweisdokument angegeben.

Theme

cpool

Gedeckte Farben für Verwaltungsoberflächen.

  • --cpool-primary#1F2B43
  • --cpool-primary-hover#2F4166
  • --cpool-accent#0098CC
  • --cpool-focus#71A7FF
  • --cpool-surface#F5F7FA
  • --cpool-border#E4E4E7

Wie im Ausweisdokument angegeben.

Aufbau

Das Produkt setzt das Theme, die Komponente liest die Tokens.

Das Produkt wählt ein Theme am Einstiegspunkt. Komponenten lesen nur semantische Variablen und enthalten keine Markennamen.

Globale Tokens

Skalen und semantische Rollen

@synatix/tokens definiert die Skalen. Jedes Markenpaket weist Rollen wie accent, surface und focus-ring konkrete Werte zu.

Komponenten-Tokens

Theme, Scope und Parts

data-theme wählt das Theme. data-scope und data-part geben den CSS-Selektoren feste Ziele.

Theme ladenCSS
@import "@synatix/theme-kredit/theme.css";
@import "@synatix/theme-cpool/theme.css";
Theme setzenHTML
<main data-theme="kredit">
  <form>…</form>
</main>
Part gestaltenCSS
[data-scope="button"][data-part="root"] {
  background: var(--syn-accent);
}