lib-theme-prism/README.md

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

@import "../../lib-theme-prism/theme.css";   /* CREMA:THEME */

Then load the fonts at the very top of app.css (Google Fonts URL):

@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:

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