Theming

Tokens

Every value a Veto component uses is a CSS custom property. No component hard-codes a colour, a radius or a gap.

Colour

These swatches read the properties live, so switching theme updates them without any component re-rendering.

--veto-color-primary

--veto-color-primary-hover

--veto-color-secondary

--veto-color-success

--veto-color-warning

--veto-color-danger

--veto-color-surface

--veto-color-surface-raised

--veto-color-text

--veto-color-text-muted

--veto-color-border

--veto-color-border-strong

razor

/* Components only ever reference tokens */
.my-panel {
    color: var(--veto-color-text);
    background: var(--veto-color-surface-raised);
    border: 1px solid var(--veto-color-border);
    border-radius: var(--veto-radius-md);
}

Spacing

A seven-step scale. The VetoSpacing enum maps onto it, so a Gap of Medium and a padding of Medium are the same distance.

--veto-space-1 ExtraSmall

--veto-space-2 Small

--veto-space-3 Medium

--veto-space-4 Large

--veto-space-5 ExtraLarge

--veto-space-6 Huge

razor

<VetoStack Gap="VetoSpacing.Medium">   <!-- --veto-space-3 -->
<VetoCard Padding="VetoSpacing.Large"> <!-- --veto-space-4 -->

The full set

Override any of these through VetoTheme, or set them yourself in CSS if you need something the theme model does not expose yet.

Tokens

Parameter	Type	Default	Description
`--veto-color-*`	`colour`	`—`	Accents, surfaces, text and borders. Twelve in all.
`--veto-radius-sm/md/lg/full`	`length`	`4px / 6px / 10px / 9999px`	Corner radii.
`--veto-space-1…6`	`length`	`0.25rem … 2rem`	The spacing scale VetoSpacing maps onto.
`--veto-font-sans`	`font stack`	`system-ui, …`	Body and UI typeface.
`--veto-font-mono`	`font stack`	`ui-monospace, …`	Code typeface.
`--veto-font-size-sm/md/lg`	`length`	`0.8125 / 0.9375 / 1.0625rem`	Type scale.
`--veto-shadow-sm/md`	`shadow`	`—`	Elevation.
`--veto-focus-ring`	`shadow`	`—`	The focus ring every component uses.
`--veto-transition`	`duration`	`150ms ease`	Set to 0ms automatically under prefers-reduced-motion.