@clarify-labs/renderer 0.11.21 → 0.11.24

package/output/{ClarifyShell-DwxpyL0U.cjs → ClarifyShell-BYJ3LIy_.cjs}

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-BMNCgF9o.cjs");
-const require_PageActions = require("./PageActions-CwJLUFUH.cjs");
+const require_i18n = require("./i18n-tOmAUK0W.cjs");
+const require_PageActions = require("./PageActions-kJT0EKLS.cjs");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -129,7 +129,7 @@ function BuiltInNotFoundPage() {
 		"aria-labelledby": "clarify-not-found-title",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
+				className: "text-sm/6 font-semibold text-(--clarify-ui-text-faint)",
 				children: text("notFound.label")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
@@ -144,7 +144,7 @@ function BuiltInNotFoundPage() {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "mt-8",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-					className: "inline-flex items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+					className: "inline-flex items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-2 text-sm/5 font-semibold text-(--clarify-ui-on-accent) shadow-(--clarify-ui-shadow-raised) transition hover:opacity-90",
 					to: homeHref,
 					children: text("notFound.home")
 				})
@@ -316,7 +316,7 @@ function RenderErrorPanel(props) {
 					}, `${label}-${index}`))
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mt-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background)",
+					className: "mt-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-surface-elevated)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between gap-3 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -483,7 +483,7 @@ function PageBanner(props) {
 	const link = banner.link;
 	const linkLabel = link ? require_PageActions.resolveLocalizedText(link.label, currentLocale, config.locales?.default) : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-banner relative flex h-12 items-center border-b border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) px-4 text-sm text-(--clarify-ui-text) dark:border-white/10",
+		className: "clarify-banner relative flex h-12 items-center border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) px-4 text-sm text-(--clarify-ui-text)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mx-auto flex min-w-0 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-center gap-1 pr-9 sm:gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -617,7 +617,7 @@ function PageNavigationLink(arg0) {
 					isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-3.5 transition-transform group-hover:translate-x-0.5" }) : null
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "clarify-page-navigation-title mt-1 block truncate text-base/6 font-semibold text-(--clarify-theme-tokens-colors-foreground) transition-colors group-hover:text-(--clarify-theme-tokens-colors-primary)",
+				className: "clarify-page-navigation-title mt-1 block truncate text-base/6 font-semibold text-(--clarify-theme-tokens-colors-foreground) transition-colors group-hover:text-(--clarify-ui-text-strong)",
 				children: route.title
 			})]
 		})
@@ -657,7 +657,7 @@ function PageSkeleton() {
 				className: "space-y-5",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-24 rounded-full bg-(--clarify-skeleton-accent-background)" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-11 w-full max-w-(--clarify-skeleton-title-width) rounded-3xl" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-11 w-full max-w-(--clarify-skeleton-title-width) rounded-(--clarify-theme-tokens-radius-lg)" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "max-w-3xl space-y-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-5/6" })]
@@ -667,7 +667,7 @@ function PageSkeleton() {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "grid gap-4 xl:grid-cols-2",
 				children: [0, 1].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "rounded-(--clarify-skeleton-card-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-sm shadow-zinc-900/5",
+					className: "rounded-(--clarify-skeleton-card-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-(--clarify-ui-shadow-raised) shadow-zinc-900/5",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-start gap-4",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-10 w-10 shrink-0 bg-(--clarify-skeleton-accent-background)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -683,18 +683,18 @@ function PageSkeleton() {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 						className: "space-y-5",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-width) rounded-2xl" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-width) rounded-(--clarify-theme-tokens-radius-lg)" }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonParagraph, {}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4",
+								className: "rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-ui-border) bg-(--clarify-ui-subtle-background) p-4",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-(--clarify-skeleton-line-width) bg-(--clarify-skeleton-accent-background)" })
 							})
 						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "overflow-hidden rounded-(--clarify-skeleton-block-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background)",
+						className: "overflow-hidden rounded-(--clarify-skeleton-block-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-surface-elevated)",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
+							className: "flex items-center gap-2 border-b border-(--clarify-ui-border) bg-(--clarify-ui-subtle-background) px-4 py-3",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-3 rounded-full" }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-3 rounded-full" }),
@@ -708,7 +708,7 @@ function PageSkeleton() {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 						className: "space-y-5",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-short-width) rounded-2xl" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-short-width) rounded-(--clarify-theme-tokens-radius-lg)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "grid gap-3 sm:grid-cols-2",
 							children: [
 								0,
@@ -929,6 +929,7 @@ function sectionsForRoute(route) {
 		title: section.title,
 		level: section.level,
 		badge: section.badge,
+		deprecated: section.deprecated,
 		tags: section.tags
 	})) ?? [];
 }
@@ -1271,13 +1272,12 @@ function AppShell(arg0) {
 var randomThemePalettes = [
 	{
 		primary: "#047857",
-		accent: "#0D9488",
-		background: "#ffffff",
-		foreground: "#111827",
+		accent: "#0f766e",
+		background: "#f8fafc",
+		foreground: "#172033",
 		surface: "#ffffff",
-		muted: "#64748b",
-		borderMix: .12,
-		codeMix: .04
+		muted: "#667085",
+		borderMix: .11
 	},
 	{
 		primary: "#2563eb",
@@ -1286,8 +1286,7 @@ var randomThemePalettes = [
 		foreground: "#0f172a",
 		surface: "#ffffff",
 		muted: "#64748b",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#9333ea",
@@ -1296,8 +1295,7 @@ var randomThemePalettes = [
 		foreground: "#2e1065",
 		surface: "#ffffff",
 		muted: "#7e22ce",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#ea580c",
@@ -1306,8 +1304,7 @@ var randomThemePalettes = [
 		foreground: "#431407",
 		surface: "#fffbeb",
 		muted: "#9a3412",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#0f766e",
@@ -1316,8 +1313,7 @@ var randomThemePalettes = [
 		foreground: "#042f2e",
 		surface: "#ffffff",
 		muted: "#0f766e",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#be123c",
@@ -1326,8 +1322,7 @@ var randomThemePalettes = [
 		foreground: "#4c0519",
 		surface: "#ffffff",
 		muted: "#9f1239",
-		borderMix: .13,
-		codeMix: .06
+		borderMix: .13
 	},
 	{
 		primary: "#4f46e5",
@@ -1336,8 +1331,7 @@ var randomThemePalettes = [
 		foreground: "#1e1b4b",
 		surface: "#ffffff",
 		muted: "#4338ca",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#0e7490",
@@ -1346,8 +1340,7 @@ var randomThemePalettes = [
 		foreground: "#083344",
 		surface: "#ffffff",
 		muted: "#155e75",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#7c2d12",
@@ -1356,8 +1349,7 @@ var randomThemePalettes = [
 		foreground: "#450a0a",
 		surface: "#fff7ed",
 		muted: "#991b1b",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#365314",
@@ -1366,8 +1358,7 @@ var randomThemePalettes = [
 		foreground: "#1a2e05",
 		surface: "#ffffff",
 		muted: "#4d7c0f",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#0369a1",
@@ -1376,8 +1367,7 @@ var randomThemePalettes = [
 		foreground: "#082f49",
 		surface: "#ffffff",
 		muted: "#075985",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#a21caf",
@@ -1386,8 +1376,7 @@ var randomThemePalettes = [
 		foreground: "#4a044e",
 		surface: "#ffffff",
 		muted: "#86198f",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#c2410c",
@@ -1396,8 +1385,7 @@ var randomThemePalettes = [
 		foreground: "#431407",
 		surface: "#ffffff",
 		muted: "#9a3412",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#1d4ed8",
@@ -1406,8 +1394,7 @@ var randomThemePalettes = [
 		foreground: "#172554",
 		surface: "#ffffff",
 		muted: "#1e40af",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#6d28d9",
@@ -1416,8 +1403,7 @@ var randomThemePalettes = [
 		foreground: "#2e1065",
 		surface: "#ffffff",
 		muted: "#6b21a8",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#0f172a",
@@ -1426,8 +1412,7 @@ var randomThemePalettes = [
 		foreground: "#0f172a",
 		surface: "#ffffff",
 		muted: "#475569",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#18181b",
@@ -1436,8 +1421,7 @@ var randomThemePalettes = [
 		foreground: "#18181b",
 		surface: "#ffffff",
 		muted: "#52525b",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#166534",
@@ -1446,8 +1430,7 @@ var randomThemePalettes = [
 		foreground: "#052e16",
 		surface: "#ffffff",
 		muted: "#15803d",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#9d174d",
@@ -1456,8 +1439,7 @@ var randomThemePalettes = [
 		foreground: "#500724",
 		surface: "#ffffff",
 		muted: "#be185d",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#4338ca",
@@ -1466,8 +1448,7 @@ var randomThemePalettes = [
 		foreground: "#312e81",
 		surface: "#ffffff",
 		muted: "#4f46e5",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#92400e",
@@ -1476,8 +1457,7 @@ var randomThemePalettes = [
 		foreground: "#451a03",
 		surface: "#ffffff",
 		muted: "#a16207",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#0f766e",
@@ -1486,8 +1466,7 @@ var randomThemePalettes = [
 		foreground: "#134e4a",
 		surface: "#ffffff",
 		muted: "#0f766e",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#1e3a8a",
@@ -1496,8 +1475,7 @@ var randomThemePalettes = [
 		foreground: "#0f172a",
 		surface: "#ffffff",
 		muted: "#475569",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#581c87",
@@ -1506,8 +1484,7 @@ var randomThemePalettes = [
 		foreground: "#3b0764",
 		surface: "#ffffff",
 		muted: "#7e22ce",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#991b1b",
@@ -1516,8 +1493,7 @@ var randomThemePalettes = [
 		foreground: "#450a0a",
 		surface: "#ffffff",
 		muted: "#b91c1c",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#115e59",
@@ -1526,8 +1502,7 @@ var randomThemePalettes = [
 		foreground: "#042f2e",
 		surface: "#ffffff",
 		muted: "#0f766e",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#075985",
@@ -1536,8 +1511,7 @@ var randomThemePalettes = [
 		foreground: "#082f49",
 		surface: "#ffffff",
 		muted: "#0369a1",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#7e22ce",
@@ -1546,8 +1520,7 @@ var randomThemePalettes = [
 		foreground: "#3b0764",
 		surface: "#ffffff",
 		muted: "#9333ea",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#b45309",
@@ -1556,8 +1529,7 @@ var randomThemePalettes = [
 		foreground: "#451a03",
 		surface: "#ffffff",
 		muted: "#92400e",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#065f46",
@@ -1566,8 +1538,7 @@ var randomThemePalettes = [
 		foreground: "#022c22",
 		surface: "#ffffff",
 		muted: "#047857",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#312e81",
@@ -1576,8 +1547,7 @@ var randomThemePalettes = [
 		foreground: "#1e1b4b",
 		surface: "#ffffff",
 		muted: "#4338ca",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#831843",
@@ -1586,8 +1556,7 @@ var randomThemePalettes = [
 		foreground: "#500724",
 		surface: "#ffffff",
 		muted: "#be185d",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#164e63",
@@ -1596,8 +1565,7 @@ var randomThemePalettes = [
 		foreground: "#083344",
 		surface: "#ffffff",
 		muted: "#155e75",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#3f6212",
@@ -1606,8 +1574,7 @@ var randomThemePalettes = [
 		foreground: "#1a2e05",
 		surface: "#ffffff",
 		muted: "#4d7c0f",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#1e40af",
@@ -1616,8 +1583,7 @@ var randomThemePalettes = [
 		foreground: "#172554",
 		surface: "#ffffff",
 		muted: "#2563eb",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#701a75",
@@ -1626,8 +1592,7 @@ var randomThemePalettes = [
 		foreground: "#4a044e",
 		surface: "#ffffff",
 		muted: "#a21caf",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#713f12",
@@ -1636,8 +1601,7 @@ var randomThemePalettes = [
 		foreground: "#422006",
 		surface: "#ffffff",
 		muted: "#a16207",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#1f2937",
@@ -1646,8 +1610,7 @@ var randomThemePalettes = [
 		foreground: "#111827",
 		surface: "#ffffff",
 		muted: "#4b5563",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#27272a",
@@ -1656,8 +1619,7 @@ var randomThemePalettes = [
 		foreground: "#18181b",
 		surface: "#ffffff",
 		muted: "#52525b",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#374151",
@@ -1666,8 +1628,7 @@ var randomThemePalettes = [
 		foreground: "#111827",
 		surface: "#ffffff",
 		muted: "#4b5563",
-		borderMix: .12,
-		codeMix: .04
+		borderMix: .12
 	},
 	{
 		primary: "#064e3b",
@@ -1676,8 +1637,7 @@ var randomThemePalettes = [
 		foreground: "#022c22",
 		surface: "#ffffff",
 		muted: "#047857",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#7f1d1d",
@@ -1686,8 +1646,7 @@ var randomThemePalettes = [
 		foreground: "#450a0a",
 		surface: "#ffffff",
 		muted: "#991b1b",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#3730a3",
@@ -1696,8 +1655,7 @@ var randomThemePalettes = [
 		foreground: "#1e1b4b",
 		surface: "#ffffff",
 		muted: "#4f46e5",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#9f1239",
@@ -1706,8 +1664,7 @@ var randomThemePalettes = [
 		foreground: "#4c0519",
 		surface: "#ffffff",
 		muted: "#be123c",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#134e4a",
@@ -1716,8 +1673,7 @@ var randomThemePalettes = [
 		foreground: "#042f2e",
 		surface: "#ffffff",
 		muted: "#0f766e",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#1d4ed8",
@@ -1726,8 +1682,7 @@ var randomThemePalettes = [
 		foreground: "#0f172a",
 		surface: "#ffffff",
 		muted: "#475569",
-		borderMix: .12,
-		codeMix: .05
+		borderMix: .12
 	},
 	{
 		primary: "#6b21a8",
@@ -1736,8 +1691,7 @@ var randomThemePalettes = [
 		foreground: "#2e1065",
 		surface: "#ffffff",
 		muted: "#7e22ce",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#155e75",
@@ -1746,8 +1700,7 @@ var randomThemePalettes = [
 		foreground: "#083344",
 		surface: "#ffffff",
 		muted: "#0369a1",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#854d0e",
@@ -1756,8 +1709,7 @@ var randomThemePalettes = [
 		foreground: "#422006",
 		surface: "#ffffff",
 		muted: "#a16207",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#14532d",
@@ -1766,8 +1718,7 @@ var randomThemePalettes = [
 		foreground: "#052e16",
 		surface: "#ffffff",
 		muted: "#166534",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#4c1d95",
@@ -1776,8 +1727,7 @@ var randomThemePalettes = [
 		foreground: "#2e1065",
 		surface: "#ffffff",
 		muted: "#6d28d9",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#9a3412",
@@ -1786,8 +1736,7 @@ var randomThemePalettes = [
 		foreground: "#431407",
 		surface: "#ffffff",
 		muted: "#c2410c",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#0c4a6e",
@@ -1796,8 +1745,7 @@ var randomThemePalettes = [
 		foreground: "#082f49",
 		surface: "#ffffff",
 		muted: "#075985",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#166534",
@@ -1806,8 +1754,7 @@ var randomThemePalettes = [
 		foreground: "#052e16",
 		surface: "#ffffff",
 		muted: "#15803d",
-		borderMix: .13,
-		codeMix: .05
+		borderMix: .13
 	},
 	{
 		primary: "#be185d",
@@ -1816,8 +1763,7 @@ var randomThemePalettes = [
 		foreground: "#500724",
 		surface: "#ffffff",
 		muted: "#9d174d",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	},
 	{
 		primary: "#5b21b6",
@@ -1826,16 +1772,15 @@ var randomThemePalettes = [
 		foreground: "#2e1065",
 		surface: "#ffffff",
 		muted: "#6d28d9",
-		borderMix: .14,
-		codeMix: .06
+		borderMix: .14
 	}
 ];
 var randomRadiusSets = [
 	{
-		sm: "2px",
-		md: "6px",
-		lg: "10px",
-		xl: "14px"
+		sm: "6px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
 	},
 	{
 		sm: "4px",
@@ -1887,7 +1832,7 @@ var randomTabsLayouts = ["subnav", "navbar"];
 var randomDarkAccentPairs = [
 	{
 		primary: "#34d399",
-		accent: "#2dd4bf"
+		accent: "#5eead4"
 	},
 	{
 		primary: "#60a5fa",
@@ -1951,12 +1896,12 @@ function createRandomThemeColors(selection) {
 	return {
 		primary: modeColor(palette.primary, darkAccents.primary),
 		accent: modeColor(palette.accent, darkAccents.accent),
-		background: modeColor(palette.background, "#09090b"),
-		foreground: modeColor(palette.foreground, "#f8fafc"),
+		background: modeColor(palette.background, "#0a0a0b"),
+		foreground: modeColor(palette.foreground, "#f4f4f5"),
 		surface: modeColor(palette.surface, "#18181b"),
 		muted: modeColor(palette.muted, "#a1a1aa"),
-		border: modeColor(randomRgbMix(palette.foreground, palette.borderMix), "rgb(255 255 255 / 0.1)"),
-		codeBackground: modeColor(randomRgbMix(palette.primary, palette.codeMix), "#18181b")
+		border: modeColor(randomRgbMix(palette.foreground, palette.borderMix), "rgb(255 255 255 / 0.11)"),
+		codeBackground: modeColor("#18181b", "#171719")
 	};
 }
 function createRandomTheme() {
@@ -2010,7 +1955,7 @@ var themePresets = {
 					dark: "rgb(255 255 255 / 0.11)"
 				},
 				codeBackground: {
-					light: "#f1f5f3",
+					light: "#18181b",
 					dark: "#171719"
 				}
 			},
@@ -2050,7 +1995,7 @@ var themePresets = {
 					dark: "rgb(255 255 255 / 0.1)"
 				},
 				codeBackground: {
-					light: "#f4f4f5",
+					light: "#18181b",
 					dark: "#18181b"
 				}
 			},
@@ -2249,14 +2194,14 @@ function TextField(props) {
 				type: "color",
 				value,
 				"aria-label": `${label} color`,
-				className: "h-5 w-8 shrink-0 cursor-pointer rounded border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
+				className: "h-5 w-8 shrink-0 cursor-pointer rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
 				onChange: handleTextChange
 			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			id,
 			value,
 			spellCheck: false,
-			className: "h-9 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+			className: "h-9 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
 			onChange: handleTextChange
 		})]
 	});
@@ -2304,14 +2249,14 @@ function ColorModeInput(props) {
 				type: "color",
 				value,
 				"aria-label": `${id} color`,
-				className: "h-4 w-6 shrink-0 cursor-pointer rounded border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
+				className: "h-4 w-6 shrink-0 cursor-pointer rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
 				onChange: handleTextChange
 			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			id,
 			value,
 			spellCheck: false,
-			className: "h-8 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+			className: "h-8 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
 			onChange: handleTextChange
 		})]
 	});
@@ -2452,7 +2397,7 @@ function ThemeEditor(props) {
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 								id: "clarify-theme-editor-preset",
 								value: theme.preset,
-								className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+								className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
 								onChange: (event) => updatePreset(event.target.value),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 									value: "default",
@@ -2509,7 +2454,7 @@ function ThemeEditor(props) {
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 										id: "clarify-theme-editor-tabs-position",
 										value: config.layout?.tabs ?? "subnav",
-										className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+										className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
 										onChange: (event) => updateConfig((currentConfig) => ({
 											...currentConfig,
 											layout: {
@@ -2557,7 +2502,7 @@ function ThemeEditor(props) {
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: "rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-1.5 text-xs/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+				className: "rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-1.5 text-xs/5 font-semibold text-(--clarify-ui-on-accent) shadow-(--clarify-ui-shadow-raised) transition hover:opacity-90",
 				onClick: copyConfig,
 				children: copyState === "copied" ? "Copied" : copyState === "failed" ? "Copy failed" : "Copy config"
 			})]
@@ -2566,7 +2511,7 @@ function ThemeEditor(props) {
 	function renderEditorPanel() {
 		if (!isOpen) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: "mb-3 flex max-h-(--clarify-theme-editor-panel-max-height) w-(--clarify-theme-editor-width) flex-col overflow-hidden rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 shadow-2xl shadow-zinc-900/15 backdrop-blur",
+			className: "mb-3 flex max-h-(--clarify-theme-editor-panel-max-height) w-(--clarify-theme-editor-width) flex-col overflow-hidden rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 shadow-(--clarify-ui-shadow-popover) shadow-zinc-900/15 backdrop-blur",
 			"aria-label": "Clarify theme editor",
 			children: [
 				renderPanelHeader(),
@@ -2579,7 +2524,7 @@ function ThemeEditor(props) {
 		className: (0, clsx.default)("clarify-theme-editor fixed right-4 bottom-4 z-50 text-(--clarify-theme-tokens-colors-foreground)", className),
 		children: [renderEditorPanel(), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: "ml-auto flex size-12 items-center justify-center rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 text-(--clarify-theme-tokens-colors-primary) shadow-xl shadow-zinc-900/15 backdrop-blur transition hover:scale-105 hover:bg-(--clarify-ui-accent-background) focus:outline-none focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+			className: "ml-auto flex size-12 items-center justify-center rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 text-(--clarify-theme-tokens-colors-primary) shadow-(--clarify-ui-shadow-popover) shadow-zinc-900/15 backdrop-blur transition hover:scale-105 hover:bg-(--clarify-ui-accent-background) focus:outline-none focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
 			"aria-label": isOpen ? "Close Clarify theme editor" : "Open Clarify theme editor",
 			"aria-expanded": isOpen,
 			onClick: () => setIsOpen((value) => !value),
@@ -2737,4 +2682,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-DwxpyL0U.cjs.map
+//# sourceMappingURL=ClarifyShell-BYJ3LIy_.cjs.map