diff --git a/.gitea/workflows/validate-theme.yml b/.gitea/workflows/validate-theme.yml index 5c7bca9..6a8361f 100644 --- a/.gitea/workflows/validate-theme.yml +++ b/.gitea/workflows/validate-theme.yml @@ -28,4 +28,4 @@ jobs: node .ci-scripts/check-theme.mjs \ --target=theme.css \ --reference=.ci-scripts/lib-theme-pristine/theme.css \ - --name=skyai-finance + --name=prism diff --git a/README.md b/README.md index 1b1a936..cdbc480 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ -# lib-theme-skyai-finance +# lib-theme-prism -Finance-focused premium AI glass theme. Forked from [`lib-theme-skyrise`](../lib-theme-skyrise/) with four product-driven changes: +Crystal-clear glass theme. Iridescent multi-hue palette (lavender → peach → cyan → mint) refracted through frosted-glass surfaces. -1. **Bakes in `--warning` + `--warning-foreground`** — finance KPIs need warning semantics out of the box. Pristine had `--success` but no warning; skyrise had both. This theme guarantees them in light and dark. -2. **Adds a `--text-hero` size step** (`3.5rem`) above `display`, for KPI hero numbers. Exposed as `text-hero` once the consuming app maps it into Tailwind's `@theme inline`. -3. **Ships a `.num` utility** that sets `font-feature-settings: "tnum","ss01","cv01"`, `font-variant-numeric: tabular-nums`, and `letter-spacing: 0`. Apply to any element that displays money or counts — never inherit body's negative tracking on digits, never tolerate the ambiguous round-zero glyph in a finance context. -4. **Redesigned dark-mode background.** Skyrise's dark blobs sat at `L≈0.18` with chroma `≈0.12`, which clipped to muddy gray near OKLCH gamut edges. Here the four corner glows are pushed to `L≈0.30` with lower chroma (`0.06–0.09`), paired with a cleaner near-black base. Reads as soft brand-accent light rather than tinted fog. +Forked from [`lib-theme-skyrise`](../lib-theme-skyrise/) with four product-driven changes that became theme-wide: -Also **dropped**: the 11 background atmospheres and 4 surface tints skyrise shipped for white-label flexibility. A focused product picks one brand surface and ships it. Re-import them from skyrise if needs change. +1. **Bakes in `--warning` + `--warning-foreground`** — any product that displays health or risk needs warning semantics in both modes. Skyrise had it; pristine did not. +2. **Adds a `--text-hero` size step** (`3.5rem`) above `display`, for KPI hero numbers and editorial mastheads. Exposed as `text-hero` once the consuming app maps it into Tailwind's `@theme inline`. +3. **Ships a `.num` utility** — `font-feature-settings: "tnum","ss01","cv01"`, `font-variant-numeric: tabular-nums`, `letter-spacing: 0`. Apply to any element that displays money or counts. Non-negotiable on finance numbers; useful anywhere digits matter. +4. **Redesigned dark-mode background.** Skyrise's dark blobs sat at `L≈0.18` with chroma `≈0.12`, which clipped to muddy gray near OKLCH gamut edges. Prism pushes the four corner glows to `L≈0.30` with lower chroma (`0.06–0.09`) over a cleaner near-black base. They read as soft brand-accent light rather than tinted fog. + +Also **dropped**: the 11 background atmospheres and 4 surface tints skyrise shipped for white-label flexibility. Prism picks one brand surface (light + dark) and ships it. If alternates return, re-import them from skyrise. ## Install @@ -15,8 +17,8 @@ Sibling-clone like the other Crema themes: ``` your-workspace/ - skyai-finance/ - lib-theme-skyai-finance/ ← this dir + your-app/ + lib-theme-prism/ ← this dir lib-action-bus/ ... ``` @@ -24,7 +26,7 @@ your-workspace/ In the consuming app's `app/app.css`, swap the active theme import: ```css -@import "../../lib-theme-skyai-finance/theme.css"; /* CREMA:THEME */ +@import "../../lib-theme-prism/theme.css"; /* CREMA:THEME */ ``` Then load the fonts at the very top of `app.css` (Google Fonts URL): @@ -67,3 +69,7 @@ And expose the hero size step + `--font-heading` to Tailwind in your `@theme inl - Multiple syntax themes. If you need either, fork back to `lib-theme-skyrise`. + +## Origin + +Born inside [skyai-finance](https://git.sky-ai.com/skyai/skyai-finance) as `lib-theme-skyai-finance` during a craft pass on the finance dashboard. Renamed and extracted once the choices stabilised and a senior-designer review confirmed the system was generalisable beyond finance KPIs. diff --git a/theme.css b/theme.css index 194b837..57eaf10 100644 --- a/theme.css +++ b/theme.css @@ -1,21 +1,33 @@ /* - * skyai-finance — finance-focused premium AI glass theme. - * Forked from skyrise (lib-theme-skyrise) with four product-driven changes: + * prism — crystal-clear glass theme. * - * 1. Bakes in --warning + --warning-foreground (skyrise had them; pristine - * did not — finance KPIs need warning semantics out of the box). - * 2. Adds a --text-hero size step (3.5rem) above display, for KPI heroes. + * Iridescent multi-hue palette (lavender → peach → cyan → mint) refracted + * through frosted-glass surfaces. Earns its name twice: once for the + * literal glass refraction, once for the hue spectrum the corner glows + * span. Born in skyai-finance; lifted into a standalone theme when the + * shape stabilised. + * + * Forked from skyrise (lib-theme-skyrise) with four product-driven + * changes that became theme-wide: + * + * 1. Bakes in --warning + --warning-foreground (skyrise had them; + * pristine did not). Any product that displays health/risk needs + * warning semantics in both modes. + * 2. Adds a --text-hero size step (3.5rem) above display, for KPI + * heroes and editorial mastheads. * 3. Ships a `.num` utility that sets tabular-nums + slashed-zero + - * letter-spacing:0 — non-negotiable on money numbers. + * letter-spacing:0 — non-negotiable on money numbers, useful + * anywhere digits matter. * 4. Redesigns the dark-mode background. Skyrise's dark blobs sat at - * L≈0.18 with chroma≈0.12, near OKLCH gamut edges, which clipped to - * muddy gray. Here the corner glows are pushed to L≈0.30 with lower - * chroma, paired with a cleaner near-black base — they read as soft - * brand-accent light instead of tinted fog. + * L≈0.18 with chroma≈0.12, near OKLCH gamut edges, which clipped + * to muddy gray. Here the corner glows are pushed to L≈0.30 with + * lower chroma, paired with a cleaner near-black base — they read + * as soft brand-accent light instead of tinted fog. * - * Also dropped: the 11 background atmospheres and 4 surface tints skyrise - * shipped for white-label flexibility. A focused product picks one brand - * surface and ships it; if those return, re-import from skyrise. + * Also dropped: the 11 background atmospheres and 4 surface tints + * skyrise shipped for white-label flexibility. Prism picks one brand + * surface (light + dark) and ships it. If alternates return, re-import + * from skyrise. * * Fonts loaded by the consuming app via Google Fonts URL @import at the * very top of its entry CSS — see README. Do NOT @import them here. @@ -335,14 +347,14 @@ background-image: radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.9 0.13 295 / 0.85), transparent 60%), radial-gradient(ellipse 38% 32% at 78% 22%, oklch(0.9 0.13 350 / 0.8), transparent 55%); - animation: skyfin-drift-a 32s ease-in-out infinite; + animation: prism-drift-a 32s ease-in-out infinite; } .aurora-blob-2 { background-image: radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.9 0.14 200 / 0.8), transparent 60%), radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.92 0.12 145 / 0.75), transparent 55%); - animation: skyfin-drift-b 40s ease-in-out infinite; + animation: prism-drift-b 40s ease-in-out infinite; } /* Dark variant of the drifting aurora — same L/chroma discipline as @@ -358,12 +370,12 @@ radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.30 0.07 145 / 0.45), transparent 55%); } - @keyframes skyfin-drift-a { + @keyframes prism-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 33% { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); } 66% { transform: translate3d(-3%, 4%, 0) rotate(-8deg) scale(0.96); } } - @keyframes skyfin-drift-b { + @keyframes prism-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 33% { transform: translate3d(-5%, 4%, 0) rotate(-12deg) scale(1.09); } 66% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(0.94); }