lib-theme-siena: 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 8f6afab89e
2 changed files with 439 additions and 0 deletions

47
README.md Normal file
View File

@@ -0,0 +1,47 @@
# lib-theme-siena
**Siena** — drenched Mediterranean courtyard. Warmth carried by the surface itself:
the background is a real terracotta wall (not a tinted near-white), cards are
sun-bleached plaster panels resting on it, and the ink is deep warm olive-brown.
Primary is burnt sienna; one cool Mediterranean blue is spent on accent and info
so the heat has a counterpoint. Dark mode is the same courtyard at dusk — umber-brown
surfaces, terracotta turned to glow. Fraunces display voice over Albert Sans,
modest 0.75rem corners, low warm shadows: things rest on the wall, they don't float.
## Fonts
Consuming apps must load the theme's fonts at the very top of their entry CSS
(`app/app.css`), before any other statement:
```css
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");
```
- **Fraunces** (500/600/700, variable optical size) — `--font-heading` / `--heading-family`
- **Albert Sans** (400/500/600/700 + 400 italic) — `--font-sans` / `--body-family`
- **JetBrains Mono** (400/500) — `--font-mono`
Do not `@import` fonts inside `theme.css` — per the token contract, fonts load
from the consuming app's entry CSS only.
## Usage
Clone as a sibling lib and point the app's theme import at it:
```css
/* app/app.css */
@import "../../lib-theme-siena/theme.css";
```
## Contract
Passes the Crema token contract v1:
```bash
node create-crema-app/scripts/validate-theme.mjs lib-theme-siena/theme.css
```
All Tier-1 tokens defined in both `:root` and `.dark`; contrast floors verified
(foreground/background 10.0:1 light / 14.1:1 dark; every paired `-foreground`
≥ 5.3:1). Glass tokens are inert stubs; springs alias to standard easings
(calm-theme pattern); no `font-size` on root.