CremaUIStudio/lib-theme-grape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lib-theme-grape: initial import (bold/identity-forward set, 2026-07)

Browse Source 
One of four divergent candidates for the bold consumer theme family
(committed saturated color at 30-60% surface coverage, strong display
type). Includes the post-diverge fixes: heading color:inherit so brand
slabs keep their foreground pairing, plus per-theme refinements.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-07 23:20:55 +10:00
commit d7565f448a
2 changed files with 493 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
README.md Normal file
View File

@@ -0,0 +1,62 @@
# lib-theme-grape
**Grape — violet night-lounge.** A bold, identity-forward Crema theme where the
committed color IS the surface: the entire world is a deep luminous
grape-violet field (hue 300) — Skyrise's violet ancestry taken to a full
drench, without glass or iridescence. There are no white cards; cards are
clearly-lighter violet panels lifted off the field, popovers a step above
cards, the sidebar a deeper violet stripe, and everything separates with
white-alpha hairlines — light, not darkness. Ink is near-white with a violet
tint.
One counterpoint does all the pointing: a hot coral-pink primary
(`oklch(0.7 0.19 20)`) carrying dark wine ink, spent on the action, the
selection, the focus ring, and the user's chat bubble. Destructive stays a
*deep crimson fill with a light label* — a different lightness class and
construction from the bright coral primary, so the two hue-20 neighbours never
read as the same swatch. Success is mint, warning amber, info cool cyan — all
bright swatches with dark ink, tuned to read on violet panels.
The theme is violet in **both** modes. `.dark` is simply *later that night*:
the field deepens (`0.38 → 0.26 L`), the panels keep the same visible step
above it, and the coral burns slightly brighter. The dark violet ladder keeps
muted above popover: bg `0.26` → card `0.32` → popover `0.34` → muted `0.36`.
Radius is a soft-lounge `1.125rem`. Motion is languid-confident
(160/320/480/640ms) with a real gentle spring on the emphasized ease. Shadows
are deep violet-black pools. Consumer type register: 1rem body at 1.6
line-height.
All contract contrast floors verified in both modes on both surfaces (field
and card) — including the risky one in an all-violet world,
`muted-foreground`, which lands ≥5:1 on field, card, and the muted wash in
both modes. `✓ PASS` from `validate-theme.mjs`.
## Fonts
Load in the **consuming app's** entry CSS (very top, before anything else —
themes never `@import` fonts themselves):
```css
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
```
| Role | Family | Notes |
|---|---|---|
| Headings | **Instrument Serif** | Single weight (400) — the serif itself is the emphasis; the theme pins headings to `font-weight: 400; letter-spacing: -0.01em` and never fakes bold. |
| Body / UI | **Instrument Sans** | 400 / 500 / 600 / 700. Warm modern grotesque; buttons sit at 500. |
| Code | **Geist Mono** | 400 / 500 / 600. Inline code renders as a white-alpha tint chip with foreground ink. |
## Usage
```css
/* app entry CSS */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
@import "../../lib-theme-grape/theme.css";
```
Validate:
```bash
node create-crema-app/scripts/validate-theme.mjs lib-theme-grape/theme.css
```