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:
45
README.md
Normal file
45
README.md
Normal 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** (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.
|
||||
Reference in New Issue
Block a user