lib-theme-skyai-finance

Finance-focused premium AI glass theme. Forked from lib-theme-skyrise with four product-driven changes:

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.

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.

Install

Sibling-clone like the other Crema themes:

your-workspace/
  skyai-finance/
  lib-theme-skyai-finance/   ← this dir
  lib-action-bus/
  ...

In the consuming app's app/app.css, swap the active theme import:

@import "../../lib-theme-skyai-finance/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.