Colors

Colors definieren die grundlegende Farbpalette von DK97 UI.
Farben werden über CSS Custom Properties bereitgestellt und können durch Themes überschrieben werden.

Palette

Brand Colors

--color-primary


                        var(--color-primary)

--color-primary-hover


                        var(--color-primary-hover)

Status Colors

--color-success


                        var(--color-success)

--color-warning


                        var(--color-warning)

--color-danger


                        var(--color-danger)

Surface Colors

--color-bg


                        var(--color-bg)

--color-surface


                        var(--color-surface)

--color-surface-2


                        var(--color-surface-2)

Text Colors

--color-text


                        var(--color-text)

--color-text-muted


                        var(--color-text-muted)

Utility Colors

--color-border


                        var(--color-border)

--color-link


                        var(--color-link)

--color-link-hover


                        var(--color-link-hover)

Soft Colors

--color-primary-soft


                        var(--color-primary-soft)

--color-success-soft


                        var(--color-success-soft)

--color-warning-soft


                        var(--color-warning-soft)

--color-danger-soft


                        var(--color-danger-soft)

Verwendung

Farben sollten nicht direkt als Hex-Werte in Komponenten verwendet werden. Stattdessen werden die definierten Tokens genutzt.


.a-button.-blue {
    --btn-color: var(--color-primary);
    --btn-color-hover: var(--color-primary-hover);
}

Tokens

Token	Beschreibung
`--color-primary`	Primäre Markenfarbe.
`--color-primary-hover`	Hover-Zustand der primären Markenfarbe.
`--color-success`	Farbe für Erfolgsmeldungen oder positive Zustände.
`--color-warning`	Farbe für Warnungen.
`--color-danger`	Farbe für Fehler oder kritische Zustände.
`--color-bg`	Hintergrundfarbe der Seite.
`--color-surface`	Hintergrundfarbe für Karten, Flächen und Komponenten.
`--color-surface-2`	Sekundäre Flächenfarbe, z.B. für Hover-Zustände.
`--color-text`	Primäre Textfarbe.
`--color-text-muted`	Abgeschwächte Textfarbe.
`--color-border`	Standardfarbe für Rahmen.
`--color-link`	Standardfarbe für Links.
`--color-link-hover`	Hover-Farbe für Links.

Hinweise

Colors sind Foundation Tokens und keine eigenständigen Komponenten. Komponenten sollten Farben immer über Tokens verwenden.

Best Practices

Verwende semantische Tokens wie --color-success, --color-warning oder --color-danger, anstatt konkrete Hex-Werte direkt in Komponenten zu schreiben.

Vermeide harte Farbwerte wie #ff0000 direkt in Komponenten. Dadurch bleiben Themes und spätere Anpassungen einfacher.

Accessibility

Farben sollten genügend Kontrast zu Hintergrund und Text besitzen. Zustände wie Erfolg, Warnung oder Fehler sollten nicht ausschließlich über Farbe vermittelt werden.