Foundation · 6 Varianten
Farb-Rollen
components/system/foundations/FarbRollen.astro
Fehlende Aliase: fg-secondary, border für Nacht, dritte Fläche. Keine neue Farbe, nur Namen für Werte, die schon ad hoc laufen.
Notizen
- Bestand: fg, fg-muted, fg-inverse, border (nur Paper), surface/surface-2, nacht/nacht-2, accent, signal-*.
- Ad hoc im Code: text-granit-700 in Docs, border-granit-800 auf Nacht, bg-granit-800 als tiefer Fond. Das bekommt Namen.
- Vorschlag lebt im Stück. global.css erst nach Approved.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "text" | "flaeche" | "linie" | "signal" | "invers" | "tafel" | "text" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<FarbRollen variant="text" surface="nacht" />01 · Text
Vier Text-Rollen
Farbe-Seite, Rollen. fg-secondary neu: granit-700 / granit-300.
Nacht
- --color-fg paper Der Satz steht in dieser Rolle.
- --color-fg-secondary · neu granit-300 Der Satz steht in dieser Rolle.
- --color-fg-muted granit-500 Der Satz steht in dieser Rolle.
- --color-fg-inverse granit-950 Der Satz steht in dieser Rolle.
Paper
- --color-fg granit-950 Der Satz steht in dieser Rolle.
- --color-fg-secondary · neu granit-700 Der Satz steht in dieser Rolle.
- --color-fg-muted granit-500 Der Satz steht in dieser Rolle.
- --color-fg-inverse paper Der Satz steht in dieser Rolle.
02 · Fläche
Drei Flächen je Seite
Karten-Fond. surface-3 / nacht-3 neu.
Nacht
--color-nacht
granit-950
--color-nacht-2
granit-900
--color-nacht-3 · neu
granit-800
Paper
--color-surface
paper
--color-surface-2
granit-50
--color-surface-3 · neu
granit-100
03 · Linie
border für Nacht
Linien-Seite. border-nacht neu: granit-800.
Nacht
Paper
04 · Signal
Vier Punkte, kein Fill
Bestand. Unverändert, zur Kontrolle neben den neuen Rollen.
Nacht
- signal-success
- signal-warning
- signal-error
- signal-info
Paper
- signal-success
- signal-warning
- signal-error
- signal-info
05 · Invers
Deckel und Toast
Ebenen ohne Schatten. fg-inverse auf inverser Fläche.
Nacht
fg-inverse auf inverser Fläche
Deckel, Toast, Active-Tag. Immer opak.
Paper
fg-inverse auf inverser Fläche
Deckel, Toast, Active-Tag. Immer opak.
06 · Tafel
Alle Rollen, beide Seiten
Zusammenfassung. Was neu ist, steht markiert.
Nacht
| Rolle | Paper | Nacht |
|---|---|---|
| fg | granit-950 | paper |
| fg-secondary · neu | granit-700 | granit-300 |
| fg-muted | granit-500 | granit-500 |
| border | granit-200 | granit-800 · neu |
| surface-3 · neu | granit-100 | granit-800 |
| accent | oliv-500 | oliv-300 |
Paper
| Rolle | Paper | Nacht |
|---|---|---|
| fg | granit-950 | paper |
| fg-secondary · neu | granit-700 | granit-300 |
| fg-muted | granit-500 | granit-500 |
| border | granit-200 | granit-800 · neu |
| surface-3 · neu | granit-100 | granit-800 |
| accent | oliv-500 | oliv-300 |