@misoto22/design 0.6.1 → 0.8.0

package/dist/tokens.js

@@ -297,37 +297,37 @@ export const TOKENS = {
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -354,111 +354,114 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(4px * var(--radius-factor))",
-    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
     "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
-    "comment": "The nesting law, applied to the two insets this system actually uses."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -507,7 +510,7 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -529,7 +532,7 @@ export const TOKENS = {
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -800,7 +803,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -821,7 +824,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -872,14 +875,96 @@ export const TOKENS = {
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",
     "category": "layer",
     "light": "var(--z-scrim)"
   },
+  "diagram-surface": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Diagrams ─────────────────────────────────────────────────────────── The figures in `@misoto22/design/diagrams`, which draw in SVG and therefore cannot read a custom property from a presentation attribute — every one of these reaches a mark through a style rule. Named separately from the page's own rules rather than pointed straight at --rule-2 because a figure is a PICTURE inside a document: its hairline has to hold up against a 1200-wide raster export and a greyscale print, where the page's own hairline is chosen to disappear. Keeping the two apart is what lets a figure be tuned without touching a table. Nothing here is a hue. The seven kinds of node are separated by drawn sigils, and the only colour a figure spends is --success / --danger on a terminal lifecycle state — the same two the rest of the system reserves for state and refuses to spend on brand."
+  },
+  "diagram-node": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)"
+  },
+  "diagram-node-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-band": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--stone)"
+  },
+  "diagram-chip": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-rule": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "diagram-rule-hard": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-line": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-line-strong": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-line-soft": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-sigil": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-ink-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-ink-3": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-plate": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The reversed plate, and its type. A figure gets ONE of these — the node the diagram is about — for the same reason a page gets one Card variant=\"plate\"."
+  },
+  "diagram-plate-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
   "page-pad": {
     "layer": "semantic",
     "category": "space",

package/dist/tokens.json

@@ -296,37 +296,37 @@
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -353,111 +353,114 @@
     "layer": "tokens",
     "category": "radius",
     "light": "calc(4px * var(--radius-factor))",
-    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
     "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
-    "comment": "The nesting law, applied to the two insets this system actually uses."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -506,7 +509,7 @@
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -528,7 +531,7 @@
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -799,7 +802,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -820,7 +823,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -871,14 +874,96 @@
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",
     "category": "layer",
     "light": "var(--z-scrim)"
   },
+  "diagram-surface": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Diagrams ─────────────────────────────────────────────────────────── The figures in `@misoto22/design/diagrams`, which draw in SVG and therefore cannot read a custom property from a presentation attribute — every one of these reaches a mark through a style rule. Named separately from the page's own rules rather than pointed straight at --rule-2 because a figure is a PICTURE inside a document: its hairline has to hold up against a 1200-wide raster export and a greyscale print, where the page's own hairline is chosen to disappear. Keeping the two apart is what lets a figure be tuned without touching a table. Nothing here is a hue. The seven kinds of node are separated by drawn sigils, and the only colour a figure spends is --success / --danger on a terminal lifecycle state — the same two the rest of the system reserves for state and refuses to spend on brand."
+  },
+  "diagram-node": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)"
+  },
+  "diagram-node-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-band": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--stone)"
+  },
+  "diagram-chip": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-rule": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "diagram-rule-hard": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-line": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-line-strong": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-line-soft": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-sigil": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-ink-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-ink-3": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-plate": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The reversed plate, and its type. A figure gets ONE of these — the node the diagram is about — for the same reason a page gets one Card variant=\"plate\"."
+  },
+  "diagram-plate-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
   "page-pad": {
     "layer": "semantic",
     "category": "space",