Style guide Luvenza
Prévisualisation interne des couleurs, radius et composants UI basés sur la palette wedding Luvenza. Utilise les variables définies dans globals.css.
Palette sémantique
Couleurs de base utilisées dans l’interface (fond, texte, cartes, popovers, états principaux).
Base
Background
--background
Foreground
--foreground
Card
--card
Card foreground
--card-foreground
Popover
--popover
Popover foreground
--popover-foreground
Sémantique
Primary
--primary
Primary fg
--primary-foreground
Secondary
--secondary
Secondary fg
--secondary-foreground
Accent
--accent
Accent fg
--accent-foreground
Muted
--muted
Muted fg
--muted-foreground
Destructive
--destructive
Sidebar
Sidebar
--sidebar
Sidebar fg
--sidebar-foreground
Sidebar primary
--sidebar-primary
Sidebar primary fg
--sidebar-primary-foreground
Sidebar accent
--sidebar-accent
Sidebar accent fg
--sidebar-accent-foreground
Sidebar border
--sidebar-border
Sidebar ring
--sidebar-ring
Charts
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Wedding étendue
Blush
--blush
Blush soft
--blush-soft
Blush deep
--blush-deep
Rose
--rose
Rose dark
--rose-dark
Mocha
--mocha
Mocha light
--mocha-light
Mocha dark
--mocha-dark
Champagne
--champagne
Cream
--cream
Gold
--gold
Radii & cartes
Aperçu visuel des différents rayons de bordure dérivés de --radius.
Radius SM
--radius-sm
Radius MD
--radius-md
Radius LG (base)
--radius-lg
Radius XL
--radius-xl
Radius 2XL
--radius-2xl
Radius 3XL
--radius-3xl
Radius 4XL
--radius-4xl
Composants de base
Exemples simples de cartes, boutons et champs qui utilisent la palette et les tokens de radius.
Cartes
Card / Par défaut
Titre de carte exemple
Utilise --card et --card-foreground.
Pill / Accent
Variante plus douce pour badges ou encarts.