Style variables

Style variables

A widget’s style reads the theme through these variables, so it looks right in every theme and on e-ink without a line of its own for each.

Surfaces and text

--hd-canvasThe page behind the tiles: a colour or a gradient.
--hd-surfaceA tile’s colour.
--hd-surface-fillWhat a tile is painted with: the surface, or the theme’s gradient for it.
--hd-surface-raisedSomething on a tile that stands out from it, like a button.
--hd-overlayMenus, dialogs and popups over the page.
--hd-borderLines round tiles and between parts.
--hd-textText and big numbers.
--hd-text-mutedLabels and secondary text.
--hd-text-faintThe quietest text: hints, units, times.
--hd-trackThe empty part of a slider, bar or ring.
--hd-focusThe outline round what has keyboard focus.

Accent and light

--hd-accentThe theme’s accent: active controls, links, highlights.
--hd-accent-fillWhat accented parts are painted with: the accent, or a gradient.
--hd-on-accentText and icons on the accent.
--hd-litThe warm colour of a device that is on.
--hd-lit-softA soft version of the lit colour, for washes and glows.
--hd-lit-washThe glow that fills a tile whose device is on (a flat tint on e-ink).
--hd-coolThe cool counterpart: cooling, cold water, low prices on some themes.

States and charts

--hd-goodAll is well: locked, closed, cheap.
--hd-warnWorth a look: a low battery, a door open for a while.
--hd-dangerAct now: smoke, a leak, an alarm.
--hd-chart-1The first chart colour; charts and series use 1 to 6 in order.
--hd-chart-2The second chart colour.
--hd-chart-3The third chart colour.
--hd-chart-4The fourth chart colour.
--hd-chart-5The fifth chart colour.
--hd-chart-6The sixth chart colour.
--hd-chart-fillHow strongly an area under a chart line is filled, 0 to 1 (0 on e-ink).
--hd-price-cheapA cheap hour on price bars and in the energy widgets.
--hd-price-normalAn ordinary hour.
--hd-price-highAn expensive hour.
--hd-price-negativeAn hour you get paid to use energy.

Numbers and type

--hd-font-displayThe font of big numbers and headings.
--hd-font-uiThe font of labels and running text.
--hd-font-monoThe monospaced font of small labels.
--hd-number-weightHow bold big numbers are.
--hd-number-stretchHow wide big numbers are, as a font stretch.
--hd-number-fillWhat big numbers are painted with: the text colour, or a gradient.
--hd-number-clip1 when big numbers are a gradient: paint them with background-clip: text.
--hd-label-transformHow labels are cased: uppercase, or as written.
--hd-label-trackingThe letter spacing of labels.

Shape and depth

--hd-radius-smSmall corners: chips, small buttons.
--hd-radius-mdMedium corners: buttons, fields.
--hd-radius-lgLarge corners: tiles.
--hd-border-widthHow thick borders are.
--hd-padThe room inside a tile.
--hd-gapThe room between tiles.
--hd-collapse1 when tiles share their borders, as on e-ink.
--hd-shadowA tile’s shadow.
--hd-shadow-litThe shadow and glow of a tile whose device is on.
--hd-blurThe frosted-glass filter behind tiles, or none.
--hd-textureA grain over tiles, or none.

Motion and e-ink

--hd-motion-levelfull, reduced or none: how much is allowed to move.
--hd-motion-fastA quick change, like a press. 0ms when nothing may move.
--hd-motion-baseAn ordinary change, like a value sliding.
--hd-motion-slowA slow change, like a theme switching.
--hd-ease-outThe easing of most movement.
--hd-ease-springA springy easing, for things that bounce into place.
--hd-flat1 on e-ink: no colours, glows or gradients, only black and white.
--hd-appearancelight, dark or paper, for what colours alone can’t decide.

The tile’s layout

Set by the tile’s alignment in the Style panel; read them to place your content.

--hd-item-alignWhere the content sits up and down (manifest align.y), e.g. justify-content: var(--hd-item-align, flex-end) in a column.
--hd-item-justifyWhere the content sits sideways (manifest align.x), e.g. justify-content: var(--hd-item-justify, flex-start) in a row. stretch when the items share the width: then read the two below too.
--hd-item-repeatSet when the items move sideways or share the width: grid columns that aren’t used go, e.g. repeat(var(--hd-item-repeat, auto-fill), minmax(120px, var(--hd-item-track, 1fr))).
--hd-item-trackSet with --hd-item-repeat: the columns fold to their content to move (max-content), or split the width when the items share it (1fr).
--hd-item-growSet while the items share the width: items in a row grow, e.g. flex-grow: var(--hd-item-grow, 0).

Settings

Every simple setting of the widget reaches its style too, as --setting- and its name in kebab case: a colour setting accentColor isvar(--setting-accent-color). A size setting adds -scale (0.85, 1 or 1.25).