dowel-ui 0.31.0 → 0.33.0

package/dist/theme.css

@@ -710,6 +710,15 @@
   --spacing-rail: 216px;
   --spacing-window-button: 46px;
 
+  /*
+   * The rail with only its icons: `NavRail collapsed`. 56 is a 36px entry -
+   * the size of an icon button in the bar above it - with 10px of air on each
+   * side, which is the same inset the wide rail gives its entries. Narrower,
+   * and the active entry's tint touches the rail's border; wider, and the
+   * column reads as a sidebar that forgot its words.
+   */
+  --spacing-rail-compact: 56px;
+
   /*
    * How much of a frameless window's edge can be grabbed to resize it.
    *
@@ -749,6 +758,26 @@
  * would need a compensating negative margin. This changes nothing about
  * layout.
  */
+/*
+ * `caption` - the small uppercase label: a field's name, a panel's section, a
+ * group of menu items, a rail's group.
+ *
+ * One role, and the set wrote it seven ways: with and without `font-medium`,
+ * with and without a weight at all, so a Field's label and the SectionLabel
+ * above it were two weights of the same thing. kilna's screens added
+ * thirty-one more by hand. The weight is 600, the mockup's `.lbl` - at 10px
+ * a caption lighter than that reads as a smudge rather than a word.
+ *
+ * A utility rather than a component because it is a role text plays inside
+ * things that are already components: a `<legend>`, a `<th>`, a `<label>`.
+ * Its colour is `faint` - verified against the grounds at body size; at 10px
+ * it is below AA in the light theme, which is a finding about `faint` at every
+ * small size and is owned by the contrast work, not by this recipe.
+ */
+@utility caption {
+  @apply text-2xs font-semibold uppercase tracking-caption text-faint;
+}
+
 @utility target-min {
   position: relative;
 
@@ -901,9 +930,48 @@ body {
   background-color: var(--bg);
   color: var(--text);
   font-family: var(--font-sans);
+  /* The base step, so text nobody gave a class reads at the scale's own body
+   * size. Without it that text inherited the browser's 16px - an empty
+   * state's heading and a card's name came out a step and a half above the
+   * 12px beside them, in every product of the line.
+   *
+   * The line height is the base step's own 20 over 14, written as a ratio
+   * rather than read from `--text-base--line-height`, and that is deliberate.
+   * A length is inherited as a length: with 20px here, every element that
+   * sets a size of its own without a line height - a 10px chart label -
+   * inherited 20px and stood five pixels taller, found in the pictures of
+   * the stand. A ratio is inherited as a ratio. The theme test holds the two
+   * numbers to the tokens. */
+  font-size: var(--text-base);
+  line-height: calc(20 / 14);
   -webkit-font-smoothing: antialiased;
 }
 
+/*
+ * How heavy an icon's line is.
+ *
+ * lucide draws at 2 by default, which is tuned for its own 24px; at the 14 and
+ * 16 the line actually uses, a 2px stroke reads heavier than the text beside
+ * it. 1.75 is the owner's call for the whole line (24.09), made here once
+ * rather than as a `strokeWidth` at every one of a few hundred call sites.
+ *
+ * Only an icon still on lucide's default is changed. `[stroke-width='2']` is
+ * how lucide writes the default, and an icon given another width - by a call
+ * site, or by `absoluteStrokeWidth`, which computes one - keeps it. In
+ * `@layer base` so a `stroke-*` utility on the icon wins too. A product that
+ * draws with some other icon set is untouched: the rule keys off lucide's own
+ * class.
+ */
+:root {
+  --icon-stroke: 1.75;
+}
+
+@layer base {
+  svg.lucide[stroke-width='2'] {
+    stroke-width: var(--icon-stroke);
+  }
+}
+
 /*
  * In `@layer base`, so a component can turn it off.
  *

package/dist/tokens.json

@@ -393,6 +393,13 @@
       "$value": 600
     }
   },
+  "icon": {
+    "$type": "number",
+    "$description": "The weight of an icon's line, in the icon's own units (lucide draws on a 24-unit grid). Lighter than lucide's default 2, because the line draws its icons at 14 and 16px, where 2 reads heavier than the text beside it.",
+    "stroke": {
+      "$value": 1.75
+    }
+  },
   "duration": {
     "$type": "duration",
     "$description": "Motion. Cut to nothing under `prefers-reduced-motion`.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",