Glass
Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
Kit part · Charts
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.
- Element
- <svg>
- Needs
- kit.css
- Rules
- plot.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
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 | Whole day | Up to now |
|---|---|---|
| Glass |
Graphite
| Part | Whole day | Up to now |
|---|---|---|
| Glass |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-plot | class | on <svg> | Block, full width, height from the viewBox. |
| .grid | class | <line> | Gridlines in --tui-rule. |
| .axis | class | <text> | Scale figures, 10px, in --tui-ink-3. |
| .trace | class | <path> | The main line: 1.75px, round joins, in --tui-ink (glows on glass). |
| .trace--2 | class | <path> | The second line, dashed 3 3, in --tui-ink-3. |
| .fill | class | <path> | The area under the main trace, at 7–8%. |
| .now | class | <line> | The present, in --tui-red. |
| role="img" · aria-label | attribute | required | Say the peaks: “Solar peaked at 5.4 kW at 13:00.” |
Markup
<svg class="tui-plot" viewBox="0 0 640 240" role="img"
aria-label="Solar and house use today. Solar peaked at 5.4 kW at 13:00.">
<line class="grid" x1="34" x2="632" y1="8" y2="8"/>
<text class="axis" x="26" y="12" text-anchor="end">6</text>
<path class="fill" d="…"/>
<path class="trace trace--2" d="…"/> <!-- house, dashed -->
<path class="trace" d="…"/> <!-- solar -->
<line class="now" x1="420" x2="420" y1="8" y2="216"/>
</svg>Needs kit.css only, no script. How to install the kit.
Accessibility
- Give the SVG
role="img"and anaria-labelthat carries the values a sighted reader would take from it. - The second trace differs by dash as well as tone.
How it’s built
Plain SVG with five classes; the kit colours them through tokens, so the same plot prints in ink on a panel and in light inside glass. You draw the paths: the kit has no charting engine and does not pretend to. The dashboard template has a twenty-line example.
Rules
plot.rules.mdIn the brain
No more than two lines on one plot (one solid, one dashed) and the present marked in red.
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.