jules e1a33a3da7 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>
2026-07-07 22:35:56 +10:00

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:

@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

/* 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.

Description
Crema theme — sorbet (warm-consumer set, 2026-07)
Readme 35 KiB
Languages
CSS 100%