packages/core/styles/tokens.css51 tokensDesign tokens
The VEXA semantic token contract — every value is a CSS custom property, so hsl(var(--token)) works in plain CSS, CSS-in-JS, or Tailwind. Copy any value to reuse or override it.
Values are the :root (Light) defaults. The Obsidian and Graphite themes override the colour tokens at runtime.
Surfaces & text
--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%
Actions
--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%
Status
--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%
Focus
--vexa-focus210 92% 42%--vexa-ring210 92% 42%
Radius
--vexa-radius-sm0.375rem--vexa-radius-md0.5rem--vexa-radius-lg0.75rem--vexa-radius-xl1rem
Spacing
--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
Motion
--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)
Elevation
--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)
Control sizing
--vexa-control-height-sm2rem--vexa-control-height-md2.5rem--vexa-control-height-lg3rem