dowel-ui 0.23.0 → 0.25.0

package/dist/theme.css

@@ -80,6 +80,133 @@
   --bad-soft: color-mix(in oklab, var(--bad) 14%, transparent);
   --info-soft: color-mix(in oklab, var(--info) 15%, transparent);
 
+  /* Series colours, for charts.
+   *
+   * Like the status hues and unlike everything else here, these do NOT follow
+   * the product accent - and that is the whole decision. A series is a
+   * property of the data, not of the product showing it; a palette derived
+   * from the accent would paint the same series differently in kilna and in
+   * kasl-server, which is the one thing a series colour must never do.
+   *
+   * Deriving them from the accent was measured, not guessed: rotating the hue
+   * by fixed angles put the best candidate at Delta-E 12.1 from the product's
+   * own accent with adjacent pairs at 9.8, and threw 46 of 152 colours outside
+   * sRGB. The fixed palette does better on both counts.
+   *
+   * The cost of fixing them is stated plainly: 13 of the line's 19 accents sit
+   * within Delta-E 8 of some slot (lyrid 2.7, atlas 3.1, turnout 3.2). A chart
+   * shows one accent, so this is survivable - but it is exactly why identity is
+   * carried by the legend and by direct labels, never by hue on its own. The
+   * components of this block enforce that; it is not advice.
+   *
+   * Assigned in order, 1..8, and never cycled: a ninth series folds into
+   * "other", or the chart becomes small multiples. The order is the
+   * colour-blind-safety mechanism - the worst adjacent pair is Delta-E 8.4
+   * under simulated protanopia - so re-ordering these breaks a gate.
+   *
+   * Slot 8 is the line's own value rather than the reference palette's. The
+   * reference red sat Delta-E 1.9 from `--bad`, which would have let a series
+   * impersonate a status; this one clears every status by 15 and costs
+   * nothing, the worst adjacent pair being unchanged.
+   *
+   * Some slots sit below 3:1 against the surface. That is allowed only because
+   * the relief ships with them: visible values, or the table view.
+   */
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --series-4: #c98500;
+  --series-5: #d55181;
+  --series-6: #008300;
+  --series-7: #9085e9;
+  --series-8: #a3215a;
+
+  /* Magnitude rather than identity: one hue, light to dark. A heatmap cell
+   * reads this. The lightest step is allowed to recede toward the surface,
+   * because "near zero" should; an ordered-but-discrete scale (tiers, funnel
+   * stages) starts at 300 instead, where the contrast still holds. */
+  --scale-100: #0d366b;
+  --scale-200: #184f95;
+  --scale-300: #256abf;
+  --scale-400: #2a78d6;
+  --scale-500: #3987e5;
+  --scale-600: #5598e7;
+  --scale-700: #86b6ef;
+
+  /* The chart's own furniture. A gridline that competes with the data is drawn
+   * wrong, so it is quieter than `--line`; the axis is the one that may be
+   * seen. */
+  --chart-grid: rgb(255 255 255 / 0.06);
+  --chart-axis: rgb(255 255 255 / 0.14);
+
+  /* Heat, for a grid of cells where colour is the only thing carrying the
+   * value - a year of activity, a month of a team's hours.
+   *
+   * Five discrete steps rather than the seven of `--scale-*`, and a separate
+   * set rather than a slice of them, because the two answer different
+   * questions. `--scale-*` is sequential: a continuous magnitude, where the
+   * lightest step means "near zero" and may recede toward the surface.
+   * Heat is ordinal: five shades a reader tells apart at a glance and matches
+   * against a legend, which needs wider gaps between them (no slice of
+   * `--scale-*` clears the 0.06 lightness step - they sit 0.047 apart) and a
+   * bottom step that stays distinct from an empty cell.
+   *
+   * That last one is the whole point. A heatmap cell has more meanings than a
+   * number: nothing recorded, a day still running, a day outside the data, and
+   * a value. If the faintest value looks like the empty cell, the grid says
+   * somebody did nothing on a day nobody reported - and `--heat-1` clears the
+   * empty square by 2.1:1 so it cannot.
+   *
+   * Fixed, like the series and unlike almost everything else here. Derived
+   * from the accent - as the first consumer did - the faintest step sat 1.3:1
+   * from the empty cell for half the line, and pinning lightness instead ran
+   * out of sRGB: the darkest accents cannot reach the top of the ramp at their
+   * own chroma.
+   */
+  --heat-1: #28528e;
+  --heat-2: #3a65a3;
+  --heat-3: #4d78b7;
+  --heat-4: #608ccd;
+  --heat-5: #73a0e2;
+
+  /* Syntax, for code shown inside a product.
+   *
+   * Eight kinds rather than the fifty a highlighter's theme names, because
+   * these are the distinctions that survive across languages: a keyword, a
+   * literal string, a number, a comment, an identifier, a type, punctuation,
+   * and the metadata around the code (a decorator, an attribute, a prompt).
+   * Anything finer is a grammar's own vocabulary and does not travel.
+   *
+   * Fixed, like the series and the heat ramps, and for the same reason: code
+   * is not a property of the product showing it, and `if` should not be
+   * magenta in kilna and cobalt in kasl-server.
+   *
+   * Chosen against the surface code actually sits on - `--soft` over `--bg`,
+   * which is what CodeBlock and `.prose pre` draw - and every slot clears
+   * 4.5:1 AS TEXT in both themes. That threshold, not the 3:1 the series are
+   * held to, is the whole reason these exist separately: the series palette
+   * was measured here first and five of its eight light values sat under 3:1,
+   * one at 1.90:1. A filled bar can be pale; a 12px glyph cannot.
+   *
+   * These are deliberately NOT held to the colour-blind floor the series are.
+   * A series colour is the identity of its mark - lose the hue and the data is
+   * gone. Syntax colour is a second reading of what the text already says in
+   * full: a keyword is a keyword by its spelling, and CodeBlock's default
+   * renders no colour at all and stays readable. `syntax.test.ts` says so in
+   * place, so the omission is not mistaken for an oversight.
+   *
+   * `comment` is the quietest on purpose - it is the one kind a reader is
+   * meant to be able to skip - and still clears the threshold.
+   */
+  --syntax-keyword: #c792ea;
+  --syntax-string: #9ccc65;
+  --syntax-number: #f78c6c;
+  --syntax-comment: #9e99a6;
+  --syntax-name: #82aaff;
+  --syntax-type: #4dd0b1;
+  --syntax-punctuation: #c4bfcb;
+  --syntax-meta: #f0a868;
+
   /* Elevation, three steps. The products had one shadow and used it for
    * everything that leaves the flow - a toast, a dropdown and a modal all
    * floated by the same amount, so a modal never felt further away than the
@@ -143,6 +270,51 @@
     --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);
     --info-soft: color-mix(in oklab, var(--info) 11%, transparent);
 
+    /* Series and scale, stepped for the light surface - the same eight hues
+     * chosen again against this ground, not the dark values lightened. The dark
+     * block says why these do not follow the product accent. */
+    --series-1: #2a78d6;
+    --series-2: #eb6834;
+    --series-3: #1baf7a;
+    --series-4: #eda100;
+    --series-5: #e87ba4;
+    --series-6: #008300;
+    --series-7: #4a3aa7;
+    --series-8: #85284d;
+
+    --scale-100: #cde2fb;
+    --scale-200: #9ec5f4;
+    --scale-300: #6da7ec;
+    --scale-400: #3987e5;
+    --scale-500: #2a78d6;
+    --scale-600: #1c5cab;
+    --scale-700: #104281;
+
+    --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);
+    --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);
+
+    /* The same five steps chosen again for the light ground, running the other
+     * way: here "more" is darker. See the dark block for why heat is its own
+     * ramp and not a slice of `--scale-*`. */
+    --heat-1: #84a8fd;
+    --heat-2: #7193e7;
+    --heat-3: #5e7fd1;
+    --heat-4: #4c6cbb;
+    --heat-5: #3b58a6;
+
+    /* The same eight kinds chosen again for the light ground - not the dark
+     * values darkened. Each clears 4.5:1 as text against `--soft` over this
+     * theme's `--bg`; the dark block says why syntax is its own palette and
+     * why it is not held to the colour-blind floor. */
+    --syntax-keyword: #7c3aad;
+    --syntax-string: #276c2b;
+    --syntax-number: #b5451b;
+    --syntax-comment: #6f6b78;
+    --syntax-name: #1a5fb4;
+    --syntax-type: #00695c;
+    --syntax-punctuation: #4a4753;
+    --syntax-meta: #9c4a00;
+
     --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);
     --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);
     --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);
@@ -182,6 +354,51 @@
   --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);
   --info-soft: color-mix(in oklab, var(--info) 11%, transparent);
 
+  /* Series and scale, stepped for the light surface - the same eight hues
+   * chosen again against this ground, not the dark values lightened. The dark
+   * block says why these do not follow the product accent. */
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --series-4: #eda100;
+  --series-5: #e87ba4;
+  --series-6: #008300;
+  --series-7: #4a3aa7;
+  --series-8: #85284d;
+
+  --scale-100: #cde2fb;
+  --scale-200: #9ec5f4;
+  --scale-300: #6da7ec;
+  --scale-400: #3987e5;
+  --scale-500: #2a78d6;
+  --scale-600: #1c5cab;
+  --scale-700: #104281;
+
+  --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);
+  --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);
+
+  /* The same five steps chosen again for the light ground, running the other
+   * way: here "more" is darker. See the dark block for why heat is its own
+   * ramp and not a slice of `--scale-*`. */
+  --heat-1: #84a8fd;
+  --heat-2: #7193e7;
+  --heat-3: #5e7fd1;
+  --heat-4: #4c6cbb;
+  --heat-5: #3b58a6;
+
+  /* The same eight kinds chosen again for the light ground - not the dark
+   * values darkened. Each clears 4.5:1 as text against `--soft` over this
+   * theme's `--bg`; the dark block says why syntax is its own palette and
+   * why it is not held to the colour-blind floor. */
+  --syntax-keyword: #7c3aad;
+  --syntax-string: #276c2b;
+  --syntax-number: #b5451b;
+  --syntax-comment: #6f6b78;
+  --syntax-name: #1a5fb4;
+  --syntax-type: #00695c;
+  --syntax-punctuation: #4a4753;
+  --syntax-meta: #9c4a00;
+
   --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);
   --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);
   --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);
@@ -275,6 +492,46 @@
   --color-info: var(--info);
   --color-info-soft: var(--info-soft);
 
+  /* Charts. `bg-series-3`, `fill-series-3`, `stroke-scale-500` - the same
+   * utilities the rest of the vocabulary gets, so a chart is written in
+   * tokens like everything else and `dowel/no-raw-color` can hold it to
+   * that. */
+  --color-series-1: var(--series-1);
+  --color-series-2: var(--series-2);
+  --color-series-3: var(--series-3);
+  --color-series-4: var(--series-4);
+  --color-series-5: var(--series-5);
+  --color-series-6: var(--series-6);
+  --color-series-7: var(--series-7);
+  --color-series-8: var(--series-8);
+  --color-scale-100: var(--scale-100);
+  --color-scale-200: var(--scale-200);
+  --color-scale-300: var(--scale-300);
+  --color-scale-400: var(--scale-400);
+  --color-scale-500: var(--scale-500);
+  --color-scale-600: var(--scale-600);
+  --color-scale-700: var(--scale-700);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-axis: var(--chart-axis);
+  --color-heat-1: var(--heat-1);
+  --color-heat-2: var(--heat-2);
+  --color-heat-3: var(--heat-3);
+  --color-heat-4: var(--heat-4);
+  --color-heat-5: var(--heat-5);
+
+  /* Syntax, so a highlighted token is written `text-syntax-keyword` like every
+   * other colour in the system, and `dowel/no-raw-color` can hold it to that.
+   * A highlighter's own stylesheet - which writes hex values into class names
+   * of its own choosing - is what this replaces. */
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-number: var(--syntax-number);
+  --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-name: var(--syntax-name);
+  --color-syntax-type: var(--syntax-type);
+  --color-syntax-punctuation: var(--syntax-punctuation);
+  --color-syntax-meta: var(--syntax-meta);
+
   /* Kept because they are not palette choices: a hairline is `transparent`,
    * an SVG follows `currentColor`, and pure black and white are what an
    * overlay scrim and a print sheet are made of. */

package/dist/tokens.json

@@ -1,5 +1,5 @@
 {
-  "$description": "The dowel token vocabulary: the scales every product of the lacodda line is drawn on. Colours are omitted - they are derived per product from its own accent.",
+  "$description": "The dowel token vocabulary: the scales every product of the lacodda line is drawn on. Most colours are omitted - they are derived per product from its own accent - except the five that are fixed for the whole line: the chart series, the magnitude scale, the status hues, the heat ramp and the syntax colours.",
   "radius": {
     "$type": "dimension",
     "$description": "Corner radius. `md` is the control radius: inputs, buttons, list rows.",
@@ -40,6 +40,238 @@
       }
     }
   },
+  "series": {
+    "$type": "color",
+    "$description": "Chart series, assigned 1..8 in order and never cycled. Alone among the colours here they do not follow the product accent: a series belongs to the data. The order is what keeps adjacent slots apart under colour blindness, so it is not a display order.",
+    "dark": {
+      "series-1": {
+        "$value": "#3987e5"
+      },
+      "series-2": {
+        "$value": "#d95926"
+      },
+      "series-3": {
+        "$value": "#199e70"
+      },
+      "series-4": {
+        "$value": "#c98500"
+      },
+      "series-5": {
+        "$value": "#d55181"
+      },
+      "series-6": {
+        "$value": "#008300"
+      },
+      "series-7": {
+        "$value": "#9085e9"
+      },
+      "series-8": {
+        "$value": "#a3215a"
+      }
+    },
+    "light": {
+      "series-1": {
+        "$value": "#2a78d6"
+      },
+      "series-2": {
+        "$value": "#eb6834"
+      },
+      "series-3": {
+        "$value": "#1baf7a"
+      },
+      "series-4": {
+        "$value": "#eda100"
+      },
+      "series-5": {
+        "$value": "#e87ba4"
+      },
+      "series-6": {
+        "$value": "#008300"
+      },
+      "series-7": {
+        "$value": "#4a3aa7"
+      },
+      "series-8": {
+        "$value": "#85284d"
+      }
+    }
+  },
+  "scale": {
+    "$type": "color",
+    "$description": "Magnitude: one hue, running away from the ground as the value grows. Heatmap cells read this. For an ordered-but-discrete scale start at 300, where contrast still holds.",
+    "dark": {
+      "scale-100": {
+        "$value": "#0d366b"
+      },
+      "scale-200": {
+        "$value": "#184f95"
+      },
+      "scale-300": {
+        "$value": "#256abf"
+      },
+      "scale-400": {
+        "$value": "#2a78d6"
+      },
+      "scale-500": {
+        "$value": "#3987e5"
+      },
+      "scale-600": {
+        "$value": "#5598e7"
+      },
+      "scale-700": {
+        "$value": "#86b6ef"
+      }
+    },
+    "light": {
+      "scale-100": {
+        "$value": "#cde2fb"
+      },
+      "scale-200": {
+        "$value": "#9ec5f4"
+      },
+      "scale-300": {
+        "$value": "#6da7ec"
+      },
+      "scale-400": {
+        "$value": "#3987e5"
+      },
+      "scale-500": {
+        "$value": "#2a78d6"
+      },
+      "scale-600": {
+        "$value": "#1c5cab"
+      },
+      "scale-700": {
+        "$value": "#104281"
+      }
+    }
+  },
+  "status": {
+    "$type": "color",
+    "$description": "Meaning rather than decoration, and the same in every product of the line. Never the only carrier: a badge shows an icon and a word as well, so the message survives a monochrome screen.",
+    "dark": {
+      "good": {
+        "$value": "#45d18f"
+      },
+      "warn": {
+        "$value": "#e8b13f"
+      },
+      "bad": {
+        "$value": "#ef6a6a"
+      },
+      "info": {
+        "$value": "#4cc4e0"
+      }
+    },
+    "light": {
+      "good": {
+        "$value": "#0c8554"
+      },
+      "warn": {
+        "$value": "#9a6b0c"
+      },
+      "bad": {
+        "$value": "#c93b3b"
+      },
+      "info": {
+        "$value": "#0d7f9c"
+      }
+    }
+  },
+  "heat": {
+    "$type": "color",
+    "$description": "Heat: five ordinal steps for a grid where colour is the only thing carrying the value. Its own ramp rather than a slice of the scale, because the faintest step has to stay distinct from an empty cell.",
+    "dark": {
+      "heat-1": {
+        "$value": "#28528e"
+      },
+      "heat-2": {
+        "$value": "#3a65a3"
+      },
+      "heat-3": {
+        "$value": "#4d78b7"
+      },
+      "heat-4": {
+        "$value": "#608ccd"
+      },
+      "heat-5": {
+        "$value": "#73a0e2"
+      }
+    },
+    "light": {
+      "heat-1": {
+        "$value": "#84a8fd"
+      },
+      "heat-2": {
+        "$value": "#7193e7"
+      },
+      "heat-3": {
+        "$value": "#5e7fd1"
+      },
+      "heat-4": {
+        "$value": "#4c6cbb"
+      },
+      "heat-5": {
+        "$value": "#3b58a6"
+      }
+    }
+  },
+  "syntax": {
+    "$type": "color",
+    "$description": "The eight kinds in a piece of code worth telling apart in every language. Measured as text against the hardest surface a code block sits on, which is why they are not the series palette.",
+    "dark": {
+      "syntax-keyword": {
+        "$value": "#c792ea"
+      },
+      "syntax-string": {
+        "$value": "#9ccc65"
+      },
+      "syntax-number": {
+        "$value": "#f78c6c"
+      },
+      "syntax-comment": {
+        "$value": "#9e99a6"
+      },
+      "syntax-name": {
+        "$value": "#82aaff"
+      },
+      "syntax-type": {
+        "$value": "#4dd0b1"
+      },
+      "syntax-punctuation": {
+        "$value": "#c4bfcb"
+      },
+      "syntax-meta": {
+        "$value": "#f0a868"
+      }
+    },
+    "light": {
+      "syntax-keyword": {
+        "$value": "#7c3aad"
+      },
+      "syntax-string": {
+        "$value": "#276c2b"
+      },
+      "syntax-number": {
+        "$value": "#b5451b"
+      },
+      "syntax-comment": {
+        "$value": "#6f6b78"
+      },
+      "syntax-name": {
+        "$value": "#1a5fb4"
+      },
+      "syntax-type": {
+        "$value": "#00695c"
+      },
+      "syntax-punctuation": {
+        "$value": "#4a4753"
+      },
+      "syntax-meta": {
+        "$value": "#9c4a00"
+      }
+    }
+  },
   "typography": {
     "$type": "typography",
     "$description": "Type steps, each with the line height it is set on.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",
@@ -46,6 +46,7 @@
       "import": "./dist/cli/index.js"
     },
     "./theme.css": "./dist/theme.css",
+    "./prose.css": "./dist/prose.css",
     "./tokens.json": "./dist/tokens.json",
     "./registry.json": "./dist/registry.json",
     "./accents/*.css": "./dist/accents/*.css"
@@ -61,13 +62,13 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
+    "@types/node": "^26.5.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^10.10.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "publishConfig": {
     "access": "public",
@@ -75,7 +76,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.7.0"
   },
   "peerDependenciesMeta": {
     "eslint": {