e1a33a3da7
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>
46 lines
2.1 KiB
Markdown
46 lines
2.1 KiB
Markdown
# 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** (600–800) — `--font-heading`: bold friendly
|
||
geometric; headings run 700–800, the chunk is part of the voice.
|
||
- **Figtree** (400–700) — `--font-sans`: tuned legible sans for UI and body.
|
||
- **JetBrains Mono** (400–600) — `--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.
|