@crewlethq/tokens 0.4.4 → 0.5.1

package/test/palette.mjs

@@ -30,7 +30,7 @@
  * selector: themes.css is imported second and is what paints.
  */
 
-import { cascade, chroma, contrast, deltaE, flatten, parseHex, separation, VISIONS, withAlpha } from './color.mjs';
+import { cascade, chroma, contrast, deltaE, flatten, parseBlocks, parseHex, separation, VISIONS, withAlpha } from './color.mjs';
 
 export * from './color.mjs';
 
@@ -42,23 +42,89 @@ export const SOFT_ALPHA = 0.12;
 // ---------------------------------------------------------------------------
 
 /**
- * Every opaque ground a piece of text can end up on.
+ * Every opaque ground a piece of text can end up on: the four RUNGS.
+ *
+ *   frame        the application ground: the rail, and the body around the sheet
+ *   background   the SHEET, the page content sits on
+ *   subtle       the CARD: a card, a popover, a dialog body
+ *   elevated     RAISED: a chip, a well, a key cap, a track, a lifted row
  *
  * This list is the whole point of the exercise. A text ramp anchored to the
  * panel it was designed against and then spent on a selected row inside a
  * dialog body is how a palette ships six steps under 4.5:1 without anybody
  * noticing.
+ *
+ * It is exported so a component suite measures on these grounds rather than
+ * on a copy of them: six suites in @crewlethq/ui each kept a copy of their
+ * own, and five of the six had already drifted from this list.
  */
 export const OPAQUE_SURFACES = [
+  '--color-surface-frame',
   '--color-surface-background',
   '--color-surface-subtle',
-  '--color-surface-muted',
   '--color-surface-elevated',
-  '--color-surface-topbar',
-  '--color-surface-topbar-lift',
-  '--color-surface-topbar-active',
 ];
 
+/**
+ * How far apart each rung sits from the one beneath it, in OKLab dE, and why.
+ *
+ * The four rungs are one ladder, and each step is held to what the step has
+ * to do on its own:
+ *
+ * - THE SHEET OVER THE FRAME is the whole layering device: a content sheet
+ *   floating inside the application ground. At dE 3, the floor this file holds
+ *   every "can a reader notice it" difference to, the sheet reads as a
+ *   separate plane; the approved dark sheet, #0f0f12, measured 2.91 and was
+ *   nudged to clear it.
+ * - A CARD OVER THE SHEET is deliberately near-flat, dE 1.5, because a card is
+ *   found by its HAIRLINE rather than by its fill: a page of cards each lifted
+ *   by dE 3 is a relief map. So the step comes with a second rule, and that is
+ *   the one that carries the card: the plain border (CARD_HAIRLINE) has to be
+ *   a line a reader can see, dE 3 against the card it bounds and against the
+ *   sheet around it. That a card actually DRAWS that border is a component
+ *   rule, held by the Card suite in @crewlethq/ui, because a palette cannot see
+ *   a stylesheet.
+ * - RAISED OVER THE CARD is a chip, a well or a key cap with no border of its
+ *   own, so it is the fill alone that says it is there: dE 3.
+ *
+ * There is deliberately no rule between the card and the frame, or raised and
+ * the sheet: nothing is drawn across two rungs at once, and a rule over a pair
+ * nobody puts side by side is a floor that binds for no reason.
+ */
+export const RUNG_STEPS = [
+  ['the sheet lifts off the frame', '--color-surface-background', '--color-surface-frame', 3],
+  ['a card separates from the sheet', '--color-surface-subtle', '--color-surface-background', 1.5],
+  ['raised separates from the card', '--color-surface-elevated', '--color-surface-subtle', 3],
+];
+
+/**
+ * The line that finds a card, and the two grounds it runs between: the card
+ * inside it and the sheet outside it. See RUNG_STEPS for why the card leans
+ * on it.
+ */
+export const CARD_HAIRLINE = ['--color-border-default', '--color-surface-subtle', '--color-surface-background'];
+export const HAIRLINE_DE = 3;
+
+/**
+ * THE OVERLAY STEPS HAVE TO BE SEEN, on every rung.
+ *
+ * A translucent overlay is one alpha on four grounds, and the alpha is FITTED
+ * (the hover token says how): the approved design paints its hover as one
+ * opaque colour, and a stronger overlay costs the tertiary text step contrast
+ * on the rungs it lightens or darkens most. Left to that trade alone, the
+ * cheapest answer for the text is an overlay nobody sees, and the light
+ * palette's frame kept asking for it: the design's own light hover sits dE
+ * 0.60 off the frame. This is the floor that stops it. A hovered row separates
+ * from its rung by dE 3, and a pressed row from a hovered one by dE 3 more,
+ * because dE 3 is the floor this file holds every "can a reader notice it"
+ * difference to. The marketing root is exempt, as it is from the rungs.
+ */
+export const OVERLAY_STEPS = [
+  ['a hovered row is visible on every rung', '--color-surface-hover', null],
+  ['a pressed row is visible over a hovered one', '--color-surface-pressed', '--color-surface-hover'],
+];
+export const OVERLAY_DE = 3;
+
 /**
  * The translucent overlays composited onto each ground. A hovered or pressed
  * row IS one of these, and so is an inset well.
@@ -84,9 +150,6 @@ export const INK_STEPS = [
   '--color-feedback-warning-ink',
   '--color-feedback-danger-ink',
   '--color-feedback-info-ink',
-  '--color-phase-onboarding-ink',
-  '--color-phase-execute-ink',
-  '--color-phase-review-ink',
 ];
 
 /** A hue used as a MARK, or as a fill behind a label. */
@@ -96,9 +159,6 @@ export const FILL_STEPS = [
   '--color-feedback-warning',
   '--color-feedback-danger',
   '--color-feedback-info',
-  '--color-phase-onboarding',
-  '--color-phase-execute',
-  '--color-phase-review',
 ];
 
 export const STATUS = [
@@ -107,14 +167,42 @@ export const STATUS = [
   '--color-feedback-danger',
   '--color-feedback-info',
 ];
-export const PHASE = ['--color-phase-onboarding', '--color-phase-execute', '--color-phase-review'];
-export const DATA = ['--color-data-1', '--color-data-2', '--color-data-3', '--color-data-4', '--color-data-5'];
 
-/** A fill with the label a component paints on it. The Button variants. */
+/**
+ * The chart series, in the order a figure assigns them: blue, orange, aqua and
+ * an ochre yellow, the four the approved design draws.
+ *
+ * FOUR, because four is what both floors below can hold at once. The design's
+ * four clear them with room (its tightest neighbours sit dE 19.8 apart under
+ * normal vision), and a fifth would have to sit between two of them in a hue
+ * budget the reserved red, the accent and a dichromat's collapse of red onto
+ * green have already spent.
+ */
+export const DATA = ['--color-data-1', '--color-data-2', '--color-data-3', '--color-data-4'];
+
+/**
+ * How far apart two NEIGHBOURING series sit: dE 9 under every vision, and dE
+ * 15 under normal vision on top of it.
+ *
+ * Neighbours, because a stacked bar, a legend and a line chart assign series
+ * in order and only neighbours touch. The dichromat floor is the budget a
+ * palette can afford once deuteranopia has folded red onto green; on its own
+ * it let a pair sit dE 9 apart for EVERY reader, which to full-colour vision
+ * is two shades of one hue rather than two series. The normal-vision floor is
+ * the companion gate of the validated categorical method the design's four
+ * hues come from: its worst adjacent pair clears dE 15 unsimulated, so a
+ * reader who sees every colour is never the one left squinting at a legend.
+ */
+export const DATA_ADJACENT_DE = 9;
+export const DATA_ADJACENT_NORMAL_DE = 15;
+
+/**
+ * A fill with the label a component paints on it: the primary action at rest,
+ * under the pointer and pressed, the danger fill, and the inverse ground. The
+ * label on every fill but the last is on-accent, which is white in every
+ * palette, and each fill is measured over every ground it can sit on.
+ */
 export const LABEL_ON_FILL = [
-  ['--color-text-on-brand', '--color-brand-primary'],
-  ['--color-text-on-brand', '--color-brand-primary-hover'],
-  ['--color-text-on-brand', '--color-brand-primary-active'],
   ['--color-text-on-accent', '--color-brand-accent'],
   ['--color-text-on-accent', '--color-brand-accent-hover'],
   ['--color-text-on-accent', '--color-brand-accent-active'],
@@ -123,6 +211,45 @@ export const LABEL_ON_FILL = [
   ['--color-text-inverse', '--color-surface-inverse'],
 ];
 
+/**
+ * THE PRIMARY ACTION'S THREE FILLS, at rest, under the pointer and pressed,
+ * each held against the one before it: [rule, the step, the fill it follows].
+ *
+ * The primary action IS the accent, in both palettes, and on a filled button
+ * the fill is the whole of the feedback, so every step clears two things. It
+ * is SEEN: ACTION_DE, the floor this file holds every "can a reader notice
+ * it" difference to. And it moves AWAY from its label, which is ACTION_LABEL
+ * on every fill: a hover or a press only ever gains contrast. The approved
+ * design brightened its hover instead (brightness(1.08)), which is the step
+ * TOWARD a white label, and on the dark accent it took white from 4.53:1 to
+ * 4.18:1, under the text floor at the moment a reader is about to press. The
+ * label rule above catches that number in dark; this rule is what catches the
+ * same move in light, where the brightened step still measured 5.01:1 and
+ * only its direction was wrong.
+ *
+ * The DESTRUCTIVE action is the other filled action, and it is held the same
+ * way: a toast's destructive action is the danger fill under the same white
+ * label, and its hover is --color-feedback-danger-hover. The danger fill is
+ * fitted from the design's stopped red and the design draws no hover for it,
+ * so this rule is what decides where its hover goes, as it decides the
+ * accent's: a step a reader can see, away from the label.
+ */
+export const ACTION_STEPS = [
+  ['a hovered primary action is a visible step away from its label', '--color-brand-accent-hover', '--color-brand-accent'],
+  [
+    'a pressed primary action is a visible step past a hovered one',
+    '--color-brand-accent-active',
+    '--color-brand-accent-hover',
+  ],
+  [
+    'a hovered destructive action is a visible step away from its label',
+    '--color-feedback-danger-hover',
+    '--color-feedback-danger',
+  ],
+];
+export const ACTION_LABEL = '--color-text-on-accent';
+export const ACTION_DE = 3;
+
 /** The ten seeded avatar grounds, each carrying white initials. */
 export const AVATAR_TINTS = Array.from({ length: 10 }, (_, i) => `--color-avatar-tint-${i}`);
 
@@ -131,51 +258,80 @@ export const AVATAR_TINTS = Array.from({ length: 10 }, (_, i) => `--color-avatar
 // ---------------------------------------------------------------------------
 
 /**
- * The application rail, which is the one surface in the product that paints A
- * TINT ON A TINT.
- *
- * Every other rule here composites what a component draws onto an OPAQUE
- * ground, because that is what a badge in a table cell and a callout in a
- * dialog body do. The rail does not. The row the reader is on carries the
- * accent's own soft tint, a hovered row carries the hover overlay, and the
- * attention count's warning tint is drawn on top of whichever of those the row
- * happens to have. `--color-feedback-warning-ink` on its own soft tint was
- * already a rule, and it is measured over the seven opaque grounds; on the
- * reader's own row the tint sits on the accent tint instead, and that third
- * composite is both unmeasured and the tightest of the three.
- *
- * The rail's ground is the topbar surface rather than the page's, which is the
- * other half of why this is a list of its own: every pair is named here, so an
- * edit to the accent, to the warning hue or to either soft alpha shows its
- * cost on the rail rather than only inside a dialog.
+ * The application rail, and every pair it paints on its own grounds.
+ *
+ * The rail stands on the FRAME rather than on the sheet, which no other
+ * column of text does. Its rows have three grounds: the frame itself, the
+ * frame under the hover overlay, and RAISED for the row the reader is on
+ * (RAIL_CURRENT_ROW). The badge, a count of what is waiting on the reader, is
+ * the one hue in it, an opaque accent fill carrying the on-accent label; a
+ * project's key chip is the raised rung inside the plain hairline, carrying
+ * the secondary ink, on every row alike.
+ *
+ * WHAT THIS TABLE IS, HONESTLY. Every ink in it is also reached by a rule
+ * above, which measures the same composites over every rung: the text steps
+ * over the overlays on the frame, the focus ring over raised, the on-accent
+ * label on the accent fill. So none of these can fail on its own. What it is,
+ * is the MAP from what the rail paints to the ground it lands on, which the
+ * SidebarNav suite in @crewlethq/ui reads the stylesheet's own pairs against,
+ * so a rail that spent a token nobody measured there says so by name. The
+ * rules the table cannot reach are the current row's own, below.
  */
-export const RAIL_GROUND = '--color-surface-topbar';
+export const RAIL_GROUND = '--color-surface-frame';
+
+/**
+ * The row the reader is on, as [fill, hairline]: raised, with the plain
+ * border drawn round it INSIDE the row, and the primary ink.
+ *
+ * It is found the way a card is found. Its fill is allowed to be near-flat on
+ * the frame, RAIL_CURRENT_LIFT, because in light raised is only dE 1.84 off
+ * the frame (the design draws it there); what carries the row is the
+ * hairline, held to HAIRLINE_DE against the fill it is drawn on. The hairline
+ * is also what tells the current row from a HOVERED one, which draws none: in
+ * dark the two fills land dE 1.56 apart, because the fitted hover overlay
+ * lifts the frame almost to raised.
+ *
+ * It used to be the accent's own soft tint with the label in the accent ink.
+ * The accent is the primary action's fill now, so a violet row in the rail
+ * would read as a second primary on every screen, beside the one the screen
+ * actually asks for; where the reader is, is the row's position, its lift and
+ * its line.
+ */
+export const RAIL_CURRENT_ROW = ['--color-surface-elevated', '--color-border-default'];
+export const RAIL_CURRENT_LIFT = 1.5;
 
 /** The three grounds a row in the rail can have, over that ground. */
 export const RAIL_ROWS = [
   ['a row', null],
   ['a hovered row', '--color-surface-hover'],
-  ['the row the reader is on', '--color-brand-accent-soft'],
+  ['the row the reader is on', RAIL_CURRENT_ROW[0]],
 ];
 
 /**
- * What the rail paints: the ink, the tint it is drawn on (null for the row's
+ * What the rail paints: the ink, the fill it is drawn on (null for the row's
  * own ground), which rows carry it, and the floor it clears.
  *
- * The resting glyph is deliberately not in this list. It is the decoration
- * step, it is `aria-hidden` beside its own label, and it has a band rather
- * than a floor; it gets a rule of its own below. On a hovered row and on the
- * reader's own it takes the row's colour, so there it IS the label's entry.
+ * The glyph has no entry of its own: it is drawn in the row's colour on
+ * every row, at rest as much as pointed or current, so each label entry below
+ * is the glyph's too. A resting row is the secondary step, as the approved
+ * design draws it, and a hovered or current one lifts to the primary.
  */
 export const RAIL_PAINTS = [
-  ["a row's label", '--color-text-secondary', null, ['a row'], 4.5],
+  ["a row's label and glyph", '--color-text-secondary', null, ['a row'], 4.5],
   ['a hovered row, label and glyph', '--color-text-primary', null, ['a hovered row'], 4.5],
-  ['the current row, label and glyph', '--color-brand-accent-ink', null, ['the row the reader is on'], 4.5],
-  ['a group label, a quiet badge, a foot row', '--color-text-tertiary', null, ['a row', 'a hovered row'], 4.5],
+  ['the current row, label, glyph and count', '--color-text-primary', null, ['the row the reader is on'], 4.5],
+  ['a group label and its action, a count, a foot row', '--color-text-tertiary', null, ['a row', 'a hovered row'], 4.5],
+  [
+    "a project's key chip",
+    '--color-text-secondary',
+    '--color-surface-elevated',
+    ['a row', 'a hovered row', 'the row the reader is on'],
+    4.5,
+  ],
   [
-    'the attention count',
-    '--color-feedback-warning-ink',
-    '--color-feedback-warning-soft',
+    'the badge, what is waiting on the reader',
+    '--color-text-on-accent',
+    '--color-brand-accent',
     ['a row', 'a hovered row', 'the row the reader is on'],
     4.5,
   ],
@@ -189,13 +345,17 @@ export const RAIL_PAINTS = [
  * The scrim is the one ground in the palette that is not a surface step: it is
  * a wash over whatever is already there, so the pair a reader sees depends on
  * what that was. An upload overlay puts a word on it over an identity badge,
- * which is a seeded tint, the accent fill, or the initials tile on whichever
- * surface the form sits on, and none of those composites is reachable from the
- * surface list. Every ground here is measured because the shallowest one is
- * what sets the number: a 60 percent black over a white page is much lighter
- * than the same wash over a dark tint.
+ * which is a seeded tint or the initials tile on whichever surface the form
+ * sits on, and the tints are not reachable from the surface list. Every ground
+ * here is measured because the shallowest one is what sets the number: a 60
+ * percent black over a white page is much lighter than the same wash over a
+ * dark tint.
+ *
+ * The accent's fill is not one of them. It was, while a badge could be filled
+ * with it; @crewlethq/ui's Avatar has no such tone any more (a SELECTED badge
+ * is a ring round a neutral one), so it would be a composite nothing draws.
  */
-export const SCRIM_GROUNDS = ['--color-brand-accent', ...AVATAR_TINTS];
+export const SCRIM_GROUNDS = [...AVATAR_TINTS];
 
 // The controls
 // ---------------------------------------------------------------------------
@@ -204,7 +364,7 @@ export const SCRIM_GROUNDS = ['--color-brand-accent', ...AVATAR_TINTS];
  * The segmented row, which is the one CONTROL that paints a tint on a tint.
  *
  * Its container is the inset well and the option that is on is lifted off it
- * with the panel surface, so the label of the chosen answer sits on a
+ * with the card surface, so the label of the chosen answer sits on a
  * composite of two overlays rather than on a ground any other rule reaches.
  * It is the label a reader looks for first in the row, so it is held to the
  * primary step's own floor rather than to the 4.5 a fact needs.
@@ -215,12 +375,13 @@ export const SCRIM_GROUNDS = ['--color-brand-accent', ...AVATAR_TINTS];
  *
  * WHAT THIS RULE DOES NOT CLAIM, and the next reader should not assume: that
  * the chip's own FACE is separable from the well it sits in. It is not, on
- * every ground. The face is the panel surface and the well is the inset
- * overlay, and on the page ground those land dE 0.43 apart in light and 1.91
- * in dark, against a floor of 3 elsewhere in this file; on a panel they sit
- * 3.54 and 4.68 apart. So a segmented row is drawn on the product's own page
- * exactly as it is at :8020, and which option is on is read there from the
- * INK step, primary against tertiary, and from the chip's shadow. Both inks
+ * every ground. The face is the card surface and the well is the inset
+ * overlay, and on the sheet those land dE 1.17 apart in dark (3.61 in light)
+ * and inside a card 2.89 (1.83 in light), against a floor of 3 elsewhere in
+ * this file; only on the raised rung are they 5.84 and 5.40 apart. So a
+ * segmented row is drawn on the product's own page exactly as it is at
+ * :8020, and which option is on is read there from the INK step, primary
+ * against tertiary, and from the chip's shadow. Both inks
  * are measured, which is why this holds the on label to the primary floor
  * rather than to the 4.5 a fact needs. A restyle that flattened the two ink
  * steps together would take the last thing saying which option is on.
@@ -269,17 +430,30 @@ export const VEIL = '--color-surface-veil';
 export const VEIL_BAND = [1.5, 3];
 
 /**
- * The alpha the band above was measured at, and the only number the veil is
- * free to choose.
- *
- * Its COLOUR is not free: a veil is the page seen through less of itself, so
- * it is each root's own ground at this alpha and never a hue of its own. A
- * veil that is a different colour from the page under it is a wash laid over
- * the page, which moves every ground behind it somewhere the ink steps were
- * never measured against, and it does it in the one state where a reader
- * cannot tell a rendering fault from a design.
+ * The ground the veil is drawn in, and the alpha it is drawn at: the only
+ * number the veil is free to choose.
+ *
+ * Its COLOUR is not free: a veil is the application seen through less of
+ * itself, so it is each root's own FRAME at this alpha and never a hue of its
+ * own. The frame rather than the sheet because the veil covers the whole
+ * window, the rail as well as the sheet, and the frame is the ground both of
+ * them stand on: the application recedes into its own ground rather than
+ * under a film of its page. A veil that is a different colour from what is
+ * under it is a wash laid over it, which moves every ground behind it
+ * somewhere the ink steps were never measured against, and it does it in the
+ * one state where a reader cannot tell a rendering fault from a design.
+ *
+ * 0.65 is the approved dark scrim's 0.62 moved the least distance into the
+ * band for every root. At 0.62 the veiled dark page's own primary text still
+ * measured 3.02:1 to 3.15:1 over the four rungs, over the 3:1 ceiling, and the
+ * marketing root, near-white on black, needs 0.65 before its brightest
+ * composite comes under it. At 0.65 dark measures 2.73:1 to 2.84:1, light
+ * 2.18:1 to 2.30:1 and the marketing root 2.75:1 to 2.93:1. The approved light
+ * scrim, a dark wash at 0.28, left the light page at 8.35:1 to 9.64:1: a page
+ * nobody had faded at all.
  */
-export const VEIL_ALPHA = 0.72;
+export const VEIL_GROUND = '--color-surface-frame';
+export const VEIL_ALPHA = 0.65;
 
 // The data surfaces
 // ---------------------------------------------------------------------------
@@ -354,24 +528,34 @@ export const SHADOW_STEPS = [
   '--shadow-glow',
 ];
 
-// The cross-family floors are lower than the within-family ones because the
-// hue budget is finite (thirteen hues in a space deuteranopia collapses to
-// blue, yellow and lightness) and because across families colour is never the
-// only signal: a Tag always renders its label, a status Callout always renders
-// its glyph, and the accent appears only as position. They are floors, not
+// Two cross-family rules, and both protect a RESERVED meaning from being
+// claimed by another family: nothing may read as the accent, which is what to
+// act on and what is chosen, and no series may read as the danger red. Their
+// dichromat floors are lower than the within-family ones because the hue
+// budget is finite (nine hues, the accent, four states and four series, in a
+// space deuteranopia collapses to blue, yellow and lightness) and because
+// across families colour is never the only signal: a Tag always renders its
+// label, a status Callout always renders its glyph, a series is named by its
+// legend, and the accent appears only as position. They are floors, not
 // targets, and every measured value is reported so a later edit shows its cost.
-const CROSS_NORMAL = 8;
-const CROSS_DICHROMAT = 6;
+//
+// No floor here is about a CATEGORY. A phase, a unit or a model is drawn in the
+// neutral colour with its word, and inside a figure as the series its legend
+// names, so no category family spends this budget. The phase family did: three
+// hues held apart from each other, from the four states and from the accent,
+// which is three hues fewer for everything that carries a meaning.
 const ACCENT_NORMAL = 10;
 const ACCENT_DICHROMAT = 8;
 // The reserved red keeps the highest normal floor of any cross-family pair,
-// because it is the one hue that means the same thing everywhere in a product.
-// Its dichromat floor is the ACCENT's, not the phase family's: both rules
-// protect a RESERVED meaning from being claimed by something else, where the
-// phase rule only asks two ordinary families to stay apart. It is also the
-// most a green can carry. Red and green are one axis to a deuteranopic reader,
-// so the whole separation is lightness and chroma, and pushing this pair past
-// 9.5 takes the fourth series out of the green band altogether.
+// because it is the one hue that means the same thing everywhere in a product,
+// and the accent's dichromat floor. Red, orange and green fall onto one axis
+// for a dichromat, so this is the floor the chart's orange and aqua spend the
+// most on: the approved aqua sat dE 0.73 from the approved red under
+// protanopia, and the approved orange 9.08 from it under normal vision in dark
+// and 7.45 in light. The fit moves the red further than the orange or the
+// aqua, darker, because it had to darken for its white label anyway, and in
+// dark it turns toward crimson as well, which spares the orange more than it
+// costs the red.
 const DANGER_NORMAL = 14;
 const DANGER_DICHROMAT = 8;
 
@@ -379,29 +563,65 @@ const DANGER_DICHROMAT = 8;
 // Theme states
 // ---------------------------------------------------------------------------
 
-const DARK_MEDIA = '@media (prefers-color-scheme: dark)';
-const DARK_MEDIA_SELECTOR = ':root:not([data-theme="light"])';
-const DARK_ATTRIBUTE_SELECTOR = ':root[data-theme="dark"]';
+// The theme layer is DARK FIRST: the dark palette is the bare :root, and light
+// is painted over it by two blocks, one for a system that asks for light and
+// one for an explicit choice. There is no dark attribute block, because the
+// bare root already is one; the media block's :not() is what lets an explicit
+// dark beat a light system.
+const THEME_ROOT = ':root';
+const LIGHT_MEDIA = '@media (prefers-color-scheme: light)';
+const LIGHT_MEDIA_SELECTOR = ':root:not([data-theme="dark"])';
+const LIGHT_ATTRIBUTE_SELECTOR = ':root[data-theme="light"]';
+
+/**
+ * The two sheets, each parsed ONCE, as sources cascade() reads. A measurement
+ * reads four states and three theme blocks out of them, and parsing both
+ * sheets over again for every read was most of what a runPalette call cost,
+ * which scripts/fit-palette.mjs makes tens of thousands of.
+ */
+const sheetsOf = ({ tokens, themes }) => ({
+  tokens: { name: 'tokens.css', blocks: parseBlocks(tokens) },
+  themes: { name: 'themes.css', blocks: parseBlocks(themes) },
+});
+
+/** The theme file's three blocks, each on its own, as the file declares it. */
+function themeBlocks(themesSource) {
+  const block = (atRule, selector) => cascade([themesSource], (b) => b.atRule === atRule && b.selector === selector);
+  return {
+    dark: block(null, THEME_ROOT),
+    lightMedia: block(LIGHT_MEDIA, LIGHT_MEDIA_SELECTOR),
+    lightAttribute: block(null, LIGHT_ATTRIBUTE_SELECTOR),
+  };
+}
 
 /**
  * The four sets of values a browser can end up with.
  *
  * `base` is tokens.css on its own, which is what an application that imports
  * only the token layer paints: the marketing palette. The other three are what
- * the theme layer paints over it.
+ * the theme layer paints over it: `dark`, the bare root, which is what a
+ * document that sets nothing gets and what an explicit dark gets on either
+ * system; and light twice over, once by the media query and once by the
+ * attribute, because they are two declarations a browser reaches by two
+ * different routes and either can drift from the other.
  */
-export function paletteStates({ tokens, themes }) {
-  const tokensOnly = [{ name: 'tokens.css', css: tokens }];
-  const both = [...tokensOnly, { name: 'themes.css', css: themes }];
-  const bare = (block) => block.atRule === null && block.selector === ':root';
-  const light = cascade(both, bare);
-  const withDark = (selector, atRule) =>
-    new Map([...light, ...cascade(both, (block) => block.atRule === atRule && block.selector === selector)]);
+export function paletteStates(sources) {
+  return statesOf(sheetsOf(sources));
+}
+
+/** paletteStates over sheets already parsed, which runPalette shares with the structural rules. */
+function statesOf(sheets) {
+  const tokensOnly = [sheets.tokens];
+  const both = [...tokensOnly, sheets.themes];
+  const bare = (block) => block.atRule === null && block.selector === THEME_ROOT;
+  const dark = cascade(both, bare);
+  const withLight = (selector, atRule) =>
+    new Map([...dark, ...cascade(both, (block) => block.atRule === atRule && block.selector === selector)]);
   return {
     base: cascade(tokensOnly, bare),
-    light,
-    'dark (media query)': withDark(DARK_MEDIA_SELECTOR, DARK_MEDIA),
-    'dark (attribute)': withDark(DARK_ATTRIBUTE_SELECTOR, null),
+    dark,
+    'light (media query)': withLight(LIGHT_MEDIA_SELECTOR, LIGHT_MEDIA),
+    'light (attribute)': withLight(LIGHT_ATTRIBUTE_SELECTOR, null),
   };
 }
 
@@ -433,9 +653,9 @@ function resolve(values, name, ground) {
 /**
  * Run every rule over one state's values.
  * `profile` is 'full' for a theme, or 'base' for the marketing root, which is
- * exempt from the separation, ground and card rules: its pure black ground and
- * its single brand hue are a deliberate marketing look rather than a product
- * palette.
+ * exempt from the separation, rail, overlay and rung rules: its one pure black
+ * ground and its single brand hue are a deliberate marketing look rather than
+ * a product palette.
  */
 function checkState(state, values, profile, push) {
   const { ground, opaque, all } = surfacesOf(values);
@@ -456,9 +676,14 @@ function checkState(state, values, profile, push) {
     // It exists for a hairline glyph and a disabled affordance. The assertion
     // is that it stays BELOW the fact floor: a step that quietly crept up to
     // 4.5 would invite itself into a table cell, which is the whole failure
-    // the separate name prevents.
-    const ratio = contrast(colour('--color-text-muted'), flatten(values.get('--color-surface-subtle'), ground));
-    say('text-muted is decoration', ratio > 2.8 && ratio < 4.5, '--color-text-muted', ratio, `2.8 < ${ratio.toFixed(2)}:1 < 4.5 on the panel`);
+    // the separate name prevents. And that it stays ABOVE the band's floor on
+    // the three grounds a glyph beside its word is drawn on: the frame (the
+    // rail and the drawer), the sheet and a card. Raised is not one of them:
+    // it is a chip's or a well's fill, and what a chip carries is its label.
+    for (const [name, surface] of opaque.filter(([rung]) => rung !== '--color-surface-elevated')) {
+      const ratio = contrast(colour('--color-text-muted'), surface);
+      say('text-muted is decoration', ratio > 2.8 && ratio < 4.5, '--color-text-muted', ratio, `2.8 < ${ratio.toFixed(2)}:1 < 4.5 on ${name}`);
+    }
   }
 
   for (const name of INK_STEPS) {
@@ -469,7 +694,7 @@ function checkState(state, values, profile, push) {
   // An ink on its OWN soft tint: a badge, a callout, a diff line. The tint is
   // recomputed from the fill here rather than read from the token, so a
   // hand-edited tint that no longer belongs to its fill fails.
-  for (const fill of [...STATUS, ...PHASE]) {
+  for (const fill of STATUS) {
     const { r, g, b } = colour(fill);
     const tints = opaque.map(([name, rgb]) => [
       `${fill} soft on ${name}`,
@@ -499,12 +724,28 @@ function checkState(state, values, profile, push) {
   }
 
   for (const [label, fill] of LABEL_ON_FILL) {
-    // A fill can be translucent (the monochrome primary's hover and active
-    // steps are), so it is measured over every ground it can sit on.
+    // Measured over every ground the fill can sit on, so a translucent fill
+    // is measured as the composite a reader sees. None is today; the
+    // monochrome primary this list used to carry had two.
     const low = worst(colour(label), opaque.map(([name, rgb]) => [`${fill} on ${name}`, flatten(values.get(fill), rgb)]));
     say('a label clears 4.5:1 on its own fill', low.ratio >= 4.5, `${label} on ${fill}`, low.ratio, `${low.ratio.toFixed(2)}:1 (worst on ${low.name})`);
   }
 
+  // THE PRIMARY ACTION'S STEPS. See ACTION_STEPS.
+  for (const [rule, step, from] of ACTION_STEPS) {
+    const label = colour(ACTION_LABEL);
+    const [was, now] = [colour(from), colour(step)];
+    const measured = deltaE(now, was);
+    const gain = contrast(label, now) - contrast(label, was);
+    say(
+      rule,
+      measured >= ACTION_DE && gain > 0,
+      `${step} after ${from}`,
+      measured,
+      `dE ${measured.toFixed(2)} >= ${ACTION_DE}, and ${ACTION_LABEL} ${contrast(label, was).toFixed(2)}:1 -> ${contrast(label, now).toFixed(2)}:1 rises`,
+    );
+  }
+
   for (const name of AVATAR_TINTS) {
     const ratio = contrast(parseHex('#ffffff'), colour(name));
     say('an avatar tint clears 4.5:1 under white initials', ratio >= 4.5, name, ratio, `${ratio.toFixed(2)}:1`);
@@ -514,8 +755,8 @@ function checkState(state, values, profile, push) {
     // A word on the scrim. The scrim is a wash rather than a surface, so the
     // composite is taken over every ground it can be drawn on rather than read
     // from a token: an upload overlay's label sits on the scrim over an
-    // identity badge, and the badge is a seeded tint, the accent fill or an
-    // initials tile on whichever surface the form is on.
+    // identity badge, and the badge is a seeded tint or an initials tile on
+    // whichever surface the form is on.
     const label = colour('--color-text-on-accent');
     const scrim = values.get('--color-surface-scrim');
     const over = [...opaque, ...SCRIM_GROUNDS.map((name) => [name, colour(name)])];
@@ -572,13 +813,13 @@ function checkState(state, values, profile, push) {
     // THE VEIL, on every ground it can be drawn over. See VEIL.
     const [floor, ceiling] = VEIL_BAND;
     const veil = values.get(VEIL);
-    const own = withAlpha(values.get('--color-surface-background'), VEIL_ALPHA);
+    const own = withAlpha(values.get(VEIL_GROUND), VEIL_ALPHA);
     say(
-      'the veil is this root at an alpha, not a colour of its own',
+      "the veil is this root's frame at an alpha, not a colour of its own",
       veil === own,
       VEIL,
       VEIL_ALPHA,
-      `"${veil}" is the root's own ground at ${VEIL_ALPHA} ("${own}")`,
+      `"${veil}" is the root's own frame at ${VEIL_ALPHA} ("${own}")`,
     );
     const ink = flatten(veil, colour('--color-text-primary'));
     for (const [name, rgb] of opaque) {
@@ -650,58 +891,53 @@ function checkState(state, values, profile, push) {
         );
       }
     }
-    // The resting glyph has a band rather than a floor, for the same reason
-    // --color-text-muted does anywhere: it is decoration, aria-hidden beside
-    // the word that carries the meaning, and a step that crept up to the fact
-    // floor would invite itself into a row that means something. What it must
-    // not do is vanish, so the band is asserted from both ends on the rail's
-    // own ground, which is the only one it is ever drawn on.
-    const glyph = contrast(colour('--color-text-muted'), rail);
+    // THE ROW THE READER IS ON, found as a card is. See RAIL_CURRENT_ROW.
+    const [fill, line] = RAIL_CURRENT_ROW;
+    const current = rows.get('the row the reader is on');
+    const lift = deltaE(current, rail);
+    say(
+      "the rail's current row lifts off the rail",
+      lift >= RAIL_CURRENT_LIFT,
+      `${fill} on ${RAIL_GROUND}`,
+      lift,
+      `dE ${lift.toFixed(2)} >= ${RAIL_CURRENT_LIFT}`,
+    );
+    const drawn = deltaE(flatten(values.get(line), current), current);
     say(
-      "the rail's resting glyph stays decoration",
-      glyph > 2.8 && glyph < 4.5,
-      '--color-text-muted',
-      glyph,
-      `2.8 < ${glyph.toFixed(2)}:1 < 4.5 on the rail`,
+      "the hairline round the rail's current row is visible on it",
+      drawn >= HAIRLINE_DE,
+      `${line} on ${fill}`,
+      drawn,
+      `dE ${drawn.toFixed(2)} >= ${HAIRLINE_DE}`,
     );
   }
 
-  for (const [set, floor, adjacent, rule] of [
-    [PHASE, 10, false, 'phase hues stay separable'],
-    [STATUS, 10, false, 'status hues stay separable'],
-    [DATA, 9, true, 'adjacent data hues stay separable'],
+  for (const [set, floor, normal, adjacent, rule] of [
+    [STATUS, 10, 10, false, 'status hues stay separable'],
+    [DATA, DATA_ADJACENT_DE, DATA_ADJACENT_NORMAL_DE, true, 'adjacent data hues stay separable'],
   ]) {
     // ADJACENT, not every pair, for the data ramp: a legend reader
     // distinguishes series 2 from series 3 because they sit next to each
-    // other, and demanding every pair of six be far apart is what forces a
-    // palette to spread until it is ugly.
+    // other, and demanding every pair be far apart is what forces a palette
+    // to spread until it is ugly. Its second floor is the normal-vision one;
+    // see DATA_ADJACENT_NORMAL_DE.
     const pairs = adjacent
       ? set.slice(0, -1).map((name, i) => [name, set[i + 1]])
       : set.flatMap((name, i) => set.slice(i + 1).map((other) => [name, other]));
+    const floors = normal > floor ? `${normal} normal, ${floor} every vision` : `${floor}`;
     for (const [a, b] of pairs) {
       const measured = separation(colour(a), colour(b));
-      say(rule, Math.min(...measured) >= floor, `${a} vs ${b}`, Math.min(...measured), `dE ${describe(measured)} >= ${floor}`);
-    }
-  }
-
-  // A phase tag must not be read as a status badge beside it. Measured under
-  // every vision: the first draft of this palette put an onboarding tag dE 3.1
-  // from an info badge for a deuteranopic reader and passed under normal
-  // vision alone.
-  for (const phase of PHASE) {
-    for (const status of STATUS) {
-      const measured = separation(colour(phase), colour(status));
-      const ok = measured[0] >= CROSS_NORMAL && Math.min(measured[1], measured[2]) >= CROSS_DICHROMAT;
-      say('a phase hue clears the status family', ok, `${phase} vs ${status}`, Math.min(...measured), `dE ${describe(measured)} >= ${CROSS_NORMAL} normal, ${CROSS_DICHROMAT} dichromat`);
+      const ok = Math.min(...measured) >= floor && measured[0] >= normal;
+      say(rule, ok, `${a} vs ${b}`, Math.min(...measured), `dE ${describe(measured)} >= ${floors}`);
     }
   }
 
   // Red means "this broke" everywhere in a product. A chart series that
   // happens to be red says so too, to a reader who is scanning for it, and
   // THAT READER IS OFTEN THE DICHROMAT ONE: red and green collapse onto one
-  // axis for them, so a chart's green series is the likeliest thing in the
-  // whole palette to be read as failure. Measured under normal vision alone
-  // this rule passed at dE 24.0 while the light ramp's fourth series sat 6.0
+  // axis for them, so a chart's aqua or orange series is the likeliest thing
+  // in the whole palette to be read as failure. Measured under normal vision
+  // alone this rule once passed at dE 24.0 while a green fourth series sat 6.0
   // from the danger red under deuteranopia.
   for (const name of DATA) {
     const measured = separation(colour(name), colour('--color-feedback-danger'));
@@ -709,11 +945,13 @@ function checkState(state, values, profile, push) {
     say('no data hue collides with danger', ok, name, Math.min(...measured), `dE ${describe(measured)} >= ${DANGER_NORMAL} normal, ${DANGER_DICHROMAT} dichromat`);
   }
 
-  // "The accent is the most saturated hue" cannot be kept on this palette:
-  // danger, both outer phase hues and two data hues out-saturate it. What the
-  // original rule was protecting is that nothing else reads as the selection,
-  // and that is a distance, not a saturation ranking.
-  for (const name of [...PHASE, ...STATUS, ...DATA]) {
+  // "The accent is the most saturated hue" was a rule once, and was dropped
+  // when danger, both outer phase hues and two data hues out-saturated the
+  // indigo it was. It happens to hold of the violet (chroma 23.7 dark, 24.0
+  // light, above every state and series), but a ranking is still not what
+  // protects the selection: nothing else may READ as it, and that is a
+  // distance, measured here under every vision.
+  for (const name of [...STATUS, ...DATA]) {
     const measured = separation(colour(name), colour('--color-brand-accent'));
     const ok = measured[0] >= ACCENT_NORMAL && Math.min(measured[1], measured[2]) >= ACCENT_DICHROMAT;
     say('no hue is read as the accent', ok, name, Math.min(...measured), `dE ${describe(measured)} >= ${ACCENT_NORMAL} normal, ${ACCENT_DICHROMAT} dichromat`);
@@ -729,7 +967,7 @@ function checkState(state, values, profile, push) {
     const fromGround = deltaE(selected, rgb);
     const fromHover = deltaE(selected, hovered);
     const ok = fromGround >= deltaE(hovered, rgb) && fromHover >= 3;
-    say('the selected tint outreads the hover overlay', ok, name, Math.min(fromGround - deltaE(hovered, rgb), fromHover), `dE ${fromGround.toFixed(2)} from the ground (hover ${deltaE(hovered, rgb).toFixed(2)}), dE ${fromHover.toFixed(2)} apart`);
+    say('the selected tint outreads the hover overlay', ok, `--color-brand-accent-soft on ${name}`, Math.min(fromGround - deltaE(hovered, rgb), fromHover), `dE ${fromGround.toFixed(2)} from the ground (hover ${deltaE(hovered, rgb).toFixed(2)}), dE ${fromHover.toFixed(2)} apart`);
   }
 
   {
@@ -740,13 +978,24 @@ function checkState(state, values, profile, push) {
     say('a control boundary clears 3:1', low.ratio >= 3, '--color-border-control', low.ratio, `${low.ratio.toFixed(2)}:1 (worst on ${low.name})`);
   }
 
-  // Glass carries chrome; anything carrying words sits on an opaque surface.
-  // The declared worst backdrop is the brand-primary fill, which a panned
-  // canvas can put under a floating panel.
-  const backdrops = [['the brand-primary fill', flatten(values.get('--color-brand-primary'), ground)], ...opaque];
+  // Glass is the ground of what floats OVER CONTENT rather than over
+  // interface: a canvas's bars and notes, and a chart's reading, which stands
+  // beside the mark it reads and so over its neighbours. Each carries words,
+  // so every text step is held to 4.5:1 on the composite. The declared worst
+  // backdrop is the INVERSE ground, the far end of the palette from the glass
+  // itself, which is as far as anything under a floating panel can pull the
+  // composite; the accent fill, the primary action on a canvas, and every data
+  // hue a chart paints (the residual included) are measured by name beside it,
+  // so the reading over a column is a measured case rather than an inference.
+  const backdrops = [
+    ['the inverse ground', colour('--color-surface-inverse')],
+    ['the accent fill', colour('--color-brand-accent')],
+    ...[...DATA, '--color-data-other'].map((name) => [name, colour(name)]),
+    ...opaque,
+  ];
   for (const [name, backdrop] of backdrops) {
     const glass = flatten(values.get('--color-surface-glass'), backdrop);
-    for (const step of ['--color-text-secondary', '--color-text-tertiary']) {
+    for (const step of ['--color-text-primary', '--color-text-secondary', '--color-text-tertiary']) {
       const ratio = contrast(colour(step), glass);
       say('text on glass clears 4.5:1', ratio >= 4.5, `${step} over ${name}`, ratio, `${ratio.toFixed(2)}:1`);
     }
@@ -759,12 +1008,39 @@ function checkState(state, values, profile, push) {
     say('the neutral ramp stays neutral', measured <= 2.2, name, measured, `chroma ${measured.toFixed(2)} <= 2.2`);
   }
 
+  // THE OVERLAY STEPS. See OVERLAY_STEPS.
+  for (const [rule, overlay, beneath] of OVERLAY_STEPS) {
+    for (const [name, rgb] of opaque) {
+      const from = beneath === null ? rgb : flatten(values.get(beneath), rgb);
+      const measured = deltaE(flatten(values.get(overlay), rgb), from);
+      say(
+        rule,
+        measured >= OVERLAY_DE,
+        `${overlay} on ${name}`,
+        measured,
+        `dE ${measured.toFixed(2)} >= ${OVERLAY_DE} from ${beneath === null ? 'the rung' : `${beneath} on it`}`,
+      );
+    }
+  }
+
+  // THE LADDER. See RUNG_STEPS.
+  for (const [rule, upper, lower, floor] of RUNG_STEPS) {
+    const measured = deltaE(colour(upper), colour(lower));
+    say(rule, measured >= floor, `${upper} over ${lower}`, measured, `dE ${measured.toFixed(2)} >= ${floor}`);
+  }
   {
-    // "The ground is lifted off pure white" re-expressed: uilet's light page
-    // IS white, with grey cards on it, so what has to hold is that the card
-    // differs from the page.
-    const measured = deltaE(flatten(values.get('--color-surface-subtle'), ground), ground);
-    say('the card differs from the page', measured >= 3, '--color-surface-subtle', measured, `dE ${measured.toFixed(1)} >= 3`);
+    // The other half of the card's step. See CARD_HAIRLINE.
+    const [line, card, sheet] = CARD_HAIRLINE;
+    for (const side of [card, sheet]) {
+      const measured = deltaE(colour(line), colour(side));
+      say(
+        'the hairline that finds a card is visible on both sides of it',
+        measured >= HAIRLINE_DE,
+        `${line} on ${side}`,
+        measured,
+        `dE ${measured.toFixed(2)} >= ${HAIRLINE_DE}`,
+      );
+    }
   }
 }
 
@@ -777,17 +1053,22 @@ const describe = (measured) => measured.map((value, i) => `${VISIONS[i].slice(0,
 function checkStructure(sources, states, push) {
   const say = (rule, ok, subject, detail) => push({ state: 'the token files', rule, ok, subject, value: null, detail });
 
+  const { dark: darkBlock, lightMedia, lightAttribute: lightBlock } = themeBlocks(sources.themesSource);
+
   // A colour whose only definition is inside the theme layer is a colour that
-  // is missing for an application that imports the token layer alone.
-  const themed = [...states.light.keys()].filter((name) => name.startsWith('--color-') || name.startsWith('--shadow-'));
+  // is missing for an application that imports the token layer alone. Read
+  // off the three blocks themselves, so a slot only one of them declares is
+  // still asked about.
+  const themed = [...new Set([...darkBlock.keys(), ...lightMedia.keys(), ...lightBlock.keys()])].filter(
+    (name) => name.startsWith('--color-') || name.startsWith('--shadow-'),
+  );
   const missing = themed.filter((name) => !states.base.has(name));
   say('every themed token has a value on the bare :root of tokens.css', missing.length === 0, 'tokens.css', missing.length === 0 ? 'none missing' : `missing: ${missing.join(', ')}`);
 
   // The measured rules cannot catch a missing LIGHT slot: the token still has
-  // a value, inherited from tokens.css, and that value is the dark one. So
-  // parity is asserted directly.
-  const lightBlock = cascade([sources.themesSource], (block) => block.atRule === null && block.selector === ':root');
-  const darkBlock = cascade([sources.themesSource], (block) => block.atRule === null && block.selector === DARK_ATTRIBUTE_SELECTOR);
+  // a value, inherited from the dark root under it, and that value is the dark
+  // one. Nor a missing DARK slot, which inherits the marketing palette's from
+  // tokens.css. So parity is asserted directly.
   const onlyLight = [...lightBlock.keys()].filter((name) => !darkBlock.has(name));
   const onlyDark = [...darkBlock.keys()].filter((name) => !lightBlock.has(name));
   say(
@@ -797,14 +1078,17 @@ function checkStructure(sources, states, push) {
     onlyLight.length === 0 && onlyDark.length === 0 ? 'the two key sets match' : `light only: ${onlyLight.join(', ') || 'none'}; dark only: ${onlyDark.join(', ') || 'none'}`,
   );
 
-  // The dark palette is written twice on purpose, once so the system setting
+  // The light palette is written twice on purpose, once so the system setting
   // works and once so an explicit choice wins in both directions. A value that
-  // drifts between them means the toggle changes colours the system setting
-  // does not.
-  const media = cascade([sources.themesSource], (block) => block.atRule === DARK_MEDIA && block.selector === DARK_MEDIA_SELECTOR);
-  say('the dark media block is present', media.size > 0, 'themes.css', `${media.size} declarations`);
-  const drift = [...media].filter(([name, value]) => darkBlock.get(name) !== value).map(([name, value]) => `${name}: ${value} vs ${darkBlock.get(name)}`);
-  say('the two dark blocks agree', drift.length === 0, 'themes.css', drift.length === 0 ? 'no drift' : drift.join('; '));
+  // drifts between them means the toggle paints colours the system setting
+  // does not, and a slot one of them lacks is painted DARK in that one alone,
+  // so the comparison runs from both sides: a slot missing from either block
+  // is drift, not agreement.
+  say('the light media block is present', lightMedia.size > 0, 'themes.css', `${lightMedia.size} declarations`);
+  const drift = [...new Set([...lightMedia.keys(), ...lightBlock.keys()])]
+    .filter((name) => lightMedia.get(name) !== lightBlock.get(name))
+    .map((name) => `${name}: ${lightMedia.get(name) ?? 'undeclared'} by media query vs ${lightBlock.get(name) ?? 'undeclared'} by attribute`);
+  say('the two light blocks agree', drift.length === 0, 'themes.css', drift.length === 0 ? 'no drift' : drift.join('; '));
 
   // A dark-tuned shadow on a white page is a smudge, so every step is declared
   // in both blocks rather than inherited from the token layer, AND the two
@@ -841,14 +1125,15 @@ function checkStructure(sources, states, push) {
  * Measure the whole rule table over one built pair of stylesheets.
  * Returns every check with its measured value, and the failing subset.
  */
-export function runPalette({ tokens, themes }) {
-  const states = paletteStates({ tokens, themes });
+export function runPalette(sources) {
+  const sheets = sheetsOf(sources);
+  const states = statesOf(sheets);
   const checks = [];
   const push = (check) => checks.push(check);
   for (const [name, values] of Object.entries(states)) {
     checkState(name, values, name === 'base' ? 'base' : 'full', push);
   }
-  checkStructure({ themesSource: { name: 'themes.css', css: themes } }, states, push);
+  checkStructure({ themesSource: sheets.themes }, states, push);
   return { states, checks, failures: checks.filter((check) => !check.ok) };
 }