c3d86506bb
Some checks failed
validate theme / validate (push) Has been cancelled
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>
76 lines
3.7 KiB
Markdown
76 lines
3.7 KiB
Markdown
# lib-theme-prism
|
||
|
||
Crystal-clear glass theme. Iridescent multi-hue palette (lavender → peach → cyan → mint) refracted through frosted-glass surfaces.
|
||
|
||
Forked from [`lib-theme-skyrise`](../lib-theme-skyrise/) with four product-driven changes that became theme-wide:
|
||
|
||
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
|
||
|
||
Sibling-clone like the other Crema themes:
|
||
|
||
```
|
||
your-workspace/
|
||
your-app/
|
||
lib-theme-prism/ ← this dir
|
||
lib-action-bus/
|
||
...
|
||
```
|
||
|
||
In the consuming app's `app/app.css`, swap the active theme import:
|
||
|
||
```css
|
||
@import "../../lib-theme-prism/theme.css"; /* CREMA:THEME */
|
||
```
|
||
|
||
Then load the fonts at the very top of `app.css` (Google Fonts URL):
|
||
|
||
```css
|
||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Instrument+Sans:wght@400..700&family=Geist+Mono:wght@400..600&display=swap");
|
||
```
|
||
|
||
And expose the hero size step + `--font-heading` to Tailwind in your `@theme inline` block:
|
||
|
||
```css
|
||
@theme inline {
|
||
--font-heading: "Instrument Sans", "Inter", sans-serif;
|
||
--text-hero: var(--text-hero-size);
|
||
--text-hero--line-height: var(--text-hero-lh);
|
||
/* … plus the usual --color-* mappings the lib expects */
|
||
}
|
||
```
|
||
|
||
## What's in the box
|
||
|
||
- Iridescent lavender→peach→cyan→mint light surface (the brand)
|
||
- Clean deep-violet dark surface with four soft corner glows
|
||
- Glass surfaces (blur + saturate + brightness stack) on every shadcn `[data-slot]`
|
||
- Apple-style spring physics motion tokens
|
||
- Premium primary button gradient + wet-sheen highlight
|
||
- AI orb avatar (rainbow conic) — opt in via `<AvatarFallback data-ai>`
|
||
- Heading face: **Instrument Sans 600 / -0.02em**
|
||
- Body face: **Inter** 17px (1.0625rem), `letter-spacing: -0.011em`
|
||
- Mono: **Geist Mono**
|
||
- `.num` utility — slashed zero, tabular nums, zero tracking
|
||
- `--text-hero` / `--text-display` / `--text-headline` / `--text-title` / `--text-body` / `--text-label` / `--text-caption`
|
||
- Full semantic colour set: primary, secondary, accent, muted, destructive, **success, warning** + foregrounds
|
||
- 5-step `--elevation-{1..5}` shadow scale (primary-tinted at e4/e5)
|
||
|
||
## What's not
|
||
|
||
- Background atmosphere variants (`pearl`, `linen`, `mist`, …) — strip from `DisplayMenu` too.
|
||
- Surface tints (`snow`, `stone`, `sage`, `slate`) — same.
|
||
- 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.
|