ngwr 15.0.1 → 15.2.0

package/charts/funnel-chart/styles/_index.scss

@@ -0,0 +1,237 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. With `dataTable`, the
+// figures render as a `<wr-chart-table>` beside the stages, which its own sheet clips out
+// of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+.wr-funnel-chart {
+  --wr-funnel-chart-font-family: var(--wr-font-family-base);
+  --wr-funnel-chart-color: var(--wr-color-on-surface);
+  // Three columns: the labels at inline start, the bars centred in the track, the figures
+  // at inline end. The label column is at most this wide and gives way first, ellipsised;
+  // the track never takes less than its share, so a phone keeps a funnel to look at.
+  --wr-funnel-chart-column-gap: var(--wr-space-md);
+  --wr-funnel-chart-label-max-width: 12rem;
+  --wr-funnel-chart-track-min-width: 40%;
+  --wr-funnel-chart-label-font-size: var(--wr-text-sm);
+  --wr-funnel-chart-label-line-height: var(--wr-text-sm-leading);
+  --wr-funnel-chart-label-color: var(--wr-color-on-surface);
+  --wr-funnel-chart-value-font-size: var(--wr-text-sm);
+  --wr-funnel-chart-value-line-height: var(--wr-text-sm-leading);
+  --wr-funnel-chart-value-font-weight: var(--wr-font-weight-medium);
+  --wr-funnel-chart-value-color: var(--wr-color-on-surface);
+  // The conversions: under each value, and between the bars.
+  --wr-funnel-chart-conversion-font-size: var(--wr-text-xs);
+  --wr-funnel-chart-conversion-line-height: var(--wr-text-xs-leading);
+  --wr-funnel-chart-conversion-color: var(--wr-color-on-surface-muted);
+  // A bar is as tall as a value with its conversion under it, so every bar is the same
+  // height whether its stage prints one line beside it or two; and as tall as its row if
+  // that is taller, so the band above and below always meets its edge.
+  --wr-funnel-chart-bar-height: calc(
+    var(--wr-funnel-chart-value-line-height) + var(--wr-funnel-chart-conversion-line-height)
+  );
+  --wr-funnel-chart-bar-radius: var(--wr-border-radius-sm);
+  // The gap between two bars, which the band fills and the share of the stage above sits on.
+  --wr-funnel-chart-gap-height: 1.5rem;
+  // The band is a faint wash of the two stages' colours: it carries no value of its own,
+  // only the narrowing the two bars' widths already state.
+  --wr-funnel-chart-band-opacity: 0.2;
+  // The share between the bars, on a wash of the surface: the band runs under it.
+  --wr-funnel-chart-gap-label-bg: color-mix(in srgb, var(--wr-color-surface) 85%, transparent);
+  --wr-funnel-chart-gap-label-padding-x: var(--wr-space-xs);
+  --wr-funnel-chart-gap-label-radius: var(--wr-border-radius-sm);
+  // The row the open tooltip is about, washed from edge to edge with the label and the
+  // figures inset from the wash.
+  --wr-funnel-chart-active-bg: var(--wr-color-hover);
+  --wr-funnel-chart-stage-radius: var(--wr-border-radius-sm);
+  --wr-funnel-chart-stage-padding-x: var(--wr-space-xs);
+
+  display: block;
+  // The containing block of the out-of-flow `dataTable` copy, as on every chart that
+  // renders it: a static host lets that 1px box resolve against an ancestor outside the
+  // chart and keep its place in an unpositioned scroller's content. No z-index, so no
+  // stacking context.
+  position: relative;
+  font-family: var(--wr-funnel-chart-font-family);
+  color: var(--wr-funnel-chart-color);
+
+  // One grid for every row, so a label, a bar and a figure line up down the funnel
+  // whatever their own widths: each stage and each gap between two stages is a subgrid
+  // of it.
+  //
+  // The figures column is `max-content`, so the labels give way first and a figure is
+  // never cut. `minmax(0, max-content)` was measured and refused: grid shares the room two
+  // intrinsic columns compete for out equally, so at 320px, with short labels, it cut a
+  // figure on every stage of a 1,234,567,890 funnel and every value of a $12,345,678.90
+  // one. The cost is a figure wider than the room left beside the track's floor, such as
+  // an 18-digit value on a phone, which overflows instead.
+  &__plot {
+    display: grid;
+    grid-template-columns:
+      fit-content(var(--wr-funnel-chart-label-max-width))
+      minmax(var(--wr-funnel-chart-track-min-width), 1fr)
+      max-content;
+    column-gap: var(--wr-funnel-chart-column-gap);
+  }
+
+  &__stage,
+  &__gap {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  // The inline padding sits outside the first and last tracks, which the subgrid adds to
+  // their size; the track in the middle, where the bars and the bands are, does not move.
+  &__stage {
+    align-items: center;
+    min-height: var(--wr-funnel-chart-bar-height);
+    padding-inline: var(--wr-funnel-chart-stage-padding-x);
+    border-radius: var(--wr-funnel-chart-stage-radius);
+  }
+
+  &__stage--active {
+    background: var(--wr-funnel-chart-active-bg);
+  }
+
+  // `min-width: 0` and the clip are what let the column give way: an item that hides its
+  // overflow has no automatic minimum, so the label is ellipsised rather than pushing the
+  // track narrower than its share. Every stage's name, the tooltip and the data table carry
+  // the whole label. It takes its direction from its own text (`dir="auto"`), so a Latin
+  // label on an RTL page is cut at its end, not its start; it keeps its grid cell either
+  // way, and lines up on its own text's start, as the treemap's names do.
+  &__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--wr-funnel-chart-label-font-size);
+    line-height: var(--wr-funnel-chart-label-line-height);
+    color: var(--wr-funnel-chart-label-color);
+  }
+
+  // The bar's column: the bar is centred in it, and as tall as the row.
+  &__track {
+    display: flex;
+    justify-content: center;
+    align-self: stretch;
+    min-width: 0;
+  }
+
+  // The component writes the width, a percentage of the track: the largest stage, or
+  // `max`, is the full track. Zero and below are written as `0%`, and the floor keeps a
+  // hairline there, so a stage of zero still shows where it is and has an anchor for the
+  // tooltip; a missing stage renders no bar at all.
+  &__bar {
+    min-width: 1px;
+    border-radius: var(--wr-funnel-chart-bar-radius);
+    transition: width var(--wr-duration-slow) var(--wr-ease-out);
+    // The bar is an inline `background`, which forced colors resets to `Canvas`: every bar
+    // would vanish into the page and leave its figures floating. The SVG charts keep their
+    // fills there, so the HTML marks do too.
+    forced-color-adjust: none;
+  }
+
+  // Each figure shrunk to its text against the bar's side of the column, so its own
+  // direction can follow its text (`plaintext`) and it still sits by the bar: a negative
+  // value, printed as given, is a `-` in front of digits, neither of which has a direction,
+  // and under RTL the sign would land on the far side — `20-` — while "30% of first" would
+  // read "of first 30%". Stretched, a plaintext figure would align to its own text's
+  // start, at the column's far edge under RTL.
+  &__figures {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  &__value,
+  &__overall {
+    unicode-bidi: plaintext;
+  }
+
+  &__value {
+    font-size: var(--wr-funnel-chart-value-font-size);
+    line-height: var(--wr-funnel-chart-value-line-height);
+    font-weight: var(--wr-funnel-chart-value-font-weight);
+    color: var(--wr-funnel-chart-value-color);
+  }
+
+  &__overall {
+    font-size: var(--wr-funnel-chart-conversion-font-size);
+    line-height: var(--wr-funnel-chart-conversion-line-height);
+    color: var(--wr-funnel-chart-conversion-color);
+  }
+
+  &__gap {
+    height: var(--wr-funnel-chart-gap-height);
+  }
+
+  // The band and the share sit in the same cell: the track's column, the gap's height.
+  &__band,
+  &__gap-label {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  // A polygon on the track's width, written by the component, from the upper bar's width
+  // at its top edge to the lower bar's at its bottom — both centred, so the shape is the
+  // same in either direction. The two stages' paints arrive as the custom properties
+  // below, so a stage with a colour of its own carries it into its band.
+  &__band {
+    align-self: stretch;
+    background: linear-gradient(
+      var(--wr-funnel-chart-band-from, currentColor),
+      var(--wr-funnel-chart-band-to, currentColor)
+    );
+    opacity: var(--wr-funnel-chart-band-opacity);
+    transition: clip-path var(--wr-duration-slow) var(--wr-ease-out);
+    // Painted in the stages' colours, which forced colors would reset with the bars'.
+    forced-color-adjust: none;
+  }
+
+  // Positioned, so it paints above the band: the band's `opacity` makes it a stacking
+  // context, which paints over in-flow content beside it whatever the order in the DOM,
+  // and would lay the wash over the text.
+  //
+  // Bounded by the track and ellipsised, as a label is: at its 40% floor the track is
+  // about 115px on a 320px phone, and a long share — a custom `percentFormat`, or two
+  // significant digits of a tiny ratio — hung out of it over the label column. The
+  // tooltip, the stage's name and the data table carry the whole share.
+  &__gap-label {
+    position: relative;
+    place-self: center;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 var(--wr-funnel-chart-gap-label-padding-x);
+    border-radius: var(--wr-funnel-chart-gap-label-radius);
+    background: var(--wr-funnel-chart-gap-label-bg);
+    font-size: var(--wr-funnel-chart-conversion-font-size);
+    line-height: var(--wr-funnel-chart-conversion-line-height);
+    color: var(--wr-funnel-chart-conversion-color);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+// A bar that grows or shrinks to its new value is motion nothing asked for twice: the new
+// width is what matters, and it is drawn at once.
+@media (prefers-reduced-motion: reduce) {
+  .wr-funnel-chart__bar,
+  .wr-funnel-chart__band {
+    transition: none;
+  }
+}
+
+// Forced colors paints the active row's wash as the page, so the row the tooltip is about
+// needs an edge instead.
+@media (forced-colors: active) {
+  .wr-funnel-chart__stage--active {
+    outline: 1px solid Highlight;
+  }
+}

package/charts/gauge/styles/_index.scss

@@ -3,16 +3,18 @@
 
 .wr-gauge {
   --wr-gauge-font-family: var(--wr-font-family-base);
+  --wr-gauge-color: var(--wr-color-on-surface);
   --wr-gauge-text-padding-bottom: var(--wr-space-sm);
   --wr-gauge-text-font-size: var(--wr-text-xl);
   --wr-gauge-text-font-weight: var(--wr-font-weight-semibold);
   --wr-gauge-suffix-margin-inline-start: var(--wr-space-xs);
   --wr-gauge-suffix-font-size: var(--wr-text-sm);
   --wr-gauge-suffix-font-weight: var(--wr-font-weight-medium);
+  --wr-gauge-suffix-color: var(--wr-color-on-surface-muted);
 
   display: inline-block;
   font-family: var(--wr-gauge-font-family);
-  color: var(--wr-color-on-surface);
+  color: var(--wr-gauge-color);
 
   &__surface {
     position: relative;
@@ -40,7 +42,7 @@
   &__suffix {
     margin-inline-start: var(--wr-gauge-suffix-margin-inline-start);
     font-size: var(--wr-gauge-suffix-font-size);
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-gauge-suffix-color);
     font-weight: var(--wr-gauge-suffix-font-weight);
   }
 }

package/charts/heatmap-chart/styles/_index.scss

@@ -0,0 +1,329 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. With `dataTable`, the
+// figures render as a `<wr-chart-table>` beside the matrix, which its own sheet clips out
+// of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+// A level's paint: the scale's colour (`--wr-heatmap-chart-scale-color`, which the component
+// writes from its `color` input) mixed toward the surface, by the level's place on the scale
+// (`--wr-heatmap-chart-level`, 0 to 1, which the component writes on every cell and every
+// legend swatch). The lowest level keeps `--wr-heatmap-chart-min-share` of the colour, so it
+// is a faint tint rather than the surface itself — the surface is what an EMPTY cell shows
+// — and the highest is the colour.
+//
+// Mixed in OKLab rather than sRGB, because OKLab's lightness is the one that moves evenly:
+// the levels are told apart by lightness alone, so evenly spaced shares have to look evenly
+// spaced, in the light scheme and the dark one.
+$fill: color-mix(
+  in oklab,
+  var(--wr-heatmap-chart-scale-color, var(--wr-color-primary))
+    calc(
+      var(--wr-heatmap-chart-min-share) + (100% - var(--wr-heatmap-chart-min-share)) * var(--wr-heatmap-chart-level, 1)
+    ),
+  var(--wr-heatmap-chart-surface)
+);
+
+// The share of white a printed value takes, 1 or 0, from its cell's luminance `y` (see
+// `__value`). A string, so Sass passes the relative-colour channel name through untouched.
+$white: 'clamp(0, (0.17913 - y) * infinity, 1)';
+
+.wr-heatmap-chart {
+  --wr-heatmap-chart-font-family: var(--wr-font-family-base);
+  --wr-heatmap-chart-color: var(--wr-color-on-surface);
+  // What every level is mixed toward, and how much of the colour the lowest level keeps.
+  --wr-heatmap-chart-surface: var(--wr-color-surface);
+  --wr-heatmap-chart-min-share: 15%;
+  // The cells. A row is a fixed height and the columns share the width, so the matrix
+  // fills its container and never scrolls: a scroller would need a tab stop.
+  --wr-heatmap-chart-cell-height: 2rem;
+  --wr-heatmap-chart-gap: 2px;
+  // 2px — a micro radius for cells that may be only a few pixels wide; the border-radius
+  // tokens (6px+) would round a narrow column into a capsule.
+  --wr-heatmap-chart-cell-radius: 2px;
+  --wr-heatmap-chart-cell-padding-x: var(--wr-space-xs);
+  // The values `showValues` prints. Their colour is picked per cell (see `__value`).
+  --wr-heatmap-chart-value-font-size: var(--wr-text-xs);
+  --wr-heatmap-chart-value-font-weight: var(--wr-font-weight-medium);
+  // An empty cell: the surface, hatched, inside a dashed outline. The outline is what
+  // separates it from the page, so it is drawn in the muted text colour, which clears the
+  // 3:1 WCAG 1.4.11 asks of a mark a reader needs; the hatching is texture.
+  --wr-heatmap-chart-empty-border: var(--wr-color-on-surface-muted);
+  --wr-heatmap-chart-empty-hatch: var(--wr-border-strong);
+  // The cell the tooltip is reading, ringed.
+  --wr-heatmap-chart-active-ring: var(--wr-color-on-surface);
+  --wr-heatmap-chart-active-ring-width: 2px;
+  // The row and column names, muted as an axis' labels are on every chart.
+  --wr-heatmap-chart-label-font-size: var(--wr-text-xs);
+  --wr-heatmap-chart-label-line-height: var(--wr-text-xs-leading);
+  --wr-heatmap-chart-label-color: var(--wr-color-on-surface-muted);
+  --wr-heatmap-chart-label-gap: var(--wr-space-sm);
+  --wr-heatmap-chart-row-label-max-width: 10rem;
+  // The colour-scale legend under the matrix.
+  --wr-heatmap-chart-legend-margin-top: var(--wr-space-md);
+  --wr-heatmap-chart-legend-gap: var(--wr-space-sm);
+  --wr-heatmap-chart-legend-font-size: var(--wr-text-xs);
+  --wr-heatmap-chart-legend-color: var(--wr-color-on-surface-muted);
+  --wr-heatmap-chart-swatch-width: 1.25rem;
+  --wr-heatmap-chart-swatch-height: 0.75rem;
+
+  display: block;
+  // The containing block of the out-of-flow `dataTable` copy, as on the line chart: a
+  // static host lets that 1px box resolve against an ancestor outside the chart and keep
+  // its place in an unpositioned scroller's content. No z-index, so no stacking context.
+  position: relative;
+  max-width: 100%;
+  font-family: var(--wr-heatmap-chart-font-family);
+  color: var(--wr-heatmap-chart-color);
+
+  // The names and the cells share one grid's tracks: an `auto` column for the row names,
+  // one equal column per column of the data, an `auto` row for the column names and one
+  // fixed row per row of the data. A grid follows `direction`, so under RTL the row names
+  // move to the right with no rule of their own.
+  &__matrix {
+    display: grid;
+    grid-template-columns: auto repeat(var(--wr-heatmap-chart-columns, 1), minmax(0, 1fr));
+    grid-template-rows: auto repeat(var(--wr-heatmap-chart-rows, 1), var(--wr-heatmap-chart-cell-height));
+    gap: var(--wr-heatmap-chart-gap);
+  }
+
+  &__column-labels,
+  &__row-labels,
+  &__cells {
+    display: grid;
+  }
+
+  // Tabular figures, so names that differ only in their digits — `00:00` and `11:00` — are
+  // one width, and either all fit their columns or none do.
+  &__column-labels,
+  &__row-labels {
+    font-size: var(--wr-heatmap-chart-label-font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--wr-heatmap-chart-label-line-height);
+    color: var(--wr-heatmap-chart-label-color);
+  }
+
+  &__column-labels {
+    grid-row: 1;
+    grid-column: 2 / -1;
+    grid-template-columns: subgrid;
+    padding-block-end: calc(var(--wr-heatmap-chart-label-gap) - var(--wr-heatmap-chart-gap));
+  }
+
+  // Centred on its column and shrunk to its text, which is what lets the component read a
+  // name's whole width off its `scrollWidth`; cut with an ellipsis past its column rather
+  // than running into the next name, while the names all fit or there is one column.
+  &__column-label {
+    justify-self: center;
+    min-width: 0;
+    max-inline-size: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  // Too wide for their columns: the component draws every n-th name
+  // (`--wr-heatmap-chart-label-every`), each starting at its own column — as a calendar's
+  // month names start at their week — and running across the columns up to the next.
+  &__column-labels--thinned > &__column-label {
+    justify-self: start;
+    max-inline-size: calc(
+      var(--wr-heatmap-chart-label-every, 1) * 100% + (var(--wr-heatmap-chart-label-every, 1) - 1) *
+        var(--wr-heatmap-chart-gap)
+    );
+    text-align: start;
+  }
+
+  // A name left out of sight: still in the accessibility tree, so a screen reader reads
+  // every column's name, and still in its own track, so the grid does not move. Not
+  // `visibility: hidden` or `display: none`, which would take it from the reader too.
+  &__column-label--hidden {
+    clip-path: inset(50%);
+  }
+
+  // Held to its own column, as before thinning: `clip-path` paints nothing but keeps the
+  // box, and the last column's name running on past the chart would scroll the page.
+  &__column-labels--thinned > &__column-label--hidden {
+    max-inline-size: 100%;
+  }
+
+  &__row-labels {
+    grid-row: 2 / -1;
+    grid-column: 1;
+    grid-template-rows: subgrid;
+    padding-inline-end: calc(var(--wr-heatmap-chart-label-gap) - var(--wr-heatmap-chart-gap));
+  }
+
+  &__row-label {
+    align-self: center;
+    max-width: var(--wr-heatmap-chart-row-label-max-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: end;
+  }
+
+  &__cells {
+    grid-row: 2 / -1;
+    grid-column: 2 / -1;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+
+  // A value is printed whole or not at all, with no measuring: the cell is a wrapping flex
+  // line led by a zero-width item as tall as the cell. A value that fits shares that first
+  // line and is centred on it; one that does not fit cannot join it, so it wraps onto a
+  // second line, below the cell, where `overflow` hides it. A value cut to its first digits
+  // would print a different number.
+  &__cell {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    min-width: 0;
+    box-sizing: border-box;
+    block-size: var(--wr-heatmap-chart-cell-height);
+    padding-inline: var(--wr-heatmap-chart-cell-padding-x);
+    overflow: hidden;
+    border-radius: var(--wr-heatmap-chart-cell-radius);
+    background: $fill;
+    // The levels are the chart, so they keep their colours under forced colors, as the SVG
+    // charts' fills do; forced colors would otherwise paint every cell as the page.
+    forced-color-adjust: none;
+    // Positioned for good, so the reading cell's ring (`--active`) only raises its
+    // `z-index`. Switching a grid item to `position: relative` on hover made Chromium lay
+    // the whole grid out again on every move, which the tooltip's measuring then forced at
+    // once: 5.6ms a move and 52ms of layout over thirty moves on a 100×100 matrix, against
+    // 1.8ms and 1.4ms with every cell already positioned. No cell holds a positioned child.
+    position: relative;
+    z-index: 0;
+
+    &::before {
+      content: '';
+      flex: 0 0 0;
+      block-size: 100%;
+    }
+  }
+
+  // Black or white, whichever reads better on this cell's own paint: the pick the theme's
+  // `-contrast` tokens make, made per cell because the paint is a mix of a colour the
+  // consumer chose. The paint's `y` in XYZ (D65) IS the relative luminance WCAG measures,
+  // and the two candidates score the same, about 4.58:1, against a luminance of 0.17913 —
+  // √(1.05 × 0.05) − 0.05. Below it white wins, above it black: the difference is scaled
+  // to ±infinity and clamped to 0 or 1, so nothing between the two is ever drawn, and the
+  // result is that share of D65 white. An engine without relative colour syntax drops the
+  // declaration, and the value keeps the chart's text colour.
+  &__value {
+    flex: none;
+    white-space: nowrap;
+    // A figure has no strong character of its own, so on an RTL page the minus of `-50`
+    // landed after the digits. Plaintext takes the direction from the text, as the
+    // tooltip's value does: the sign stays first, and an Arabic `valueFormat` still reads
+    // right to left. The value is centred in its cell either way.
+    unicode-bidi: plaintext;
+    font-size: var(--wr-heatmap-chart-value-font-size);
+    font-weight: var(--wr-heatmap-chart-value-font-weight);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: color(from #{$fill} xyz-d65 calc(0.9505 * #{$white}) #{$white} calc(1.0891 * #{$white}));
+  }
+
+  // Where relative colour syntax is missing — Firefox before 128, inside the documented
+  // floor — the pick above is dropped, and the chart's text colour on the darker levels
+  // measures about 3.6:1 in light and 3.9:1 in dark, under AA. There the value sits on a
+  // small chip of the surface instead, in the chart's text colour, which reads on any level
+  // and in either scheme. The condition is the declaration itself, so an engine that has
+  // the syntax but not channel keywords inside `calc()` takes the chip too.
+  @supports not (color: color(from red xyz-d65 calc(0.9505 * #{$white}) #{$white} calc(1.0891 * #{$white}))) {
+    &__value {
+      padding: calc(var(--wr-heatmap-chart-cell-padding-x) / 4) calc(var(--wr-heatmap-chart-cell-padding-x) / 2);
+      border-radius: var(--wr-heatmap-chart-cell-radius);
+      background: var(--wr-heatmap-chart-surface);
+      color: var(--wr-heatmap-chart-color);
+    }
+  }
+
+  &__legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--wr-heatmap-chart-legend-gap);
+    margin-block-start: var(--wr-heatmap-chart-legend-margin-top);
+    font-size: var(--wr-heatmap-chart-legend-font-size);
+    color: var(--wr-heatmap-chart-legend-color);
+  }
+
+  &__legend-label {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    // The scale's ends, `-50` among them: see `__value`. Shrunk to their text, so the
+    // direction moves nothing but the sign.
+    unicode-bidi: plaintext;
+  }
+
+  // The levels side by side, as one bar from the lowest to the highest.
+  &__scale {
+    display: inline-flex;
+    border-radius: var(--wr-heatmap-chart-cell-radius);
+    overflow: hidden;
+  }
+
+  &__swatch {
+    flex: none;
+    inline-size: var(--wr-heatmap-chart-swatch-width);
+    block-size: var(--wr-heatmap-chart-swatch-height);
+    background: $fill;
+    forced-color-adjust: none;
+  }
+
+  // No data, which is not zero: no level's paint at all, but the surface hatched, inside a
+  // dashed outline — a pattern and an edge, two channels that are not colour. After every
+  // level's paint, which it replaces.
+  &__cell--empty,
+  &__swatch--empty {
+    background: repeating-linear-gradient(
+      45deg,
+      var(--wr-heatmap-chart-empty-hatch) 0 1px,
+      var(--wr-heatmap-chart-surface) 1px 5px
+    );
+    outline: 1px dashed var(--wr-heatmap-chart-empty-border);
+    outline-offset: -1px;
+  }
+
+  &__swatch--empty {
+    border-radius: var(--wr-heatmap-chart-cell-radius);
+  }
+
+  // Above its neighbours, so the ring is not painted over by the next cell, and after the
+  // empty cell's outline, which it replaces. Every cell is positioned already (`__cell`).
+  &__cell--active {
+    z-index: 1;
+    outline: var(--wr-heatmap-chart-active-ring-width) solid var(--wr-heatmap-chart-active-ring);
+    outline-offset: 1px;
+  }
+
+  &__legend-empty {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wr-heatmap-chart-legend-gap);
+  }
+}
+
+// The cells keep their colours under forced colors, so the marks drawn in theme colours
+// would keep colours the forced palette no longer has: the empty cell's outline and
+// hatching, and the reading cell's ring.
+@media (forced-colors: active) {
+  .wr-heatmap-chart__cell--empty,
+  .wr-heatmap-chart__swatch--empty {
+    --wr-heatmap-chart-empty-border: CanvasText;
+    --wr-heatmap-chart-empty-hatch: GrayText;
+    --wr-heatmap-chart-surface: Canvas;
+  }
+
+  .wr-heatmap-chart__cell--active {
+    outline-color: Highlight;
+  }
+}