dowel-ui 0.24.0 → 0.26.0

package/dist/theme.css

@@ -169,6 +169,44 @@
   --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
@@ -264,6 +302,19 @@
     --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);
@@ -335,6 +386,19 @@
   --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);
@@ -455,6 +519,19 @@
   --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. Most colours are omitted - they are derived per product from its own accent - except the chart series and the magnitude scale, which are fixed for the whole line.",
+  "$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.",
@@ -146,6 +146,132 @@
       }
     }
   },
+  "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.24.0",
+  "version": "0.26.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"