Design Tokens – theme.css
Alle --oo-* CSS Custom Properties. Einfach im eigenen CSS via var(--oo-*) verwenden.
Nur die Primärfarben ändern – alle Abstufungen passen sich automatisch via color-mix(in oklch) an.
Semantikfarben
Primärfarben und ihre automatisch berechneten Abstufungen (lighter / light / base / dark / darker).Primary
lighter
light
base
dark
darker
Secondary
lighter
light
base
dark
darker
Danger
lighter
light
base
dark
darker
Success
lighter
light
base
dark
darker
Warning
lighter
light
base
dark
darker
Info
lighter
light
base
dark
darker
Neutral
lighter
light
base
dark
darker
Grau-Palette
--oo-gray-50 bis --oo-gray-950 – Basis für alle neutralen Farben.
50
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
Semantische Farb-Aliase
Diese Variablen sollte man im eigenen CSS verwenden – nicht direkt--oo-gray-*.
--oo-color-backgroundSeitenhintergrund
--oo-color-surfaceKarten- / Panel-Hintergrund
--oo-color-borderStandard-Border
--oo-color-border-strongBetonter Border
--oo-color-textHaupttext
--oo-color-text-subtleSekundärtext, Labels
--oo-color-text-disabledDisabled-Zustand
Spacing – --oo-space-*
Verwende immer diese Variablen statt fixer px-Werte.
--oo-space-1--oo-space-2--oo-space-3--oo-space-4--oo-space-5--oo-space-6--oo-space-8Border Radius – --oo-radius-*
sm / 4pxmd / 6pxlg / 10pxxl / 16pxfullTransitions – --oo-transition-*
Hover über die Boxen zum Testen.
fast
normal
slow
Z-Index Stufen – --oo-z-*
Feste Stufen verhindern unkontrolliertes z-index-Chaos.
--oo-z-dropdown1000
Dropdowns, Select-Panels
--oo-z-overlay1100
Overlays, Sidepanels
--oo-z-modal1200
Modale Dialoge
--oo-z-context-menu1300
ContextMenu
--oo-z-toast1400
Toaster-Meldungen