☰ Componentes
Fundamentos
Tokens & Theming
Roles de color semánticos, claro/oscuro y marcas.Roles de color
Vista previa
background
card
primary
secondary
muted
accent
destructive
success
warning
info
// Usa los roles como clases Tailwind — cambian con tema y modo.
<div className="bg-primary text-primary-foreground">…</div>
<p className="text-muted-foreground">texto secundario</p>
// Tema/modo en el <html>: class="dark" data-theme="emerald"
// o con el provider:
import { ThemeProvider } from "@eidondev/acme-ui";
<ThemeProvider defaultMode="system">{children}</ThemeProvider>Comparación de temas
El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.Claro · base
background
card
primary
secondary
muted
accent
destructive
success
warning
info
Oscuro · base
background
card
primary
secondary
muted
accent
destructive
success
warning
info
Claro · emerald
background
card
primary
secondary
muted
accent
destructive
success
warning
info
Oscuro · violet
background
card
primary
secondary
muted
accent
destructive
success
warning
info