Shared paper-and-ink design tokens for lab UIs, in light and dark. More...
| Import Statement: | import Clayground.Lab |
A warm, retro-print theme: paper surfaces, charcoal ink lines, a muted color set where every hue encodes meaning, monospace type for structure and a handwriting face for hints. Kernel widgets (ParamPanel, Plot2D) consume it; labs pick their part colors from the named tokens so all labs read as one family.
Every role exists in both a light and a dark palette, and mode swaps between them at runtime - the roles are ordinary bindings, so a lab that reads LabTheme.panel follows the switch without doing anything. Drop a ThemeSwitch into a corner to offer it.
The two palettes are counterparts rather than inversions, and the rules that make them so are written down (and tested) in palette.js. The one a lab has to know about is inkOn(): anything drawn on a fill must take its ink from that fill, because a pinned light ink stops being readable the moment the palette lifts the fill under it.
Example usage:
import Clayground.Lab
Rectangle {
color: LabTheme.panel
border.color: LabTheme.panelEdge
radius: LabTheme.radius
Text { text: "hello"; color: LabTheme.ink; font.family: LabTheme.monoFont }
}
Rectangle { // a chip, whose fill changes with state
color: active ? LabTheme.secondary : LabTheme.panel
Text { text: "on"; color: LabTheme.inkOn(parent.color) }
}
See also ParamPanel, Plot2D, and ThemeSwitch.
ambient3d : color |
Ambient fill for a scene lit by a single key light.
dark : bool |
True while the dark palette is active.
fontAction : int |
Flow controls - things clicked by name.
fontBody : int |
Chips, readouts, buttons.
fontLabel : int |
Hand-font labels, notes, help rows.
fontLead : int |
The hint bar and a task's hint.
fontMicro : int |
Axis ticks, budget legend.
fontSmall : int |
Mono structure: panel titles, row labels, key caps.
fontTitle : int |
Narration, sized for the back row.
mode : string |
The active palette: "light" (default) or "dark".
modes : var |
The palette names on offer.
scaleLabel : string |
The scale as a percentage, e.g. "130%".
shadowFactor : int |
How hard a cast shadow lands, as DirectionalLight expects it.
A shadow removes light, and a low-key ground has much less to give up before it turns to mud - so this drops in the dark rather than staying put.
spaceL : int |
Panel padding, canvas insets.
spaceM : int |
Between chips in a row.
spaceS : int |
Between stacked rows.
spaceXl : int |
Panel-to-edge margin.
spaceXs : int |
Hairline gap.
spaceXxl : int |
Panel-to-panel margin.
uiScale : real |
Multiplies every type size, spacing step and panel measurement.
The knob that was missing: shown on a large external screen a lab's HUD was unreadably small and there was nothing to turn, because every size in the chrome was a bare pixel literal. 1.0 reproduces those literals exactly; the range is clamped to 0.75 - 2.0 and ScaleSwitch (or Ctrl+Plus / Ctrl+Minus / Ctrl+0 through LabKeys) steps it.
real contrast(color a, color b) |
The WCAG contrast ratio between a and b, 1 to 21.
color inkOn(color fill) |
Readable text color for anything drawn on top of fill.
Use this for every chip, badge and pill instead of naming a light or dark ink directly. The choice follows the fill, not the theme, so a chip keeps readable text whichever palette lifted or sank it.
real px(real v) |
A pixel measurement, scaled - write LabTheme.px(280) where a widget used to write 280.
For the one-off geometry a named token would only obscure: a panel's fixed width, a dial's diameter, a compass. Named roles below cover type and spacing, which is where the repetition actually is.
void resetScale() |
Back to 1.0.
color step(color c, real amount) |
Moves c away from the ground by amount, whichever way the palette has room.
The replacement for Qt.darker() on anything that has to stay visible in both themes: a grid line drawn by taking light away from the sheet has nothing left to take on a dark ground, so it is drawn by adding light instead. Say how far, not which way. An amount below 1 moves the other way, back toward the ground.
void stepScale(int dir) |
Moves uiScale one rung up (dir > 0) or down the ladder.
void toggle() |
Switches to the other palette.