feat(homepage): rebuild the theme on canonical Australis tokens
The predecessor theme was ugly for two structural reasons, not one. It did not use the design system's colours. It built a parallel OKLCH palette "derived from the Australis philosophy" and swapped the canonical typeface for Supreme -- a fork, not a theme. Every hex here is now copied verbatim from ~/.claude/skills/australis-design/colors_and_type.css, and build.py re-checks all 19 against that file at build time and warns on drift so it cannot quietly fork again. Type is the canonical stack: Space Grotesk / Inter / JetBrains Mono, vendored as latin-subset VARIABLE woff2 (one file per family, 102 KB total against 56 KB for three static Supreme cuts, and no Google Fonts request at page load). It also carried a generated full-bleed aurora image behind the entire dashboard. Canon forbids exactly that -- "solid fills only on chrome, no full-bleed photography, no decorative gradients", and the aurora motif "never as a background fill behind text". The predecessor knew, said so in its own header, and dialled the opacity down rather than dropping it. The image is gone; the aurora survives as a 1px accent edge under the tab bar, which is where canon sanctions it. The asset stays in images/ in case it is ever revisited. Direction is instrument panel. Group headings become the Australis mono eyebrow with a hairline to the right edge -- canon calls the eyebrow a system signature, and it turns the groups into register bands instead of headings floating over a grid. Status stops shouting: the filled emerald chips read louder than the service names they annotated, so they are now a semantic dot plus a mono micro-label at tertiary contrast. Cards are bordered and opaque, per canon's border-over-shadow rule for chrome. Alignment, per operator feedback that pills and cards did not line up: - The status cluster is centred on the service name's line rather than parked in the card's top-right corner, where Homepage's `absolute top-0` left it floating ~7px above the title's optical centre. The offsets reconstruct the title line box and are documented as moving together. - Descriptions get a two-line minimum, so the common one-line/two-line mix bottom-aligns across a row. This is what made the grid look ragged. useEqualHeights stays false: it inflated short cards to match a widget card twice their height, which was the worse failure. - The status dot is flex-centred rather than nudged with vertical-align, so it stays centred if the type scale changes. Retires the Skyfall sources and the Supreme faces; theme/ now has one source of truth.
This commit is contained in:
@@ -1,208 +0,0 @@
|
||||
/* ============================================================
|
||||
Australis Skyfall — Color Tokens v2
|
||||
A ground-up web palette derived from the Australis Dark
|
||||
PHILOSOPHY (not its ANSI values). Built in OKLCH so the laws
|
||||
are explicit and every family stays perceptually consistent:
|
||||
|
||||
- All hues are cooler than neutral; nothing warmer than amber.
|
||||
- One lightness law across every chromatic family:
|
||||
deep L 0.48 — light-theme fills & colored text
|
||||
base L 0.66 — dark-theme fills (the working color)
|
||||
bright L 0.80 — dark-theme colored text & highlights
|
||||
- Chroma is tuned per hue so no family shouts over another.
|
||||
- Neutrals (Sea ramp) drift in hue from ice-blue (265°) toward
|
||||
ocean green (195°) as they brighten — the aurora signature.
|
||||
- Medium / medium-high contrast for eye comfort.
|
||||
|
||||
Families: Aurora (blue, cyan, green — use generously, in that
|
||||
order) and Dawn (amber, red, violet — semantic accents only:
|
||||
warning, danger, AI).
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* ---- Sea — neutral ramp (hue 265° → 195° as L rises) ---- */
|
||||
--sea-10: oklch(0.23 0.02 265);
|
||||
--sea-15: oklch(0.27 0.024 268); /* dark canvas — the Australis anchor */
|
||||
--sea-20: oklch(0.31 0.022 262);
|
||||
--sea-25: oklch(0.35 0.02 258);
|
||||
--sea-30: oklch(0.4 0.018 252);
|
||||
--sea-40: oklch(0.48 0.016 245);
|
||||
--sea-50: oklch(0.56 0.015 235);
|
||||
--sea-60: oklch(0.64 0.014 228);
|
||||
--sea-70: oklch(0.72 0.014 220);
|
||||
--sea-75: oklch(0.78 0.015 212);
|
||||
--sea-80: oklch(0.83 0.017 205);
|
||||
--sea-90: oklch(0.9 0.02 198);
|
||||
--sea-94: oklch(0.94 0.014 195);
|
||||
--sea-96: oklch(0.96 0.01 195);
|
||||
--sea-98: oklch(0.98 0.006 195);
|
||||
|
||||
/* ---- Ice — main colors (aliases into the ramp) ---- */
|
||||
--ice-black: var(--sea-15);
|
||||
--ice-white: var(--sea-75);
|
||||
--ice-bright-white: var(--sea-90);
|
||||
|
||||
/* ---- Aurora — primary families (blue > cyan > green) ---- */
|
||||
--blue-deep: oklch(0.48 0.12 262);
|
||||
--blue-base: oklch(0.66 0.12 262);
|
||||
--blue-bright: oklch(0.8 0.09 262);
|
||||
--cyan-deep: oklch(0.48 0.08 200);
|
||||
--cyan-base: oklch(0.66 0.1 200);
|
||||
--cyan-bright: oklch(0.8 0.1 200);
|
||||
--green-deep: oklch(0.48 0.11 158);
|
||||
--green-base: oklch(0.66 0.13 158);
|
||||
--green-bright: oklch(0.8 0.13 158);
|
||||
|
||||
/* ---- Dawn — accent families (semantic use only) ---- */
|
||||
--amber-deep: oklch(0.52 0.1 75);
|
||||
--amber-base: oklch(0.7 0.12 78);
|
||||
--amber-bright: oklch(0.82 0.13 82);
|
||||
--red-deep: oklch(0.5 0.15 25);
|
||||
--red-base: oklch(0.62 0.16 25);
|
||||
--red-bright: oklch(0.78 0.11 28);
|
||||
--violet-deep: oklch(0.5 0.15 292);
|
||||
--violet-base: oklch(0.66 0.14 292);
|
||||
--violet-bright: oklch(0.8 0.1 292);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Semantic aliases — DARK (default, first-class)
|
||||
============================================================ */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Surfaces */
|
||||
--surface-sunken: var(--sea-10);
|
||||
--surface-base: var(--sea-15);
|
||||
--surface-raised: var(--sea-20);
|
||||
--surface-overlay: oklch(0.34 0.022 260);
|
||||
--surface-card: var(--sea-20);
|
||||
--surface-input: var(--sea-10);
|
||||
--surface-scrim: oklch(0.17 0.02 265 / 0.72);
|
||||
|
||||
/* Text */
|
||||
--text-heading: var(--sea-90);
|
||||
--text-body: var(--sea-75);
|
||||
--text-muted: var(--sea-60);
|
||||
--text-faint: var(--sea-50);
|
||||
--text-inverse: var(--sea-15);
|
||||
--text-link: var(--blue-bright);
|
||||
--text-link-hover: var(--sea-90);
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: var(--sea-25);
|
||||
--border-default: var(--sea-30);
|
||||
--border-strong: var(--sea-40);
|
||||
--border-focus: var(--blue-base);
|
||||
|
||||
/* Accent (primary = aurora blue) */
|
||||
--accent: var(--blue-base);
|
||||
--accent-hover: oklch(0.71 0.11 262);
|
||||
--accent-active: oklch(0.6 0.13 262);
|
||||
--accent-bright: var(--blue-bright);
|
||||
--accent-text: var(--blue-bright);
|
||||
--accent-contrast: var(--sea-10);
|
||||
--accent-soft: color-mix(in oklab, var(--blue-base) 16%, transparent);
|
||||
--accent-soft-hover: color-mix(in oklab, var(--blue-base) 26%, transparent);
|
||||
|
||||
/* Secondary accent (aurora cyan) */
|
||||
--secondary: var(--cyan-base);
|
||||
--secondary-bright: var(--cyan-bright);
|
||||
--secondary-text: var(--cyan-bright);
|
||||
--secondary-soft: color-mix(in oklab, var(--cyan-base) 14%, transparent);
|
||||
|
||||
/* Semantic status */
|
||||
--success: var(--green-base);
|
||||
--success-text: var(--green-bright);
|
||||
--success-soft: color-mix(in oklab, var(--green-base) 14%, transparent);
|
||||
--warning: var(--amber-base);
|
||||
--warning-text: var(--amber-bright);
|
||||
--warning-soft: color-mix(in oklab, var(--amber-base) 13%, transparent);
|
||||
--danger: var(--red-base);
|
||||
--danger-hover: oklch(0.67 0.15 25);
|
||||
--danger-text: var(--red-bright);
|
||||
--danger-contrast: var(--sea-10);
|
||||
--danger-soft: color-mix(in oklab, var(--red-base) 13%, transparent);
|
||||
--info: var(--blue-base);
|
||||
--info-text: var(--blue-bright);
|
||||
--info-soft: color-mix(in oklab, var(--blue-base) 14%, transparent);
|
||||
--ai: var(--violet-base);
|
||||
--ai-text: var(--violet-bright);
|
||||
--ai-soft: color-mix(in oklab, var(--violet-base) 13%, transparent);
|
||||
|
||||
/* Selection */
|
||||
--selection-bg: var(--blue-base);
|
||||
--selection-fg: var(--sea-10);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Semantic aliases — LIGHT ("Skyfall Day")
|
||||
Same laws, inverted: surfaces at L 0.94–0.98, text at L 0.27–0.45,
|
||||
chromatic fills & colored text drop to the deep (L 0.48) step.
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* Surfaces */
|
||||
--surface-sunken: var(--sea-94);
|
||||
--surface-base: var(--sea-96);
|
||||
--surface-raised: var(--sea-98);
|
||||
--surface-overlay: #ffffff;
|
||||
--surface-card: var(--sea-98);
|
||||
--surface-input: #ffffff;
|
||||
--surface-scrim: oklch(0.27 0.024 268 / 0.4);
|
||||
|
||||
/* Text */
|
||||
--text-heading: var(--sea-15);
|
||||
--text-body: oklch(0.38 0.02 255);
|
||||
--text-muted: var(--sea-50);
|
||||
--text-faint: var(--sea-60);
|
||||
--text-inverse: var(--sea-90);
|
||||
--text-link: var(--blue-deep);
|
||||
--text-link-hover: var(--sea-15);
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: oklch(0.89 0.014 210);
|
||||
--border-default: oklch(0.84 0.016 215);
|
||||
--border-strong: var(--sea-75);
|
||||
--border-focus: var(--blue-deep);
|
||||
|
||||
/* Accent */
|
||||
--accent: var(--blue-deep);
|
||||
--accent-hover: oklch(0.53 0.12 262);
|
||||
--accent-active: oklch(0.44 0.12 262);
|
||||
--accent-bright: var(--blue-base);
|
||||
--accent-text: var(--blue-deep);
|
||||
--accent-contrast: #ffffff;
|
||||
--accent-soft: color-mix(in oklab, var(--blue-deep) 10%, transparent);
|
||||
--accent-soft-hover: color-mix(in oklab, var(--blue-deep) 18%, transparent);
|
||||
|
||||
/* Secondary accent */
|
||||
--secondary: var(--cyan-deep);
|
||||
--secondary-bright: var(--cyan-base);
|
||||
--secondary-text: var(--cyan-deep);
|
||||
--secondary-soft: color-mix(in oklab, var(--cyan-deep) 9%, transparent);
|
||||
|
||||
/* Semantic status */
|
||||
--success: var(--green-deep);
|
||||
--success-text: var(--green-deep);
|
||||
--success-soft: color-mix(in oklab, var(--green-deep) 10%, transparent);
|
||||
--warning: var(--amber-deep);
|
||||
--warning-text: var(--amber-deep);
|
||||
--warning-soft: color-mix(in oklab, var(--amber-base) 16%, transparent);
|
||||
--danger: var(--red-deep);
|
||||
--danger-hover: oklch(0.55 0.16 25);
|
||||
--danger-text: var(--red-deep);
|
||||
--danger-contrast: #ffffff;
|
||||
--danger-soft: color-mix(in oklab, var(--red-deep) 8%, transparent);
|
||||
--info: var(--blue-deep);
|
||||
--info-text: var(--blue-deep);
|
||||
--info-soft: color-mix(in oklab, var(--blue-deep) 9%, transparent);
|
||||
--ai: var(--violet-deep);
|
||||
--ai-text: var(--violet-deep);
|
||||
--ai-soft: color-mix(in oklab, var(--violet-deep) 9%, transparent);
|
||||
|
||||
/* Selection */
|
||||
--selection-bg: var(--blue-base);
|
||||
--selection-fg: #ffffff;
|
||||
}
|
||||
Reference in New Issue
Block a user