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>
This commit is contained in:
jules
2026-05-18 22:02:38 +10:00
commit 8ba09b5db3
4 changed files with 709 additions and 0 deletions

69
README.md Normal file
View File

@@ -0,0 +1,69 @@
# lib-theme-skyai-finance
Finance-focused premium AI glass theme. Forked from [`lib-theme-skyrise`](../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.060.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:
```css
@import "../../lib-theme-skyai-finance/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`.