Files

jules 8ba09b5db3 feat: initial — fork skyrise for finance product

- Bakes in --warning / --warning-foreground (light + dark).
- Adds --text-hero size step (3.5rem) above display, for KPI heroes.
- Ships a .num utility (tabular-nums + slashed-zero + zero tracking).
- Redesigned dark-mode background: corner glows pushed to L≈0.30 with
  lower chroma over a clean near-black base — reads as soft brand-accent
  light instead of skyrise's muddy gamut-fringe blobs.
- Drops 11 background atmospheres + 4 surface tints — focused product theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-18 22:02:38 +10:00

3.4 KiB

Raw Blame History

lib-theme-skyai-finance

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

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

3.4 KiB Raw Blame History Unescape Escape

lib-theme-skyai-finance

Install

What's in the box

What's not

3.4 KiB

Raw Blame History