CremaUIStudio/lib-theme-prism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename: skyai-finance → prism
Some checks failed
validate theme / validate (push) Has been cancelled
Details

Browse Source 
Lifted from skyai-finance into a standalone theme once the choices
stabilised. New name earns itself twice: the literal glass refraction,
and the hue spectrum the corner glows span (lavender → peach → cyan → mint).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-05-18 22:15:32 +10:00
parent 8ba09b5db3
commit c3d86506bb
3 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
theme.css
View File

@@ -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); }