8f6afab89e
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>
48 lines
1.8 KiB
Markdown
48 lines
1.8 KiB
Markdown
# 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.
|