Farben – Framework Docs

Primärpalette

Die Kernfarben des Projekts – definiert als CSS Custom Properties in docs.css.

Brand Blue#3d5af1
--color-brand

Brand Pink#e25c7d
--color-brand-2

Sidebar#1b1f2e
--color-sidebar

Sidebar Hover#252b3d
--color-sidebar-hover

Background#f4f6fb
--color-bg

Surface#ffffff
--color-surface

Text#1b2038
--color-text

Text Muted#6b778c
--color-text-muted

Border#e3e8f0
--color-border

Semantische Farben

Status- und Signalfarben für Erfolg, Warnung, Fehler und Information.

Success#22c55e
--color-success

Warning#f59e0b
--color-warning

Danger#ef4444
--color-danger

Info#3b82f6
--color-info

UIkit Textfarben

UIkit stellt semantische Textfarben über CSS-Klassen bereit:

uk-text-primary – Primärfarbe (Blau)

uk-text-success – Erfolg (Grün)

uk-text-warning – Warnung (Gelb)

uk-text-danger – Fehler (Rot)

uk-text-muted – Gedämpft (Grau)

uk-text-emphasis – Betont

HTML

<span class="uk-text-primary">Primär</span>
<span class="uk-text-success">Erfolg</span>
<span class="uk-text-warning">Warnung</span>
<span class="uk-text-danger">Fehler</span>
<span class="uk-text-muted">Gedämpft</span>

UIkit Hintergrundfarben

uk-card-default

uk-card-primary

uk-card-secondary

uk-background-muted

HTML

<div class="uk-background-primary uk-light">Primary Background</div>
<div class="uk-background-secondary uk-light">Secondary Background</div>
<div class="uk-background-muted">Muted Background</div>
<div class="uk-background-default">Default Background</div>

CSS Custom Properties verwenden

Alle Farben sind als CSS-Variablen definiert und können direkt im CSS eingesetzt werden:

CSS

.meine-komponente {
    background: var(--color-brand);
    color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.status-success {
    color: var(--color-success);
}

.status-error {
    color: var(--color-danger);
}