@crewlethq/tokens 0.9.0 → 0.11.0

package/README.md

@@ -424,6 +424,7 @@ Every other state and series step ships as approved: the dark inks, dark success
 In light, the yellow series sits beside the warning ochre (`#c27600` and `#c17300`). The approved palette drew the two a few steps apart, and both were darkened onto the same floor, a mark that clears 3:1 on the frame. Nothing in the suite keeps a series from a state other than the reserved red, and a series is read only inside a figure that names it.
 
 - **The danger fill carries a white label**, on a toast's destructive action and on an upload's remove button, so it is dark enough for 4.5:1 in both palettes (4.59:1 dark, 6.61:1 light), and its hover, `--color-feedback-danger-hover`, is a step darker again, the least a reader can see (dE 3.03 dark, 3.02 light). The palette suite holds the hover as it holds the primary action's: `a hovered destructive action is a visible step away from its label`.
+- **A status glyph is held to 3:1 on its fill.** An `Avatar` status badge is the info, warning or danger fill carrying a small glyph in `--color-text-inverse`, the one ink that clears all three in both palettes (white sits at 1.6:1 on the dark info step). The pairs are `MARK_ON_FILL`, measured over every ground as a label is, under `a glyph clears 3:1 on its own fill`: the 3:1 a mark is held to, since a glyph is a shape rather than running text. The tightest is 3.33:1, the inverse ink on the light info step.
 - **The reserved red is kept away from every series**: dE 14 under normal vision and 8 under protanopia and deuteranopia, where red, orange and green fall onto one axis. The approved chart green sat dE 0.6 from the shipped red under deuteranopia.
 - **Neighbouring series** sit dE 9 apart under every vision and dE 15 under normal vision. The second floor is new: on its own, the dichromat floor let a pair sit dE 9 apart for every reader, which to full-colour vision is two shades of one hue.
 
@@ -448,7 +449,7 @@ The marketing root keeps its own state and series values (`tokens/color.json`),
 
 ## The palette suite
 
-`test/palette.mjs` holds the rule table and the colour maths, and `test/palette.test.mjs` runs it over `dist/css` in import order, in every theme state: the base marketing root (`base`), the dark root (`dark`), light by media query (`light (media query)`) and light by attribute (`light (attribute)`), which are the keys `paletteStates()` returns. It measures every text step on every surface it can land on (the four opaque rungs in `OPAQUE_SURFACES`, and the translucent overlays composited over each of them), the step between a word and a dimmed one, every ink on its own soft tint, every fill as a mark, the primary action's three fills under its label and the steps between them, the destructive action's fill and its hover under the same label, the focus ring, the control boundary, the rail's current row, the steps between the rungs, the hairline that finds a card and the strong hairline round a raised chip, whether a hovered and a pressed row can be seen, the hue separations under normal, protan and deuteranopic vision (the states from each other, the chart series from their neighbours and from the danger red, and every hue from the accent), and the structure of the theme file itself. A component suite that measures a colour of its own measures it on `OPAQUE_SURFACES` too, rather than on a list of surface names it keeps itself.
+`test/palette.mjs` holds the rule table and the colour maths, and `test/palette.test.mjs` runs it over `dist/css` in import order, in every theme state: the base marketing root (`base`), the dark root (`dark`), light by media query (`light (media query)`) and light by attribute (`light (attribute)`), which are the keys `paletteStates()` returns. It measures every text step on every surface it can land on (the four opaque rungs in `OPAQUE_SURFACES`, and the translucent overlays composited over each of them), the step between a word and a dimmed one, every ink on its own soft tint, every fill as a mark, each status glyph's ink on its fill, the primary action's three fills under its label and the steps between them, the destructive action's fill and its hover under the same label, the focus ring, the control boundary, the rail's current row, the steps between the rungs, the hairline that finds a card and the strong hairline round a raised chip, whether a hovered and a pressed row can be seen, the hue separations under normal, protan and deuteranopic vision (the states from each other, the chart series from their neighbours and from the danger red, and every hue from the accent), and the structure of the theme file itself. A component suite that measures a colour of its own measures it on `OPAQUE_SURFACES` too, rather than on a list of surface names it keeps itself.
 
 The module is **published**, as `@crewlethq/tokens/test/palette`, so a consumer runs the same rules over the version it installed:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/tokens",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
   "license": "MIT AND OFL-1.1",
   "repository": {

package/test/palette.d.mts

@@ -158,6 +158,11 @@ export const DATA_ADJACENT_NORMAL_DE: number;
  * ACTION_LABEL on it.
  */
 export const ACTION_STEPS: readonly (readonly [string, string, string])[];
+/**
+ * Each state fill with the ink an avatar's status glyph is drawn in on it:
+ * [ink, fill], held to 3:1 over every ground the fill can sit on.
+ */
+export const MARK_ON_FILL: readonly (readonly [string, string])[];
 export const ACTION_LABEL: string;
 export const ACTION_DE: number;
 

package/test/palette.mjs

@@ -235,6 +235,23 @@ export const LABEL_ON_FILL = [
   ['--color-text-inverse', '--color-surface-inverse'],
 ];
 
+/**
+ * A fill with the GLYPH a component draws inside it: an avatar's status badge,
+ * which is a state's fill step carrying a small play, question or stop mark in
+ * the inverse ink. A glyph is a graphic rather than running text, so it is
+ * held to the 3:1 a mark is held to rather than to a label's 4.5:1.
+ *
+ * THE INVERSE INK, because it is the one ink that clears every state fill in
+ * both palettes: white sits under 2:1 on the dark palette's info and warning
+ * steps, and the dark ink under 3:1 on none of them. Each fill is measured
+ * over every ground it can sit on, as a label's is.
+ */
+export const MARK_ON_FILL = [
+  ['--color-text-inverse', '--color-feedback-info'],
+  ['--color-text-inverse', '--color-feedback-warning'],
+  ['--color-text-inverse', '--color-feedback-danger'],
+];
+
 /**
  * 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].
@@ -759,6 +776,11 @@ function checkState(state, values, profile, push) {
     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})`);
   }
 
+  for (const [ink, fill] of MARK_ON_FILL) {
+    const low = worst(colour(ink), opaque.map(([name, rgb]) => [`${fill} on ${name}`, flatten(values.get(fill), rgb)]));
+    say('a glyph clears 3:1 on its own fill', low.ratio >= 3, `${ink} 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);

package/test/palette.test.mjs

@@ -25,6 +25,7 @@ import {
   DIMMED_TEXT,
   fromOklab,
   hex,
+  MARK_ON_FILL,
   oklabToLinear,
   OPAQUE_SURFACES,
   OVERLAY_STEPS,
@@ -418,6 +419,30 @@ describe('the state and chart hues', () => {
   const DESTRUCTIVE_RULE = ACTION_STEPS[2][0];
   const summary = (check) => `${check.rule}: ${check.subject}: ${check.detail}`;
 
+  test('every status glyph is measured on its fill, in every state', () => {
+    // An avatar's status badge is a state fill carrying a glyph. A table that
+    // stopped measuring one of the three would pass the one badge nobody can
+    // read: white on the dark info step is 1.6:1.
+    const GLYPH_RULE = 'a glyph clears 3:1 on its own fill';
+    assert.deepEqual(
+      MARK_ON_FILL.map(([, fill]) => fill),
+      ['--color-feedback-info', '--color-feedback-warning', '--color-feedback-danger'],
+    );
+    for (const state of THEME_STATES) {
+      for (const [ink, fill] of MARK_ON_FILL) {
+        const measured = checks.filter((check) => check.state === state && check.rule === GLYPH_RULE && check.subject === `${ink} on ${fill}`);
+        assert.equal(measured.length, 1, `${state}: ${fill}`);
+        assert.ok(measured[0].ok, `${state}: ${describeFailure(measured[0])}`);
+      }
+    }
+    // And it can fail: white glyphs on the dark info step.
+    const white = checksAfter('dark', '--color-text-inverse', '#ffffff').filter((check) => check.rule === GLYPH_RULE);
+    assert.deepEqual(
+      white.map((check) => check.subject),
+      ['--color-text-inverse on --color-feedback-info', '--color-text-inverse on --color-feedback-warning'],
+    );
+  });
+
   test('the chart ramp is four series, in every theme state and in the typed export', () => {
     // A fifth series would have to sit between two of the four in a hue
     // budget the reserved red and the accent have spent, so it is the