vh
45c1995d7a
Replaces the previous theme attempt, which was built on a misread: the ask was to use Arbo as an IMAGE-GEN ENGINE for the background, with the operator's Australis Skyfall design system supplying the palette. theme/ holds the source — colors/layout/typography vendored verbatim from the Skyfall handoff bundle, Supreme 400/500/700 woff2, the Homepage bindings in skyfall.css.in, and build.py which inlines fonts + tokens into conf/custom.css. custom.css is GENERATED; edit the .in file and rebuild. The build exists because Homepage serves only custom.css and custom.js out of its config dir, so a @font-face pointing at a vendored woff2 would 404 — the face has to arrive as a data: URI. The background image takes the other route: /app/public/images is a real static route, so compose.yaml now mounts images/ there read-only and settings.yaml points at /images/. Bindings map Skyfall's semantic layer onto Homepage's DOM: Sea surfaces, the depth recipe (hairline AND two-layer shadow, never one alone), uppercase eyebrow group headers, the sanctioned accent-rail on the active tab rather than a glow, and semantic status colour so a green pill means the service is actually serving. Background generated by Arbo (irv-ml1:8201) workflow t2i-ui-background, job 13f0891f4e42, seed 26, flux2-klein-9b, 2048x1152 — abstract, no subject, cool-temperature aurora. 1.6 MB PNG -> 22 KB WebP. Two deviations are documented rather than hidden: Skyfall forbids imagery behind body text (held at opacity 30 as mitigation), and service icons stay full-colour vendor logos. NOT DEPLOYED — live still runs the old theme. Prototype on :5199.
73 lines
3.3 KiB
CSS
73 lines
3.3 KiB
CSS
/* Australis Skyfall — spacing, radii, shadows, motion (v3 "calm depth") */
|
|
|
|
:root {
|
|
/* Spacing (4px base) */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
--space-20: 80px;
|
|
--space-24: 96px;
|
|
--space-32: 128px;
|
|
|
|
/* Semantic spacing — airy content, compact chrome */
|
|
--pad-chrome: var(--space-2); /* app chrome: rails, toolbars, list rows */
|
|
--pad-content: var(--space-8); /* work surfaces: page bodies, card interiors breathe */
|
|
--gap-pane: var(--space-4); /* gutter between panes/cards on the canvas */
|
|
--measure: 68ch; /* long-form reading width */
|
|
|
|
/* Radii — moderate, calm */
|
|
--radius-xs: 6px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 10px; /* buttons, inputs, menu items */
|
|
--radius-lg: 14px; /* cards, panes, popovers */
|
|
--radius-xl: 16px; /* dialogs, drawers, command palette */
|
|
--radius-full: 999px;
|
|
|
|
/* Depth — crisp 1px hairline + layered soft shadow underneath.
|
|
Every elevated surface pairs border: 1px solid var(--border-subtle)
|
|
with one of these. Shadows are cool-tinted and two-layer:
|
|
a tight contact shadow + a wide ambient falloff. */
|
|
--shadow-xs: 0 1px 2px oklch(0.13 0.02 265 / 0.22);
|
|
--shadow-sm: 0 1px 2px oklch(0.13 0.02 265 / 0.2), 0 2px 8px -2px oklch(0.13 0.02 265 / 0.24);
|
|
--shadow-md: 0 2px 4px oklch(0.13 0.02 265 / 0.22), 0 10px 28px -6px oklch(0.13 0.02 265 / 0.36);
|
|
--shadow-lg: 0 4px 8px oklch(0.13 0.02 265 / 0.26), 0 28px 64px -12px oklch(0.13 0.02 265 / 0.5);
|
|
--shadow-drawer: 0 8px 16px oklch(0.13 0.02 265 / 0.28), 0 32px 80px -8px oklch(0.13 0.02 265 / 0.55);
|
|
|
|
/* Glows — hero moments ONLY: empty states, featured cards, command palette */
|
|
--glow-accent: 0 0 72px -16px color-mix(in oklab, var(--blue-base) 42%, transparent);
|
|
--glow-secondary: 0 0 72px -16px color-mix(in oklab, var(--cyan-base) 38%, transparent);
|
|
--glow-ai: 0 0 72px -16px color-mix(in oklab, var(--violet-base) 40%, transparent);
|
|
|
|
/* Active rail — left accent bar on active nav / selected items */
|
|
--rail-active: inset 2px 0 0 0 var(--accent);
|
|
|
|
/* Focus ring */
|
|
--focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--border-focus);
|
|
|
|
/* Motion — calm, no bounce */
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
|
|
--duration-fast: 120ms; /* @kind other */
|
|
--duration-base: 180ms; /* @kind other */
|
|
--duration-slow: 300ms; /* @kind other */
|
|
--duration-drawer: 260ms; /* @kind other */
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--shadow-xs: 0 1px 2px oklch(0.3 0.02 255 / 0.07);
|
|
--shadow-sm: 0 1px 2px oklch(0.3 0.02 255 / 0.06), 0 2px 8px -2px oklch(0.3 0.02 255 / 0.08);
|
|
--shadow-md: 0 2px 4px oklch(0.3 0.02 255 / 0.06), 0 10px 28px -6px oklch(0.3 0.02 255 / 0.12);
|
|
--shadow-lg: 0 4px 8px oklch(0.3 0.02 255 / 0.07), 0 28px 64px -12px oklch(0.3 0.02 255 / 0.18);
|
|
--shadow-drawer: 0 8px 16px oklch(0.3 0.02 255 / 0.08), 0 32px 80px -8px oklch(0.3 0.02 255 / 0.22);
|
|
--glow-accent: 0 0 72px -16px color-mix(in oklab, var(--blue-deep) 26%, transparent);
|
|
--glow-secondary: 0 0 72px -16px color-mix(in oklab, var(--cyan-deep) 24%, transparent);
|
|
--glow-ai: 0 0 72px -16px color-mix(in oklab, var(--violet-deep) 25%, transparent);
|
|
}
|