lib-theme-sorbet: initial import (warm-consumer set, 2026-07)

Includes the 2026-07-07 UX sweep: neutral inline-code chips (accent
reserved for actions/links/focus), dark-mode card/popover lightness
lift for visible surface separation, 44px touch-target floor on
coarse pointers, card-title pinned to a named ramp role.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-07 22:35:56 +10:00
commit e1a33a3da7
2 changed files with 507 additions and 0 deletions

45
README.md Normal file
View File

@@ -0,0 +1,45 @@
# lib-theme-sorbet
Sherbet pop, playful-first. Sorbet is the toybox theme of the Crema family:
clean cool near-white paper with berry-charcoal ink, a peach-coral hero spent
surgically, and a full sherbet set where every hue owns a semantic role —
butter = warning, mint = success, sky = info, raspberry = destructive. Corners
are chunky (1.375rem radius, buttons verging on pill), shadows are crisp
small-offset stamps tinted toward berry, and motion is the springy one of the
family — genuine `linear()` spring curves with real overshoot, not aliases.
Dark mode is "sorbet at midnight": deep plum-charcoal with a berry undertone,
the sherbets luminous against it. Bright fills always carry dark berry ink
(the ivrea pattern), so every pairing clears the 4.5:1 contract floor.
## Fonts
The consuming app must load the fonts at the very top of its entry CSS
(`app/app.css`), per the Crema font convention — the theme itself never
imports fonts:
```css
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");
```
- **Bricolage Grotesque** (600800) — `--font-heading`: bold friendly
geometric; headings run 700800, the chunk is part of the voice.
- **Figtree** (400700) — `--font-sans`: tuned legible sans for UI and body.
- **JetBrains Mono** (400600) — `--font-mono`.
## Contract
Passes `create-crema-app/scripts/validate-theme.mjs` (token contract v1):
all Tier-1 tokens in `:root` and `.dark`, every foreground/background pair at
or above the WCAG AA floors, no font `@import`, no root `font-size`, inert
glass stubs (`0px / 100% / 1 / 1`).
## Usage
```css
/* app/app.css — fonts first, then under CREMA:SOURCES */
@import "../../lib-theme-sorbet/theme.css";
```
Chart tokens are the five sherbets straight from the tub — coral 38°,
butter 98°, mint 160°, sky 230°, berry 330° — hues ≥60° apart with staggered
adjacent lightness so series stay legible for color-blind readers.