Tokens
Everything on this page is read from @ilomee/aura-core's own token files — nothing here is a copy. Change the theme or accent in the header and the values below re-resolve, because they are the same CSS variables your app would use.
Accents
5 accents. Each one is a gradient pair plus a solid --accent, resolved per theme. Click one in the header to repaint the site.
Your own colour
The five above are presets, not a limit. Every accent-derived value in the stylesheet — the gradient, all twelve scale steps, focus rings, every role alias — is a <code>color-mix()</code> over three custom properties, resolved by the browser. Overwrite them and the whole palette follows: no rebuild, no new selector, no fork.
import { accentVars } from '@ilomee/aura-core';
import { AuraProvider } from '@ilomee/aura-react';
// A gradient of your own.
<AuraProvider vars={accentVars({ from: '#FF6B00', to: '#FFC300' })}>…</AuraProvider>
// One colour, no gradient: both stops carry it, so --gradient renders flat.
<AuraProvider vars={accentVars('#E11D48')}>…</AuraProvider>
// The solid can differ from the gradient — it drives borders, focus rings and text.
<AuraProvider vars={accentVars({ from: '#FF6B00', to: '#FFC300', accent: '#F05A38' })}>…</AuraProvider>Without a component library it is three declarations — the same three the helper writes for you.
:root {
--grad-a: #ff6b00;
--grad-b: #ffc300;
--accent: #ff6b00;
}Surfaces and text
Both ramps, side by side. The theme toggle swaps which one is live.
The colour of a hover
Six rules paint a hover — the secondary and ghost buttons, the icon button, a chip's dismiss, an accordion summary, and the option a listbox cursor is on. All six read --aura-hover-bg, falling back to --surface-2, so changing it is one declaration rather than six overrides. Where you set it decides how far it reaches. Deliberately narrow: a segmented control's track and a disabled field are --surface-2 as well, and neither is a hover.
:root { --aura-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent); }
.sidebar { --aura-hover-bg: #1b1f2a; }Semantic
Shape and elevation
Space
A gap of 4 on any layout component means var(--space-4).
The two families
Every size in the scale above is one of these two. Neither is bundled: --font and --mono name a family and fall back to the platform, so a project that loads neither still gets the whole scale — in the system UI font, at the right sizes and weights.
Two declarations, in the same place the accent is overridden. Load the face however the project already loads faces — a @font-face, a link tag, a bundler import — and point the token at it; every component reads the token, so nothing else has to change.
@font-face {
font-family: 'Your Sans';
src: url('/fonts/your-sans.woff2') format('woff2');
font-display: swap;
}
:root {
--font: 'Your Sans', system-ui, sans-serif;
--mono: 'Your Mono', ui-monospace, monospace;
}Type
Switching everything
Four attributes on any ancestor — usually <html> — re-resolve every variable below them. That is the whole theming API; no JavaScript is involved.
| Attribute | Values | Default |
|---|---|---|
| data-theme | light · dark | light |
| data-accent | aqua · sunset · iris · lime · rose | aqua |
| data-corner | rounded · sharp · pill | rounded |
| data-density | comfortable · compact | comfortable |