--- title: "Theme: Aurora" description: Modern, color-confident preset toned to the WireKit brand magenta, with one-line --theme-hue retinting. visibility: guest draft: false --- # 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. ::: tip **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). ::: ::: tip **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`: ```css :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. ::: ```css /* 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 — 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 — 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); } ``` ::: info **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. ::: ::: info **Muted text on `` / `` 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: ```bash # 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: ```css :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: ```css /* 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. Use `variant="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.