shelving 1.260.3 → 1.262.0

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,17 @@
 import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.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, TypographyVariants {}
 
 /**
  * Inline link — delegates to `<Clickable>`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
@@ -19,5 +20,13 @@ 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, //
+				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/Span.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import { type TypographyVariants } from "../style/Typography.js";
+import type { OptionalChildProps } from "../util/props.js";
+/**
+ * Props for `Span` — colour and typography variants, plus optional `children`.
+ *
+ * @see https://shelving.cc/ui/SpanProps
+ */
+export interface SpanProps extends OptionalChildProps, TypographyVariants {
+}
+/**
+ * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
+ * - Reach for it to apply variants (`size`, `weight`, `tint`, `color`, …) to a run of text that has no semantic meaning of its own.
+ *
+ * @kind component
+ * @example <Span weight="strong" tint="30">label</Span>
+ * @see https://shelving.cc/ui/Span
+ */
+export declare function Span({ children, ...props }: SpanProps): ReactElement;

package/ui/inline/Span.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTypographyClass } from "../style/Typography.js";
+/**
+ * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
+ * - Reach for it to apply variants (`size`, `weight`, `tint`, `color`, …) to a run of text that has no semantic meaning of its own.
+ *
+ * @kind component
+ * @example <Span weight="strong" tint="30">label</Span>
+ * @see https://shelving.cc/ui/Span
+ */
+export function Span({ children, ...props }) {
+    return _jsx("span", { className: getTypographyClass(props), children: children });
+}

package/ui/inline/Span.md

@@ -0,0 +1,33 @@
+# Span
+
+Styled inline text — renders a `<span>` element that carries only the colour and typography variant classes you pass it, with no styling of its own. Reach for it when you need to apply variants to a run of text that has no semantic meaning, the inline counterpart to a styled `<div>`.
+
+**Things to know:**
+
+- It is purely presentational: use `<Strong>` for importance, `<Emphasis>` for stress emphasis, `<Mark>` for highlighting, and `<Small>` for fine print — `Span` is for everything that is _only_ a visual tweak.
+- With no props it is an inert wrapper — it renders a bare `<span>` and changes nothing.
+- It accepts the full [typography variants](/ui/TypographyVariants) (`size`, `weight`, `font`, `case`, `tint`, `left` / `center` / `right`, `wrap` / `nowrap`) and the [colour variant](/ui/ColorVariants) (`color`).
+- `color` sets the [tint ladder](/ui/TINT_CLASS) for the span and its descendants; pair it with `tint` to actually paint the span's own text from a ladder step (e.g. `color="purple" tint="40"`).
+
+## Usage
+
+### Applying typography variants
+
+```tsx
+import { Span } from "shelving/ui";
+
+<p>Total <Span weight="strong">$35.00</Span> due today.</p>
+<p><Span case="upper" size="xsmall">New</Span></p>
+```
+
+### Colouring a run of text
+
+```tsx
+import { Span } from "shelving/ui";
+
+<Span color="purple" tint="40">on-brand accent</Span>
+```
+
+## Styling
+
+`Span` declares no CSS of its own — there are no theming hooks. All appearance comes from the colour and typography variant props, which apply shared variant classes from the design system.

package/ui/inline/Span.tsx

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import type { OptionalChildProps } from "../util/props.js";
+
+/**
+ * Props for `Span` — colour and typography variants, plus optional `children`.
+ *
+ * @see https://shelving.cc/ui/SpanProps
+ */
+export interface SpanProps extends OptionalChildProps, TypographyVariants {}
+
+/**
+ * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
+ * - Reach for it to apply variants (`size`, `weight`, `tint`, `color`, …) to a run of text that has no semantic meaning of its own.
+ *
+ * @kind component
+ * @example <Span weight="strong" tint="30">label</Span>
+ * @see https://shelving.cc/ui/Span
+ */
+export function Span({ children, ...props }: SpanProps): ReactElement {
+	return <span className={getTypographyClass(props)}>{children}</span>;
+}

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/inline/index.d.ts

@@ -5,6 +5,7 @@ export * from "./Inserted.js";
 export * from "./Link.js";
 export * from "./Mark.js";
 export * from "./Small.js";
+export * from "./Span.js";
 export * from "./Strong.js";
 export * from "./Subscript.js";
 export * from "./Superscript.js";

package/ui/inline/index.js

@@ -5,6 +5,7 @@ export * from "./Inserted.js";
 export * from "./Link.js";
 export * from "./Mark.js";
 export * from "./Small.js";
+export * from "./Span.js";
 export * from "./Strong.js";
 export * from "./Subscript.js";
 export * from "./Superscript.js";

package/ui/inline/index.ts

@@ -5,6 +5,7 @@ export * from "./Inserted.js";
 export * from "./Link.js";
 export * from "./Mark.js";
 export * from "./Small.js";
+export * from "./Span.js";
 export * from "./Strong.js";
 export * from "./Subscript.js";
 export * from "./Superscript.js";

package/ui/misc/Icon.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
+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";

package/ui/misc/Icon.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import { getColorClass } from "../style/Color.js";
 import { getStatusClass } from "../style/Status.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -24,5 +23,5 @@ const STATUS_ICONS = {
 export function Icon(props) {
     const { status = "info", icon: Element = STATUS_ICONS[status] ?? InformationCircleIcon } = props;
     return (_jsx(Element, { className: getClass(getModuleClass(ICON_CSS, "icon"), //
-        getColorClass(props), getStatusClass(props), getTypographyClass(props)) }));
+        getStatusClass(props), getTypographyClass(props)) }));
 }

package/ui/misc/Icon.tsx

@@ -1,6 +1,6 @@
 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 { ColorVariants } 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";
@@ -55,9 +55,8 @@ export function Icon(props: IconProps): ReactElement {
 		<Element
 			className={getClass(
 				getModuleClass(ICON_CSS, "icon"), //
-				getColorClass(props),
 				getStatusClass(props),
-				getTypographyClass(props), // Used for size and tint.
+				getTypographyClass(props), // Used for colour, size, and tint.
 			)}
 		/>
 	);

package/ui/misc/Tag.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
-import { type ColorVariants } from "../style/Color.js";
 import { type StatusVariants } from "../style/Status.js";
 import { type TypographyVariants } from "../style/Typography.js";
 /**
@@ -8,7 +7,7 @@ import { type TypographyVariants } from "../style/Typography.js";
  *
  * @see https://shelving.cc/ui/TagVariants
  */
-export interface TagVariants extends StatusVariants, ColorVariants, TypographyVariants {
+export interface TagVariants extends StatusVariants, TypographyVariants {
 }
 /**
  * Build the combined `className` string for a `<Tag>` from its styling variants.

package/ui/misc/Tag.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
-import { getColorClass } from "../style/Color.js";
 import { getStatusClass } from "../style/Status.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -16,7 +15,7 @@ const TAG_CLASS = getModuleClass(TAG_CSS, "tag");
  */
 export function getTagClass(variants) {
     return getClass(TAG_CLASS, //
-    getStatusClass(variants), getColorClass(variants), getTypographyClass(variants));
+    getStatusClass(variants), getTypographyClass(variants));
 }
 /**
  * Small inline label used to annotate other content.

package/ui/misc/Tag.tsx

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -13,7 +12,7 @@ const TAG_CLASS = getModuleClass(TAG_CSS, "tag");
  *
  * @see https://shelving.cc/ui/TagVariants
  */
-export interface TagVariants extends StatusVariants, ColorVariants, TypographyVariants {}
+export interface TagVariants extends StatusVariants, TypographyVariants {}
 
 /**
  * Build the combined `className` string for a `<Tag>` from its styling variants.
@@ -27,7 +26,6 @@ export function getTagClass(variants: TagVariants) {
 	return getClass(
 		TAG_CLASS, //
 		getStatusClass(variants),
-		getColorClass(variants),
 		getTypographyClass(variants),
 	);
 }

package/ui/style/Block.d.ts

@@ -1,4 +1,3 @@
-import { type ColorVariants } from "./Color.js";
 import { type IndentVariants } from "./Indent.js";
 import { type PaddingVariants } from "./Padding.js";
 import { type SpaceVariants } from "./Space.js";
@@ -9,7 +8,7 @@ import { type WidthVariants } from "./Width.js";
  *
  * @see https://shelving.cc/ui/BlockVariants
  */
-export interface BlockVariants extends ColorVariants, IndentVariants, SpaceVariants, PaddingVariants, TypographyVariants, WidthVariants {
+export interface BlockVariants extends IndentVariants, SpaceVariants, PaddingVariants, TypographyVariants, WidthVariants {
 }
 /**
  * Get the combined `className` string for a block from its styling variants.