@unpunnyfuns/swatchbook-blocks 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -1,8 +1,10 @@
+import './style.css';
 import Color from "colorjs.io";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, diagnostics, themes, themesResolved } from "virtual:swatchbook/tokens";
+import cx from "clsx";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -179,130 +181,23 @@ function stringifyFallback(value, fallback) {
 }
 //#endregion
 //#region src/internal/styles.tsx
-/**
-* Chrome-style primitives shared across every block. The `var(--sb-*)`
-* references resolve to the active `cssVarPrefix` via the wrapper's
-* `chromeAliases()` spread, so blocks stay theme-aware without each one
-* reimplementing the fallback chain.
-*
-* Add a new constant here when a second block needs it — not when the
-* first one does. Keep ad-hoc inline values out of blocks so restyling
-* the chrome is a one-file change.
-*/
-const MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
-const TEXT_DEFAULT = "var(--sb-color-sys-text-default, CanvasText)";
-const TEXT_MUTED = "var(--sb-color-sys-text-muted, CanvasText)";
-const SURFACE_DEFAULT = "var(--sb-color-sys-surface-default, Canvas)";
-const SURFACE_RAISED = "var(--sb-color-sys-surface-raised, Canvas)";
-const SURFACE_MUTED = "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))";
-const BORDER_DEFAULT = `1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.2))`;
-const BORDER_FAINT = `1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.15))`;
-const BORDER_STRONG = `1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))`;
-const surfaceStyle = {
-	fontFamily: "var(--sb-typography-sys-body-font-family, system-ui)",
-	fontSize: "var(--sb-typography-sys-body-font-size, 14px)",
-	color: TEXT_DEFAULT,
-	background: SURFACE_DEFAULT,
-	padding: 12,
-	borderRadius: 6
-};
-const captionStyle = {
-	padding: "4px 0 12px",
-	color: TEXT_MUTED,
-	fontSize: 12
-};
-const typePillStyle = {
-	display: "inline-block",
-	padding: "2px 6px",
-	borderRadius: 4,
-	fontSize: 10,
-	letterSpacing: .5,
-	textTransform: "uppercase",
-	background: SURFACE_MUTED
-};
-const emptyStyle = {
-	padding: "24px 12px",
-	textAlign: "center",
-	color: TEXT_MUTED
-};
+const TEXT_MUTED = "var(--swatchbook-text-muted, CanvasText)";
+const SURFACE_RAISED = "var(--swatchbook-surface-raised, Canvas)";
+const SURFACE_MUTED = "var(--swatchbook-surface-muted, rgba(128,128,128,0.15))";
+const BORDER_FAINT = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.15))`;
+const BORDER_STRONG = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.3))`;
 /**
 * Inner content for a block's "nothing to render" state. Call sites wrap
-* it in their own block wrapper (which already carries `themeAttrs` +
-* `chromeAliases`), so the message itself just needs the muted type.
+* it in their own block wrapper (which already carries `themeAttrs`), so
+* the message itself just needs the muted type.
 */
 function EmptyState({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		style: emptyStyle,
+		className: "sb-block__empty",
 		children
 	});
 }
 //#endregion
-//#region src/internal/data-attr.ts
-/**
-* Produce a prefixed `data-*` attribute name when `prefix` is set, bare
-* `data-<key>` otherwise. Mirrors `dataAttr` in `@unpunnyfuns/swatchbook-core`
-* so block wrappers and emitted-CSS selectors stay in lockstep without
-* blocks taking a runtime dep on core.
-*/
-function dataAttr(prefix, key) {
-	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
-}
-/**
-* Marker attribute set on every block wrapper. Used as the scope selector
-* for the defensive element-reset stylesheet in `block-reset.ts` so
-* Storybook MDX docs CSS (`.sbdocs table`, `.sbdocs ul`, …) can't bleed
-* into our chrome.
-*/
-const BLOCK_ATTR = "data-swatchbook-block";
-/**
-* Spread helper for the common `<div data-<prefix>-theme="…" data-swatchbook-block>`
-* block wrapper. Returns an object keyed on the prefixed theme attribute
-* plus the scoping marker so the call site stays readable:
-* `<div {...themeAttrs(prefix, theme)} />`.
-*/
-function themeAttrs(prefix, themeName) {
-	return {
-		[dataAttr(prefix, "theme")]: themeName,
-		[BLOCK_ATTR]: ""
-	};
-}
-/**
-* Vars block chrome reads by literal `var(--sb-*)` regardless of what the
-* project's actual `cssVarPrefix` is. Keeping the literal spelling means we
-* only need to alias these few names on each block wrapper; the bulk of
-* block styling stays untouched.
-*/
-const CHROME_VARS = [
-	"color-sys-border-default",
-	"color-sys-surface-default",
-	"color-sys-surface-muted",
-	"color-sys-surface-raised",
-	"color-sys-text-default",
-	"color-sys-text-muted",
-	"color-sys-accent-bg",
-	"color-sys-accent-fg",
-	"typography-sys-body-font-family",
-	"typography-sys-body-font-size"
-];
-/**
-* CSS custom-property aliases that redirect the block chrome's `var(--sb-*)`
-* reads to the project's actual `cssVarPrefix`. Block components spread the
-* return into their wrapper's inline `style`, so the aliases cascade down
-* into every nested block / sample / token-detail piece without each one
-* re-reading the prefix.
-*
-* When `prefix === 'sb'` the aliases are self-references — we skip emission
-* to keep the inline style shorter. When `prefix === ''` (opt-out) the
-* aliases point at the bare `var(--color-sys-…)` names core emitted.
-*/
-function chromeAliases(prefix) {
-	if (prefix === "sb") return {};
-	const out = {};
-	const head = prefix ? `${prefix}-` : "";
-	for (const name of CHROME_VARS) out[`--sb-${name}`] = `var(--${head}${name})`;
-	return out;
-}
-//#endregion
 //#region src/internal/channel-globals.ts
 const AXES_GLOBAL_KEY = "swatchbookAxes";
 const THEME_GLOBAL_KEY = "swatchbookTheme";
@@ -431,62 +326,6 @@ function useColorFormat() {
 	return contextValue ?? channelGlobals.format ?? "hex";
 }
 //#endregion
-//#region src/internal/block-reset.ts
-/**
-* Defensive element reset scoped to every block wrapper.
-*
-* Storybook 10's MDX docs applies house-style CSS to semantic elements
-* (`.sbdocs table`, `.sbdocs th/td`, `.sbdocs ul/li`, `.sbdocs details/summary`)
-* that bleeds into any block rendered inside a docs page. Our blocks set
-* inline styles on those elements for the properties they care about, but
-* anything they don't touch (background, border, margin, etc.) inherits
-* the docs look. That's why the Dashboard tree/table looked different
-* inside MDX vs a regular story.
-*
-* The fix mounts one stylesheet once per browsing session that scopes
-* `all: revert` on the semantic elements used by blocks, under the
-* `[data-swatchbook-block]` attribute carried by every block's outer
-* wrapper (via `themeAttrs`). `all: revert` restores browser defaults —
-* the block's inline styles still win on top of that, and MDX house
-* styles stop leaking in.
-*
-* The reset excludes the wrapper itself (direct `[data-swatchbook-block]`
-* selector) because the wrapper's `surfaceStyle` is what we want to keep.
-*/
-const STYLE_ID = "swatchbook-block-reset";
-const RESET_CSS = `[data-swatchbook-block] table,
-[data-swatchbook-block] thead,
-[data-swatchbook-block] tbody,
-[data-swatchbook-block] tr,
-[data-swatchbook-block] th,
-[data-swatchbook-block] td,
-[data-swatchbook-block] caption,
-[data-swatchbook-block] ul,
-[data-swatchbook-block] ol,
-[data-swatchbook-block] li,
-[data-swatchbook-block] details,
-[data-swatchbook-block] summary,
-[data-swatchbook-block] code,
-[data-swatchbook-block] pre,
-[data-swatchbook-block] p,
-[data-swatchbook-block] h1,
-[data-swatchbook-block] h2,
-[data-swatchbook-block] h3,
-[data-swatchbook-block] h4,
-[data-swatchbook-block] h5,
-[data-swatchbook-block] h6 {
-  all: revert-layer;
-}
-`;
-function ensureBlockResetStylesheet() {
-	if (typeof document === "undefined") return;
-	if (document.getElementById(STYLE_ID)) return;
-	const style = document.createElement("style");
-	style.id = STYLE_ID;
-	style.textContent = RESET_CSS;
-	document.head.appendChild(style);
-}
-//#endregion
 //#region src/internal/use-project.ts
 const STYLE_ELEMENT_ID = "swatchbook-tokens";
 function ensureStylesheet(css) {
@@ -542,9 +381,6 @@ function snapshotToData(snapshot) {
 function useProject() {
 	const snapshot = useOptionalSwatchbookData();
 	const fallback = useVirtualModuleFallback(snapshot === null);
-	useEffect(() => {
-		ensureBlockResetStylesheet();
-	}, []);
 	return snapshot !== null ? snapshotToData(snapshot) : fallback;
 }
 function useVirtualModuleFallback(enabled) {
@@ -613,7 +449,6 @@ function BorderSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			...chromeAliases(cssVarPrefix),
 			...sampleStyle$1,
 			border: cssVar
 		},
@@ -621,6 +456,50 @@ function BorderSample({ path }) {
 	});
 }
 //#endregion
+//#region src/internal/data-attr.ts
+/**
+* Produce a prefixed `data-*` attribute name when `prefix` is set, bare
+* `data-<key>` otherwise. Mirrors `dataAttr` in `@unpunnyfuns/swatchbook-core`
+* so block wrappers and emitted-CSS selectors stay in lockstep without
+* blocks taking a runtime dep on core.
+*/
+function dataAttr(prefix, key) {
+	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
+}
+/**
+* Marker attribute set on every block wrapper. Retained as a stable hook
+* for consumer-side selectors (e.g. when a host app wants to target or
+* override block chrome without relying on hashed class names).
+*/
+const BLOCK_ATTR = "data-swatchbook-block";
+/**
+* Opt-out class that Storybook's `.sbdocs` stylesheet uses to self-exclude
+* on MDX docs pages — every `.sbdocs` house rule is wrapped in
+* `:not(.sb-unstyled, .sb-unstyled *)`, so any descendant of a `.sb-unstyled`
+* container is left alone. Stamped onto every block wrapper so blocks
+* render identically in MDX docs and regular stories without fighting
+* cascade specificity.
+*/
+const WRAPPER_CLASSES = "sb-unstyled sb-block";
+/**
+* Spread helper for the common block wrapper. Returns:
+* - `data-<prefix>-theme="<composed theme name>"` — so theme-keyed CSS
+*   emitted by `@unpunnyfuns/swatchbook-core` resolves against this
+*   subtree.
+* - `data-swatchbook-block` — stable consumer hook for targeting block
+*   chrome from outside.
+* - `className="sb-unstyled sb-block"` — Storybook's opt-out class so
+*   MDX docs house styles self-exclude the subtree, plus `sb-block`
+*   which carries the shared chrome from `internal/styles.css`.
+*/
+function themeAttrs(prefix, themeName) {
+	return {
+		[dataAttr(prefix, "theme")]: themeName,
+		[BLOCK_ATTR]: "",
+		className: WRAPPER_CLASSES
+	};
+}
+//#endregion
 //#region src/internal/sort-tokens.ts
 /**
 * Stable sort for a filtered `[path, token][]` list.
@@ -726,51 +605,6 @@ function toDisplayable(v) {
 }
 //#endregion
 //#region src/BorderPreview.tsx
-const styles$16 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sampleCell: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	breakdown: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 2
-	},
-	breakdownKey: { color: TEXT_MUTED }
-};
 function formatDimension$2(raw) {
 	if (raw == null) return "—";
 	if (typeof raw === "number") return String(raw);
@@ -818,56 +652,48 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$16.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$16.empty,
+			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$16.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$16.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$16.row,
+			className: "sb-border-preview__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$16.meta,
+					className: "sb-border-preview__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$16.path,
+						className: "sb-border-preview__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$16.cssVar,
+						className: "sb-border-preview__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$16.sampleCell,
+					className: "sb-border-preview__sample-cell",
 					children: /* @__PURE__ */ jsx(BorderSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$16.breakdown,
+					className: "sb-border-preview__breakdown",
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							style: styles$16.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "width"
 						}),
 						/* @__PURE__ */ jsx("span", { children: formatDimension$2(row.value.width) }),
 						/* @__PURE__ */ jsx("span", {
-							style: styles$16.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "style"
 						}),
 						/* @__PURE__ */ jsx("span", { children: row.value.style != null ? String(row.value.style) : "—" }),
 						/* @__PURE__ */ jsx("span", {
-							style: styles$16.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "color"
 						}),
 						/* @__PURE__ */ jsx("span", { children: formatColor$2(row.value.color) })
@@ -879,52 +705,6 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 }
 //#endregion
 //#region src/ColorPalette.tsx
-const styles$15 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	group: { marginBottom: 20 },
-	groupHeader: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		marginBottom: 8
-	},
-	grid: {
-		display: "grid",
-		gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-		gap: 8
-	},
-	card: {
-		border: BORDER_DEFAULT,
-		borderRadius: 6,
-		overflow: "hidden",
-		display: "flex",
-		flexDirection: "column"
-	},
-	swatch: {
-		height: 56,
-		width: "100%",
-		borderBottom: BORDER_FAINT
-	},
-	meta: {
-		padding: "8px 10px",
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	leaf: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	}
-};
 /**
 * Count segments in the filter before the first glob (`*` / `**`).
 * `color.ref.*` → 2; `color.sys.surface.*` → 3; `color` → 1; undefined → 0.
@@ -951,13 +731,6 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			dir: sortDir
 		});
 		const maxDepth = entries.reduce((m, [p]) => Math.max(m, p.split(".").length), 0);
-		/**
-		* Auto-derive: group one level below the filter's fixed prefix, but
-		* clamp so each swatch retains at least one leaf segment. A filter
-		* like `color.ref.blue.*` (fixed length 3) with only 4-segment tokens
-		* would try groupBy=4 → one-per-group; clamp to `maxDepth - 1` so the
-		* whole ramp lands in one group with each shade as a leaf.
-		*/
 		const effectiveGroupBy = groupBy ?? Math.min(fixedPrefixLength(filter) + 1, Math.max(maxDepth - 1, 1));
 		const bucket = /* @__PURE__ */ new Map();
 		for (const [path, token] of entries) {
@@ -989,50 +762,40 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$15.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$15.empty,
+			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$15.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$15.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), groups.map(([group, swatches]) => /* @__PURE__ */ jsxs("section", {
-			style: styles$15.group,
+			className: "sb-color-palette__group",
 			children: [/* @__PURE__ */ jsx("div", {
-				style: styles$15.groupHeader,
+				className: "sb-color-palette__group-header",
 				children: group
 			}), /* @__PURE__ */ jsx("div", {
-				style: styles$15.grid,
+				className: "sb-color-palette__grid",
 				children: swatches.map((swatch) => /* @__PURE__ */ jsxs("div", {
-					style: styles$15.card,
+					className: "sb-color-palette__card",
 					children: [/* @__PURE__ */ jsx("div", {
-						style: {
-							...styles$15.swatch,
-							background: swatch.cssVar
-						},
+						className: "sb-color-palette__swatch",
+						style: { background: swatch.cssVar },
 						"aria-hidden": true
 					}), /* @__PURE__ */ jsxs("div", {
-						style: styles$15.meta,
+						className: "sb-color-palette__meta",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$15.leaf,
+							className: "sb-color-palette__leaf",
 							children: swatch.leaf
 						}), /* @__PURE__ */ jsxs("span", {
-							style: styles$15.value,
+							className: "sb-color-palette__value",
 							children: [swatch.value, swatch.outOfGamut && /* @__PURE__ */ jsxs("span", {
 								title: "Out of sRGB gamut for this format",
 								"aria-label": "out of gamut",
-								style: { marginLeft: 4 },
+								className: "sb-color-palette__gamut-warn",
 								children: [" ", "⚠"]
 							})]
 						})]
@@ -1044,55 +807,11 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 }
 //#endregion
 //#region src/Diagnostics.tsx
-const severityColor = {
-	error: "#d64545",
-	warn: "#b08900",
-	info: "inherit"
-};
 const severityLabel = {
 	error: "ERROR",
 	warn: "WARN",
 	info: "INFO"
 };
-const styles$14 = {
-	wrapper: surfaceStyle,
-	summary: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "4px 0",
-		fontSize: 13,
-		cursor: "pointer",
-		listStyle: "none",
-		fontWeight: 600
-	},
-	list: {
-		listStyle: "none",
-		margin: "8px 0 0",
-		padding: 0,
-		display: "flex",
-		flexDirection: "column"
-	},
-	row: {
-		display: "grid",
-		gridTemplateColumns: "60px 1fr",
-		gap: 12,
-		padding: "8px 4px",
-		borderTop: BORDER_FAINT,
-		fontSize: 12
-	},
-	label: {
-		fontWeight: 600,
-		fontSize: 10,
-		letterSpacing: .5
-	},
-	meta: {
-		color: TEXT_MUTED,
-		fontSize: 11,
-		marginTop: 4,
-		opacity: .7
-	}
-};
 function summaryText(diagnostics) {
 	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
 	const counts = {
@@ -1110,11 +829,11 @@ function summaryText(diagnostics) {
 function diagnosticKey(d, i) {
 	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
 }
-function summaryColor(diagnostics) {
-	if (diagnostics.length === 0) return "#30a46c";
-	if (diagnostics.some((d) => d.severity === "error")) return severityColor.error;
-	if (diagnostics.some((d) => d.severity === "warn")) return severityColor.warn;
-	return "inherit";
+function summaryVariant(diagnostics) {
+	if (diagnostics.length === 0) return "ok";
+	if (diagnostics.some((d) => d.severity === "error")) return "error";
+	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
+	return null;
 }
 /**
 * Render the project's load diagnostics — parser errors, resolver warnings,
@@ -1130,33 +849,24 @@ function Diagnostics({ caption } = {}) {
 	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
 	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
 	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
+	const variant = summaryVariant(diagnostics);
 	return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$14.wrapper
-		},
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
 			open: hasErrorsOrWarnings,
 			children: [/* @__PURE__ */ jsx("summary", {
-				style: {
-					...styles$14.summary,
-					color: summaryColor(diagnostics)
-				},
+				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
 				children: headingText
 			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
-				style: styles$14.list,
+				className: "sb-diagnostics__list",
 				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
-					style: styles$14.row,
+					className: "sb-diagnostics__row",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: {
-							...styles$14.label,
-							color: severityColor[d.severity]
-						},
+						className: cx("sb-diagnostics__label", { [`sb-diagnostics__label--${d.severity}`]: d.severity !== "info" }),
 						children: severityLabel[d.severity]
 					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
-						style: styles$14.meta,
+						className: "sb-diagnostics__meta",
 						children: [
 							d.group,
 							d.filename,
@@ -1171,21 +881,21 @@ function Diagnostics({ caption } = {}) {
 //#endregion
 //#region src/dimension-scale/DimensionBar.tsx
 const MAX_RENDER_PX$1 = 480;
-const styles$13 = {
+const styles$1 = {
 	bar: {
 		height: 14,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
 		borderRadius: 2,
 		minWidth: 1
 	},
 	radiusSample: {
 		width: 56,
 		height: 56,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
 		border: BORDER_STRONG
 	},
 	sizeSample: {
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
 		border: BORDER_STRONG,
 		minWidth: 1,
 		minHeight: 1
@@ -1214,20 +924,17 @@ function DimensionBar({ path, kind = "length" }) {
 	const token = resolved[path];
 	const pxValue = toPixels$1(token?.$value);
 	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
-	const aliases = chromeAliases(cssVarPrefix);
 	switch (kind) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$13.radiusSample,
+				...styles$1.radiusSample,
 				borderRadius: cssVar
 			},
 			"aria-hidden": true
 		});
 		case "size": return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$13.sizeSample,
+				...styles$1.sizeSample,
 				width: cappedValue,
 				height: cappedValue
 			},
@@ -1235,8 +942,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		default: return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$13.bar,
+				...styles$1.bar,
 				width: cappedValue
 			},
 			"aria-hidden": true
@@ -1388,58 +1094,6 @@ function formatUnknown(v) {
 //#endregion
 //#region src/DimensionScale.tsx
 const MAX_RENDER_PX = 480;
-const styles$12 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "10px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	visualCell: {
-		display: "flex",
-		alignItems: "center",
-		minWidth: 0
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7,
-		whiteSpace: "nowrap"
-	},
-	cap: {
-		fontFamily: MONO_STACK,
-		fontSize: 10,
-		opacity: .6,
-		marginLeft: 6
-	}
-};
-/**
-* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
-* purpose of ordering and deciding whether to show a cap indicator.
-*/
 function toPixels(raw) {
 	if (raw == null || typeof raw !== "object") return NaN;
 	const v = raw;
@@ -1480,44 +1134,36 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$12.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$12.empty,
+			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$12.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$12.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$12.row,
+			className: "sb-dimension-scale__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$12.meta,
+					className: "sb-dimension-scale__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$12.path,
+						className: "sb-dimension-scale__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$12.specs,
+						className: "sb-dimension-scale__specs",
 						children: row.displayValue
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$12.visualCell,
+					className: "sb-dimension-scale__visual-cell",
 					children: [/* @__PURE__ */ jsx(DimensionBar, {
 						path: row.path,
 						kind
 					}), row.capped && /* @__PURE__ */ jsxs("span", {
-						style: styles$12.cap,
+						className: "sb-dimension-scale__cap",
 						children: [
 							"capped at ",
 							MAX_RENDER_PX,
@@ -1526,7 +1172,7 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 					})]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$12.cssVar,
+					className: "sb-dimension-scale__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1535,46 +1181,6 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 }
 //#endregion
 //#region src/FontFamilySample.tsx
-const styles$11 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	stack: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	sample: {
-		fontSize: 22,
-		lineHeight: 1.2
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	empty: emptyStyle
-};
 function stackString(raw) {
 	if (typeof raw === "string") return raw;
 	if (Array.isArray(raw)) return raw.map(String).join(", ");
@@ -1604,46 +1210,36 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$11.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$11.empty,
+			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$11.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$11.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$11.row,
+			className: "sb-font-family-sample__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$11.meta,
+					className: "sb-font-family-sample__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$11.path,
+						className: "sb-font-family-sample__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$11.stack,
+						className: "sb-font-family-sample__stack",
 						children: row.stack
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$11.sample,
-						fontFamily: row.cssVar
-					},
+					className: "sb-font-family-sample__sample",
+					style: { fontFamily: row.cssVar },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$11.cssVar,
+					className: "sb-font-family-sample__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1652,46 +1248,6 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 }
 //#endregion
 //#region src/FontWeightScale.tsx
-const styles$10 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "12px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	sample: {
-		fontSize: 28,
-		lineHeight: 1
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	}
-};
 function toWeight(raw) {
 	if (typeof raw === "number") return raw;
 	if (typeof raw === "string") {
@@ -1725,46 +1281,36 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$10.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$10.empty,
+			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$10.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$10.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$10.row,
+			className: "sb-font-weight-scale__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$10.meta,
+					className: "sb-font-weight-scale__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$10.path,
+						className: "sb-font-weight-scale__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$10.value,
+						className: "sb-font-weight-scale__value",
 						children: row.display
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$10.sample,
-						fontWeight: row.cssVar
-					},
+					className: "sb-font-weight-scale__sample",
+					style: { fontWeight: row.cssVar },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$10.cssVar,
+					className: "sb-font-weight-scale__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1773,62 +1319,6 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 }
 //#endregion
 //#region src/GradientPalette.tsx
-const styles$9 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(180px, 240px) 1fr minmax(140px, 220px)",
-		gap: 16,
-		alignItems: "center",
-		padding: "16px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sample: {
-		height: 56,
-		borderRadius: 6,
-		border: BORDER_FAINT
-	},
-	stops: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	stopRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8
-	},
-	stopSwatch: {
-		width: 10,
-		height: 10,
-		borderRadius: 2,
-		border: BORDER_DEFAULT,
-		flex: "0 0 auto"
-	},
-	stopPosition: { opacity: .6 }
-};
 function asStops(raw) {
 	if (!Array.isArray(raw)) return [];
 	return raw;
@@ -1869,59 +1359,47 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$9.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$9.empty,
+			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$9.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$9.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$9.row,
+			className: "sb-gradient-palette__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$9.meta,
+					className: "sb-gradient-palette__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$9.path,
+						className: "sb-gradient-palette__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$9.cssVar,
+						className: "sb-gradient-palette__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$9.sample,
-						background: `linear-gradient(to right, ${row.cssVar})`
-					},
+					className: "sb-gradient-palette__sample",
+					style: { background: `linear-gradient(to right, ${row.cssVar})` },
 					"aria-hidden": true
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$9.stops,
+					className: "sb-gradient-palette__stops",
 					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
-						style: styles$9.stopRow,
+						className: "sb-gradient-palette__stop-row",
 						children: [
 							/* @__PURE__ */ jsx("span", {
-								style: {
-									...styles$9.stopSwatch,
-									background: stopCssColor(stop)
-								},
+								className: "sb-gradient-palette__stop-swatch",
+								style: { background: stopCssColor(stop) },
 								"aria-hidden": true
 							}),
 							/* @__PURE__ */ jsx("span", { children: stopCssColor(stop) }),
 							/* @__PURE__ */ jsxs("span", {
-								style: styles$9.stopPosition,
+								className: "sb-gradient-palette__stop-position",
 								children: [
 									"@ ",
 									((stop.position ?? 0) * 100).toFixed(0),
@@ -1957,7 +1435,7 @@ function usePrefersReducedMotion() {
 //#region src/motion-preview/MotionSample.tsx
 const DEFAULT_DURATION_MS = 300;
 const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-const styles$8 = {
+const styles = {
 	track: {
 		position: "relative",
 		height: 36,
@@ -1972,7 +1450,7 @@ const styles$8 = {
 		height: 28,
 		marginTop: -14,
 		borderRadius: "50%",
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
+		background: "var(--swatchbook-accent-bg, #3b82f6)"
 	},
 	reducedMotion: {
 		fontSize: 11,
@@ -2050,7 +1528,7 @@ function resolveMotionSpec(token, themeTokens) {
 	return null;
 }
 function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { resolved, cssVarPrefix } = useProject();
+	const { resolved } = useProject();
 	const reducedMotion = usePrefersReducedMotion();
 	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
 	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
@@ -2074,20 +1552,14 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$8.reducedMotion
-		},
+		style: styles.reducedMotion,
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$8.track
-		},
+		style: styles.track,
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$8.ball,
+				...styles.ball,
 				left: phase === 1 ? "calc(100% - 32px)" : "4px",
 				transition: `left ${scaledDuration}ms ${easing}`
 			},
@@ -2103,88 +1575,6 @@ const SPEEDS = [
 	1,
 	2
 ];
-const styles$7 = {
-	wrapper: surfaceStyle,
-	caption: {
-		padding: "4px 0 4px",
-		color: TEXT_MUTED,
-		fontSize: 12
-	},
-	controls: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "8px 0 12px"
-	},
-	controlLabel: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		textTransform: "uppercase",
-		letterSpacing: .5
-	},
-	speedBtn: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		padding: "4px 8px",
-		background: "transparent",
-		color: "inherit",
-		border: BORDER_STRONG,
-		borderRadius: 4,
-		cursor: "pointer"
-	},
-	speedBtnActive: {
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		color: "var(--sb-color-sys-accent-fg, #fff)",
-		borderColor: "transparent"
-	},
-	replayBtn: {
-		fontSize: 11,
-		padding: "4px 10px",
-		marginLeft: "auto",
-		background: "transparent",
-		color: "inherit",
-		border: BORDER_STRONG,
-		borderRadius: 4,
-		cursor: "pointer"
-	},
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(180px, 240px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED,
-		whiteSpace: "nowrap"
-	},
-	empty: {
-		padding: "24px 12px",
-		textAlign: "center",
-		color: TEXT_MUTED
-	}
-};
 function formatSpec(row) {
 	switch (row.kind) {
 		case "transition": return `transition · ${Math.round(row.durationMs)}ms · ${row.easing}`;
@@ -2231,45 +1621,34 @@ function MotionPreview({ filter, caption }) {
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$7.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$7.empty,
+			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$7.wrapper
-		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				style: styles$7.caption,
+				className: "sb-block__caption",
 				children: captionText
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$7.controls,
+				className: "sb-motion-preview__controls",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: styles$7.controlLabel,
+						className: "sb-motion-preview__control-label",
 						children: "Speed"
 					}),
 					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						style: {
-							...styles$7.speedBtn,
-							...s === speed ? styles$7.speedBtnActive : {}
-						},
+						className: cx("sb-motion-preview__speed-btn", { "sb-motion-preview__speed-btn--active": s === speed }),
 						onClick: () => setSpeed(s),
 						children: [s, "×"]
 					}, s)),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						style: styles$7.replayBtn,
+						className: "sb-motion-preview__replay-btn",
 						onClick: () => setRun((n) => n + 1),
 						disabled: reducedMotion,
 						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
@@ -2278,15 +1657,15 @@ function MotionPreview({ filter, caption }) {
 				]
 			}),
 			rows.map((row) => /* @__PURE__ */ jsxs("div", {
-				style: styles$7.row,
+				className: "sb-motion-preview__row",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						style: styles$7.meta,
+						className: "sb-motion-preview__meta",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$7.path,
+							className: "sb-motion-preview__path",
 							children: row.path
 						}), /* @__PURE__ */ jsx("span", {
-							style: styles$7.specs,
+							className: "sb-motion-preview__specs",
 							children: formatSpec(row)
 						})]
 					}),
@@ -2296,7 +1675,7 @@ function MotionPreview({ filter, caption }) {
 						runKey: run
 					}),
 					/* @__PURE__ */ jsx("span", {
-						style: styles$7.cssVar,
+						className: "sb-motion-preview__css-var",
 						children: row.cssVar
 					})
 				]
@@ -2345,7 +1724,6 @@ function ShadowSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			...chromeAliases(cssVarPrefix),
 			...sampleStyle,
 			boxShadow: cssVar
 		},
@@ -2354,59 +1732,6 @@ function ShadowSample({ path }) {
 }
 //#endregion
 //#region src/ShadowPreview.tsx
-const styles$6 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
-		gap: 16,
-		alignItems: "center",
-		padding: "16px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sampleCell: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		height: 96
-	},
-	breakdown: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 2
-	},
-	breakdownKey: { color: TEXT_MUTED },
-	layerHeader: {
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		color: TEXT_MUTED,
-		marginTop: 6
-	}
-};
 function formatDimension(raw) {
 	if (raw == null) return "—";
 	if (typeof raw === "number") return String(raw);
@@ -2462,43 +1787,35 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$6.empty,
+			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$6.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$6.row,
+			className: "sb-shadow-preview__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$6.meta,
+					className: "sb-shadow-preview__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$6.path,
+						className: "sb-shadow-preview__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$6.cssVar,
+						className: "sb-shadow-preview__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$6.sampleCell,
+					className: "sb-shadow-preview__sample-cell",
 					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$6.breakdown,
+					className: "sb-shadow-preview__breakdown",
 					children: row.layers.length === 1 ? renderLayer(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
 						layer,
 						index: i,
@@ -2519,15 +1836,15 @@ function renderLayer(layer) {
 	];
 	if (layer.inset) entries.push(["inset", String(layer.inset)]);
 	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
-		style: styles$6.breakdownKey,
+		className: "sb-shadow-preview__breakdown-key",
 		children: k
 	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
 }
 function Layer({ layer, index, total }) {
 	return /* @__PURE__ */ jsxs("div", {
-		style: { gridColumn: "1 / -1" },
+		className: "sb-shadow-preview__layer",
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$6.layerHeader,
+			className: "sb-shadow-preview__layer-header",
 			children: [
 				"layer ",
 				index + 1,
@@ -2535,10 +1852,7 @@ function Layer({ layer, index, total }) {
 				total
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$6.breakdown,
-				marginTop: 2
-			},
+			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
 			children: renderLayer(layer)
 		})]
 	});
@@ -2555,53 +1869,6 @@ const STRING_STYLES = new Set([
 	"outset",
 	"inset"
 ]);
-const styles$5 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	line: {
-		height: 0,
-		borderTopWidth: 4,
-		borderTopColor: TEXT_DEFAULT,
-		width: "100%"
-	},
-	objectFallback: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: TEXT_MUTED
-	}
-};
 function extractCssStyle(value) {
 	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
 	return null;
@@ -2631,49 +1898,39 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$5.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$5.empty,
+			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$5.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$5.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$5.row,
+			className: "sb-stroke-style-sample__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$5.meta,
+					className: "sb-stroke-style-sample__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$5.path,
+						className: "sb-stroke-style-sample__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$5.value,
+						className: "sb-stroke-style-sample__value",
 						children: row.displayValue
 					})]
 				}),
 				row.cssStyle ? /* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$5.line,
-						borderTopStyle: row.cssStyle
-					},
+					className: "sb-stroke-style-sample__line",
+					style: { borderTopStyle: row.cssStyle },
 					"aria-hidden": true
 				}) : /* @__PURE__ */ jsx("span", {
-					style: styles$5.objectFallback,
+					className: "sb-stroke-style-sample__object-fallback",
 					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$5.cssVar,
+					className: "sb-stroke-style-sample__css-var",
 					children: row.cssVar
 				})
 			]
@@ -2681,275 +1938,6 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 	});
 }
 //#endregion
-//#region src/token-detail/styles.ts
-const styles$4 = {
-	wrapper: {
-		...surfaceStyle,
-		padding: 16,
-		border: BORDER_DEFAULT
-	},
-	heading: {
-		margin: 0,
-		fontFamily: MONO_STACK,
-		fontSize: 16
-	},
-	subline: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		margin: "4px 0 12px",
-		fontSize: 12,
-		opacity: .8
-	},
-	typePill: {
-		display: "inline-block",
-		padding: "2px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: SURFACE_MUTED
-	},
-	description: {
-		margin: "0 0 12px",
-		opacity: .85
-	},
-	sectionHeader: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		margin: "12px 0 6px"
-	},
-	chain: {
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 6,
-		alignItems: "center",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	chainNode: {
-		padding: "2px 6px",
-		borderRadius: 4,
-		border: BORDER_DEFAULT
-	},
-	arrow: { opacity: .5 },
-	themeTable: {
-		width: "100%",
-		borderCollapse: "collapse",
-		tableLayout: "fixed",
-		fontSize: 12
-	},
-	themeRow: { borderBottom: BORDER_FAINT },
-	themeCell: {
-		padding: "6px 8px",
-		verticalAlign: "middle"
-	},
-	swatch: {
-		display: "inline-block",
-		width: 14,
-		height: 14,
-		verticalAlign: "middle",
-		marginRight: 6,
-		borderRadius: 3,
-		border: BORDER_DEFAULT
-	},
-	snippet: {
-		display: "block",
-		padding: "8px 10px",
-		borderRadius: 4,
-		background: SURFACE_MUTED,
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		whiteSpace: "pre",
-		overflow: "auto"
-	},
-	missing: {
-		padding: 12,
-		opacity: .7
-	},
-	typographySample: { padding: "8px 0" },
-	shadowSample: {
-		width: 140,
-		height: 56,
-		background: SURFACE_RAISED,
-		border: BORDER_FAINT,
-		borderRadius: 6
-	},
-	borderSample: {
-		width: 140,
-		height: 56,
-		background: SURFACE_RAISED,
-		borderRadius: 6
-	},
-	gradientSample: {
-		width: 220,
-		height: 56,
-		borderRadius: 6,
-		border: BORDER_FAINT
-	},
-	strokeStyleLine: {
-		height: 0,
-		borderTopWidth: 4,
-		borderTopColor: TEXT_DEFAULT,
-		width: 220
-	},
-	strokeStyleSvg: {
-		width: 220,
-		height: 24,
-		color: TEXT_DEFAULT
-	},
-	strokeStyleFallback: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		color: TEXT_MUTED
-	},
-	colorSwatchRow: {
-		display: "flex",
-		gap: 1,
-		borderRadius: 6,
-		overflow: "hidden",
-		border: BORDER_DEFAULT,
-		width: 220,
-		height: 56
-	},
-	colorSwatchLight: {
-		flex: 1,
-		boxShadow: "inset 0 0 0 8px rgba(255, 255, 255, 0.9)"
-	},
-	colorSwatchDark: {
-		flex: 1,
-		boxShadow: "inset 0 0 0 8px rgba(17, 17, 17, 0.9)"
-	},
-	breakdownSection: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 3,
-		marginTop: 6
-	},
-	breakdownKey: { color: TEXT_MUTED },
-	breakdownLayerHeader: {
-		gridColumn: "1 / -1",
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		color: TEXT_MUTED,
-		marginTop: 4
-	},
-	fontFamilySample: {
-		padding: "4px 0",
-		fontSize: 22,
-		lineHeight: 1.2
-	},
-	fontWeightSample: {
-		padding: "4px 0",
-		fontSize: 32,
-		lineHeight: 1
-	},
-	dimensionTrack: {
-		display: "flex",
-		alignItems: "center",
-		height: 32,
-		maxWidth: "100%",
-		overflow: "hidden"
-	},
-	dimensionBar: {
-		height: 16,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		borderRadius: 3,
-		maxWidth: "100%"
-	},
-	motionTrack: {
-		position: "relative",
-		height: 32,
-		width: "100%",
-		maxWidth: 320,
-		background: SURFACE_MUTED,
-		borderRadius: 16,
-		overflow: "hidden"
-	},
-	motionBall: {
-		position: "absolute",
-		top: "50%",
-		width: 24,
-		height: 24,
-		marginTop: -12,
-		borderRadius: "50%",
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
-	},
-	aliasedByList: {
-		listStyle: "none",
-		margin: 0,
-		padding: 0,
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	aliasedByRow: {
-		padding: "2px 0",
-		display: "flex",
-		alignItems: "center",
-		gap: 6
-	},
-	aliasedByTruncated: {
-		fontSize: 11,
-		opacity: .6,
-		fontStyle: "italic",
-		marginTop: 4
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		fontStyle: "italic"
-	},
-	tupleIndicator: {
-		fontSize: 11,
-		opacity: .7,
-		margin: "0 0 6px",
-		fontFamily: MONO_STACK
-	},
-	consumerRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "6px 10px",
-		marginBottom: 4,
-		borderRadius: 4,
-		background: SURFACE_MUTED
-	},
-	consumerRowLabel: {
-		fontFamily: MONO_STACK,
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		minWidth: 32,
-		flexShrink: 0
-	},
-	consumerRowValue: {
-		flex: 1,
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		whiteSpace: "nowrap",
-		overflow: "auto"
-	},
-	consumerRowCopy: {
-		padding: "3px 8px",
-		fontSize: 11,
-		fontFamily: MONO_STACK,
-		background: SURFACE_RAISED,
-		color: TEXT_DEFAULT,
-		border: BORDER_STRONG,
-		borderRadius: 4,
-		cursor: "pointer",
-		flexShrink: 0
-	}
-};
-//#endregion
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
@@ -2978,17 +1966,17 @@ function AliasChain({ path }) {
 	}, [token, path]);
 	if (chain.length <= 1) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: styles$4.sectionHeader,
+		className: "sb-token-detail__section-header",
 		children: "Alias chain"
 	}), /* @__PURE__ */ jsx("div", {
-		style: styles$4.chain,
+		className: "sb-token-detail__chain",
 		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
-			style: styles$4.chain,
+			className: "sb-token-detail__chain",
 			children: [/* @__PURE__ */ jsx("span", {
-				style: styles$4.chainNode,
+				className: "sb-token-detail__chain-node",
 				children: step
 			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
-				style: styles$4.arrow,
+				className: "sb-token-detail__arrow",
 				children: "→"
 			})]
 		}, step))
@@ -3008,18 +1996,18 @@ function AliasedBy({ path }) {
 	if (tree.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			style: styles$4.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Aliased by"
 		}),
 		/* @__PURE__ */ jsx("ul", {
-			style: styles$4.aliasedByList,
+			className: "sb-token-detail__aliased-by-list",
 			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
 				node,
 				depth: 0
 			}, node.path))
 		}),
 		truncated && /* @__PURE__ */ jsxs("div", {
-			style: styles$4.aliasedByTruncated,
+			className: "sb-token-detail__aliased-by-truncated",
 			children: [
 				"Further descendants truncated at depth ",
 				ALIASED_BY_DEPTH_CAP,
@@ -3030,16 +2018,14 @@ function AliasedBy({ path }) {
 }
 function AliasedByRow({ node, depth }) {
 	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.aliasedByRow,
-			paddingLeft: depth * 16
-		},
+		className: "sb-token-detail__aliased-by-row",
+		style: { paddingLeft: depth * 16 },
 		children: /* @__PURE__ */ jsx("span", {
-			style: styles$4.chainNode,
+			className: "sb-token-detail__chain-node",
 			children: node.path
 		})
 	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-		style: styles$4.aliasedByList,
+		className: "sb-token-detail__aliased-by-list",
 		children: node.children.map((child) => /* @__PURE__ */ jsx(AliasedByRow, {
 			node: child,
 			depth: depth + 1
@@ -3106,22 +2092,20 @@ function AxisVariance({ path }) {
 		const anyTheme = themes[0];
 		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-			style: styles$4.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Values across axes"
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$4.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
-				style: styles$4.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: /* @__PURE__ */ jsxs("td", {
-					style: styles$4.themeCell,
+					className: "sb-token-detail__theme-cell",
 					"data-testid": "token-detail-constant",
 					children: [
 						isColor && /* @__PURE__ */ jsx("span", {
-							style: {
-								...styles$4.swatch,
-								background: cssVar
-							},
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
 							"aria-hidden": true
 						}),
 						value,
@@ -3162,28 +2146,24 @@ function AxisVariance({ path }) {
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$4.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: ["Varies with ", axisName]
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$4.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$4.themeRow,
+				className: "sb-token-detail__theme-row",
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
-					style: {
-						...styles$4.themeCell,
-						width: "30%"
-					},
+					className: "sb-token-detail__theme-cell",
+					style: { width: "30%" },
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
-					style: styles$4.themeCell,
+					className: "sb-token-detail__theme-cell",
 					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
-						style: {
-							...styles$4.swatch,
-							background: cssVar
-						},
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
 						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
 						"aria-hidden": true
 					}), row.value]
@@ -3195,17 +2175,17 @@ function AxisVariance({ path }) {
 	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$4.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: ["Varies with ", variance.varyingAxes.join(" × ")]
 		}),
 		/* @__PURE__ */ jsxs("table", {
-			style: styles$4.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-				style: styles$4.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsxs("th", {
+					className: "sb-token-detail__theme-cell",
 					style: {
-						...styles$4.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
@@ -3215,17 +2195,17 @@ function AxisVariance({ path }) {
 						colAxis.name
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
+					className: "sb-token-detail__theme-cell",
 					style: {
-						...styles$4.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$4.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsx("td", {
-					style: styles$4.themeCell,
+					className: "sb-token-detail__theme-cell",
 					children: row
 				}), colAxis.contexts.map((col) => {
 					const name = tupleName(themes, {
@@ -3235,14 +2215,12 @@ function AxisVariance({ path }) {
 					});
 					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
 					return /* @__PURE__ */ jsxs("td", {
-						style: styles$4.themeCell,
+						className: "sb-token-detail__theme-cell",
 						"data-row": row,
 						"data-col": col,
 						children: [isColor && name && /* @__PURE__ */ jsx("span", {
-							style: {
-								...styles$4.swatch,
-								background: cssVar
-							},
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
 							[dataAttr(cssVarPrefix, "theme")]: name,
 							"aria-hidden": true
 						}), value]
@@ -3251,10 +2229,8 @@ function AxisVariance({ path }) {
 			}, row)) })]
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			style: {
-				...styles$4.aliasedByTruncated,
-				marginTop: 6
-			},
+			className: "sb-token-detail__aliased-by-truncated",
+			style: { marginTop: 6 },
 			children: [
 				"Values also vary with ",
 				extra.map((a) => a.name).join(", "),
@@ -3359,14 +2335,14 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
 		const multi = layers.length > 1;
 		return /* @__PURE__ */ jsx("div", {
-			style: styles$4.breakdownSection,
+			className: "sb-token-detail__breakdown-section",
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
 					style: { display: "contents" },
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
-							style: styles$4.breakdownLayerHeader,
+							className: "sb-token-detail__breakdown-layer-header",
 							children: ["Layer ", i + 1]
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
@@ -3402,7 +2378,7 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 		const stops = Array.isArray(rawValue) ? rawValue : [];
 		if (stops.length === 0) return null;
 		return /* @__PURE__ */ jsx("div", {
-			style: styles$4.breakdownSection,
+			className: "sb-token-detail__breakdown-section",
 			children: stops.map((stop, i) => {
 				const v = stop;
 				return /* @__PURE__ */ jsx(KeyValueRow, {
@@ -3416,7 +2392,7 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 }
 function renderKeyValueList(rows) {
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$4.breakdownSection,
+		className: "sb-token-detail__breakdown-section",
 		children: rows.filter(([, v]) => v !== null).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
 			label: k,
 			value: v ?? ""
@@ -3425,7 +2401,7 @@ function renderKeyValueList(rows) {
 }
 function KeyValueRow({ label, value }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		style: styles$4.breakdownKey,
+		className: "sb-token-detail__breakdown-key",
 		children: label
 	}), /* @__PURE__ */ jsx("span", { children: value ?? "—" })] });
 }
@@ -3498,8 +2474,8 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	if (type === "typography") {
 		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
 		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__typography-sample",
 			style: {
-				...styles$4.typographySample,
 				fontFamily: `var(${base}-font-family)`,
 				fontSize: `var(${base}-font-size)`,
 				fontWeight: `var(${base}-font-weight)`,
@@ -3510,85 +2486,71 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		});
 	}
 	if (type === "shadow") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.shadowSample,
-			boxShadow: cssVar
-		},
+		className: "sb-token-detail__shadow-sample",
+		style: { boxShadow: cssVar },
 		"aria-hidden": true
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.borderSample,
-			border: cssVar
-		},
+		className: "sb-token-detail__border-sample",
+		style: { border: cssVar },
 		"aria-hidden": true
 	});
 	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
 	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
-		style: styles$4.dimensionTrack,
+		className: "sb-token-detail__dimension-track",
 		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$4.dimensionBar,
-				width: cssVar
-			},
+			className: "sb-token-detail__dimension-bar",
+			style: { width: cssVar },
 			"aria-hidden": true
 		})
 	});
 	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
 	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.fontFamilySample,
-			fontFamily: cssVar
-		},
+		className: "sb-token-detail__font-family-sample",
+		style: { fontFamily: cssVar },
 		children: PANGRAM
 	});
 	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.fontWeightSample,
-			fontWeight: cssVar
-		},
+		className: "sb-token-detail__font-weight-sample",
+		style: { fontWeight: cssVar },
 		children: "Aa"
 	});
 	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
 	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.gradientSample,
-			background: `linear-gradient(to right, ${cssVar})`
-		},
+		className: "sb-token-detail__gradient-sample",
+		style: { background: `linear-gradient(to right, ${cssVar})` },
 		"aria-hidden": true
 	});
 	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
 	if (type === "color") return /* @__PURE__ */ jsxs("div", {
-		style: styles$4.colorSwatchRow,
+		className: "sb-token-detail__color-swatch-row",
 		"aria-hidden": true,
-		children: [/* @__PURE__ */ jsx("div", { style: {
-			...styles$4.colorSwatchLight,
-			background: cssVar
-		} }), /* @__PURE__ */ jsx("div", { style: {
-			...styles$4.colorSwatchDark,
-			background: cssVar
-		} })]
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__color-swatch-light",
+			style: { background: cssVar }
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__color-swatch-dark",
+			style: { background: cssVar }
+		})]
 	});
 	return null;
 }
 function StrokeStylePreview({ value }) {
 	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$4.strokeStyleLine,
-			borderTopStyle: value
-		},
+		className: "sb-token-detail__stroke-style-line",
+		style: { borderTopStyle: value },
 		"aria-hidden": true
 	});
 	if (value && typeof value === "object" && "dashArray" in value) {
 		const v = value;
 		const lengths = asDashLengths(v.dashArray);
 		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
-			style: styles$4.strokeStyleFallback,
+			className: "sb-token-detail__stroke-style-fallback",
 			children: "Object-form strokeStyle with no resolvable dashArray."
 		});
 		const cap = typeof v.lineCap === "string" ? v.lineCap : "butt";
 		return /* @__PURE__ */ jsx("svg", {
-			style: styles$4.strokeStyleSvg,
+			className: "sb-token-detail__stroke-style-svg",
 			viewBox: "0 0 220 24",
 			preserveAspectRatio: "none",
 			"aria-hidden": true,
@@ -3605,7 +2567,7 @@ function StrokeStylePreview({ value }) {
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$4.strokeStyleFallback,
+		className: "sb-token-detail__stroke-style-fallback",
 		children: "strokeStyle value could not be previewed."
 	});
 }
@@ -3639,14 +2601,14 @@ function TransitionSample({ transition }) {
 		};
 	}, [reduced]);
 	if (reduced) return /* @__PURE__ */ jsx("div", {
-		style: styles$4.reducedMotion,
+		className: "sb-token-detail__reduced-motion",
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$4.motionTrack,
+		className: "sb-token-detail__motion-track",
 		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__motion-ball",
 			style: {
-				...styles$4.motionBall,
 				left: phase === 1 ? "calc(100% - 28px)" : "4px",
 				transition
 			},
@@ -3662,11 +2624,11 @@ function ConsumerOutput({ path }) {
 	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			style: styles$4.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Consumer output"
 		}),
 		tupleLabel && /* @__PURE__ */ jsxs("div", {
-			style: styles$4.tupleIndicator,
+			className: "sb-token-detail__tuple-indicator",
 			children: ["Active tuple: ", /* @__PURE__ */ jsx("strong", { children: tupleLabel })]
 		}),
 		/* @__PURE__ */ jsx(OutputRow, {
@@ -3683,14 +2645,14 @@ function ConsumerOutput({ path }) {
 }
 function OutputRow({ label, value, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
-		style: styles$4.consumerRow,
+		className: "sb-token-detail__consumer-row",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				style: styles$4.consumerRowLabel,
+				className: "sb-token-detail__consumer-row-label",
 				children: label
 			}),
 			/* @__PURE__ */ jsx("code", {
-				style: styles$4.consumerRowValue,
+				className: "sb-token-detail__consumer-row-value",
 				"data-testid": testId,
 				children: value
 			}),
@@ -3705,7 +2667,7 @@ function CopyButton({ text, testId }) {
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		style: styles$4.consumerRowCopy,
+		className: "sb-token-detail__consumer-row-copy",
 		"data-testid": testId,
 		onClick: () => {
 			copyToClipboard(text).then((ok) => {
@@ -3731,7 +2693,7 @@ async function copyToClipboard(text) {
 function TokenHeader({ path, heading }) {
 	const { token, cssVar, activeTheme } = useTokenDetailData(path);
 	if (!token) return /* @__PURE__ */ jsxs("div", {
-		style: styles$4.missing,
+		className: "sb-token-detail__missing",
 		children: [
 			"Token ",
 			/* @__PURE__ */ jsx("code", { children: path }),
@@ -3742,18 +2704,18 @@ function TokenHeader({ path, heading }) {
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("h3", {
-			style: styles$4.heading,
+			className: "sb-token-detail__heading",
 			children: heading ?? path
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$4.subline,
+			className: "sb-token-detail__subline",
 			children: [token.$type && /* @__PURE__ */ jsx("span", {
-				style: styles$4.typePill,
+				className: "sb-token-detail__type-pill",
 				children: token.$type
 			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
 		}),
 		token.$description && /* @__PURE__ */ jsx("p", {
-			style: styles$4.description,
+			className: "sb-token-detail__description",
 			children: token.$description
 		})
 	] });
@@ -3764,10 +2726,10 @@ function TokenUsageSnippet({ path }) {
 	const { token, cssVar } = useTokenDetailData(path);
 	if (!token) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: styles$4.sectionHeader,
+		className: "sb-token-detail__section-header",
 		children: "Usage"
 	}), /* @__PURE__ */ jsx("code", {
-		style: styles$4.snippet,
+		className: "sb-token-detail__snippet",
 		children: `color: ${cssVar};`
 	})] });
 }
@@ -3776,14 +2738,12 @@ function TokenUsageSnippet({ path }) {
 function TokenDetail({ path, heading }) {
 	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
+	const theme = themeAttrs(cssVarPrefix, activeTheme);
 	if (!token) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$4.wrapper
-		},
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
 		children: /* @__PURE__ */ jsxs("div", {
-			style: styles$4.missing,
+			className: "sb-token-detail__missing",
 			children: [
 				"Token ",
 				/* @__PURE__ */ jsx("code", { children: path }),
@@ -3798,30 +2758,25 @@ function TokenDetail({ path, heading }) {
 	const value = formatTokenValue(token.$value, token.$type, colorFormat);
 	const outOfGamut = gamut?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$4.wrapper
-		},
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
 				path,
 				...heading !== void 0 && { heading }
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$4.sectionHeader,
+				className: "sb-token-detail__section-header",
 				children: ["Resolved value · ", activeTheme]
 			}),
 			/* @__PURE__ */ jsx(CompositePreview, { path }),
 			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$4.chain,
+				className: "sb-token-detail__chain",
 				children: [
 					isColor && /* @__PURE__ */ jsx("span", {
-						style: {
-							...styles$4.swatch,
-							background: cssVar
-						},
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
 						"aria-hidden": true
 					}),
 					/* @__PURE__ */ jsx("span", { children: value }),
@@ -3843,49 +2798,6 @@ function TokenDetail({ path, heading }) {
 }
 //#endregion
 //#region src/internal/DetailOverlay.tsx
-/**
-* Slide-over that wraps `<TokenDetail>`. Shared between `<TokenNavigator />`
-* and `<TokenTable />` so both land on the same opener and the same styling.
-*
-* Dismisses on backdrop click, Escape, and the close button. `role="dialog"`
-* + `aria-modal="true"` hints to AT that focus is trapped here; actual focus
-* management is tracked in the open-issue #253.
-*/
-const styles$3 = {
-	backdrop: {
-		position: "fixed",
-		inset: 0,
-		background: "rgba(0,0,0,0.4)",
-		zIndex: 1e4,
-		display: "flex",
-		alignItems: "stretch",
-		justifyContent: "flex-end"
-	},
-	panel: {
-		width: "min(560px, 100%)",
-		height: "100%",
-		overflowY: "auto",
-		background: SURFACE_DEFAULT,
-		color: TEXT_DEFAULT,
-		boxShadow: "-8px 0 24px rgba(0,0,0,0.2)",
-		padding: 16,
-		position: "relative"
-	},
-	closeButton: {
-		position: "absolute",
-		top: 8,
-		right: 8,
-		width: 32,
-		height: 32,
-		borderRadius: 4,
-		border: BORDER_STRONG,
-		background: "transparent",
-		color: "inherit",
-		cursor: "pointer",
-		fontSize: 16,
-		lineHeight: 1
-	}
-};
 function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 	useEffect(() => {
 		const onKey = (e) => {
@@ -3895,19 +2807,19 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 		return () => window.removeEventListener("keydown", onKey);
 	}, [onClose]);
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.backdrop,
+		className: "sb-detail-overlay__backdrop",
 		onClick: onClose,
 		role: "presentation",
 		"data-testid": testId,
 		children: /* @__PURE__ */ jsxs("div", {
-			style: styles$3.panel,
+			className: "sb-detail-overlay__panel",
 			onClick: (e) => e.stopPropagation(),
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": `Token detail for ${path}`,
 			children: [/* @__PURE__ */ jsx("button", {
 				type: "button",
-				style: styles$3.closeButton,
+				className: "sb-detail-overlay__close",
 				onClick: onClose,
 				"aria-label": "Close",
 				"data-testid": `${testId}-close`,
@@ -3918,89 +2830,6 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 }
 //#endregion
 //#region src/TokenNavigator.tsx
-const styles$2 = {
-	wrapper: surfaceStyle,
-	caption: {
-		padding: "4px 0 12px",
-		color: TEXT_MUTED,
-		fontSize: 12
-	},
-	tree: {
-		listStyle: "none",
-		margin: 0,
-		padding: 0
-	},
-	nested: {
-		listStyle: "none",
-		margin: 0,
-		paddingLeft: 18,
-		borderLeft: BORDER_DEFAULT
-	},
-	groupRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 6,
-		padding: "4px 6px",
-		borderRadius: 4,
-		cursor: "pointer",
-		userSelect: "none",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	leafRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "4px 6px",
-		borderRadius: 4,
-		cursor: "pointer",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	caret: {
-		display: "inline-block",
-		width: 12,
-		textAlign: "center",
-		color: TEXT_MUTED
-	},
-	tail: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	typePill: {
-		...typePillStyle,
-		padding: "1px 6px",
-		fontSize: 10
-	},
-	value: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		marginLeft: "auto",
-		minWidth: 0,
-		textAlign: "right",
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	count: {
-		marginLeft: "auto",
-		fontSize: 11,
-		color: TEXT_DEFAULT
-	},
-	colorSwatch: {
-		display: "inline-block",
-		width: 14,
-		height: 14,
-		borderRadius: 3,
-		border: BORDER_DEFAULT
-	},
-	previewBox: {
-		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		marginLeft: "auto"
-	}
-};
 function buildTree(resolved, root) {
 	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
 	const rootSegments = root ? root.split(".") : [];
@@ -4098,21 +2927,13 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 	}, [onSelect]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$2.wrapper
-		},
 		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}".` : "No tokens in the active theme." })
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$2.wrapper
-		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$2.caption,
+				className: "sb-token-navigator__caption",
 				children: [
 					root ? `Tokens under ${root}` : "Token graph",
 					" · ",
@@ -4120,7 +2941,7 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 				]
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				style: styles$2.tree,
+				className: "sb-token-navigator__tree",
 				role: "tree",
 				children: tree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
 					node,
@@ -4155,25 +2976,25 @@ function TreeNodeRow({ node, expanded, onToggle, onLeafClick }) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "button",
 			tabIndex: 0,
-			style: styles$2.groupRow,
+			className: "sb-token-navigator__group-row",
 			onClick: () => onToggle(node.path),
 			onKeyDown: onKey,
 			"data-path": node.path,
 			"data-testid": "token-navigator-group",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.caret,
+					className: "sb-token-navigator__caret",
 					"aria-hidden": true,
 					children: isOpen ? "▾" : "▸"
 				}),
 				/* @__PURE__ */ jsx("span", { children: node.segment }),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.count,
+					className: "sb-token-navigator__count",
 					children: countLeaves(node)
 				})
 			]
 		}), isOpen && /* @__PURE__ */ jsx("ul", {
-			style: styles$2.nested,
+			className: "sb-token-navigator__nested",
 			role: "group",
 			children: node.children.map((c) => /* @__PURE__ */ jsx(TreeNodeRow, {
 				node: c,
@@ -4197,23 +3018,23 @@ function LeafRow({ node, onLeafClick }) {
 		children: /* @__PURE__ */ jsxs("div", {
 			role: "button",
 			tabIndex: 0,
-			style: styles$2.leafRow,
+			className: "sb-token-navigator__leaf-row",
 			onClick: () => onLeafClick(node.path),
 			onKeyDown: onKey,
 			"data-path": node.path,
 			"data-testid": "token-navigator-leaf",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.caret,
+					className: "sb-token-navigator__caret",
 					"aria-hidden": true,
 					children: "•"
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.tail,
+					className: "sb-token-navigator__tail",
 					children: node.segment
 				}),
 				type && /* @__PURE__ */ jsx("span", {
-					style: styles$2.typePill,
+					className: "sb-token-navigator__type-pill",
 					children: type
 				}),
 				/* @__PURE__ */ jsx(LeafPreview, {
@@ -4231,32 +3052,24 @@ function LeafPreview({ path, token }) {
 	if (type === "color") {
 		const cssVar = makeCssVar(path, cssVarPrefix);
 		return /* @__PURE__ */ jsxs("span", {
-			style: styles$2.previewBox,
+			className: "sb-token-navigator__preview-box",
 			children: [/* @__PURE__ */ jsx("span", {
-				style: styles$2.value,
+				className: "sb-token-navigator__value",
 				children: formatTokenValue(token.$value, type, colorFormat)
 			}), /* @__PURE__ */ jsx("span", {
-				style: {
-					...styles$2.colorSwatch,
-					background: cssVar,
-					marginLeft: 8
-				},
+				className: "sb-token-navigator__color-swatch",
+				style: { background: cssVar },
 				"aria-hidden": true
 			})]
 		});
 	}
 	if (type === "dimension") return /* @__PURE__ */ jsxs("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: [/* @__PURE__ */ jsx("span", {
-			style: styles$2.value,
+			className: "sb-token-navigator__value",
 			children: formatTokenValue(token.$value, type, colorFormat)
 		}), /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				minWidth: 40,
-				maxWidth: 120
-			},
+			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionBar, {
 				path,
 				kind: "length"
@@ -4264,120 +3077,36 @@ function LeafPreview({ path, token }) {
 		})]
 	});
 	if (type === "shadow") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				transform: "scale(0.5)",
-				transformOrigin: "right center"
-			},
+			className: "sb-token-navigator__preview-scaled",
 			children: /* @__PURE__ */ jsx(ShadowSample, { path })
 		})
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				transform: "scale(0.5)",
-				transformOrigin: "right center"
-			},
+			className: "sb-token-navigator__preview-scaled",
 			children: /* @__PURE__ */ jsx(BorderSample, { path })
 		})
 	});
 	if (type === "transition" || type === "duration" || type === "cubicBezier") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				width: 80
-			},
+			className: "sb-token-navigator__preview-motion",
 			children: /* @__PURE__ */ jsx(MotionSample, { path })
 		})
 	});
 	return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: styles$2.value,
+			className: "sb-token-navigator__value",
 			children: formatTokenValue(token.$value, type, colorFormat)
 		})
 	});
 }
 //#endregion
 //#region src/TokenTable.tsx
-const styles$1 = {
-	wrapper: surfaceStyle,
-	empty: emptyStyle,
-	caption: {
-		captionSide: "top",
-		textAlign: "left",
-		padding: "8px 0",
-		color: TEXT_MUTED,
-		fontSize: 12
-	},
-	table: {
-		width: "100%",
-		borderCollapse: "collapse"
-	},
-	th: {
-		textAlign: "left",
-		padding: "8px 12px",
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		color: TEXT_MUTED,
-		borderBottom: BORDER_STRONG
-	},
-	thPath: { minWidth: 180 },
-	thValue: { minWidth: 160 },
-	row: { cursor: "pointer" },
-	td: {
-		padding: "8px 12px",
-		borderBottom: BORDER_FAINT,
-		verticalAlign: "top"
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	valueCell: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		minWidth: 0,
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	typePill: {
-		display: "inline-block",
-		padding: "1px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: SURFACE_MUTED,
-		color: TEXT_MUTED,
-		fontFamily: MONO_STACK,
-		flexShrink: 0
-	},
-	swatch: {
-		display: "inline-block",
-		width: 16,
-		height: 16,
-		borderRadius: 3,
-		border: BORDER_STRONG,
-		flexShrink: 0
-	},
-	valueText: {
-		minWidth: 0,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	}
-};
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", onSelect }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const colorFormat = useColorFormat();
@@ -4418,43 +3147,29 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$1.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$1.empty,
+			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$1.wrapper
-		},
 		children: [/* @__PURE__ */ jsxs("table", {
-			style: styles$1.table,
+			className: "sb-token-table__table",
 			children: [
 				/* @__PURE__ */ jsx("caption", {
-					style: styles$1.caption,
+					className: "sb-token-table__caption",
 					children: captionText
 				}),
 				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-					style: {
-						...styles$1.th,
-						...styles$1.thPath
-					},
+					className: cx("sb-token-table__th", "sb-token-table__th--path"),
 					children: "Path"
 				}), /* @__PURE__ */ jsx("th", {
-					style: {
-						...styles$1.th,
-						...styles$1.thValue
-					},
+					className: cx("sb-token-table__th", "sb-token-table__th--value"),
 					children: "Value"
 				})] }) }),
 				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", {
-					style: styles$1.row,
+					className: "sb-token-table__row",
 					onClick: () => handleRowClick(row.path),
 					onKeyDown: (e) => {
 						if (e.key === "Enter" || e.key === " ") {
@@ -4467,29 +3182,24 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 					"data-testid": "token-table-row",
 					"data-path": row.path,
 					children: [/* @__PURE__ */ jsx("td", {
-						style: {
-							...styles$1.td,
-							...styles$1.path
-						},
+						className: cx("sb-token-table__td", "sb-token-table__path"),
 						children: row.path
 					}), /* @__PURE__ */ jsx("td", {
-						style: styles$1.td,
+						className: "sb-token-table__td",
 						children: /* @__PURE__ */ jsxs("span", {
-							style: styles$1.valueCell,
+							className: "sb-token-table__value-cell",
 							children: [
 								row.type && /* @__PURE__ */ jsx("span", {
-									style: styles$1.typePill,
+									className: "sb-token-table__type-pill",
 									children: row.type
 								}),
 								row.isColor && /* @__PURE__ */ jsx("span", {
-									style: {
-										...styles$1.swatch,
-										background: row.cssVar
-									},
+									className: "sb-token-table__swatch",
+									style: { background: row.cssVar },
 									"aria-hidden": true
 								}),
 								/* @__PURE__ */ jsx("span", {
-									style: styles$1.valueText,
+									className: "sb-token-table__value-text",
 									title: row.value,
 									"data-testid": "token-table-value",
 									children: row.value
@@ -4497,7 +3207,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 								row.outOfGamut && /* @__PURE__ */ jsx("span", {
 									title: "Out of sRGB gamut for this format",
 									"aria-label": "out of gamut",
-									style: { flexShrink: 0 },
+									className: "sb-token-table__gamut-warn",
 									children: "⚠"
 								})
 							]
@@ -4514,33 +3224,6 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 }
 //#endregion
 //#region src/TypographyScale.tsx
-const styles = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	}
-};
 function asDimension(raw) {
 	if (raw == null) return void 0;
 	if (typeof raw === "string" || typeof raw === "number") return String(raw);
@@ -4602,33 +3285,25 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles.empty,
+			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles.row,
+			className: "sb-typography-scale__row",
 			children: [/* @__PURE__ */ jsxs("div", {
-				style: styles.meta,
+				className: "sb-typography-scale__meta",
 				children: [/* @__PURE__ */ jsx("span", {
-					style: styles.path,
+					className: "sb-typography-scale__path",
 					children: row.path
 				}), row.specs && /* @__PURE__ */ jsx("span", {
-					style: styles.specs,
+					className: "sb-typography-scale__specs",
 					children: row.specs
 				})]
 			}), /* @__PURE__ */ jsx("div", {