//
The token set every component reads — what each one controls, and what it pairs with.
xiod-ui/styles. Change a token and everything that uses it changes with it, which is the whole of how theming works here.Tokens come in pairs
A token names a surface. The matching -foreground token is what goes on that surface. --card is the panel; --card-foreground is the text on the panel. Whenever you change one, look at the other.
Each token is a Tailwind class
--primary gives you bg-primary, text-primary, border-primary, and so on — the token name minus the dashes. Your own markup can use them exactly like the components do.
1/* Every token is available as a Tailwind utility, on any property2 that takes a colour. There is no xiodui- prefix. */34<div className="bg-card text-card-foreground border-border" />5<p className="text-muted-foreground" />6<span className="bg-primary/10 text-primary" /> {/* opacity works too */}78/* And in plain CSS, if you prefer: */9.my-panel {10 background: var(--card);11 color: var(--card-foreground);12}Values can be written in any CSS colour syntax — #0f6b72, oklch(0.55 0.21 264), hsl(...), even color-mix(). The library uses a mix of all of them internally. Nothing is parsed at build time, so there is no format to conform to.
To change any of them, see the Customization page. This page is the reference for what exists.
--background--foreground--card--card-foreground--popover--popover-foreground--primary is your brand colour — it drives the default button, links, and focus emphasis. --muted and --accent are the quiet greys behind hover states and secondary text. If you only ever change one token, change --primary.--primary--primary-foreground--secondary--secondary-foreground--muted--muted-foreground--accent--accent-foreground-foreground partner, but it does not mean what it means above — see the note under the swatches.--destructive--info--success--warningThe state -foreground tokens are the exception
--destructive-foreground is not the text on a solid destructive button — that is always white. It is a darker shade of the same hue, meant for text on a faint tint of the colour, which is how alerts and outline buttons are drawn. The same holds for --info, --success and --warning. Set it to a readable shade of its own colour, not to a contrasting one.
--border is every divider and outline, --input the slightly stronger edge on form fields, and --ring the keyboard focus ring. These are usually near-transparent, so they may look almost invisible below.--border--input--ring--radius is a single length that every component derives its corners from, so one value sets how round or how square the whole library looks.Components step off it rather than using it raw — a small badge uses calc(var(--radius) - 4px) and a card the full value — so the proportions hold at every size. Each shipped palette sets its own --radius to suit its character.
--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border and --sidebar-ring complete the set, matching --border and --ring.