Theme: Aurora
Modern, color-confident preset toned to the WireKit brand magenta (hue 306°, near #ab35ff from the official logo). Less monochrome than Default; more color-forward than Cupertino. Cool-tinted surfaces, brand-tinged borders and shadows, spring-y but restrained easing curve. A separate --color-wk-accent-brand token preserves the brand-exact value for decorative-only surfaces (logo backplate, hero glyphs); the interactive accent uses a WCAG-AA-clean lightness so button labels stay legible.
Scope: Aurora re-tones the brand / accent surface only. Semantic intents (--color-wk-success, --color-wk-warning, --color-wk-danger, --color-wk-info) are intentionally inherited from the WireKit default palette — they retain their universally legible green / amber / red / blue semantics regardless of preset. If you want semantic colors that harmonize with Aurora's magenta, override the corresponding --color-wk-{success,warning,danger,info} tokens in your own :root block below the Aurora preset.
Token-cascade lock-step. When you change the accent hue, the dependent token families must follow in lock-step or the theme reads as visually inconsistent. The hue-touching tokens are the 4 --color-wk-accent* tokens, --color-wk-text (a whisper of hue), the 2 --color-wk-code* tokens, and the 4 --shadow-wk-* casts. In light mode the surface + border families (--color-wk-bg*, --color-wk-border*) are deliberately neutral (zero chroma) — they read as true white / gray like the default theme and stay neutral when you retint the hue. In dark mode the surfaces keep a subtle hue tint (conventional for dark themes), so there the --color-wk-bg* / --color-wk-border* families track the hue too. Forgetting the .dark shadow set is the most common drift (the symptom is "cards look flat in dark mode" because the light shadows' 0.04 alpha is invisible against a dark background).
One-line retint via --theme-hue. Aurora is built on a single hue variable. Once the preset is applied, you can shift the entire palette to any hue by setting --theme-hue in your own :root block AFTER @wirekitStyles:
:root { --theme-hue: 264; } /* indigo Aurora — same WCAG-clean L values */
:root { --theme-hue: 24; } /* warm orange Aurora */
:root { --theme-hue: 145; } /* forest green Aurora */
The L values are chosen to clear WCAG AA across the full hue rotation, so the retint stays AA-compliant at any hue without per-hue tweaks.
/* WireKit Theme: Aurora — brand magenta, rounded, soft shadows.
Single-source hue: every hue-dependent token reads from
--theme-hue (defaults to 306 = brand magenta). Override --theme-hue
in your own :root block AFTER the preset to retint the entire
palette in one line.
WCAG AA verified at L=0.55 for the active accent — accent-fg
(near-white) on accent clears 5.28:1. At L=0.58 (initial draft)
the same pairing fell to 4.37:1 (fail). Verified via `php artisan
wirekit:doctor:a11y --theme-contrast`.
The brand-exact magenta (≈ oklch(0.605 0.27 306), #ab35ff) is
preserved in --color-wk-accent-brand for DECORATIVE-only surfaces
(logo backplate, hero glyphs) where body text never sits on top;
the interactive --color-wk-accent reads from the AA-clean L=0.55.
Note on `--color-wk-accent-content`: this is the "accent as TEXT
on a neutral background" token (inline links, breadcrumbs,
keyboard hints). Darker + more chroma-rich than accent so it
stays legible at body-text size — distinct from `accent-fg`
which is the foreground color ON the accent surface (white-ish
text printed on a primary button). */
:where(:root) {
--theme-hue: 306;
--color-wk-accent: oklch(0.55 0.22 var(--theme-hue));
--color-wk-accent-hover: oklch(0.49 0.22 var(--theme-hue));
--color-wk-accent-content: oklch(0.42 0.22 var(--theme-hue));
--color-wk-accent-fg: oklch(0.99 0.005 var(--theme-hue));
/* Brand-exact tokens — decorative use only (pair with a surface,
no body text on top). Preserve the logo magenta at L=0.605. */
--color-wk-accent-brand: oklch(0.605 0.27 var(--theme-hue));
--color-wk-accent-brand-fg: oklch(0.99 0.005 var(--theme-hue));
/* Modestly rounded — 6 px base, 4 px sm, 6 px md, 8 px lg, 12 px xl.
Dashboard-tuned; flip to the aurora-soft variant below for a
more generous marketing-page scale. */
--radius-wk: 0.375rem;
--radius-wk-sm: 0.25rem;
--radius-wk-md: 0.375rem;
--radius-wk-lg: 0.5rem;
--radius-wk-xl: 0.75rem;
/* Cool-tinted surfaces — every surface tint reads the same
--theme-hue so re-tinting stays cohesive. */
--color-wk-bg: oklch(1 0 0);
--color-wk-bg-elevated: oklch(1 0 0);
--color-wk-bg-muted: oklch(0.972 0 0);
--color-wk-bg-subtle: oklch(0.985 0 0);
/* Foreground text — softened off pure-neutral near-black and given a
whisper of the theme hue so it belongs to Aurora rather than reading
as stark monochrome on the tinted surfaces. WCAG AAA at 16.3:1. */
--color-wk-text: oklch(0.24 0.02 var(--theme-hue));
/* Inline <code> — CI magenta on a light magenta-tint highlight, so inline
code reads as part of the brand. WCAG AA at 5.74:1, hue-stable. */
--color-wk-code: oklch(0.52 0.24 var(--theme-hue));
--color-wk-code-bg: oklch(0.97 0.02 var(--theme-hue));
--color-wk-border: oklch(0.91 0 0);
/* Form-control borders, so these are contrast-bound, not stylistic: 3:1
against the input fill (WCAG 1.4.11). The softer 0.82 this preset used to
carry reads beautifully on a card edge but only reaches 1.75:1 around an
input, and hover has to move AWAY from the fill, never toward it. */
--color-wk-border-strong: oklch(0.66 0 0);
--color-wk-border-strong-hover: oklch(0.58 0 0);
/* Soft, layered shadows — closer to Tailwind UI than to Default. */
--shadow-wk-sm: 0 1px 2px 0 oklch(0.2 0.03 var(--theme-hue) / 0.04),
0 1px 1px 0 oklch(0.2 0.03 var(--theme-hue) / 0.03);
--shadow-wk-md: 0 4px 6px -1px oklch(0.2 0.03 var(--theme-hue) / 0.06),
0 2px 4px -2px oklch(0.2 0.03 var(--theme-hue) / 0.04);
--shadow-wk-lg: 0 10px 15px -3px oklch(0.2 0.03 var(--theme-hue) / 0.08),
0 4px 6px -4px oklch(0.2 0.03 var(--theme-hue) / 0.05);
--shadow-wk-xl: 0 20px 25px -5px oklch(0.2 0.03 var(--theme-hue) / 0.09),
0 8px 10px -6px oklch(0.2 0.03 var(--theme-hue) / 0.04);
/* Softer badges — flat tinted chips (no outline, no inset ring) instead of
the bordered default. Restore the harder look by setting these back to
the global defaults (--border-wk-width / the inset-ring shadow). */
--border-wk-badge-width: 0px;
--shadow-wk-badge: none;
--transition-wk-easing: cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.dark) {
/* Dark mode reads from the same --theme-hue (inherited from the
light block — no need to redeclare unless overriding). */
--color-wk-accent: oklch(0.68 0.20 var(--theme-hue));
--color-wk-accent-hover: oklch(0.74 0.20 var(--theme-hue));
--color-wk-accent-content: oklch(0.82 0.18 var(--theme-hue));
--color-wk-accent-fg: oklch(0.15 0.025 var(--theme-hue));
--color-wk-accent-brand: oklch(0.7 0.27 var(--theme-hue));
--color-wk-accent-brand-fg: oklch(0.15 0.025 var(--theme-hue));
--color-wk-bg: oklch(0.16 0.025 var(--theme-hue));
--color-wk-bg-elevated: oklch(0.21 0.028 var(--theme-hue));
--color-wk-bg-muted: oklch(0.235 0.027 var(--theme-hue));
--color-wk-bg-subtle: oklch(0.275 0.025 var(--theme-hue));
/* Foreground text — a barely-warm off-white (vs pure neutral) carrying
the same whisper of theme hue as the light block. WCAG AAA at 17.3:1. */
--color-wk-text: oklch(0.96 0.012 var(--theme-hue));
/* Inline <code> — light magenta on a dark magenta-tint highlight. WCAG AA at 7.56:1. */
--color-wk-code: oklch(0.8 0.16 var(--theme-hue));
--color-wk-code-bg: oklch(0.27 0.04 var(--theme-hue));
--color-wk-border: oklch(0.31 0.024 var(--theme-hue));
/* Same contrast floor as light, reached from the other side — on a dark
fill the border BRIGHTENS away from it. Verified across the whole
theme-hue range, not at one sample hue. */
--color-wk-border-strong: oklch(0.52 0.02 var(--theme-hue));
--color-wk-border-strong-hover: oklch(0.60 0.02 var(--theme-hue));
/* Shadows MUST be redeclared in dark mode — light-mode shadows
use 0.04–0.09 alpha which is effectively invisible against a
dark surface. Pure-black core + accent-hue secondary cast at
0.30–0.45 alpha keeps cards readable as "lifted". */
--shadow-wk-sm: 0 1px 2px 0 oklch(0 0 0 / 0.30),
0 1px 1px 0 oklch(0 0 0 / 0.20);
--shadow-wk-md: 0 4px 6px -1px oklch(0 0 0 / 0.35),
0 2px 4px -2px oklch(0.2 0.03 var(--theme-hue) / 0.25);
--shadow-wk-lg: 0 10px 15px -3px oklch(0 0 0 / 0.40),
0 4px 6px -4px oklch(0.2 0.03 var(--theme-hue) / 0.30);
--shadow-wk-xl: 0 20px 25px -5px oklch(0 0 0 / 0.45),
0 8px 10px -6px oklch(0.2 0.03 var(--theme-hue) / 0.30);
}
Tailwind v4 normalizes oklch() notation at build time. When you paste the Aurora block above into your app.css and run npm run build, the built CSS contains oklch(55% .22 306) rather than the source oklch(0.55 0.22 306). These are byte-different but color-identical. When you grep the built output to verify the paste landed, search for the percentage form. The same applies to every OKLCH value in this guide.
Muted text on <x-wirekit::hero variant="accent"> / <x-wirekit::cta variant="accent"> renders at the full accent foreground — by design. A colored accent surface (Aurora's accent is L=0.55) lacks the contrast headroom for AA-safe text muting: the accent-fg / accent pair is ~5.3:1, so any opacity blend would fall below the 4.5:1 WCAG AA floor. WireKit therefore renders muted text on variant="accent" at the full --color-wk-accent-fg, so it always clears AA — no action is needed on your side. For visibly de-emphasized secondary text on a dark band, use variant="dark" instead; its non-colored surface has the headroom for real muting.
Prefer the CLI? wirekit:theme writes the block above into your app.css for you:
# 1. Apply the Aurora preset to your app.css.
php artisan wirekit:theme aurora
# 2. Rebuild your CSS bundle.
npm run build
Aurora-soft variant — marketing-page scale
The Aurora block above is dashboard-tuned (modest radii). For marketing / landing-page contexts where a softer pillow-y feel reads better, override the radius scale:
:where(:root) {
--radius-wk: 0.75rem; /* 12px */
--radius-wk-sm: 0.5rem; /* 8px */
--radius-wk-md: 0.75rem; /* 12px */
--radius-wk-lg: 1rem; /* 16px */
--radius-wk-xl: 1.5rem; /* 24px */
}
Paste this after the Aurora block to override only the radius tokens. The color, surface, and shadow scales remain Aurora's.
Color presets
Aurora is single-hue: the whole palette is driven by one variable, --theme-hue. To recolor it, apply the Aurora block above, then set --theme-hue once in your own :root block after @wirekitStyles. Every dependent token — accent, surfaces, borders, shadows — follows automatically, and the lightness values keep all pairings WCAG-AA across the full hue rotation, so every preset below is safe to ship without per-hue tweaks.
| Preset | --theme-hue |
One-line override |
|---|---|---|
| Magenta (brand, default) | 306 |
:root { --theme-hue: 306; } |
| Pink | 350 |
:root { --theme-hue: 350; } |
| Red | 22 |
:root { --theme-hue: 22; } |
| Orange | 55 |
:root { --theme-hue: 55; } |
| Amber | 82 |
:root { --theme-hue: 82; } |
| Green | 150 |
:root { --theme-hue: 150; } |
| Teal | 185 |
:root { --theme-hue: 185; } |
| Cyan | 215 |
:root { --theme-hue: 215; } |
| Blue | 255 |
:root { --theme-hue: 255; } |
| Indigo | 275 |
:root { --theme-hue: 275; } |
| Violet | 298 |
:root { --theme-hue: 298; } |
For example, to ship Aurora in your brand blue, paste the Aurora block, then add one line:
/* Aurora, recolored to blue — every token follows --theme-hue */
:where(:root) {
--theme-hue: 255;
}
That single declaration shifts the accent, the cool-tinted surfaces, the borders, and the shadow casts together — the palette stays cohesive and AA-clean. Mix and match: keep Aurora's magenta accent but warm the surfaces, or vice versa, by overriding individual --color-wk-* tokens after the preset.
Accessibility
Aurora's interactive accent is tuned to a WCAG-clean lightness — L=0.55 in light mode, L=0.68 in dark — so the near-white accent foreground clears ~5.28:1 (AA) on the accent surface. The brand-exact magenta (brighter, lower-contrast) is kept separately in --color-wk-accent-brand for decorative-only use, so it never carries interactive text. Because the whole palette is driven by the single --theme-hue variable, the lightness values are chosen to hold AA across the entire hue rotation — every color preset above stays compliant without per-hue tuning.
Two things to verify in your own build:
- Muted text on
variant="accent"hero / CTA surfaces renders at the full--color-wk-accent-fg(a colored accent has no AA-safe muting headroom), so it always clears AA — no action needed. Usevariant="dark"when you want visibly de-emphasized secondary text. - Semantic intents (
success/warning/danger/info) are inherited unchanged from the default palette, so their legibility is identical to every other theme.