@tristan2828/ui-foundation 3.26.0 → 3.27.0

package/conventions/docs/design-language.md

@@ -125,30 +125,38 @@ that lets people pick a colour stores the slot's name (an enum of
 `category-1` … `category-12` in its contract, with a CHECK on the column)
 and maps each to its whole class the same way.
 
-| Slots | What they are | Near info's blue |
-|---|---|---|
-| 1–8 | eight hues, about 25° apart | 1, 6, 8 |
-| 9–12 | deeper shades of four of those hues: 9 teal (4's), 10 plum (5's), 11 olive (3's), 12 violet (2's) | none |
+| Slot | Colour | Slot | Colour |
+|---|---|---|---|
+| 1 | blue (near info) | 7 | teal |
+| 2 | orange | 8 | red |
+| 3 | green | 9 | gold |
+| 4 | purple | 10 | navy |
+| 5 | pink | 11 | lime |
+| 6 | brown | 12 | magenta |
+
+Every slot is a colour with its own name: no two blues, no two teals. So
+in a picker, label each with its name ("Orange"), not its number.
 
 Five things about them:
 
-- **The hues avoid red, green and amber**, which the tones already spend. A
-  category drawn in red reads as "this one is bad" even when nothing is
-  wrong. Info's blue came later, and slots 1, 6 and 8 sit near it: a table
-  that shows an info badge keeps its categories off those three, so a blue
-  genre isn't read as "notice this". That still leaves nine.
-- **They are ordered by distinctness, not by hue angle.** An app using
-  three categories gets three obviously different colours. Past about five,
-  hue alone stops separating them — slots 3 and 7 are both yellow-greens —
-  so the glyph has to carry the meaning and the colour only reinforces it.
-- **Past eight, it's lightness, not hue.** The hues left between the tones
-  are spent, so slots 9–12 are darker shades of four of the first eight, in
-  both themes. Each is at least as far from every other slot as the first
-  eight are from each other (a unit test holds every pair to it), but a
-  deep shade beside its own hue is told apart by how dark it is, which
-  reads less readily than a hue. Use them for a set that really has more
-  than eight values, and keep a shade away from its own hue where you can
-  choose (10 isn't 5's neighbour in a list).
+- **Chosen to be told apart, not spaced by hue.** They use the whole hue
+  circle and vary lightness and chroma as well, so a light lime sits next
+  to a deep navy rather than two mid-tone hues 25° apart. Every pair is at
+  least 17.9 apart in CIEDE2000 ΔE (the perceived difference; 10 and up
+  reads as a different colour), in both themes. A unit test holds every
+  pair to 15.
+- **A category is not a tone.** Red, orange, brown and green are slots
+  because a category is a tinted glyph beside its name, never a status
+  badge, and doesn't read as good or bad there. Where it still could, keep
+  them apart: a column that shows tone badges doesn't tint its categories
+  in the same column, and a table that shows an info badge keeps its
+  categories off slot 1, the one near info's blue.
+- **They are ordered for small sets.** An app using the first few gets the
+  most separable few, for everyone: the first six also stay apart (ΔE 10
+  or more, tested) for readers with deuteranopia or protanopia, the common
+  red-green deficiencies. Past six, some pairs merge for those readers
+  (gold and lime are nearly one colour), so the glyph and the name carry
+  the meaning and the colour only reinforces it.
 - **Tint the glyph, never fill behind text.** The label stays
   `text-foreground`, so readability never depends on the hue. A slot used
   as a background needs its own contrast check, which nothing here does
@@ -157,12 +165,13 @@ Five things about them:
   non-text minimum in both themes, on the page and on a card (recorded in
   `theme.css`). axe checks text contrast, not icon contrast, so the
   package's Storybook glyph check draws an icon in each slot on both
-  surfaces (`patterns/CategoricalColour`, which also shows them side by
-  side) and fails a change that takes one below 3:1.
+  surfaces (`patterns/CategoricalColour`) and fails a change that takes
+  one below 3:1. Its `SideBySide` story shows both themes at once, under
+  normal vision and simulated deuteranopia and protanopia.
 
 If you find yourself wanting a thirteenth, that is a sign the column should
 be showing a shape or a label rather than more colours: there is no more
-room in hue or lightness that stays readable.
+room that stays readable.
 
 ## Typography
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {

package/styles/theme.css

@@ -66,54 +66,50 @@
    * to a slot in its own columns file, so a new enum value costs a line
    * there rather than three tokens here.
    *
-   * Hues avoid the red and green bands that destructive/success already
-   * spend, and the amber that warning does — a category drawn in red reads
-   * as "bad". The blue slots (1, 6, 8) sit near info's hue, which came
-   * later: a table using info keeps its categories off those three. They are ordered by distinctness, not by hue angle, so an app
-   * using only the first three gets three obviously different colours.
-   * Past about five, hue alone stops separating them and the glyph has to
-   * carry the meaning; see docs/design-language.md. Twelve slots in all.
+   * Chosen to be told apart (#108), not spaced by hue: twelve colours a
+   * person names differently, from the whole hue circle, with lightness and
+   * chroma varied per slot as well as hue. Red, orange, brown and green are
+   * in: a category is a tinted glyph beside its name, never a status badge,
+   * so it doesn't read as a tone (design-language.md says where that still
+   * matters). Slot 1 (blue) sits near info's hue; a table using info keeps
+   * its categories off it.
    *
-   * Ratios are against the page, measured (WCAG 2.x, sRGB), and all clear
-   * the 3:1 non-text minimum in both themes with room to spare (4.5:1 at
-   * the least, slots 9-12 on the dark card). axe does NOT check icon
-   * contrast; the Storybook glyph check re-measures every slot on the
-   * page and on a card (design-language/CategoricalColour).
-   */
-  --category-1-700: oklch(0.5 0.15 240);
-  --category-1-400: oklch(0.78 0.12 240);
-  --category-2-700: oklch(0.5 0.15 300);
-  --category-2-400: oklch(0.78 0.12 300);
-  --category-3-700: oklch(0.5 0.15 95);
-  --category-3-400: oklch(0.78 0.12 95);
-  --category-4-700: oklch(0.5 0.15 190);
-  --category-4-400: oklch(0.78 0.12 190);
-  --category-5-700: oklch(0.5 0.15 330);
-  --category-5-400: oklch(0.78 0.12 330);
-  --category-6-700: oklch(0.5 0.15 265);
-  --category-6-400: oklch(0.78 0.12 265);
-  --category-7-700: oklch(0.5 0.15 120);
-  --category-7-400: oklch(0.78 0.12 120);
-  --category-8-700: oklch(0.5 0.15 215);
-  --category-8-400: oklch(0.78 0.12 215);
-  /*
-   * Slots 9-12 are a second channel, not new hues: the hues left between
-   * the tones' are already spent ~25 degrees apart, so these are deeper
-   * shades of the four that sit furthest from info (teal, plum, olive,
-   * violet), darker than their slot in both themes. Each is at least as
-   * far from its nearest slot (OKLab distance) as slots 1-8 are from each
-   * other; tests/category-slots.test.ts holds every pair to that. A deep
-   * shade of the blues or the yellow-green fell to half that distance, so
-   * twelve is where it stops. Chroma is the most each holds in sRGB.
+   * Every pair is at least 17.9 apart in CIEDE2000 ΔE in both themes (the
+   * hue-spaced slots before them got to 8.8); tests/category-slots.test.ts
+   * holds every pair to 15. They are ordered so the first few stay apart
+   * under deuteranopia and protanopia too (the first six are 12 apart);
+   * past that, the glyph has to carry the meaning for those readers.
+   *
+   * Ratios are against the page, measured (WCAG 2.x, sRGB): all clear the
+   * 3:1 non-text minimum in both themes (3.75:1 at the least, orange and
+   * teal on white). axe does NOT check icon contrast; the Storybook glyph
+   * check re-measures every slot on the page and on a card
+   * (patterns/CategoricalColour).
    */
-  --category-9-700: oklch(0.36 0.06 190);
-  --category-9-400: oklch(0.62 0.1 190);
-  --category-10-700: oklch(0.36 0.12 330);
-  --category-10-400: oklch(0.62 0.15 330);
-  --category-11-700: oklch(0.36 0.07 95);
-  --category-11-400: oklch(0.62 0.12 95);
-  --category-12-700: oklch(0.36 0.14 300);
-  --category-12-400: oklch(0.62 0.17 300);
+  --category-1-700: oklch(0.44 0.11 245); /* blue */
+  --category-1-400: oklch(0.626 0.156 245);
+  --category-2-700: oklch(0.627 0.161 52); /* orange */
+  --category-2-400: oklch(0.722 0.16 52);
+  --category-3-700: oklch(0.492 0.105 152); /* green */
+  --category-3-400: oklch(0.763 0.17 152);
+  --category-4-700: oklch(0.55 0.254 305); /* purple */
+  --category-4-400: oklch(0.772 0.116 305);
+  --category-5-700: oklch(0.615 0.144 7); /* pink */
+  --category-5-400: oklch(0.812 0.102 7);
+  --category-6-700: oklch(0.445 0.1 56); /* brown */
+  --category-6-400: oklch(0.602 0.054 56);
+  --category-7-700: oklch(0.599 0.104 183); /* teal */
+  --category-7-400: oklch(0.849 0.139 183);
+  --category-8-700: oklch(0.503 0.176 27); /* red */
+  --category-8-400: oklch(0.646 0.152 27);
+  --category-9-700: oklch(0.573 0.115 84); /* gold */
+  --category-9-400: oklch(0.87 0.136 84);
+  --category-10-700: oklch(0.362 0.203 279); /* navy */
+  --category-10-400: oklch(0.601 0.164 279);
+  --category-11-700: oklch(0.593 0.121 119); /* lime */
+  --category-11-400: oklch(0.823 0.163 119);
+  --category-12-700: oklch(0.423 0.181 337); /* magenta */
+  --category-12-400: oklch(0.648 0.232 337);
   --blue-500: oklch(0.488 0.243 264.376);
 
   --radius-base: 0.625rem;