Color Palette
All semantic color tokens rendered in both light and dark context.
Dark Mode Preview
Temaväxling i appen (samma komponent som i headern):
Typography
Heading 1 — text-4xl font-bold
Heading 2 — text-3xl font-bold
Heading 3 — text-2xl font-semibold
Heading 4 — text-xl font-semibold
Heading 5 — text-lg font-medium
Body text — text-base. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small muted — text-sm text-muted-foreground
Mono caption — text-xs font-mono
Buttons
Form button-klasser (faktiskt använda)
UiHelper.GetVariantClasses (faktiskt i Case/Template-komponenter)
Genereras via UiHelper.GetVariantClasses(variant, css?).
Token-färger (manuell utility-användning)
Sizes
Admin & List Surfaces
Centraliserade helperklasser för paneler, verktygsfält, sökfält och tomma lägen.
Återanvändbar panel
Samma yta kan användas i adminvyer och andra listor.
Visas nu
42
filtrerade poster
Markerade
7
redo för bulkåtgärd
Filer
128
totalt kopplade filer
Senast raderad
2026-06-03 10:15
lokal tid
Badges
Cards
Default Card
Standard card component with border and shadow.
Elevated Card
Card with hover shadow transition.
Accent Border
Card with primary colored border.
Form Inputs
Faktiska input-klasser: form-input-text, form-input-textarea, form-input-dropdown.
Validation-klasser
- Exempel på valideringssammanfattning med
validation-errors.
Alerts
Info
This is an informational message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Border Radius
Shadows
Text Colors
text-foreground — Default body text
text-muted-foreground — Secondary/muted text
text-primary — Primary accent text
text-accent — Accent text
text-destructive — Error/destructive text
text-success — Success text
text-warning — Warning text
text-info — Info text
text-rose — Rose text
text-violet — Violet text
text-teal — Teal text
text-indigo — Indigo text