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

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.
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.