Plot
Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now.
Kit part · Charts
Glass
Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- Element
- <div>
- Needs
- kit.css
- Rules
- display.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
API ····· 182 msCDN ····· 41 msDB ····· 12 ms
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Plot | Readout | Status lines |
|---|---|---|---|
| Glass | Load1.36 kW | WEST-1 OKEAST-2 OKSOUTH WAIT |
Graphite
| Part | Plot | Readout | Status lines |
|---|---|---|---|
| Glass | Load1.36 kW | WEST-1 OKEAST-2 OKSOUTH WAIT |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-glass | class | — | Near-black glass, 16px inside, 7px corners, a glare and a faint scanline. |
| --tui-ink · --tui-ink-2 · --tui-ink-3 · --tui-rule | CSS property | redefined inside | Set to VFD light at 100%, 70%, 42% and 10%, so any part printed inside is lit. |
| .tui-plot inside | element | — | Traces glow; the area fill takes the VFD tint. |
| .tui-label inside | class | — | Printed in the dimmer light. |
Markup
<div class="tui-glass">
<span class="tui-label">Solar · today</span>
<svg class="tui-plot" viewBox="0 0 360 150" role="img"
aria-label="Solar output, midnight to now. Peak 5.4 kW at 13:00.">…</svg>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- Text on the glass is 12:1 or better; the dimmest tint (ink-3) is for scales only.
- A plot inside needs
role="img"and anaria-labelthat states the values that matter.
How it’s built
A div with three backgrounds (a glare, a 3px scanline and --tui-vfd-bg) and a deep inset shadow. It redefines the ink tokens inside itself, so a label, a plot or a table dropped in prints in light without any extra class. It stays dark in both finishes, the way a display does.
Rules
display.rules.mdIn the brain
Glass holds plots and live lines; its text is Geist Mono.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.