screens.theme — the visual language every screen in The Hernsew Lingster
shares: the palette as CSS strings, the type scale, and the style helpers
that make a panel look like a made object rather than a grey rectangle.
The colours are DERIVED from `game.rules`' PALETTE, so retuning the fen's
palette moves the UI with it and the screens never drift from the world.
The frame is 1080 x 1440 — taller than it is wide. Every helper here is
built for a narrow column: things stack, meters are vertical, and nothing
assumes horizontal room.
hex(c: { number }) → string
| arg | type | description |
|---|
| c | { number } | |
b(v: number) → number
| arg | type | description |
|---|
| v | number | |
rgba(c: { number }, a: number) → string
A palette colour with an alpha, as a CSS rgba() string.
| arg | type | description |
|---|
| c | { number } | |
| a | number | |
b(v: number) → number
| arg | type | description |
|---|
| v | number | |
mix(a: { number }, b: { number }, t: number) → void
Mix two palette colours, t = 0 is a, t = 1 is b.
| arg | type | description |
|---|
| a | { number } | |
| b | { number } | |
| t | number | |
text(text: string, style: { [string]: any }?) → void
A label node. `text`, then the style overrides.
| arg | type | description |
|---|
| text | string | |
| style | { [string]: any }? | |
para(text: string, style: { [string]: any }?) → void
A wrapping paragraph. The width must be on the CONTAINER, never the label.
| arg | type | description |
|---|
| text | string | |
| style | { [string]: any }? | |
eyebrow(text: string, style: { [string]: any }?) → void
A small all-caps eyebrow — the label above a value.
| arg | type | description |
|---|
| text | string | |
| style | { [string]: any }? | |
svg(markup: string, style: { [string]: any }?) → void
An inline SVG node.
| arg | type | description |
|---|
| markup | string | |
| style | { [string]: any }? | |
box(style: { [string]: any }, children: { any }?) → void
An empty box — a rule, a spacer, a swatch. Everything visual is in `style`.
| arg | type | description |
|---|
| style | { [string]: any } | |
| children | { any }? | |
rule(opts: { [string]: any }?) → void
A horizontal hairline with a lit lower edge, the way an incised line reads.
| arg | type | description |
|---|
| opts | { [string]: any }? | |
panel(extra: { [string]: any }?) → void
The panel treatment: a visible step in lightness, a top sheen, a hairline
edge, and only then a soft drop shadow. Merge `extra` over it.
| arg | type | description |
|---|
| extra | { [string]: any }? | |
vellumSurface(extra: { [string]: any }?) → void
Vellum: the phrasebook's paper. Warm, faintly speckled, and darker at the
edges the way a folded sheet is.
| arg | type | description |
|---|
| extra | { [string]: any }? | |
button(text: string, callbackId: string, opts: { [string]: any }?) → void
A button is a full-width plate. The frame is narrow, so buttons STACK down
the screen; there is never a row of them.
A stacked, full-width button. `tone` is "primary" (lantern) or "quiet".
| arg | type | description |
|---|
| text | string | |
| callbackId | string | |
| opts | { [string]: any }? | |
enter(from: { [string]: any }, dur: number?, delay: number?) → void
A one-shot entrance. Stagger `delay` across siblings to cascade them in.
| arg | type | description |
|---|
| from | { [string]: any } | |
| dur | number? | |
| delay | number? | |
rise(delay: number?, dist: number?) → void
The standard rise: up from below, fading in.
| arg | type | description |
|---|
| delay | number? | |
| dist | number? | |
loop(frames: { [string]: any }, dur: number, opts: { [string]: any }?) → void
A slow infinite loop, for a breathing glow or a drifting mark.
| arg | type | description |
|---|
| frames | { [string]: any } | |
| dur | number | |
| opts | { [string]: any }? | |
lanternPulse(delay: number?) → void
The lantern's breath — what marks the one live thing on a still screen.
| arg | type | description |
|---|
| delay | number? | |