Temas
Tres temas salen de un único contrato de tokens semánticos. Los colores son tripletes HSL expuestos como custom properties de CSS, así que funcionan con o sin Tailwind.
Playground de temas en vivo
Cambia el tema aplicado a estas vistas previas en tiempo real. Solo cambia esta superficie — el resto de la página mantiene el tema que elegiste.
Live theming
Invoice #A-2291
Due in 14 days
Tokens HSL semánticos
Cada decisión visual pasa por un token --vexa-*. Nunca escribas un color a mano; nunca repitas un valor crudo.
Los valores se guardan como tripletes HSL separados por espacios ("H S% L%") para que un token impulse rellenos sólidos, overlays translúcidos y anillos mediante hsl(var(--token) / <alpha>). En Tailwind v4 los tokens se mapean a utilidades como bg-vexa-surface, text-vexa-foreground y border-vexa-border.
/* Plain CSS — HSL triplet + alpha */
.cta {
background: hsl(var(--vexa-primary));
color: hsl(var(--vexa-primary-foreground));
border-color: hsl(var(--vexa-border) / 0.6);
}
/* Tailwind v4 — mapped utilities */
<div class="rounded-vexa-md border border-vexa-border bg-vexa-surface text-vexa-foreground" />Los tres temas
Light es el valor por defecto en :root. Los temas oscuros se activan con un único atributo data en <html> (o en cualquier elemento con alcance).
- LightNeutral, editorial, high clarity.
Por defecto en :root — sin atributo. - ObsidianNear-black, low-emission, high contrast.
data-theme="obsidian" - GraphiteBalanced dark-gray surfaces for dense tools.
data-theme="graphite"
Referencia de tokens (Obsidian)
Los tokens de color semánticos resueltos en el tema Obsidian por defecto. Los pares fondo/texto se validan contra WCAG 2.2 AA.
--vexa-background--vexa-foreground--vexa-surface--vexa-surface-raised--vexa-muted--vexa-muted-foreground--vexa-border--vexa-input--vexa-primary--vexa-primary-foreground--vexa-secondary--vexa-secondary-foreground--vexa-accent--vexa-accent-foreground--vexa-success--vexa-success-foreground--vexa-warning--vexa-warning-foreground--vexa-danger--vexa-danger-foreground--vexa-focus--vexa-ringPersonaliza
Como los tokens son variables CSS planas, los sobrescribes por producto sin tocar el código de los componentes. Redefine un token en :root o bajo un bloque [data-theme] y cada primitivo lo sigue.
/* Override tokens per product — no component edits needed. */
:root {
--vexa-primary: 262 60% 45%; /* your brand ink */
}
[data-theme="obsidian"] {
--vexa-primary: 262 70% 66%;
}