shelving 1.260.2 → 1.261.0

package/package.json

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

package/ui/form/CheckboxInput.js

@@ -4,7 +4,6 @@ import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 /**
  * Checkbox input bound to a `boolean` value, rendered as a labelled `<input type="checkbox">`.
  * - The label content comes from `children`, falling back to `placeholder`/`title`.

package/ui/form/CheckboxInput.tsx

@@ -6,7 +6,6 @@ import { getInputClass, type InputVariants, type ValueInputProps } from "./Input
 import INPUT_CSS from "./Input.module.css";
 
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 
 /**
  * Props for `CheckboxInput`, a boolean-valued checkbox input.

package/ui/form/RadioInput.js

@@ -4,7 +4,6 @@ import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 /**
  * Single `<input type="radio">` wrapped in a `<label>` styled as an `<Input>`.
  * - Calls `onValue(true)` when selected; label content comes from `children`, falling back to `placeholder`/`title`.

package/ui/form/RadioInput.tsx

@@ -6,7 +6,6 @@ import { getInputClass, type InputVariants, type ValueInputProps } from "./Input
 import INPUT_CSS from "./Input.module.css";
 
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 
 /**
  * Props for `RadioInput`, a single labelled radio button styled as an input.

package/ui/inline/Code.md

@@ -13,7 +13,7 @@ An inline code span — renders a `<code>` element with monospace type and a sub
 
 - Pick the sibling whose semantics match — they all look the same but mean different things to assistive tech and search.
 - Pass `plain` to drop the default background and inline padding (useful when the code already sits inside a tinted container).
-- Painted from the [tint ladder](/ui/TINT_CLASS): the background is `--tint-90` and the text `--tint-00`, so it re-tints with its surrounding scope.
+- Painted from the [tint ladder](/ui/TINT_CLASS): the background defaults to `--tint-90` and the text to `--tint-00`, so it re-tints with its surrounding scope (override per-instance with `--code-background` / `--code-color`).
 - Inside `<Prose>` raw `<code>` / `<kbd>` / `<samp>` / `<var>` pick up the same styling, and code inside a `<pre>` drops the inline box automatically.
 
 ## Usage
@@ -37,7 +37,7 @@ import { Code } from "shelving/ui";
 
 ## Styling
 
-`Code` paints from the [tint ladder](/ui/TINT_CLASS); the box (`background` / `color`) reads ladder steps directly, while type, padding, and radius have per-property hooks.
+`Code` paints from the [tint ladder](/ui/TINT_CLASS): the box `background` / `color` default to ladder steps so they re-tint with the surrounding scope, and every property has a per-instance override hook.
 
 | Variable | Styles | Default |
 |---|---|---|
@@ -47,5 +47,7 @@ import { Code } from "shelving/ui";
 | `--code-leading` | Line height | `var(--leading)` |
 | `--code-padding` | Inline padding (non-`plain`) | `var(--space-xxsmall)` |
 | `--code-radius` | Corner radius (non-`plain`) | `var(--radius-xxsmall)` |
+| `--code-background` | Background fill (non-`plain`) | `var(--tint-90)` |
+| `--code-color` | Text colour (non-`plain`) | `var(--tint-00)` |
 
 **Global tokens it reads:** `--font-code`, `--weight-code`, `--size-smaller`, `--leading`, `--space-xxsmall`, `--radius-xxsmall`, and the tint-ladder steps `--tint-00` / `--tint-90` for the box fill and text.

package/ui/inline/Code.module.css

@@ -24,7 +24,7 @@
 		border-radius: var(--code-radius, var(--radius-xxsmall));
 
 		/* Style */
-		background-color: var(--tint-90);
-		color: var(--tint-00);
+		background: var(--code-background, var(--tint-90));
+		color: var(--code-color, var(--tint-00));
 	}
 }

package/ui/inline/Deleted.d.ts

@@ -1,11 +1,13 @@
 import type { ReactElement } from "react";
+import { type ColorVariants } from "../style/Color.js";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
- * Props for `Deleted` — optional `children`.
+ * Props for `Deleted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/DeletedProps
  */
-export interface DeletedProps extends OptionalChildProps {
+export interface DeletedProps extends OptionalChildProps, ColorVariants, TypographyVariants {
 }
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
@@ -14,4 +16,4 @@ export interface DeletedProps extends OptionalChildProps {
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export declare function Deleted({ children }: DeletedProps): ReactElement;
+export declare function Deleted({ children, ...props }: DeletedProps): ReactElement;

package/ui/inline/Deleted.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getColorClass } from "../style/Color.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import DELETED_CSS from "./Deleted.module.css";
-const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
  *
@@ -9,6 +11,7 @@ const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children }) {
-    return _jsx("del", { className: DELETED_CLASS, children: children });
+export function Deleted({ children, ...props }) {
+    return (_jsx("del", { className: getClass(DELETED_CLASS, //
+        getColorClass(props), getTypographyClass(props)), children: children }));
 }

package/ui/inline/Deleted.md

@@ -0,0 +1,34 @@
+# Deleted
+
+Deleted text — renders a `<del>` element to mark content that has been removed from a document, shown struck through in red by default. Prefer it over a raw `<del>` inside React components so the semantics and class names stay consistent.
+
+**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`.
+- Inside `<Prose>` a raw `<del>` picks up the same styling, so Markdown-rendered deletions match component ones.
+
+## Usage
+
+### Marking a removed value
+
+```tsx
+import { Paragraph, Deleted, Inserted } from "shelving/ui";
+
+<Paragraph>
+  Was <Deleted>$50</Deleted> <Inserted>$35</Inserted>.
+</Paragraph>
+```
+
+## 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.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--deleted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-red)` |
+| `--deleted-color` | Text colour | `var(--tint-50)` |
+| `--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`.

package/ui/inline/Deleted.module.css

@@ -6,11 +6,13 @@
 @layer components {
 	.deleted,
 	.prose del {
+		--tint-50: var(--deleted-tint, var(--color-red));
+
 		/* Style */
-		color: var(--color-red);
-		text-decoration: line-through var(--stroke-normal);
+		color: var(--deleted-color, var(--tint-50));
+		text-decoration: var(--deleted-decoration, line-through var(--stroke-normal));
 
 		/* Text */
-		font-weight: var(--weight-strong);
+		font-weight: var(--deleted-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Deleted.tsx

@@ -1,16 +1,18 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { type ColorVariants, getColorClass } from "../style/Color.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import DELETED_CSS from "./Deleted.module.css";
 
-const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
 
 /**
- * Props for `Deleted` — optional `children`.
+ * Props for `Deleted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/DeletedProps
  */
-export interface DeletedProps extends OptionalChildProps {}
+export interface DeletedProps extends OptionalChildProps, ColorVariants, TypographyVariants {}
 
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
@@ -19,6 +21,16 @@ export interface DeletedProps extends OptionalChildProps {}
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children }: DeletedProps): ReactElement {
-	return <del className={DELETED_CLASS}>{children}</del>;
+export function Deleted({ children, ...props }: DeletedProps): ReactElement {
+	return (
+		<del
+			className={getClass(
+				DELETED_CLASS, //
+				getColorClass(props),
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</del>
+	);
 }

package/ui/inline/Emphasis.d.ts

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Emphasis` — optional `children`.
  *
  * @see https://shelving.cc/ui/EmphasisProps
  */
-export interface EmphasisProps extends OptionalChildProps {
+export interface EmphasisProps extends OptionalChildProps, TypographyVariants {
 }
 /**
  * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
@@ -14,4 +15,4 @@ export interface EmphasisProps extends OptionalChildProps {
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export declare function Emphasis({ children }: EmphasisProps): ReactElement;
+export declare function Emphasis({ children, ...props }: EmphasisProps): ReactElement;

package/ui/inline/Emphasis.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
 const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
 /**
@@ -9,6 +10,7 @@ const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export function Emphasis({ children }) {
-    return _jsx("em", { className: EMPHASIS_CLASS, children: children });
+export function Emphasis({ children, ...props }) {
+    return (_jsx("em", { className: getClass(EMPHASIS_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Emphasis.md

@@ -0,0 +1,29 @@
+# Emphasis
+
+Emphasised text — renders an `<em>` element for stress emphasis, the kind that changes the meaning of a sentence (typically shown italic). Prefer it over a raw `<em>` or `<i>` inside React components so the semantics and class names stay consistent.
+
+**Things to know:**
+
+- Use `Emphasis` for stress emphasis (italic), `<Strong>` for importance (bold), and `<Mark>` for relevance highlighting — they are not interchangeable.
+- It only sets the font style; it inherits colour, weight, and size from the surrounding text.
+- Inside `<Prose>` raw `<em>` / `<i>` pick up the same styling, so Markdown-rendered emphasis matches component ones.
+
+## Usage
+
+### Stress emphasis in body copy
+
+```tsx
+import { Paragraph, Emphasis } from "shelving/ui";
+
+<Paragraph>
+  You were meant to turn <Emphasis>left</Emphasis>.
+</Paragraph>
+```
+
+## Styling
+
+`Emphasis` only sets its font style and inherits everything else from its surroundings.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--emphasis-style` | Font style | `italic` |

package/ui/inline/Emphasis.module.css

@@ -4,6 +4,6 @@
 	.emphasis,
 	.prose :is(em, i) {
 		/* Style */
-		font-style: italic;
+		font-style: var(--emphasis-style, italic);
 	}
 }

package/ui/inline/Emphasis.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
 
@@ -10,7 +11,7 @@ const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
  *
  * @see https://shelving.cc/ui/EmphasisProps
  */
-export interface EmphasisProps extends OptionalChildProps {}
+export interface EmphasisProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
@@ -19,6 +20,15 @@ export interface EmphasisProps extends OptionalChildProps {}
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export function Emphasis({ children }: EmphasisProps): ReactElement {
-	return <em className={EMPHASIS_CLASS}>{children}</em>;
+export function Emphasis({ children, ...props }: EmphasisProps): ReactElement {
+	return (
+		<em
+			className={getClass(
+				EMPHASIS_CLASS, //
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</em>
+	);
 }

package/ui/inline/Inserted.d.ts

@@ -1,11 +1,13 @@
 import type { ReactElement } from "react";
+import { type ColorVariants } from "../style/Color.js";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
- * Props for `Inserted` — optional `children`.
+ * Props for `Inserted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/InsertedProps
  */
-export interface InsertedProps extends OptionalChildProps {
+export interface InsertedProps extends OptionalChildProps, ColorVariants, TypographyVariants {
 }
 /**
  * Inserted text — renders an `<ins>` element to mark content added to a document.
@@ -14,4 +16,4 @@ export interface InsertedProps extends OptionalChildProps {
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export declare function Inserted({ children }: InsertedProps): ReactElement;
+export declare function Inserted({ children, ...props }: InsertedProps): ReactElement;

package/ui/inline/Inserted.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getColorClass } from "../style/Color.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import INSERTED_CSS from "./Inserted.module.css";
 const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
 /**
@@ -9,6 +11,7 @@ const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children }) {
-    return _jsx("ins", { className: INSERTED_CLASS, children: children });
+export function Inserted({ children, ...props }) {
+    return (_jsx("ins", { className: getClass(INSERTED_CLASS, //
+        getColorClass(props), getTypographyClass(props)), children: children }));
 }

package/ui/inline/Inserted.md

@@ -0,0 +1,34 @@
+# Inserted
+
+Inserted text — renders an `<ins>` element to mark content that has been added to a document, shown underlined in green by default. Prefer it over a raw `<ins>` inside React components so the semantics and class names stay consistent.
+
+**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`.
+- Inside `<Prose>` a raw `<ins>` picks up the same styling, so Markdown-rendered insertions match component ones.
+
+## Usage
+
+### Marking an added value
+
+```tsx
+import { Paragraph, Deleted, Inserted } from "shelving/ui";
+
+<Paragraph>
+  Was <Deleted>$50</Deleted> <Inserted>$35</Inserted>.
+</Paragraph>
+```
+
+## 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.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--inserted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-green)` |
+| `--inserted-color` | Text colour | `var(--tint-50)` |
+| `--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`.

package/ui/inline/Inserted.module.css

@@ -6,11 +6,13 @@
 @layer components {
 	.inserted,
 	.prose ins {
+		--tint-50: var(--inserted-tint, var(--color-green));
+
 		/* Style */
-		color: var(--color-green);
-		text-decoration: underline var(--stroke-normal);
+		color: var(--inserted-color, var(--tint-50));
+		text-decoration: var(--inserted-decoration, underline var(--stroke-normal));
 
 		/* Text */
-		font-weight: var(--weight-strong);
+		font-weight: var(--inserted-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Inserted.tsx

@@ -1,16 +1,18 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { type ColorVariants, getColorClass } from "../style/Color.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import INSERTED_CSS from "./Inserted.module.css";
 
 const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
 
 /**
- * Props for `Inserted` — optional `children`.
+ * Props for `Inserted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/InsertedProps
  */
-export interface InsertedProps extends OptionalChildProps {}
+export interface InsertedProps extends OptionalChildProps, ColorVariants, TypographyVariants {}
 
 /**
  * Inserted text — renders an `<ins>` element to mark content added to a document.
@@ -19,6 +21,16 @@ export interface InsertedProps extends OptionalChildProps {}
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children }: InsertedProps): ReactElement {
-	return <ins className={INSERTED_CLASS}>{children}</ins>;
+export function Inserted({ children, ...props }: InsertedProps): ReactElement {
+	return (
+		<ins
+			className={getClass(
+				INSERTED_CLASS, //
+				getColorClass(props),
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</ins>
+	);
 }

package/ui/inline/Link.d.ts

@@ -1,11 +1,13 @@
 import type { ReactElement } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
+import { type ColorVariants } from "../style/Color.js";
+import { type TypographyVariants } from "../style/Typography.js";
 /**
- * Props for `Link` — identical to `ClickableProps` (`href` for navigation or `onClick` for actions).
+ * Props for `Link` — `ClickableProps` (`href` for navigation or `onClick` for actions) plus colour and typography variants.
  *
  * @see https://shelving.cc/ui/LinkProps
  */
-export interface LinkProps extends ClickableProps {
+export interface LinkProps extends ClickableProps, ColorVariants, TypographyVariants {
 }
 /**
  * Inline link — delegates to `<Clickable>`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).

package/ui/inline/Link.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.js";
+import { getColorClass } from "../style/Color.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";
 const LINK_CLASS = getModuleClass(LINK_CSS, "link");
 /**
@@ -10,5 +12,6 @@ const LINK_CLASS = getModuleClass(LINK_CSS, "link");
  * @see https://shelving.cc/ui/Link
  */
 export function Link(props) {
-    return _jsx(Clickable, { ...props, className: LINK_CLASS });
+    return (_jsx(Clickable, { ...props, className: getClass(LINK_CLASS, //
+        getColorClass(props), getTypographyClass(props)) }));
 }

package/ui/inline/Link.md

@@ -31,10 +31,12 @@ import { Link } from "shelving/ui";
 
 ## Styling
 
-`Link` exposes a couple of inline hooks; the link colour comes from the global `--color-link` token.
+`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.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--link-weight` | Text colour and font weight | `var(--color-link)` colour / `var(--weight-strong)` weight |
+| `--link-tint` | Base tint (`--tint-50`) the link colour derives from | `var(--color-link)` |
+| `--link-color` | Text colour | `var(--tint-50)` |
+| `--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,8 +6,10 @@
 @layer components {
 	.link,
 	.prose a {
+		--tint-50: var(--link-tint, var(--color-link));
+
 		/* Style */
-		color: var(--link-weight, var(--color-link));
+		color: var(--link-color, var(--tint-50));
 		text-decoration: none;
 		cursor: inherit;
 

package/ui/inline/Link.tsx

@@ -1,16 +1,18 @@
 import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.js";
+import { type ColorVariants, getColorClass } from "../style/Color.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";
 
 const LINK_CLASS = getModuleClass(LINK_CSS, "link");
 
 /**
- * Props for `Link` — identical to `ClickableProps` (`href` for navigation or `onClick` for actions).
+ * Props for `Link` — `ClickableProps` (`href` for navigation or `onClick` for actions) plus colour and typography variants.
  *
  * @see https://shelving.cc/ui/LinkProps
  */
-export interface LinkProps extends ClickableProps {}
+export interface LinkProps extends ClickableProps, ColorVariants, TypographyVariants {}
 
 /**
  * Inline link — delegates to `<Clickable>`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
@@ -19,5 +21,14 @@ export interface LinkProps extends ClickableProps {}
  * @see https://shelving.cc/ui/Link
  */
 export function Link(props: LinkProps): ReactElement {
-	return <Clickable {...props} className={LINK_CLASS} />;
+	return (
+		<Clickable
+			{...props}
+			className={getClass(
+				LINK_CLASS, //
+				getColorClass(props),
+				getTypographyClass(props),
+			)}
+		/>
+	);
 }

package/ui/inline/Mark.d.ts

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Mark` — optional `children`.
  *
  * @see https://shelving.cc/ui/MarkProps
  */
-export interface MarkProps extends OptionalChildProps {
+export interface MarkProps extends OptionalChildProps, TypographyVariants {
 }
 /**
  * Highlighted text — renders a `<mark>` element to call attention to a run of text.
@@ -13,4 +14,4 @@ export interface MarkProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export declare function Mark({ children }: MarkProps): ReactElement;
+export declare function Mark({ children, ...props }: MarkProps): ReactElement;

package/ui/inline/Mark.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+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";
 const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
 /**
@@ -8,6 +10,7 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export function Mark({ children }) {
-    return _jsx("mark", { className: MARK_CLASS, children: children });
+export function Mark({ children, ...props }) {
+    return (_jsx("mark", { className: getClass(MARK_CLASS, //
+        TINT_CLASS, getTypographyClass(props)), children: children }));
 }

package/ui/inline/Mark.md

@@ -20,14 +20,15 @@ import { Mark } from "shelving/ui";
 
 ## Styling
 
-`Mark` is a fixed-palette highlight: it paints from dedicated colour hooks rather than the tint ladder.
+`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.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--mark-color-bg` | Background fill | `var(--light-yellow)` |
-| `--mark-color-text` | Text colour | `var(--dark-yellow)` |
-| `--mark-padding` | Inline padding | `0.375em` |
+| `--mark-tint` | Base tint (`--tint-50`) the pill derives from | `var(--color-yellow)` |
+| `--mark-background` | Background fill | `var(--tint-50)` |
+| `--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:** `--light-yellow`, `--dark-yellow`, `--radius-xxsmall`, and `--weight-strong`.
+**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder steps `--tint-50` / `--tint-00`.

package/ui/inline/Mark.module.css

@@ -1,16 +1,24 @@
 @import "../style/layers.css";
 @import "../style/Radius.module.css";
 @import "../style/Typography.module.css";
+@import "../style/Tint.module.css";
 
 @layer components {
 	.mark,
 	.prose mark {
+		--tint-50: var(--mark-tint, var(--color-yellow));
+
+		/* Box */
 		display: inline-block;
-		vertical-align: text-bottom;
-		padding-inline: var(--mark-padding, 0.375em);
+		padding-inline: var(--mark-padding, var(--space-xxsmall));
 		border-radius: var(--mark-radius, var(--radius-xxsmall));
-		background-color: var(--mark-color-bg, var(--light-yellow));
-		color: var(--mark-color-text, var(--dark-yellow));
+		vertical-align: text-bottom;
+
+		/* Style */
+		background-color: var(--mark-background, var(--tint-50));
+		color: var(--mark-color, var(--tint-00));
+
+		/* Text */
 		font-weight: var(--mark-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Mark.tsx

@@ -1,5 +1,7 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+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";
 import MARK_CSS from "./Mark.module.css";
 
@@ -10,7 +12,7 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  *
  * @see https://shelving.cc/ui/MarkProps
  */
-export interface MarkProps extends OptionalChildProps {}
+export interface MarkProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Highlighted text — renders a `<mark>` element to call attention to a run of text.
@@ -18,6 +20,16 @@ export interface MarkProps extends OptionalChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export function Mark({ children }: MarkProps): ReactElement {
-	return <mark className={MARK_CLASS}>{children}</mark>;
+export function Mark({ children, ...props }: MarkProps): ReactElement {
+	return (
+		<mark
+			className={getClass(
+				MARK_CLASS, //
+				TINT_CLASS,
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</mark>
+	);
 }

package/ui/inline/Small.d.ts

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Small` — optional `children`.
  *
  * @see https://shelving.cc/ui/SmallProps
  */
-export interface SmallProps extends OptionalChildProps {
+export interface SmallProps extends OptionalChildProps, TypographyVariants {
 }
 /**
  * Small print — renders a `<small>` element for side comments and fine print.
@@ -14,4 +15,4 @@ export interface SmallProps extends OptionalChildProps {
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export declare function Small({ children }: SmallProps): ReactElement;
+export declare function Small({ children, ...props }: SmallProps): ReactElement;

package/ui/inline/Small.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import SMALL_CSS from "./Small.module.css";
 const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
 /**
@@ -9,6 +10,7 @@ const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export function Small({ children }) {
-    return _jsx("small", { className: SMALL_CLASS, children: children });
+export function Small({ children, ...props }) {
+    return (_jsx("small", { className: getClass(SMALL_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Small.md

@@ -0,0 +1,30 @@
+# Small
+
+Small print — renders a `<small>` element for side comments and fine print such as disclaimers, attributions, and legal notes. Prefer it over a raw `<small>` inside React components so the semantics and class names stay consistent.
+
+**Things to know:**
+
+- It signals fine print semantically; it keeps the surrounding font size and weight, only muting the colour to a lighter tint step (`--tint-70`). Reach for the `size` typography variant if you also want smaller text.
+- Inside `<Prose>` a raw `<small>` picks up the same styling, so Markdown-rendered fine print matches component ones.
+
+## Usage
+
+### Fine print after a statement
+
+```tsx
+import { Paragraph, Small } from "shelving/ui";
+
+<Paragraph>
+  Upgrade any time. <Small>Terms apply.</Small>
+</Paragraph>
+```
+
+## Styling
+
+`Small` mutes its text colour to a lighter tint step and inherits size and weight from its surroundings.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--small-color` | Text colour | `var(--tint-70)` |
+
+**Global tokens it reads:** the tint-ladder step `--tint-70`.

package/ui/inline/Small.module.css

@@ -4,7 +4,8 @@
 @layer components {
 	.small,
 	.prose small {
-		font-weight: var(--weight-normal);
+		font-weight: inherit;
 		font-size: inherit;
+		color: var(--small-color, var(--tint-70));
 	}
 }

package/ui/inline/Small.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import SMALL_CSS from "./Small.module.css";
 
@@ -10,7 +11,7 @@ const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
  *
  * @see https://shelving.cc/ui/SmallProps
  */
-export interface SmallProps extends OptionalChildProps {}
+export interface SmallProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Small print — renders a `<small>` element for side comments and fine print.
@@ -19,6 +20,15 @@ export interface SmallProps extends OptionalChildProps {}
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export function Small({ children }: SmallProps): ReactElement {
-	return <small className={SMALL_CLASS}>{children}</small>;
+export function Small({ children, ...props }: SmallProps): ReactElement {
+	return (
+		<small
+			className={getClass(
+				SMALL_CLASS, //
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</small>
+	);
 }

package/ui/inline/Strong.d.ts

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
+import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Strong` — optional `children`.
  *
  * @see https://shelving.cc/ui/StrongProps
  */
-export interface StrongProps extends OptionalChildProps {
+export interface StrongProps extends OptionalChildProps, TypographyVariants {
 }
 /**
  * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
@@ -13,4 +14,4 @@ export interface StrongProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export declare function Strong({ children }: StrongProps): ReactElement;
+export declare function Strong({ children, ...props }: StrongProps): ReactElement;

package/ui/inline/Strong.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import STRONG_CSS from "./Strong.module.css";
 const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
 /**
@@ -8,6 +9,7 @@ const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export function Strong({ children }) {
-    return _jsx("strong", { className: STRONG_CLASS, children: children });
+export function Strong({ children, ...props }) {
+    return (_jsx("strong", { className: getClass(STRONG_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Strong.md

@@ -22,6 +22,10 @@ import { Paragraph, Strong } from "shelving/ui";
 
 ## Styling
 
-`Strong` has no own theming hooks — it sets `font-weight: var(--weight-strong)` and inherits everything else from its surroundings.
+`Strong` only sets its font weight and inherits colour and size from its surroundings.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--strong-weight` | Font weight | `var(--weight-strong)` |
 
 **Global tokens it reads:** `--weight-strong`.

package/ui/inline/Strong.module.css

@@ -5,6 +5,6 @@
 	.strong,
 	.prose :is(strong, b) {
 		/* Style */
-		font-weight: var(--weight-strong);
+		font-weight: var(--strong-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Strong.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import STRONG_CSS from "./Strong.module.css";
 
@@ -10,7 +11,7 @@ const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
  *
  * @see https://shelving.cc/ui/StrongProps
  */
-export interface StrongProps extends OptionalChildProps {}
+export interface StrongProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
@@ -18,6 +19,15 @@ export interface StrongProps extends OptionalChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export function Strong({ children }: StrongProps): ReactElement {
-	return <strong className={STRONG_CLASS}>{children}</strong>;
+export function Strong({ children, ...props }: StrongProps): ReactElement {
+	return (
+		<strong
+			className={getClass(
+				STRONG_CLASS, //
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</strong>
+	);
 }

package/ui/misc/Icon.d.ts

@@ -1,15 +1,17 @@
 import type { ComponentType, ReactElement } from "react";
 import { type ColorVariants } from "../style/Color.js";
+import type { SpaceVariants } from "../style/Space.js";
 import { type StatusVariants } from "../style/Status.js";
+import type { TintVariant } from "../style/Tint.js";
 import { type SizeVariant } from "../style/Typography.js";
 /**
  * Props for `<Icon>` — the `status` to represent and optional icon `size`.
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
     /**
-     * Set the icon to use. Defaults to appropriate icon matching for `status`
+     * Set the icon to use. Defaults to appropriate icon for `status`
      */
     icon?: ComponentType<{
         className?: string | undefined;
@@ -18,7 +20,12 @@ export interface IconProps extends ColorVariants, StatusVariants {
      * Size of the icon.
      * @default var(--size-icon)
      */
-    size?: SizeVariant;
+    size?: SizeVariant | undefined;
+    /**
+     * Tint of the selected color.
+     * @default "50"
+     */
+    tint?: TintVariant | undefined;
 }
 /**
  * Render the icon for a given status, coloured to match.

package/ui/misc/Icon.module.css

@@ -4,10 +4,19 @@
 
 @layer defaults {
 	.icon {
-		font-size: var(--icon-size, var(--size-icon));
+		/* Box */
 		width: 1em;
 		height: 1em;
+		margin: 0;
+		padding: 0;
+
+		/* Style */
 		color: var(--icon-color, var(--tint-50));
+
+		/* Contents */
 		flex: none;
+
+		/* Text */
+		font-size: var(--icon-size, var(--size-icon));
 	}
 }

package/ui/misc/Icon.tsx

@@ -1,7 +1,9 @@
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { ComponentType, ReactElement } from "react";
 import { type ColorVariants, getColorClass } from "../style/Color.js";
+import type { SpaceVariants } from "../style/Space.js";
 import { getStatusClass, type Status, type StatusVariants } from "../style/Status.js";
+import type { TintVariant } from "../style/Tint.js";
 import { getTypographyClass, type SizeVariant } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import ICON_CSS from "./Icon.module.css";
@@ -22,16 +24,21 @@ const STATUS_ICONS: {
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
 	/**
-	 * Set the icon to use. Defaults to appropriate icon matching for `status`
+	 * Set the icon to use. Defaults to appropriate icon for `status`
 	 */
 	icon?: ComponentType<{ className?: string | undefined }>;
 	/**
 	 * Size of the icon.
 	 * @default var(--size-icon)
 	 */
-	size?: SizeVariant;
+	size?: SizeVariant | undefined;
+	/**
+	 * Tint of the selected color.
+	 * @default "50"
+	 */
+	tint?: TintVariant | undefined;
 }
 
 /**
@@ -50,7 +57,7 @@ export function Icon(props: IconProps): ReactElement {
 				getModuleClass(ICON_CSS, "icon"), //
 				getColorClass(props),
 				getStatusClass(props),
-				getTypographyClass(props),
+				getTypographyClass(props), // Used for size and tint.
 			)}
 		/>
 	);