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