@crewlethq/tokens 0.6.0 → 0.6.1

package/README.md

@@ -39,6 +39,15 @@ const accent = color.brand.accent;
 CSS variables follow Style Dictionary's `--{group}-{path}` convention,
 for example `var(--color-brand-accent)` or `var(--spacing-4)`.
 
+## Changed in 0.6.1: the dark text ramp
+
+In 0.6.0 the dark primary and tertiary text steps sat 1.98:1 apart, so a word a screen dims from the first step to the third (a calendar's days from the neighbouring month) read as a rounding rather than a step. The dark primary is lifted dE 0.30, and the palette suite now holds the step in every state.
+
+| What changed | What to change | Details |
+| --- | --- | --- |
+| `--color-text-primary` in dark is `#e7eaf3`. It was `#e6e9f2`. The fit placed the danger fill, its hover and the third chart series one 8-bit step from their 0.6.0 values beside it. | Nothing, for a stylesheet that reads the tokens. | [Surfaces](#surfaces) |
+| In `@crewlethq/tokens/test/palette`, the rule `a dimmed word is a step from the word being read` is new, with the export `DIMMED_TEXT`: the primary and tertiary text steps clear 2:1 between themselves. | Nothing, unless an application's own palette override draws the two steps closer. | [The palette suite](#the-palette-suite) |
+
 ## Changed in 0.6.0: the default palette
 
 The dark and light themes take the default palette approved on 4 October 2026: blue-black neutrals, a violet accent (`#725be6` in dark, `#735af2` in light) and a cyan working state. No token is renamed or removed; the themed values change. [`tokens/intent.json`](./tokens/intent.json) records the approved values, and every value the palette suite's floors moved names its approved value, the distance and the measurement in its own comment. The marketing root, `tokens.css` on its own, keeps its values.
@@ -165,6 +174,7 @@ Where an approved value failed one of the suite's floors, the floor won and the
 | `--color-border-default` dark | `#14151a` | `#191b20` | 2.53 | dE 0.99 off the card, under 3 |
 | `--color-border-default` light | `#f5f5f5` | `#e7e8ec` | 3.92 | dE 0.84 off the sheet and 1.02 off raised, under 3 |
 | `--color-border-strong` dark | `#2b3245` | `#2d3448` | 0.85 | dE 2.43 as a raised chip's edge on an inset well inside a raised surface, under 3 |
+| `--color-text-primary` dark | `#e6e9f2` | `#e7eaf3` | 0.30 | 1.98:1 from the tertiary step, under the 2:1 a dimmed word keeps |
 | `--color-text-tertiary` dark | `#8a91a6` | `#9fa7bc` | 7.08 | 3.45:1 on a pressed row inside a raised surface |
 | `--color-text-tertiary` light | `#5a6075` | `#585e73` | 0.71 | 4.37:1 on a pressed row on the frame |
 | `--color-text-muted` light | `#8a90a3` | `#878d9f` | 1.04 | 2.69:1 on the frame, under the decoration band |
@@ -393,7 +403,7 @@ Both families are the approved palette's hues, or a move from them that the pale
 
 | Token | Palette | Design | Shipped | Moved (dE) | Because |
 | --- | --- | --- | --- | --- | --- |
-| `--color-feedback-danger` | dark | `#f0506e` | `#d93855` | 6.66 | white on it 3.46:1; dE 5.9 from done under deuteranopia; dE 5.1 from the chart green under deuteranopia |
+| `--color-feedback-danger` | dark | `#f0506e` | `#d73756` | 7.04 | white on it 3.46:1; dE 5.9 from done under deuteranopia; dE 4.9 from the chart green under deuteranopia |
 | `--color-feedback-danger` | light | `#cc2a4a` | `#b9112c` | 5.75 | dE 7.2 from done under deuteranopia; dE 6.9 from the chart green under deuteranopia |
 | `--color-feedback-warning` | dark | `#f0b429` | `#f0b425` | 0.17 | dE 9.8 from done under protanopia |
 | `--color-feedback-warning` | light | `#ffb300` | `#c17300` | 19.65 | 1.52:1 as a mark on the frame |
@@ -405,7 +415,7 @@ Both families are the approved palette's hues, or a move from them that the pale
 | `--color-data-1` | dark | `#3c7fec` | `#4d8ff6` | 4.75 | dE 9.7 from the accent under normal vision and 3.3 under deuteranopia |
 | `--color-data-1` | light | `#4381e5` | `#5c76c3` | 5.71 | dE 4.5 from the accent under deuteranopia |
 | `--color-data-2` | light | `#ed810c` | `#dd5920` | 9.59 | 2.29:1 as a mark on the frame |
-| `--color-data-3` | dark | `#2fa24e` | `#26b583` | 7.39 | dE 0.9 from danger under deuteranopia; dE 2.6 from the orange under protanopia |
+| `--color-data-3` | dark | `#2fa24e` | `#26b582` | 7.30 | dE 0.6 from danger under deuteranopia; dE 2.6 from the orange under protanopia |
 | `--color-data-3` | light | `#2f9d4c` | `#00956e` | 5.75 | 2.94:1 as a mark on the frame; dE 5.6 from the yellow under protanopia; dE 7.9 from danger under deuteranopia |
 | `--color-data-4` | light | `#edb302` | `#c27600` | 17.33 | 1.61:1 as a mark on the frame: a yellow dark enough to be seen on a light page is an ochre |
 
@@ -413,8 +423,8 @@ 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.52: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`.
-- **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.9 from the shipped red under deuteranopia.
+- **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`.
+- **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.
 
 The marketing root keeps its own state and series values (`tokens/color.json`), which the suite measures in the `base` state.
@@ -438,7 +448,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), 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, 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/dist/css/themes.css

@@ -25,7 +25,7 @@
   --color-surface-scrim: rgba(0, 0, 0, 0.6);
   --color-surface-veil: rgba(7, 8, 13, 0.65);
   --color-surface-inverse: #fcfcfc;
-  --color-text-primary: #e6e9f2;
+  --color-text-primary: #e7eaf3;
   --color-text-secondary: #a9b0c3;
   --color-text-tertiary: #9fa7bc;
   --color-text-muted: #5a6176;
@@ -48,8 +48,8 @@
   --color-feedback-success-ink: #74dcae;
   --color-feedback-warning: #f0b425;
   --color-feedback-warning-ink: #f6cd72;
-  --color-feedback-danger: #d93855;
-  --color-feedback-danger-hover: #ce2c4d;
+  --color-feedback-danger: #d73756;
+  --color-feedback-danger-hover: #cc2b4e;
   --color-feedback-danger-ink: #ff9fb0;
   --color-feedback-info: #61d0ff;
   --color-feedback-info-ink: #8ad6fb;
@@ -57,13 +57,13 @@
   --color-feedback-success-line: rgba(52, 201, 139, 0.3);
   --color-feedback-warning-soft: rgba(240, 180, 37, 0.12);
   --color-feedback-warning-line: rgba(240, 180, 37, 0.3);
-  --color-feedback-danger-soft: rgba(217, 56, 85, 0.12);
-  --color-feedback-danger-line: rgba(217, 56, 85, 0.3);
+  --color-feedback-danger-soft: rgba(215, 55, 86, 0.12);
+  --color-feedback-danger-line: rgba(215, 55, 86, 0.3);
   --color-feedback-info-soft: rgba(97, 208, 255, 0.12);
   --color-feedback-info-line: rgba(97, 208, 255, 0.3);
   --color-data-1: #4d8ff6;
   --color-data-2: #e67737;
-  --color-data-3: #26b583;
+  --color-data-3: #26b582;
   --color-data-4: #eab106;
   --color-data-other: #6a7186;
   --color-node-purple: #8e6ed4;

package/dist/themes.d.ts

@@ -141,7 +141,7 @@ export declare const themes: {
                 readonly inverse: "#fcfcfc";
             };
             readonly text: {
-                readonly primary: "#e6e9f2";
+                readonly primary: "#e7eaf3";
                 readonly secondary: "#a9b0c3";
                 readonly tertiary: "#9fa7bc";
                 readonly muted: "#5a6176";
@@ -170,8 +170,8 @@ export declare const themes: {
                 readonly successInk: "#74dcae";
                 readonly warning: "#f0b425";
                 readonly warningInk: "#f6cd72";
-                readonly danger: "#d93855";
-                readonly dangerHover: "#ce2c4d";
+                readonly danger: "#d73756";
+                readonly dangerHover: "#cc2b4e";
                 readonly dangerInk: "#ff9fb0";
                 readonly info: "#61d0ff";
                 readonly infoInk: "#8ad6fb";
@@ -179,15 +179,15 @@ export declare const themes: {
                 readonly successLine: "rgba(52, 201, 139, 0.3)";
                 readonly warningSoft: "rgba(240, 180, 37, 0.12)";
                 readonly warningLine: "rgba(240, 180, 37, 0.3)";
-                readonly dangerSoft: "rgba(217, 56, 85, 0.12)";
-                readonly dangerLine: "rgba(217, 56, 85, 0.3)";
+                readonly dangerSoft: "rgba(215, 55, 86, 0.12)";
+                readonly dangerLine: "rgba(215, 55, 86, 0.3)";
                 readonly infoSoft: "rgba(97, 208, 255, 0.12)";
                 readonly infoLine: "rgba(97, 208, 255, 0.3)";
             };
             readonly data: {
                 readonly "1": "#4d8ff6";
                 readonly "2": "#e67737";
-                readonly "3": "#26b583";
+                readonly "3": "#26b582";
                 readonly "4": "#eab106";
                 readonly other: "#6a7186";
             };

package/dist/themes.js

@@ -142,7 +142,7 @@ export const themes = {
                 "inverse": "#fcfcfc"
             },
             "text": {
-                "primary": "#e6e9f2",
+                "primary": "#e7eaf3",
                 "secondary": "#a9b0c3",
                 "tertiary": "#9fa7bc",
                 "muted": "#5a6176",
@@ -171,8 +171,8 @@ export const themes = {
                 "successInk": "#74dcae",
                 "warning": "#f0b425",
                 "warningInk": "#f6cd72",
-                "danger": "#d93855",
-                "dangerHover": "#ce2c4d",
+                "danger": "#d73756",
+                "dangerHover": "#cc2b4e",
                 "dangerInk": "#ff9fb0",
                 "info": "#61d0ff",
                 "infoInk": "#8ad6fb",
@@ -180,15 +180,15 @@ export const themes = {
                 "successLine": "rgba(52, 201, 139, 0.3)",
                 "warningSoft": "rgba(240, 180, 37, 0.12)",
                 "warningLine": "rgba(240, 180, 37, 0.3)",
-                "dangerSoft": "rgba(217, 56, 85, 0.12)",
-                "dangerLine": "rgba(217, 56, 85, 0.3)",
+                "dangerSoft": "rgba(215, 55, 86, 0.12)",
+                "dangerLine": "rgba(215, 55, 86, 0.3)",
                 "infoSoft": "rgba(97, 208, 255, 0.12)",
                 "infoLine": "rgba(97, 208, 255, 0.3)"
             },
             "data": {
                 "1": "#4d8ff6",
                 "2": "#e67737",
-                "3": "#26b583",
+                "3": "#26b582",
                 "4": "#eab106",
                 "other": "#6a7186"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/tokens",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "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

@@ -90,6 +90,12 @@ export const OPAQUE_SURFACES: readonly string[];
  */
 export const TEXT_STEPS: readonly (readonly [string, number])[];
 
+/**
+ * A dimmed word against the word being read, as [read, dimmed, contrast]: the
+ * two text steps clear that contrast between themselves.
+ */
+export const DIMMED_TEXT: readonly [string, string, number];
+
 /**
  * The steps of the ladder, each as [rule, upper rung, lower rung, the dE the
  * upper rung has to sit off the lower one].

package/test/palette.mjs

@@ -155,6 +155,18 @@ export const TEXT_STEPS = [
   ['--color-text-tertiary', 4.5],
 ];
 
+/**
+ * A DIMMED word against the word being read, as [read, dimmed, contrast]: the
+ * primary step and the tertiary one. A screen dims what is not its subject by
+ * dropping it from the first step to the third (a calendar's days from the
+ * neighbouring month, a resolved row under an open one), and both are facts,
+ * so each clears its own floor above. What this holds is that the two are a
+ * STEP apart rather than a rounding: 2:1 between the inks themselves. A ramp
+ * squeezed from both ends, a dimmer primary over a tertiary lifted for its
+ * floor on a pressed raised row, can keep every floor and lose the step.
+ */
+export const DIMMED_TEXT = ['--color-text-primary', '--color-text-tertiary', 2];
+
 /** A hue used as TEXT on a surface. */
 export const INK_STEPS = [
   '--color-brand-accent-ink',
@@ -681,6 +693,12 @@ function checkState(state, values, profile, push) {
     const low = worst(colour(name), all);
     say('text step clears its floor', low.ratio >= floor, name, low.ratio, `${low.ratio.toFixed(2)}:1 >= ${floor} (worst on ${low.name})`);
   }
+  {
+    // A dimmed word against the word being read. See DIMMED_TEXT.
+    const [read, dimmed, floor] = DIMMED_TEXT;
+    const ratio = contrast(colour(read), colour(dimmed));
+    say('a dimmed word is a step from the word being read', ratio >= floor, `${read} vs ${dimmed}`, ratio, `${ratio.toFixed(2)}:1 >= ${floor}`);
+  }
 
   {
     // It exists for a hairline glyph and a disabled affordance. The assertion

package/test/palette.test.mjs

@@ -22,6 +22,7 @@ import {
   DATA_ADJACENT_DE,
   DATA_ADJACENT_NORMAL_DE,
   describeFailure,
+  DIMMED_TEXT,
   fromOklab,
   hex,
   oklabToLinear,
@@ -156,6 +157,17 @@ describe('the palette', () => {
     assert.ok(onBase.includes('text step clears its floor'));
   });
 
+  test('a dimmed word is measured in every state, and one a rounding from the word being read is caught', () => {
+    const DIMMED_RULE = 'a dimmed word is a step from the word being read';
+    assert.deepEqual(DIMMED_TEXT, ['--color-text-primary', '--color-text-tertiary', 2]);
+    for (const state of STATES) {
+      assert.equal(checks.filter((check) => check.state === state && check.rule === DIMMED_RULE).length, 1, state);
+    }
+    // The tertiary step lifted onto the secondary one: each clears its own
+    // floor, and the step between the first and the third is gone.
+    assert.deepEqual(failuresAfter('dark', '--color-text-tertiary', typed.dark.color.text.secondary), [DIMMED_RULE]);
+  });
+
   test('the theme layer is dark first, and wins over the token layer', () => {
     // themes.css is imported second on purpose. If that ever stopped being
     // true the dark state would silently be the marketing palette; and if the
@@ -444,13 +456,13 @@ describe('the state and chart hues', () => {
     // 3.46:1, and a deuteranopic reader finds it dE 5.9 from done. It also
     // sits under the floors the reserved red keeps from the orange (11.4
     // under normal vision, 6.8 under deuteranopia) and from the green
-    // (deuteranopia 5.1).
+    // (deuteranopia 4.9).
     const failing = checksAfter('dark', '--color-feedback-danger', '#f0506e').map(summary);
     assert.deepEqual(failing, [
       `${LABEL_RULE}: --color-text-on-accent on --color-feedback-danger: 3.46:1 (worst on --color-feedback-danger on --color-surface-frame)`,
       `${STATUS_RULE}: --color-feedback-success vs --color-feedback-danger: dE n34.5/p18.6/d5.9 >= 10`,
       `${DANGER_RULE}: --color-data-2: dE n11.4/p9.9/d6.8 >= 14 normal, 8 dichromat`,
-      `${DANGER_RULE}: --color-data-3: dE n32.4/p12.7/d5.1 >= 14 normal, 8 dichromat`,
+      `${DANGER_RULE}: --color-data-3: dE n32.5/p12.7/d4.9 >= 14 normal, 8 dichromat`,
     ]);
   });
 
@@ -465,12 +477,12 @@ describe('the state and chart hues', () => {
   test('a neighbour that clears every dichromat floor is still caught under normal vision', () => {
     // A teal fourth series beside the aqua green third: dE 13.0 apart under
     // protanopia and 12.3 under deuteranopia, which the dichromat floor alone
-    // passes, and 12.9 under normal vision, two shades of one hue to every
+    // passes, and 13.0 under normal vision, two shades of one hue to every
     // reader who sees colour. Nothing else it touches fails, so the
     // normal-vision floor is the only thing standing between it and a chart.
     const failing = checksAfter('dark', '--color-data-4', '#008c87');
     assert.deepEqual(failing.map(summary), [
-      `${ADJACENT_RULE}: --color-data-3 vs --color-data-4: dE n12.9/p13.0/d12.3 >= ${DATA_ADJACENT_NORMAL_DE} normal, ${DATA_ADJACENT_DE} every vision`,
+      `${ADJACENT_RULE}: --color-data-3 vs --color-data-4: dE n13.0/p13.0/d12.3 >= ${DATA_ADJACENT_NORMAL_DE} normal, ${DATA_ADJACENT_DE} every vision`,
     ]);
     assert.ok(failing[0].value >= DATA_ADJACENT_DE, 'the mutation has to clear the dichromat floor, or it proves nothing about the normal one');
   });