shelving 1.264.1 → 1.264.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.264.1",
+	"version": "1.264.2",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/README.md

@@ -27,7 +27,7 @@ The styling system lives in `style/` and has four moving parts: design tokens, t
 
 **Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — `getColorClass()` and `getStatusClass()`; font size, weight, family, and case, plus text alignment, tint, and wrapping, all come from `getTypographyClass()`, which extends `ColorVariants` and composes `getColorClass()` so every typographic element also accepts `color` (use `getColorClass()` directly only for colour-without-typography, e.g. `<Icon>`); spacing, block-padding, inline-padding ("indent"), and gap from `getSpaceClass()`, `getPaddingClass()`, `getIndentClass()`, and `getGapClass()`; width constraints from `getWidthClass()`; flex layout from `getFlexClass()`; and opt-in scrolling from `getScrollClass()`. Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
 
-Each painting component also exposes its own theme hooks — a single tint hook (`--card-tint`) to recolour the whole component, plus per-property hooks (`--card-background`, `--card-radius`, …) for surgical overrides. Those are documented in each component's own **Styling** section (see `<Card>` for the precedent).
+Each painting component also exposes per-property theme hooks (`--card-background`, `--card-radius`, …) for surgical overrides. To recolour a component or a whole region, apply `color=` / `status=` — on it or an ancestor scope — rather than a per-component tint hook; components no longer set the tint anchor themselves. Those hooks are documented in each component's own **Styling** section (see `<Card>` for the precedent).
 
 ## Theming
 
@@ -50,7 +50,7 @@ Each base token lives in a themed module that documents the variables it defines
 - `space` · `width` — layout spacing and widths (`--space-*`, `--width-*`).
 - `radius` · `stroke` · `shadow` · `duration` — surface tokens (`--radius-*`, `--stroke-*`, `--shadow-*`, `--duration-*`).
 
-The **tint ladder** is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are *recomputed* from a single anchor inside every tinted scope, so you move the anchor rather than overriding individual steps. See `TINT_CLASS` for the full theming guide, and each component's **Styling** section for its per-component hooks.
+The **tint ladder** is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are *recomputed* from a single anchor inside every tinted scope, so you move the anchor (via `color=` / `status=`) rather than overriding individual steps. See `TINT_CLASS` for the full theming guide, and each component's **Styling** section for its per-property hooks.
 
 ## Finding your way around
 

package/ui/block/Blockquote.module.css

@@ -7,9 +7,6 @@
 @layer components {
 	.blockquote,
 	.prose blockquote {
-		/* Theme */
-		--tint-50: var(--blockquote-tint, inherit);
-
 		/* Box */
 		margin-block: var(--blockquote-space, var(--space-paragraph));
 		border-inline-start: var(--blockquote-border, var(--blockquote-stroke, var(--stroke-normal)) solid var(--tint-80));

package/ui/block/Card.md

@@ -45,11 +45,10 @@ import { Card, Subheading } from "shelving/ui";
 
 ## Styling
 
-`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Move `--card-tint` to recolour everything at once; reach for a per-property hook for a single surgical change.
+`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` (on the card or an ancestor scope) to recolour everything at once — surface, border, text, and hover shade re-derive together; reach for a per-property hook for a single surgical change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--card-tint` | Tint anchor for the card scope — recolours surface, border, text and hover together | `inherit` (flows from `color=` / `status=` / parent) |
 | `--card-background` | Surface fill | `var(--tint-90)` |
 | `--card-hover-background` | Surface fill when a navigable card is hovered | `var(--tint-95)` |
 | `--card-color` | Text colour | `var(--tint-00)` |
@@ -71,9 +70,6 @@ import { Card, Subheading } from "shelving/ui";
   --card-shadow: var(--shadow-small);
   --card-radius: var(--radius-small);
 }
-
-/* Retint every card purple — surface, border, text and hover all follow. */
-:root {
-  --card-tint: var(--color-purple);
-}
 ```
+
+To recolour cards, apply `color=` / `status=` to the card (or a tinted ancestor scope) — e.g. `<Card color="purple">` — rather than a per-component tint hook.

package/ui/block/Card.module.css

@@ -19,9 +19,6 @@
 
 @layer components {
 	.card {
-		/* Theme */
-		--tint-50: var(--card-tint, inherit);
-
 		/* Box */
 		position: relative;
 		margin-inline: 0;

package/ui/block/Heading.md

@@ -44,7 +44,6 @@ import { Heading } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--heading-tint` | Tint anchor for the heading scope | `inherit` (flows from `color=` / parent) |
 | `--heading-color` | Text colour | `inherit` |
 | `--heading-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--heading-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Heading.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.heading,
 	.prose h2 {
-		/* Theme */
-		--tint-50: var(--heading-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--heading-space-before, var(--space-section));
 		margin-block-end: var(--heading-space, var(--space-paragraph));

package/ui/block/Label.module.css

@@ -5,9 +5,6 @@
 
 @layer components {
 	.label {
-		/* Theme */
-		--tint-50: var(--label-tint, inherit);
-
 		/* Box */
 		margin-block: var(--label-space, var(--space-paragraph));
 

package/ui/block/List.md

@@ -31,11 +31,10 @@ import { List } from "shelving/ui";
 
 ## Styling
 
-`List` paints from the [tint ladder](/ui/TINT_CLASS) for its markers only; rebind `--list-tint` to recolour the scope, or reach for a per-property hook for a single change.
+`List` paints from the [tint ladder](/ui/TINT_CLASS) for its markers only; apply `color=` (on the list or an ancestor scope) to recolour the markers, or reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--list-tint` | Tint anchor for the list scope | `inherit` (flows from `color=` / parent) |
 | `--list-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 | `--list-gap` | Space between items | `var(--space-xsmall)` |
 | `--list-indent` | Inline start padding (marker gutter) | `1.125em` unordered / `1.8em` ordered |

package/ui/block/List.module.css

@@ -9,9 +9,6 @@
 	.ordered,
 	.prose ul,
 	.prose ol {
-		/* Theme */
-		--tint-50: var(--list-tint, inherit);
-
 		/* Box */
 		margin-block: var(--list-space, var(--space-paragraph));
 

package/ui/block/Panel.md

@@ -31,11 +31,10 @@ import { Panel, Block, Title, Paragraph } from "shelving/ui";
 
 ## Styling
 
-`Panel` paints from the [tint ladder](/ui/TINT_CLASS); rebind `--panel-tint` to recolour the whole scope at once, or reach for a per-property hook for a single change.
+`Panel` paints from the [tint ladder](/ui/TINT_CLASS); apply `color=` / `status=` (on the panel or an ancestor scope) to recolour the whole scope at once — surface, border, and text re-derive together — or reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--panel-tint` | Tint anchor for the panel scope — recolours surface, border, and text together | `inherit` (flows from `color=` / `status=` / parent) |
 | `--panel-background` | Surface fill | `var(--tint-90)` |
 | `--panel-color` | Text colour | `var(--tint-00)` |
 | `--panel-border` | Top/bottom border shorthand | `var(--panel-stroke) solid var(--tint-80)` |

package/ui/block/Panel.module.css

@@ -14,9 +14,6 @@
  */
 @layer components {
 	.panel {
-		/* Theme */
-		--tint-50: var(--panel-tint, inherit);
-
 		/* Box */
 		position: relative;
 		padding-block: var(--panel-padding, var(--space-section));

package/ui/block/Paragraph.md

@@ -31,11 +31,10 @@ import { Paragraph, Strong, Link } from "shelving/ui";
 
 ## Styling
 
-`Paragraph` exposes a single hook for its own block margin and rebinds the tint anchor for its scope; it paints no colour of its own, so it inherits the surrounding text colour.
+`Paragraph` exposes a single hook for its own block margin; it paints no colour of its own, so it inherits the surrounding text colour. Apply `color=` / `status=` to set the tint scope for any ladder-reading inline content inside it.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--paragraph-tint` | Tint anchor for the paragraph scope | `inherit` (flows from `color=` / parent) |
 | `--paragraph-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
 **Global tokens it reads:** `--space-paragraph`.

package/ui/block/Paragraph.module.css

@@ -4,9 +4,6 @@
 @layer components {
 	.prose p,
 	.paragraph {
-		/* Theme */
-		--tint-50: var(--paragraph-tint, inherit);
-
 		/* Box */
 		margin-block: var(--paragraph-space, var(--space-paragraph));
 	}

package/ui/block/Preformatted.module.css

@@ -10,9 +10,6 @@
 @layer components {
 	.preformatted,
 	.prose pre {
-		/* Theme */
-		--tint-50: var(--preformatted-tint, inherit);
-
 		/* Box */
 		position: relative;
 		margin-inline: 0;

package/ui/block/Subheading.md

@@ -39,7 +39,6 @@ import { Title, Heading, Subheading } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--subheading-tint` | Tint anchor for the subheading scope | `inherit` (flows from `color=` / parent) |
 | `--subheading-color` | Text colour | `inherit` |
 | `--subheading-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--subheading-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Subheading.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.subheading,
 	.prose :is(h3, h4, h5, h6) {
-		/* Theme */
-		--tint-50: var(--subheading-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--subheading-space-before, var(--space-section));
 		margin-block-end: var(--subheading-space, var(--space-paragraph));

package/ui/block/Title.md

@@ -38,7 +38,6 @@ import { Panel, Block, Title } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--title-tint` | Tint anchor for the title scope | `inherit` (flows from `color=` / parent) |
 | `--title-color` | Text colour | `inherit` |
 | `--title-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--title-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Title.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.title,
 	.prose h1 {
-		/* Theme */
-		--tint-50: var(--title-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--title-space-before, var(--space-section));
 		margin-block-end: var(--title-space, var(--space-paragraph));

package/ui/button/Button.md

@@ -46,11 +46,10 @@ import { getButtonClass } from "shelving/ui";
 
 ## Styling
 
-`Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; move `--button-tint` to recolour the whole button, or use a per-property hook for one change.
+`Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; apply `color=` / `status=` (on the button or an ancestor scope) to recolour the whole button, or use a per-property hook for one change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--button-tint` | Tint anchor for the button scope | `inherit` (flows from `color=` / `status=` / parent) |
 | `--button-background` | Surface fill | `var(--tint-90)` |
 | `--button-hover-background` | Surface fill on hover / focus | `var(--tint-95)` |
 | `--button-hover-border` | Border on hover / focus | `var(--button-stroke) solid var(--tint-90)` |

package/ui/button/Button.module.css

@@ -9,9 +9,6 @@
 
 @layer components {
 	.button {
-		/* Theme */
-		--tint-50: var(--button-tint, inherit);
-
 		/* Box */
 		display: block;
 		box-sizing: border-box;

package/ui/docs/DocumentationPage.test.tsx

@@ -1,10 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import type { DocumentationElement } from "../../util/tree.js";
-import { MetaContext } from "../misc/MetaContext.js";
-import { createMeta } from "../util/meta.js";
-import { DocumentationPage } from "./DocumentationPage.js";
+import { createMeta, DocumentationPage, MetaContext } from "shelving/ui";
+import type { DocumentationElement } from "shelving/util/tree";
 
 /** Make a minimal `tree-documentation` child element of a given kind. */
 function doc(name: string, kind: string): DocumentationElement {

package/ui/docs/DocumentationParams.js

@@ -29,7 +29,7 @@ export function DocumentationParams({ params }) {
     const map = useTreeMap();
     if (!params?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Param" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description, default: def, optional }) => {
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Param" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description, default: def, optional }) => {
                             const { members, optional: typeOptional } = splitType(type);
                             // An options-bag param whose (single, concrete) type resolves to a documented interface/object type is flattened into its individual fields as indented child rows.
                             const single = members.length === 1 ? members[0] : undefined;

package/ui/docs/DocumentationParams.tsx

@@ -55,7 +55,7 @@ export function DocumentationParams({ params }: DocumentationParamsProps): React
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationProperties.js

@@ -24,7 +24,7 @@ export function DocumentationProperties({ properties }) {
     const map = useTreeMap();
     if (!properties?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Property" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: properties.map(({ name, type = DEFAULT_TYPE, description, default: def, optional, readonly }) => {
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Property" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: properties.map(({ name, type = DEFAULT_TYPE, description, default: def, optional, readonly }) => {
                             const { members, optional: typeOptional } = splitType(type);
                             return (_jsxs("tr", { children: [_jsx(Cell, { nowrap: true, children: _jsx(Code, { nowrap: true, children: `.${name}` }) }), _jsx("td", { children: _jsx(DocumentationType, { members: members }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, members[0] ?? DEFAULT_TYPE)?.props.description, default: def, optional: !!optional || typeOptional, readonly: readonly }) })] }, `${name}-${type}`));
                         }) })] }) }) }));

package/ui/docs/DocumentationProperties.tsx

@@ -49,7 +49,7 @@ export function DocumentationProperties({ properties }: DocumentationPropertiesP
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationReferences.js

@@ -19,5 +19,5 @@ export function DocumentationReferences({ types }) {
     const map = useTreeMap();
     if (!types?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: types.map(type => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: getTreeElement(map, type)?.props.description }) })] }, type))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: types.map(type => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: getTreeElement(map, type)?.props.description }) })] }, type))) })] }) }) }));
 }

package/ui/docs/DocumentationReferences.tsx

@@ -39,7 +39,7 @@ export function DocumentationReferences({ types }: DocumentationReferencesProps)
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationReturns.js

@@ -21,5 +21,5 @@ export function DocumentationReturns({ returns }) {
     const map = useTreeMap();
     if (!returns?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Return" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Return" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
 }

package/ui/docs/DocumentationReturns.tsx

@@ -43,7 +43,7 @@ export function DocumentationReturns({ returns }: DocumentationReturnsProps): Re
 							<Cell header width="fit">
 								Return
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationThrows.js

@@ -21,5 +21,5 @@ export function DocumentationThrows({ throws }) {
     const map = useTreeMap();
     if (!throws?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Throws" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Throws" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
 }

package/ui/docs/DocumentationThrows.tsx

@@ -43,7 +43,7 @@ export function DocumentationThrows({ throws }: DocumentationThrowsProps): React
 							<Cell header width="fit">
 								Throws
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/form/Field.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { Field } from "./Field.js";
+import { Field } from "shelving/ui";
 
 describe("Field", () => {
 	test("does not render a message container when there is no message", () => {

package/ui/inline/Deleted.md

@@ -5,7 +5,7 @@ Deleted text — renders a `<del>` element to mark content that has been removed
 **Things to know:**
 
 - Use `Deleted` for content genuinely removed from a document (edits, diffs, retired prices), and `<Inserted>` for content added — they pair up.
-- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="orange"`, …) recolours the strike-through. The base tint defaults to `--color-red`.
+- It colours itself directly from `--color-red` rather than the tint ladder, so a deletion stays a consistent red even inside a tinted region; change it with `--deleted-color`.
 - Inside `<Prose>` a raw `<del>` picks up the same styling, so Markdown-rendered deletions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## Styling
 
-`Deleted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-red`. Override `--deleted-tint` to recolour from the base, or set each property directly.
+`Deleted` colours its text directly from `--color-red` (not the tint ladder), so deletions stay a consistent red regardless of the surrounding tint. Override `--deleted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--deleted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-red)` |
-| `--deleted-color` | Text colour | `var(--tint-50)` |
+| `--deleted-color` | Text colour | `var(--color-red)` |
 | `--deleted-decoration` | Text decoration | `line-through var(--stroke-normal)` |
 | `--deleted-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-red`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.
+**Global tokens it reads:** `--color-red`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Deleted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.deleted,
 	.prose del {
-		--tint-50: var(--deleted-tint, var(--color-red));
-
 		/* Style */
-		color: var(--deleted-color, var(--tint-50));
+		color: var(--deleted-color, var(--color-red));
 		text-decoration: var(--deleted-decoration, line-through var(--stroke-normal));
 
 		/* Text */

package/ui/inline/Inserted.md

@@ -5,7 +5,7 @@ Inserted text — renders an `<ins>` element to mark content that has been added
 **Things to know:**
 
 - Use `Inserted` for content genuinely added to a document (edits, diffs, new prices), and `<Deleted>` for content removed — they pair up.
-- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="blue"`, …) recolours the underline. The base tint defaults to `--color-green`.
+- It colours itself directly from `--color-green` rather than the tint ladder, so an insertion stays a consistent green even inside a tinted region; change it with `--inserted-color`.
 - Inside `<Prose>` a raw `<ins>` picks up the same styling, so Markdown-rendered insertions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## Styling
 
-`Inserted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-green`. Override `--inserted-tint` to recolour from the base, or set each property directly.
+`Inserted` colours its text directly from `--color-green` (not the tint ladder), so insertions stay a consistent green regardless of the surrounding tint. Override `--inserted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--inserted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-green)` |
-| `--inserted-color` | Text colour | `var(--tint-50)` |
+| `--inserted-color` | Text colour | `var(--color-green)` |
 | `--inserted-decoration` | Text decoration | `underline var(--stroke-normal)` |
 | `--inserted-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-green`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.
+**Global tokens it reads:** `--color-green`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Inserted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.inserted,
 	.prose ins {
-		--tint-50: var(--inserted-tint, var(--color-green));
-
 		/* Style */
-		color: var(--inserted-color, var(--tint-50));
+		color: var(--inserted-color, var(--color-green));
 		text-decoration: var(--inserted-decoration, underline var(--stroke-normal));
 
 		/* Text */

package/ui/inline/Link.md

@@ -31,12 +31,11 @@ import { Link } from "shelving/ui";
 
 ## Styling
 
-`Link` drives its colour through the tint ladder, so the `color` variant (`color="purple"`, `color="red"`, …) recolours the link. By default the `50` tint resolves to the global `--color-link` token.
+`Link` colours itself from the global `--color-link` token by default. Inside a tinted scope (`color=` / `status=` on an ancestor) `--color-link` resolves to `inherit`, so links adopt the surrounding tinted text colour. Override `--link-color` to set it directly.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--link-tint` | Base tint (`--tint-50`) the link colour derives from | `var(--color-link)` |
-| `--link-color` | Text colour | `var(--tint-50)` |
+| `--link-color` | Text colour | `var(--color-link)` |
 | `--link-weight` | Font weight | `var(--weight-strong)` |
 
 **Global tokens it reads:** `--color-link`, `--weight-strong`, and `--stroke-normal` (the underline thickness).

package/ui/inline/Link.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.link,
 	.prose a {
-		--tint-50: var(--link-tint, var(--color-link));
-
 		/* Style */
-		color: var(--link-color, var(--tint-50));
+		color: var(--link-color, var(--color-link));
 		text-decoration: none;
 		cursor: inherit;
 

package/ui/inline/Mark.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import MARK_CSS from "./Mark.module.css";
@@ -12,5 +11,5 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  */
 export function Mark({ children, ...props }) {
     return (_jsx("mark", { className: getClass(MARK_CLASS, //
-        TINT_CLASS, getTypographyClass(props)), children: children }));
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Mark.md

@@ -1,6 +1,6 @@
 # Mark
 
-Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a yellow background by default.
+Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a translucent yellow background by default.
 
 **Things to know:**
 
@@ -20,15 +20,15 @@ import { Mark } from "shelving/ui";
 
 ## Styling
 
-`Mark` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the background and the `00` tint the text. By default the base tint resolves to `--color-yellow`; override `--mark-tint` to recolour the whole pill, or `--mark-background` / `--mark-color` to set the two faces independently.
+`Mark` highlights with a translucent wash of `--color-yellow` — `color-mix(…, transparent)`, so the text underneath stays legible — with the text painted from `--tint-00`. Override `--mark-tint` to change the highlight hue, `--mark-background` to replace the fill outright, or `--mark-color` for the text.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--mark-tint` | Base tint (`--tint-50`) the pill derives from | `var(--color-yellow)` |
-| `--mark-background` | Background fill | `var(--tint-50)` |
+| `--mark-tint` | Highlight hue, mixed 50% with `transparent` for the background | `var(--color-yellow)` |
+| `--mark-background` | Background fill | `color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent)` |
 | `--mark-color` | Text colour | `var(--tint-00)` |
 | `--mark-padding` | Inline padding | `var(--space-xxsmall)` |
 | `--mark-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--mark-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder steps `--tint-50` / `--tint-00`.
+**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder step `--tint-00`.

package/ui/inline/Mark.module.css

@@ -1,4 +1,5 @@
 @import "../style/layers.css";
+@import "../style/Color.module.css";
 @import "../style/Radius.module.css";
 @import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
@@ -6,8 +7,6 @@
 @layer components {
 	.mark,
 	.prose mark {
-		--tint-50: var(--mark-tint, var(--color-yellow));
-
 		/* Box */
 		display: inline-block;
 		padding-inline: var(--mark-padding, var(--space-xxsmall));
@@ -15,7 +14,7 @@
 		vertical-align: baseline;
 
 		/* Style */
-		background: var(--mark-background, var(--tint-80));
+		background-color: var(--mark-background, color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent));
 		color: var(--mark-color, var(--tint-00));
 
 		/* Text */

package/ui/inline/Mark.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
@@ -25,7 +24,6 @@ export function Mark({ children, ...props }: MarkProps): ReactElement {
 		<mark
 			className={getClass(
 				MARK_CLASS, //
-				TINT_CLASS,
 				getTypographyClass(props),
 			)}
 		>

package/ui/input/SchemaInput.test.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { PASSTHROUGH, StringSchema } from "../../index.js";
-import { StringSchemaInput } from "../index.js";
+import { StringSchema } from "shelving/schema";
+import { StringSchemaInput } from "shelving/ui";
+import { PASSTHROUGH } from "shelving/util/function";
 
 describe("StringSchemaInput", () => {
 	test("formats the initial value to its clean sanitized value", () => {