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

2
.gitea/workflows/validate-theme.yml
View File

@@ -28,4 +28,4 @@ jobs:
node .ci-scripts/check-theme.mjs \ node .ci-scripts/check-theme.mjs \
--target=theme.css \ --target=theme.css \
--reference=.ci-scripts/lib-theme-pristine/theme.css \ --reference=.ci-scripts/lib-theme-pristine/theme.css \
--name=skyai-finance --name=prism

26
README.md
View File

@@ -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. Forked from [`lib-theme-skyrise`](../lib-theme-skyrise/) with four product-driven changes that became theme-wide:
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.
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 ## Install
@@ -15,8 +17,8 @@ Sibling-clone like the other Crema themes:
``` ```
your-workspace/ your-workspace/
skyai-finance/ your-app/
lib-theme-skyai-finance/ ← this dir lib-theme-prism/ ← this dir
lib-action-bus/ lib-action-bus/
... ...
``` ```
@@ -24,7 +26,7 @@ your-workspace/
In the consuming app's `app/app.css`, swap the active theme import: In the consuming app's `app/app.css`, swap the active theme import:
```css ```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): 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. - Multiple syntax themes.
If you need either, fork back to `lib-theme-skyrise`. 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.

46
theme.css
View File

@@ -1,21 +1,33 @@
/* /*
* skyai-finance — finance-focused premium AI glass theme. * prism — crystal-clear glass theme.
* Forked from skyrise (lib-theme-skyrise) with four product-driven changes:
* *
* 1. Bakes in --warning + --warning-foreground (skyrise had them; pristine * Iridescent multi-hue palette (lavender → peach → cyan → mint) refracted
* did not — finance KPIs need warning semantics out of the box). * through frosted-glass surfaces. Earns its name twice: once for the
* 2. Adds a --text-hero size step (3.5rem) above display, for KPI heroes. * 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 + * 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 * 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 * L≈0.18 with chroma≈0.12, near OKLCH gamut edges, which clipped
* muddy gray. Here the corner glows are pushed to L≈0.30 with lower * to muddy gray. Here the corner glows are pushed to L≈0.30 with
* chroma, paired with a cleaner near-black base — they read as soft * lower chroma, paired with a cleaner near-black base — they read
* brand-accent light instead of tinted fog. * as soft brand-accent light instead of tinted fog.
* *
* Also dropped: the 11 background atmospheres and 4 surface tints skyrise * Also dropped: the 11 background atmospheres and 4 surface tints
* shipped for white-label flexibility. A focused product picks one brand * skyrise shipped for white-label flexibility. Prism picks one brand
* surface and ships it; if those return, re-import from skyrise. * 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 * 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. * very top of its entry CSS — see README. Do NOT @import them here.
@@ -335,14 +347,14 @@
background-image: background-image:
radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.9 0.13 295 / 0.85), transparent 60%), 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%); 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 { .aurora-blob-2 {
background-image: background-image:
radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.9 0.14 200 / 0.8), transparent 60%), 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%); 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 /* 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%); 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); } 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
33% { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); } 33% { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); }
66% { transform: translate3d(-3%, 4%, 0) rotate(-8deg) scale(0.96); } 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); } 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
33% { transform: translate3d(-5%, 4%, 0) rotate(-12deg) scale(1.09); } 33% { transform: translate3d(-5%, 4%, 0) rotate(-12deg) scale(1.09); }
66% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(0.94); } 66% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(0.94); }