game.screens.theme — the design system every authored screen of FIRST
LIGHT: LUCINA is drawn from. Owned by the `screens` slice.
It builds widget nodes and returns them. It registers no screen, reads no
phase and spawns nothing. Everything visual that more than one screen needs
lives here: the three faces, the palette, the measure, the ornaments, the
plates the cards are printed on, the one control shape, the meters, and the
drawn marks.
EVERY size is a fraction of the LIVE screen — `u(f)` of the short axis for
anything an eye judges, `wf`/`hf` for anything that spans one. No pixel
constant is written in this slice apart from the physical floors (a
reader's eye and a thumb are physical sizes and do not shrink with the
screen), so the same tree composes at 1080x1440, at 1920x1080 and on a
phone held either way.
u(f: number) → number
`f` of the SHORT axis — the measure for anything an eye judges.
| arg | type | description |
|---|
| f | number | |
wf(f: number) → number
| arg | type | description |
|---|
| f | number | |
hf(f: number) → number
| arg | type | description |
|---|
| f | number | |
cardWidth( ) → string | number
How wide a reading column should be. A tall frame gives a card nearly the
whole width; a wide one holds it to a column so a line of type never runs
the width of a television.
typeSize(scale: any) → number
| arg | type | description |
|---|
| scale | any | |
merge(base: any, extra: any) → any
| arg | type | description |
|---|
| base | any | |
| extra | any | |
text(str: string, scale: any, style: any?) → any
Text atoms
| arg | type | description |
|---|
| str | string | |
| scale | any | |
| style | any? | |
num(str: string, scale: any, style: any?) → any
A number, in the instrument face.
| arg | type | description |
|---|
| str | string | |
| scale | any | |
| style | any? | |
display(str: string, scale: any, style: any?) → any
A title line, in the display face, set in caps and letter-spaced.
| arg | type | description |
|---|
| str | string | |
| scale | any | |
| style | any? | |
para(str: string, scale: any, style: any?) → any
A paragraph. A wrapping label carrying its own width collapses to one glyph
per line, and a label inside a centred column has no width to wrap against
at all — so a paragraph always ships inside a full-width box of its own and
centres its text with `textAlign` rather than with the parent.
| arg | type | description |
|---|
| str | string | |
| scale | any | |
| style | any? | |
eyebrow(str: string, color: string?, style: any?) → any
The small letter-spaced cap line that stands over a heading.
| arg | type | description |
|---|
| str | string | |
| color | string? | |
| style | any? | |
spacer(h: number) → any
| arg | type | description |
|---|
| h | number | |
entrance(delay: number, fromY: number) → any
Motion
| arg | type | description |
|---|
| delay | number | |
| fromY | number | |
breathe(from: number, to: number, seconds: number) → any
| arg | type | description |
|---|
| from | number | |
| to | number | |
| seconds | number | |
svg(str: string, w: number, h: number, style: any?) → any
Ornament
| arg | type | description |
|---|
| str | string | |
| w | number | |
| h | number | |
| style | any? | |
diamond(size: number, color: string?) → any
| arg | type | description |
|---|
| size | number | |
| color | string? | |
rule(opts: any?) → any
A hairline with a diamond set in it: the rule under a heading.
| arg | type | description |
|---|
| opts | any? | |
panel(children: any, style: any?) → any
Plates. Depth on a near-black UI comes from a step in lightness plus a lit
top edge — a black drop shadow over black is invisible.
| arg | type | description |
|---|
| children | any | |
| style | any? | |
page(children: any, style: any?) → any
The logbook page: the how-to card is the Keeper's own written instruction,
so it is paper with ink on it rather than another dark panel.
| arg | type | description |
|---|
| children | any | |
| style | any? | |
scrim(children: any, style: any?) → any
The scrim a card sits on. Translucent, so the lamp room is still behind it.
| arg | type | description |
|---|
| children | any | |
| style | any? | |
item(opts: any) → any
Controls. Every one is a real tap target: the smallest is u(0.086) or 52
logical points on its short side, whichever is larger.
The one control shape every card uses. `focused` draws the brass ring a
controller needs; hover and press are styled for a pointer; the whole box
carries the onClick, so a thumb hits the plate rather than the word.
| arg | type | description |
|---|
| opts | any | |
capBox(str: string, kind: string?, onPaper: boolean) → any
A keycap, a pad button and a touch target, drawn as the thing they are.
| arg | type | description |
|---|
| str | string | |
| kind | string? | |
| onPaper | boolean | |
cap(str: string, kind: string?) → any
| arg | type | description |
|---|
| str | string | |
| kind | string? | |
capInk(str: string, kind: string?) → any
| arg | type | description |
|---|
| str | string | |
| kind | string? | |
noteChip(str: string, onPaper: boolean?) → any
A small italic note where a control has no key of its own.
| arg | type | description |
|---|
| str | string | |
| onPaper | boolean? | |
dawnRail(value: number, width: number, height: number, style: any?) → any
Meters. Two vertical rails carry the night: how far dawn has come, and how
much of the apprentice's dose is spent.
The dawn rail: the sky itself, rising. Four keys — deep night, first
blush, bone, first light — so the rail and the window agree.
| arg | type | description |
|---|
| value | number | |
| width | number | |
| height | number | |
| style | any? | |
doseRail(value: number, width: number, height: number, style: any?) → any
The dose rail: betafite green until `Core.DOSE.warnAt`, rust past it.
| arg | type | description |
|---|
| value | number | |
| width | number | |
| height | number | |
| style | any? | |
plateFigure(cells: any, width: number, style: any?) → any
The plate, drawn small. The result card's whole argument is this picture:
what the target asked for, and what the glass actually holds.
`cells` is `Core.state.cells`; a cell reads right when a target-dark cell
reached `darkAt` and a target-clear one stayed under `clearMax`.
| arg | type | description |
|---|
| cells | any | |
| width | number | |
| style | any? | |
lensMark(size: number, lit: number, style: any?) → any
The marks, sized from the screen
| arg | type | description |
|---|
| size | number | |
| lit | number | |
| style | any? | |
crystalMark(height: number, style: any?) → any
| arg | type | description |
|---|
| height | number | |
| style | any? | |
frisketMark(height: number, style: any?) → any
| arg | type | description |
|---|
| height | number | |
| style | any? | |
pauseMark(size: number, color: string?) → any
| arg | type | description |
|---|
| size | number | |
| color | string? | |
dawnMark(width: number, dawn: number, style: any?) → any
| arg | type | description |
|---|
| width | number | |
| dawn | number | |
| style | any? | |
tubeMark(size: number, color: string?) → any
| arg | type | description |
|---|
| size | number | |
| color | string? | |
diagramMark(width: number, onPaper: boolean?, style: any?) → any
| arg | type | description |
|---|
| width | number | |
| onPaper | boolean? | |
| style | any? | |