The frame around tiled charts

The problem

One chart became several. Right-click a chart and it splits in two; right-click again and the new one closes, its space going back to its neighbour. The panes tile the window the way a tiling window manager tiles the screen, and exactly one of them has focus: it is the one the keyboard, the menus and the symbol search act on, so it has to be obvious at a glance which one that is.

Two things need drawing, then. Something that says where one chart stops and the next starts, which is also the handle you drag to resize them. And something that says which pane is focused. Both have to be quiet, because the chart is the main character and a border around every pane would be furniture competing with the candles. Both have to come from the theme, so they look as much a part of Nord or Rose Pine as the window chrome does. And both have to survive the themes that make everything hard: the ones that are nearly black, the ones that are nearly white, the ones with a grey accent and the ones whose accent is the colour their candles already wear.

What is drawn

The idiom is the window manager's, because an Omarchy user already reads it without thinking: windows sit on a gap, and the focused one wears a thin border in the theme's accent.

The gutter between two panes is 5px of the window surface, the same colour the sidebar sits on, so the gap between charts is the window showing through, as gaps between windows show the desktop. A theme that put its surface on top of its chart (Lupine's are a pixel value apart) has the gutter lifted off the chart until it reads as a gap. The gutter is the drag handle; under the pointer it takes on half the ring's colour, enough to say it moves.

The focus ring is a 2px border inside the edge of the focused pane, between the chart and the gutter. It keeps the accent's hue, but its lightness is chosen rather than taken: walked away from the chart background until the ring has 3:1 contrast on every theme, where the accent as-is would be 1.8:1 on Rose Pine and 5:1 on Hackerman. It then walks on, only as far as it must, to be at least 0.06 ΔE from the axis, the grid, the border and the crosshair, and at least 0.08 from either candle colour, so that it can never be read as a line the chart drew. Solitude's accent at ring lightness is its axis line to the pixel; Lumon's is the blue its candles wear; the ring moves off both. Chroma is capped at 0.14, which is what keeps Lupine's and Catppuccin Latte's vivid accents from vibrating as a hairline.

Unfocused panes get nothing at all. A lone chart, in a window that has not been split, gets nothing either.

The grid, the axis and the crosshair

The chart's own furniture has the same problem as the frame, and used to have only half the answer. The grid was the theme's lighter_background, nudged off the chart only if it was the same pixel value; the axis was the theme's muted colour and the crosshair its accent, both exactly as they came. Those colours were chosen for a terminal's selection and comments, not for hairlines across a chart, and on a pale chart a terminal's selection grey is a lattice: White's grid was a mid grey at 1.8:1 on white, Flexoki Light's 1.24:1 on cream, and Lupine's, at 1.04:1, was not there at all. The test that guarded this enforced a floor — the grid must be a different pixel value from the chart and quieter than the text — and on a light theme the text is near-black on near-white, so "quieter than the text" let a lattice through.

Each of the three is now held to a band of WCAG contrast against the chart, the same band on every theme because the ratio already accounts for the ground. The grid is felt rather than read: 1.08–1.2:1, which is where the four hand-tuned built-in themes put theirs. The axis lines are louder, because they mark where the plot ends, and still a line rather than a bar: 1.35–2.2:1, where Ethereal's and Vantablack's greys taken as they were made an axis at nearly 5:1. The crosshair is a pointer, so its floor is WCAG's 3:1 for graphics that carry meaning, the same as the ring's, and its ceiling is wide, 10:1, which is where it stops being a pointer and becomes the text colour, as Kanagawa's accent literally is. The chart's border is the axis colour, so the rule above an indicator strip has the weight of the axis beside it.

A theme's own colour is kept to the byte whenever it is already inside its band; most are. One that is not moves in lightness only, keeping its hue, and only as far as it must: a loud colour walks toward the chart until it is just inside the ceiling, a quiet one is rebuilt from the chart's own lightness, walking away until it reaches the floor. The grid may also be no more vivid than the chart it sits on, by more than a whisper. Contrast is used rather than ΔE for the same reason the overlays use it — the question is whether a line can be seen on its ground, which is a question about light — and because OKLab has no toe at black, so it calls a near-black grid on a black chart a tenth of the way to white, which is not what the eye sees.

How to read the pictures

Each theme is drawn as a tiled layout at one CSS pixel per pixel: one tall pane and two stacked beside it, so both a vertical and a horizontal gutter appear, with the window's own controls — the watchlist toggle and the main menu — in the top-right corner, where they sit over the chart when the watchlist is closed; there is no header bar. The left pane has focus and shows the crosshair; the gutter between the two right-hand panes is shown as it looks under the pointer. Candles, the grid, the axes, the labels, the overlay and the volume strip are the theme's own, drawn the way the chart draws them, including the hairline the chart rules above every indicator strip, which is the line a gutter must not be confused with. The 2× button doubles everything, which is roughly what a HiDPI screen does.

Under each layout the same chart is drawn twice more, smaller and without the frame: with the grid, axis and crosshair as the derivation used to take them from the theme, and as it holds them now. The built-in themes are hand-tuned and have no before. The crosshair is drawn opaque here; the app draws it at about half strength, so on screen it is quieter than on this page by the same amount on every theme.

ΔE is the distance between two colours in OKLab, where black to white is 1.0 and about 0.02 is the least an eye can see. Contrast is the WCAG ratio against the chart background. Numbers below a guarantee, or outside a band, are marked like this.