packages/core/styles/tokens.css51 tokensTokens de diseño
El contrato de tokens semánticos de VEXA — cada valor es una propiedad personalizada CSS, así que hsl(var(--token)) funciona en CSS plano, CSS-in-JS o Tailwind. Copia cualquier valor para reutilizarlo o sobrescribirlo.
Los valores son los de :root (tema Claro). Los temas Obsidian y Graphite sobrescriben los tokens de color en tiempo de ejecución.
Superficies y texto
--vexa-background0 0% 100%--vexa-foreground222 24% 12%--vexa-surface220 24% 98%--vexa-surface-raised0 0% 100%--vexa-muted220 20% 95%--vexa-muted-foreground220 12% 38%--vexa-border220 18% 88%--vexa-input220 18% 82%
Acciones
--vexa-primary222 34% 14%--vexa-primary-foreground220 24% 98%--vexa-secondary220 20% 95%--vexa-secondary-foreground222 30% 18%--vexa-accent220 20% 93%--vexa-accent-foreground222 32% 14%
Estado
--vexa-success158 72% 26%--vexa-success-foreground0 0% 100%--vexa-warning30 90% 35%--vexa-warning-foreground0 0% 100%--vexa-danger356 68% 45%--vexa-danger-foreground0 0% 100%
Foco
--vexa-focus210 92% 42%--vexa-ring210 92% 42%
Radio
--vexa-radius-sm0.375rem--vexa-radius-md0.5rem--vexa-radius-lg0.75rem--vexa-radius-xl1rem
Espaciado
--vexa-space-10.25rem--vexa-space-20.5rem--vexa-space-30.75rem--vexa-space-41rem--vexa-space-51.5rem--vexa-space-62rem--vexa-space-72.5rem--vexa-space-83rem--vexa-space-94rem--vexa-space-105rem--vexa-space-116rem
Movimiento
--vexa-duration-instant80ms--vexa-duration-fast150ms--vexa-duration-base220ms--vexa-duration-slow320ms--vexa-duration-complex400ms--vexa-ease-standardcubic-bezier(0.2, 0, 0, 1)--vexa-ease-deceleratecubic-bezier(0, 0, 0, 1)--vexa-ease-acceleratecubic-bezier(0.3, 0, 1, 1)
Elevación
--vexa-shadow-sm0 1px 2px 0 hsl(222 24% 12% / 0.06)--vexa-shadow-md0 2px 4px -1px hsl(222 24% 12% / 0.08), 0 1px 2px -1px hsl(222 24% 12% / 0.06)--vexa-shadow-lg0 8px 24px -6px hsl(222 24% 12% / 0.12), 0 2px 6px -2px hsl(222 24% 12% / 0.08)
Tamaño de controles
--vexa-control-height-sm2rem--vexa-control-height-md2.5rem--vexa-control-height-lg3rem