@powerhousedao/design-system 6.2.0-dev.20 → 6.2.0-dev.21

package/dist/connect/index.js

@@ -1,4 +1,4 @@
-import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-BrrPQVce.js";
+import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-CfIIbIOi.js";
 import { n as getDimensions, t as Icon } from "../icon-C4QOpsdI.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popover/popover.js";
 import { SelectFieldRaw } from "../ui/components/select-field/select-field.js";
@@ -133,14 +133,14 @@ function Breadcrumbs() {
 	const hasSelectedDrive = !!selectedDrive;
 	const hasNodePath = !!selectedNodePath.length;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-9 flex-row items-center gap-2 p-6 text-gray-500 dark:text-slate-400",
+		className: "flex h-9 flex-row items-center gap-2 p-6 text-muted-foreground",
 		children: [
 			hasSelectedDrive && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": "Back to home",
 					title: "Back to home",
-					className: "flex items-center justify-center rounded-md p-1 text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-800 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-slate-100",
+					className: "flex items-center justify-center rounded-md p-1 text-foreground transition-colors hover:hover-effect",
 					onClick: () => setSelectedDrive(void 0),
 					children: /* @__PURE__ */ jsx(Icon, {
 						name: "ArrowLeft",
@@ -162,14 +162,14 @@ function Breadcrumbs() {
 				onClick: () => setSelectedNode(node)
 			}), /* @__PURE__ */ jsx("span", { children: "/" })] }, node.id)),
 			isAllowedToCreateDocuments && (isCreating ? /* @__PURE__ */ jsx(NodeInput, {
-				className: "text-gray-900 dark:text-slate-100",
+				className: "text-foreground",
 				defaultValue: "New Folder",
 				onCancel,
 				onSubmit,
 				placeholder: "New Folder"
 			}) : /* @__PURE__ */ jsxs("button", {
 				type: "button",
-				className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+				className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-background px-2 py-1.5 text-foreground transition-colors hover:hover-effect",
 				onClick: onAddNew,
 				children: [/* @__PURE__ */ jsx(Icon, {
 					name: "Plus",
@@ -186,7 +186,7 @@ function Breadcrumb(props) {
 		parentId: parentId ?? void 0
 	});
 	const { isDropTarget, ...dropProps } = useDropNode(id);
-	const containerStyles = twMerge("cursor-pointer transition-colors last-of-type:text-gray-800 hover:text-gray-800 dark:text-slate-200 last-of-type:dark:text-slate-100 dark:hover:text-slate-100", isDragging ? "opacity-60" : isDropTarget ? "bg-blue-100 dark:bg-blue-800" : "");
+	const containerStyles = twMerge("cursor-pointer transition-colors last-of-type:text-foreground hover:hover-effect", isDragging ? "opacity-60" : isDropTarget ? "bg-info/10" : "");
 	return /* @__PURE__ */ jsx("div", {
 		...dragProps,
 		...dropProps,
@@ -222,7 +222,7 @@ function MenuList(props) {
 	return /* @__PURE__ */ jsxs(components.MenuList, {
 		...rest,
 		children: [props.children, hasAddItemButton ? /* @__PURE__ */ jsx("button", {
-			className: "w-full px-2 py-3 hover:bg-gray-50 dark:hover:bg-slate-800",
+			className: "w-full px-2 py-3 hover:hover-effect",
 			onClick,
 			children: label
 		}) : null]
@@ -243,7 +243,7 @@ function Combobox(props) {
 				...addItemButtonProps
 			})
 		},
-		classNames: { menuList: () => "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-rounded-md scrollbar-thumb-gray-300 dark:scrollbar-thumb-slate-600" },
+		classNames: { menuList: () => "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-rounded-md scrollbar-thumb-border" },
 		styles: {
 			dropdownIndicator: () => {
 				return {
@@ -271,7 +271,7 @@ function Combobox(props) {
 			placeholder: (baseStyles) => {
 				return {
 					...baseStyles,
-					color: invalid ? dark ? "var(--color-red-400)" : "var(--color-red-800)" : dark ? "var(--color-slate-100)" : "var(--color-gray-500)"
+					color: invalid ? dark ? "var(--color-red-400)" : "var(--color-red-900)" : dark ? "var(--color-slate-100)" : "var(--color-gray-500)"
 				};
 			},
 			control: () => {
@@ -360,12 +360,12 @@ const CookieBanner = (props) => {
 					className: "cursor-pointer",
 					children: [/* @__PURE__ */ jsx("input", {
 						checked: cookie.value,
-						className: "mr-1 size-3 cursor-pointer rounded-sm border-2 border-gray-900 accent-gray-900 focus:outline-none dark:border-slate-50",
+						className: "mr-1 size-3 cursor-pointer rounded-sm border-2 border-foreground accent-primary focus:outline-none",
 						id: cookie.id,
 						onChange: handleOnChange,
 						type: "checkbox"
 					}), /* @__PURE__ */ jsx("label", {
-						className: "cursor-pointer text-gray-900 select-none dark:text-slate-50",
+						className: "cursor-pointer text-foreground select-none",
 						htmlFor: cookie.id,
 						children: cookie.label
 					})]
@@ -391,11 +391,11 @@ const CookieBanner = (props) => {
 };
 //#endregion
 //#region src/connect/components/modal/modal-button.tsx
-const defaultStyle = "min-h-12 min-w-35.5 flex-1 transform place-items-center rounded-xl px-6 py-3 text-base font-semibold transition-all outline-none hover:scale-105 active:opacity-75 disabled:cursor-not-allowed disabled:hover:scale-none";
+const defaultStyle = "min-h-12 min-w-35.5 flex-1 transform place-items-center rounded-xl px-6 py-3 text-base font-semibold transition-all outline-none hover:hover-effect active:active-effect disabled:disabled-effect";
 function ModalButton(props) {
 	const { variant, className, ...rest } = props;
-	const confirmStyle = twMerge(defaultStyle, "bg-gray-800 text-gray-50 dark:bg-slate-100 dark:text-slate-900");
-	const cancelStyle = twMerge(defaultStyle, "bg-gray-400 text-gray-50 dark:bg-slate-400 dark:text-slate-900");
+	const confirmStyle = twMerge(defaultStyle, "bg-primary text-primary-foreground");
+	const cancelStyle = twMerge(defaultStyle, "bg-muted text-muted-foreground");
 	return /* @__PURE__ */ jsx("button", {
 		className: twMerge(variant === "confirm" ? confirmStyle : cancelStyle, className),
 		...rest
@@ -414,11 +414,11 @@ function ConnectConfirmationModal(props) {
 			className: "w-[400px] p-6",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "pb-2 text-2xl font-bold text-gray-900 dark:text-slate-100",
+					className: "pb-2 text-2xl font-bold text-foreground",
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "my-6 rounded-md bg-gray-50 p-4 text-center text-gray-900 dark:bg-slate-700 dark:text-slate-100",
+					className: "my-6 rounded-md bg-background p-4 text-center text-foreground",
 					children: body
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -447,12 +447,12 @@ function TreeItem({ label, depth, expanded, selected, hasChildren, icon, onToggl
 		onToggle?.();
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		className: twMerge("flex cursor-pointer items-center gap-1 py-1 pr-2 text-sm hover:bg-gray-100 dark:hover:bg-slate-700", selected && "bg-blue-50 dark:bg-blue-900"),
+		className: twMerge("flex cursor-pointer items-center gap-1 py-1 pr-2 text-sm hover:hover-effect", selected && "bg-info/10"),
 		style: { paddingLeft: depth * INDENT_PX + 4 },
 		onClick,
 		children: [
 			hasChildren ? /* @__PURE__ */ jsx("button", {
-				className: "flex size-4 shrink-0 items-center justify-center text-gray-500 hover:text-gray-700 dark:text-slate-200 dark:hover:text-slate-100",
+				className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:hover-effect",
 				onClick: handleChevronClick,
 				type: "button",
 				children: /* @__PURE__ */ jsx(Icon, {
@@ -462,21 +462,21 @@ function TreeItem({ label, depth, expanded, selected, hasChildren, icon, onToggl
 				})
 			}) : /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0" }),
 			icon && /* @__PURE__ */ jsx("span", {
-				className: "shrink-0 text-gray-500 dark:text-slate-400",
+				className: "shrink-0 text-muted-foreground",
 				children: icon
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 flex-1 truncate text-gray-700 dark:text-slate-200",
+				className: "min-w-0 flex-1 truncate text-foreground",
 				children: label
 			}),
-			selected && /* @__PURE__ */ jsx("span", { className: "ml-auto size-2 shrink-0 rounded-full bg-blue-500 dark:bg-blue-400" })
+			selected && /* @__PURE__ */ jsx("span", { className: "ml-auto size-2 shrink-0 rounded-full bg-info" })
 		]
 	}), expanded && children] });
 }
 function ColumnItem({ column, depth }) {
 	const typeLabel = column.dataType.length > 10 ? column.dataType.slice(0, 10) + "…" : column.dataType;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1 py-0.5 pr-2 text-xs text-gray-500 dark:text-slate-200",
+		className: "flex items-center gap-1 py-0.5 pr-2 text-xs text-muted-foreground",
 		style: { paddingLeft: depth * INDENT_PX + 4 },
 		children: [
 			/* @__PURE__ */ jsx("span", { className: "w-4 shrink-0" }),
@@ -485,7 +485,7 @@ function ColumnItem({ column, depth }) {
 				children: column.name
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "ml-auto shrink-0 text-gray-400 dark:text-slate-200",
+				className: "ml-auto shrink-0 text-muted-foreground",
 				children: [
 					"(",
 					typeLabel,
@@ -531,7 +531,7 @@ function SchemaTreeSidebar({ schema, tables, selectedTable, onSelectTable, onRef
 					className: "truncate",
 					children: schema
 				}), onRefresh && /* @__PURE__ */ jsx("button", {
-					className: "ml-auto p-0.5 text-gray-400 hover:text-gray-600 dark:text-slate-200 dark:hover:text-slate-100",
+					className: "ml-auto p-0.5 text-muted-foreground hover:hover-effect",
 					onClick: handleRefreshClick,
 					type: "button",
 					disabled: loading,
@@ -587,12 +587,12 @@ const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref
 	}
 	const itemsToShow = items.filter((item) => item.value !== value);
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("border border-gray-200 bg-gray-50 text-gray-900 transition-[border-radius] dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", absolutePositionMenu && "relative", containerClassName),
+		className: twMerge("border border-border bg-background text-foreground transition-[border-radius]", absolutePositionMenu && "relative", containerClassName),
 		"data-open": showItems,
 		ref,
 		style: { borderRadius },
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex min-w-[360px] cursor-pointer items-center justify-between pr-3 text-gray-900 outline-none dark:text-slate-100", menuClassName),
+			className: twMerge("flex min-w-[360px] cursor-pointer items-center justify-between pr-3 text-foreground outline-none", menuClassName),
 			id,
 			onClick: () => setShowItems(!showItems),
 			children: [/* @__PURE__ */ jsx(ItemContainer, {
@@ -616,13 +616,13 @@ const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref
 function ItemContainer(props) {
 	const { className, disabled, onItemClick, icon, displayValue, value, description } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge(disabled ? "cursor-not-allowed text-gray-500 dark:text-slate-400" : "text-gray-900 dark:text-slate-100", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", className),
+		className: twMerge(disabled ? "cursor-not-allowed text-muted-foreground" : "text-foreground", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", className),
 		onClick: onItemClick,
 		children: [icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 			className: "text-inherit capitalize",
 			children: displayValue ?? value.toLowerCase()
 		}), /* @__PURE__ */ jsx("p", {
-			className: "text-xs text-gray-700 dark:text-slate-200",
+			className: "text-xs text-foreground",
 			children: description
 		})] })]
 	});
@@ -715,7 +715,7 @@ function FilterClauseComponent({ clause, columns, onUpdate, onRemove, showConnec
 				id: `connector-${clause.id}`,
 				items: connectorItems,
 				itemClassName: "px-2 py-1 text-xs",
-				menuClassName: "px-2 py-1 text-xs min-w-[80px]",
+				menuClassName: "min-w-[80px] px-2 py-1 text-xs",
 				value: connector,
 				onChange: onConnectorChange
 			}),
@@ -726,7 +726,7 @@ function FilterClauseComponent({ clause, columns, onUpdate, onRemove, showConnec
 				id: `column-${clause.id}`,
 				items: columnItems,
 				itemClassName: "px-2 py-1 text-xs",
-				menuClassName: "px-2 py-1 text-xs min-w-[150px]",
+				menuClassName: "min-w-[150px] px-2 py-1 text-xs",
 				value: clause.column,
 				onChange: handleColumnChange
 			}),
@@ -737,18 +737,18 @@ function FilterClauseComponent({ clause, columns, onUpdate, onRemove, showConnec
 				id: `operator-${clause.id}`,
 				items: operatorItems,
 				itemClassName: "px-2 py-1 text-xs",
-				menuClassName: "px-2 py-1 text-xs min-w-[100px]",
+				menuClassName: "min-w-[100px] px-2 py-1 text-xs",
 				value: clause.operator,
 				onChange: handleOperatorChange
 			}),
 			showValueInput && /* @__PURE__ */ jsx("input", {
-				className: "min-w-[150px] rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "min-w-[150px] rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground",
 				type: inputType,
 				value: clause.value,
 				onChange: (e) => handleValueChange(e.target.value)
 			}),
 			/* @__PURE__ */ jsx("button", {
-				className: "flex items-center justify-center rounded-sm p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:text-slate-400 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+				className: "flex items-center justify-center rounded-sm p-1 text-muted-foreground hover:hover-effect",
 				onClick: onRemove,
 				title: "Remove filter",
 				type: "button",
@@ -813,11 +813,11 @@ function FilterBar({ columns, filters, onFiltersChange }) {
 	}, [filters, onFiltersChange]);
 	const hasFilters = filters && filters.clauses.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 flex-col gap-2 rounded-lg border border-gray-300 bg-gray-50 p-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "flex shrink-0 flex-col gap-2 rounded-lg border border-border bg-background p-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ jsxs("button", {
-				className: "flex items-center gap-1 text-xs text-gray-700 hover:text-gray-900 dark:text-slate-200 dark:hover:text-slate-50",
+				className: "flex items-center gap-1 text-xs text-foreground hover:hover-effect",
 				onClick: () => setIsExpanded(!isExpanded),
 				type: "button",
 				children: [
@@ -828,12 +828,12 @@ function FilterBar({ columns, filters, onFiltersChange }) {
 					}),
 					/* @__PURE__ */ jsx("span", { children: "Filters" }),
 					hasFilters && /* @__PURE__ */ jsx("span", {
-						className: "rounded-sm bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700 dark:bg-blue-800 dark:text-blue-100",
+						className: "rounded-sm bg-info/10 px-1.5 py-0.5 text-xs text-info",
 						children: filters.clauses.length
 					})
 				]
 			}), /* @__PURE__ */ jsxs("button", {
-				className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+				className: "flex items-center gap-1 rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect",
 				onClick: handleAddFilter,
 				type: "button",
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -955,10 +955,10 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						children: loading ? "Loading..." : total !== null ? `Showing ${startItem.toLocaleString()}-${endItem.toLocaleString()} of ${total.toLocaleString()}` : `Showing ${rows.length.toLocaleString()} rows`
 					}), rows.length > 0 && /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect disabled:disabled-effect",
 						disabled: loading || copying,
 						onClick: () => void handleCopyAll(),
 						title: "Copy all rows as CSV",
@@ -972,14 +972,14 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 					className: "flex gap-1",
 					children: [
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: currentPage === 0,
 							onClick: () => goToPage(0),
 							type: "button",
 							children: "First"
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: currentPage === 0,
 							onClick: () => goToPage(currentPage - 1),
 							type: "button",
@@ -990,21 +990,21 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							})
 						}),
 						visiblePages[0] > 0 && /* @__PURE__ */ jsx("span", {
-							className: "flex items-center px-1 text-xs text-gray-500 dark:text-slate-400",
+							className: "flex items-center px-1 text-xs text-muted-foreground",
 							children: "..."
 						}),
 						visiblePages.map((page) => /* @__PURE__ */ jsx("button", {
-							className: twMerge("min-w-8 rounded-sm border px-2 py-1 text-xs", page === currentPage ? "border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900 dark:text-blue-100" : "border-gray-300 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700"),
+							className: twMerge("min-w-8 rounded-sm border px-2 py-1 text-xs", page === currentPage ? "border-info bg-info/10 text-info" : "border-border bg-background text-foreground hover:hover-effect"),
 							onClick: () => goToPage(page),
 							type: "button",
 							children: page + 1
 						}, page)),
 						visiblePages[visiblePages.length - 1] < totalPages - 1 && /* @__PURE__ */ jsx("span", {
-							className: "flex items-center px-1 text-xs text-gray-500 dark:text-slate-400",
+							className: "flex items-center px-1 text-xs text-muted-foreground",
 							children: "..."
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: currentPage >= totalPages - 1,
 							onClick: () => goToPage(currentPage + 1),
 							type: "button",
@@ -1015,7 +1015,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							})
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: currentPage >= totalPages - 1,
 							onClick: () => goToPage(totalPages - 1),
 							type: "button",
@@ -1025,13 +1025,13 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: twMerge("max-h-full overflow-auto rounded-lg border border-gray-300 transition-opacity dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", "scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-transparent", "scrollbar-thumb-gray-300 dark:scrollbar-thumb-slate-600", loading && "pointer-events-none opacity-50"),
+				className: twMerge("max-h-full overflow-auto rounded-lg border border-border transition-opacity", "scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-transparent", "scrollbar-thumb-border", loading && "pointer-events-none opacity-50"),
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse",
 					children: [/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 bg-gray-100 dark:bg-slate-700",
+						className: "sticky top-0 bg-muted",
 						children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-							className: "w-12 p-2 text-center text-xs font-medium text-gray-700 dark:text-slate-200",
+							className: "w-12 p-2 text-center text-xs font-medium text-foreground",
 							children: /* @__PURE__ */ jsx("span", {
 								className: "sr-only",
 								children: "Copy"
@@ -1040,7 +1040,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							const isActive = currentSort?.column === column.name;
 							const sortDirection = isActive ? currentSort.direction : "asc";
 							return /* @__PURE__ */ jsx("th", {
-								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-gray-700 dark:text-slate-200", index > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", onSort && "cursor-pointer hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-slate-600 dark:hover:text-slate-100"),
+								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border", onSort && "cursor-pointer hover:hover-effect"),
 								onClick: () => onSort && handleSort(column.name),
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-1",
@@ -1055,15 +1055,15 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							}, column.name);
 						})] })
 					}), /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: columns.length + 1,
 						children: "No data"
 					}) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50 dark:odd:bg-slate-800 dark:even:bg-slate-800 dark:hover:bg-blue-900",
+						className: "odd:bg-card even:bg-background hover:hover-effect",
 						children: [/* @__PURE__ */ jsx("td", {
 							className: "p-2 text-center",
 							children: /* @__PURE__ */ jsx("button", {
-								className: "flex items-center justify-center rounded-sm p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:text-slate-400 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+								className: "flex items-center justify-center rounded-sm p-1 text-muted-foreground hover:hover-effect",
 								onClick: () => void handleCopyRow(rowIndex),
 								title: "Copy row as CSV",
 								type: "button",
@@ -1073,9 +1073,9 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 								})
 							})
 						}), columns.map((column, colIndex) => /* @__PURE__ */ jsx("td", {
-							className: twMerge("px-3 py-2 text-xs text-gray-900 dark:text-slate-50", colIndex > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100"),
+							className: twMerge("px-3 py-2 text-xs text-foreground", colIndex > 0 && "border-l border-border"),
 							children: /* @__PURE__ */ jsx("span", {
-								className: twMerge("block truncate", row[column.name] === null && "text-gray-400 italic dark:text-slate-500"),
+								className: twMerge("block truncate", row[column.name] === null && "text-muted-foreground italic"),
 								title: formatCellValue(row[column.name]),
 								children: formatCellValue(row[column.name])
 							})
@@ -1276,7 +1276,7 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 				onContinue: () => void handleResetConfirm()
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex w-64 shrink-0 flex-col border-r border-gray-200 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "flex w-64 shrink-0 flex-col border-r border-border",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex-1 overflow-auto",
 					children: /* @__PURE__ */ jsx(SchemaTreeSidebar, {
@@ -1288,30 +1288,30 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 						loading: tablesLoading || loading
 					})
 				}), (onImportDb || onExportDb || pgVersionControl) && /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 flex-col gap-2 border-t border-gray-200 p-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+					className: "flex shrink-0 flex-col gap-2 border-t border-border p-2",
 					children: [
 						onImportDb && /* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 							onClick: handleImportClick,
 							type: "button",
 							children: "Import DB"
 						}),
 						onExportDb && /* @__PURE__ */ jsx("button", {
-							className: "rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 							onClick: handleExportClick,
 							type: "button",
 							children: "Export DB"
 						}),
 						pgVersionControl && /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col gap-1 border-t border-gray-200 pt-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+							className: "flex flex-col gap-1 border-t border-border pt-2",
 							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between text-xs text-gray-700 dark:text-slate-200",
+								className: "flex items-center justify-between text-xs text-foreground",
 								children: [/* @__PURE__ */ jsx("span", { children: "Postgres version" }), /* @__PURE__ */ jsx("span", {
-									className: "font-semibold text-gray-900 dark:text-slate-50",
+									className: "font-semibold text-foreground",
 									children: pgVersionControl.currentPgVersion === null ? "—" : `PG${pgVersionControl.currentPgVersion}`
 								})]
 							}), resetTargetMajor !== null && /* @__PURE__ */ jsx("button", {
-								className: "rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50 dark:border-red-600 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800",
+								className: "rounded-sm border border-destructive bg-destructive/10 px-3 py-1.5 text-sm text-destructive hover:hover-effect disabled:disabled-effect",
 								onClick: () => setPendingResetMajor(resetTargetMajor),
 								disabled: resetting,
 								type: "button",
@@ -1324,10 +1324,10 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 			/* @__PURE__ */ jsx("div", {
 				className: "flex-1 overflow-auto p-4",
 				children: !selectedTable ? /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-gray-500 dark:text-slate-400",
+					className: "text-sm text-muted-foreground",
 					children: "Select a table to view data"
 				}) : !tableData && loading ? /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-gray-500 dark:text-slate-400",
+					className: "text-sm text-muted-foreground",
 					children: "Loading..."
 				}) : tableData ? /* @__PURE__ */ jsx(TableView, {
 					columns,
@@ -1377,20 +1377,20 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [
 				/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: "PGlite data dir"
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-sm text-gray-700 dark:text-slate-200",
+					className: "mt-1 text-sm text-foreground",
 					children: "Kill the reactor, delete the local IndexedDB, initialize a fresh Postgres cluster at the chosen major version, then reload. Useful for testing version-detection and migration flows."
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "mt-2 inline-flex items-center gap-2 rounded-sm bg-gray-100 px-3 py-1 text-sm dark:bg-slate-700",
+					className: "mt-2 inline-flex items-center gap-2 rounded-sm bg-muted px-3 py-1 text-sm",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						children: "Current version:"
 					}), /* @__PURE__ */ jsx("span", {
-						className: "font-semibold text-gray-900 dark:text-slate-50",
+						className: "font-semibold text-foreground",
 						children: currentPgVersion === null ? "None (no data dir)" : `Postgres ${currentPgVersion}`
 					})]
 				})
@@ -1402,16 +1402,16 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 						type: "button",
 						disabled: running,
 						onClick: () => setConfirmMajor(major),
-						className: "flex items-center gap-1 rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50 dark:border-red-600 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800",
+						className: "flex items-center gap-1 rounded-sm border border-destructive bg-destructive/10 px-3 py-1.5 text-sm text-destructive hover:hover-effect disabled:disabled-effect",
 						children: pendingMajor === major && running ? `Resetting to PG${major}…` : `Reset to PG${major}`
 					}, major);
 				})
 			}),
 			confirmMajor !== null && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-3 rounded-sm border border-yellow-400 bg-yellow-50 px-3 py-2 dark:border-yellow-500 dark:bg-yellow-900",
+				className: "flex shrink-0 items-center gap-3 rounded-sm border border-warning bg-warning/10 px-3 py-2",
 				children: [
 					/* @__PURE__ */ jsxs("span", {
-						className: "text-sm text-yellow-900 dark:text-yellow-100",
+						className: "text-sm text-warning",
 						children: [
 							"This will permanently delete all local reactor data and recreate an empty database under Postgres ",
 							confirmMajor,
@@ -1421,19 +1421,19 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 					/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => void handleReset(confirmMajor),
-						className: "rounded-sm bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700 dark:bg-yellow-300 dark:text-slate-900 dark:hover:bg-yellow-200",
+						className: "rounded-sm bg-warning px-3 py-1 text-sm text-warning-foreground hover:hover-effect",
 						children: ["Confirm reset to PG", confirmMajor]
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setConfirmMajor(null),
-						className: "rounded-sm border border-gray-300 bg-gray-50 px-3 py-1 text-sm text-gray-700 hover:bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-800",
+						className: "rounded-sm border border-border bg-background px-3 py-1 text-sm text-foreground hover:hover-effect",
 						children: "Cancel"
 					})
 				]
 			}),
 			error && /* @__PURE__ */ jsx("div", {
-				className: "rounded-sm border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-600 dark:bg-red-900 dark:text-red-100",
+				className: "rounded-sm border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive",
 				children: error
 			})
 		]
@@ -1574,7 +1574,7 @@ function LogoAnimation({ size = 48, className = "" }) {
 		viewBox: "-1 -2 50 52",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
-		className: twMerge("text-gray-900 dark:text-slate-50", className),
+		className: twMerge("text-foreground", className),
 		"aria-label": "Animated logo",
 		children: SEQUENCE.map(({ id }) => /* @__PURE__ */ jsx("path", {
 			ref: refFor(id),
@@ -1589,7 +1589,7 @@ function LogoAnimation({ size = 48, className = "" }) {
 function DefaultEditorLoader(props) {
 	const { message = "Loading editor", ...divProps } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: "grid h-full place-items-center text-gray-800 dark:text-slate-100",
+		className: "grid h-full place-items-center text-foreground",
 		...divProps,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "-mt-20 grid place-items-center",
@@ -1607,7 +1607,7 @@ function Disclosure(props) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: twMerge(containerClassName),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex cursor-pointer justify-between text-gray-500 dark:text-slate-400", toggleClassName),
+			className: twMerge("flex cursor-pointer justify-between text-muted-foreground", toggleClassName),
 			onClick: onOpenChange,
 			children: [/* @__PURE__ */ jsx("h2", {
 				className: "font-semibold text-inherit",
@@ -1628,7 +1628,7 @@ function Disclosure(props) {
 function Divider(props) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: twMerge("h-px bg-gray-200 dark:bg-slate-600 dark:text-slate-100", props.className)
+		className: twMerge("h-px bg-secondary", props.className)
 	});
 }
 //#endregion
@@ -1649,12 +1649,12 @@ function Tabs({ children, defaultValue }) {
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex w-full shrink-0 justify-between",
 			children: /* @__PURE__ */ jsx(List, {
-				className: "flex w-full gap-x-2 rounded-xl p-1 text-sm font-semibold text-gray-700 outline-none dark:text-slate-200",
+				className: "flex w-full gap-x-2 rounded-xl p-1 text-sm font-semibold text-foreground outline-none",
 				children: React.Children.map(children, (child, _i) => {
 					if (!/* @__PURE__ */ React.isValidElement(child)) return;
 					const { label, disabled } = child.props;
 					return /* @__PURE__ */ jsx(Trigger$2, {
-						className: "flex min-h-7 flex-1 items-center justify-center rounded-lg border border-gray-100 bg-gray-50 py-2 text-gray-900 transition duration-300 data-disabled:cursor-not-allowed data-disabled:text-gray-400 data-[state='active']:bg-gray-100 data-[state='active']:text-gray-900 dark:border-slate-600 dark:bg-slate-600 dark:text-slate-200 dark:data-disabled:text-slate-500 dark:data-[state='active']:bg-slate-500 dark:data-[state='active']:text-slate-100",
+						className: "flex min-h-7 flex-1 items-center justify-center rounded-lg border border-border bg-background py-2 text-foreground transition duration-300 data-disabled:disabled-effect data-[state=active]:bg-accent data-[state=active]:text-foreground",
 						value: label,
 						disabled: disabled ?? false,
 						children: label
@@ -1662,7 +1662,7 @@ function Tabs({ children, defaultValue }) {
 				})
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "mt-3 min-h-0 flex-1 rounded-md bg-gray-50 dark:bg-slate-800",
+			className: "mt-3 min-h-0 flex-1 rounded-md bg-background",
 			children: React.Children.map(children, (child, i) => {
 				if (!/* @__PURE__ */ React.isValidElement(child)) return;
 				const { label } = child.props;
@@ -1685,7 +1685,7 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 	const scopes = useMemo(() => Object.keys(state).filter((scope) => !ignoredScopes.includes(scope)), [state, ignoredScopes]);
 	const initialScope = defaultScope || scopes.at(0) || "global";
 	if (scopes.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "text-sm text-gray-500 dark:text-slate-400",
+		className: "text-sm text-muted-foreground",
 		children: "No state data"
 	});
 	return /* @__PURE__ */ jsx(Tabs, {
@@ -1694,7 +1694,7 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 			label: formatScopeLabel(scope),
 			description: scope,
 			children: /* @__PURE__ */ jsx("div", {
-				className: twMerge("-mt-2 rounded-md border border-gray-300 bg-gray-50 p-3 font-mono text-sm dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+				className: twMerge("-mt-2 rounded-md border border-border bg-background p-3 font-mono text-sm", className),
 				children: /* @__PURE__ */ jsx(JsonViewer, { data: state[scope] })
 			})
 		}, scope))
@@ -1716,7 +1716,7 @@ function ConnectTooltip(props) {
 			...rest,
 			side,
 			sideOffset,
-			className: twMerge("z-50 rounded-lg border border-gray-200 bg-gray-50 p-2 text-xs shadow-tooltip dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+			className: twMerge("z-50 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-tooltip", className),
 			children: content
 		}) })]
 	});
@@ -1752,7 +1752,7 @@ const HDivider = (props) => {
 		children: [
 			!!title && /* @__PURE__ */ jsx("div", { children: title }),
 			!!subtitle && /* @__PURE__ */ jsx("div", {
-				className: "text-gray-300 dark:text-slate-600",
+				className: "text-foreground",
 				children: subtitle
 			}),
 			!!timestamp && /* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) })
@@ -1774,7 +1774,7 @@ const HDivider = (props) => {
 			size: 10,
 			className: "absolute top-[-11px] z-40"
 		}), /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-gray-900 text-white dark:bg-slate-50 dark:text-slate-900",
+			className: "rounded-md bg-primary text-primary-foreground",
 			content: tooltipContent,
 			open: open && hasContent,
 			onOpenChange: setOpen,
@@ -1782,12 +1782,12 @@ const HDivider = (props) => {
 			side: "bottom",
 			sideOffset: 5,
 			children: /* @__PURE__ */ jsx("div", {
-				className: twMerge("mx-0.5 flex h-6.25 w-1.5 cursor-pointer flex-col items-center justify-center rounded-xs hover:bg-blue-300 dark:hover:bg-blue-600", isSelected && "bg-blue-300 dark:bg-blue-600", className),
+				className: twMerge("mx-0.5 flex h-6.25 w-1.5 cursor-pointer flex-col items-center justify-center rounded-xs hover:hover-effect", isSelected && "bg-info/10", className),
 				onClick,
 				"data-title": title,
 				"data-subtitle": subtitle,
 				"data-timestamp": timestamp,
-				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-gray-500 dark:bg-slate-400" })
+				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-muted" })
 			})
 		})]
 	});
@@ -1822,11 +1822,11 @@ const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions,
 		children: [
 			/* @__PURE__ */ jsx("div", { children: formatTimestamp$1(timestamp) }),
 			/* @__PURE__ */ jsx("div", {
-				className: "text-green-900 dark:text-green-100",
+				className: "text-success",
 				children: `${additions} additions +`
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "text-red-700 dark:text-red-100",
+				className: "text-destructive",
 				children: `${deletions} deletions -`
 			})
 		]
@@ -1847,12 +1847,12 @@ const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions,
 			size: 10,
 			className: "absolute top-[-11px] left-[-2px] z-40"
 		}), noChanges ? /* @__PURE__ */ jsx("div", {
-			className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300 dark:hover:bg-blue-600", className),
+			className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className),
 			"data-timestamp": timestamp,
 			onClick,
-			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-gray-500 dark:bg-slate-400" })
+			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-muted-foreground" })
 		}) : /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-gray-900 text-white dark:bg-slate-50 dark:text-slate-900",
+			className: "rounded-md bg-primary text-primary-foreground",
 			content: tooltipContent,
 			open,
 			onOpenChange: setOpen,
@@ -1860,15 +1860,15 @@ const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions,
 			side: "bottom",
 			sideOffset: 5,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300 dark:hover:bg-blue-600", className, isSelected && "bg-blue-300 dark:bg-blue-600"),
+				className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className, isSelected && "bg-info/10"),
 				"data-timestamp": timestamp,
 				onClick,
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex h-3 w-0.5 items-end",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-green-600 dark:bg-green-300", addBarHeight) })
+					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-success", addBarHeight) })
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex h-3 w-0.5 items-start",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-red-600 dark:bg-red-300", delBarHeight) })
+					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-destructive", delBarHeight) })
 				})]
 			})
 		})]
@@ -1935,14 +1935,14 @@ const DocumentTimeline = (props) => {
 			className: "relative h-[36px] w-full",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "absolute left-0 z-20 h-[17px] w-[6px] bg-gray-50 dark:bg-slate-800",
-					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-gray-50 dark:bg-slate-800" })
+					className: "absolute left-0 z-20 h-[17px] w-[6px] bg-background",
+					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-background" })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-gray-50 dark:bg-slate-800",
-					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-gray-50 dark:bg-slate-800" })
+					className: "absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-background",
+					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-background" })
 				}),
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-gray-50 dark:bg-slate-800" }),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-background" }),
 				/* @__PURE__ */ jsx("div", {
 					className: "absolute inset-x-0 bottom-0 h-[36px]",
 					children: /* @__PURE__ */ jsx("div", {
@@ -1954,14 +1954,14 @@ const DocumentTimeline = (props) => {
 								className: "flex",
 								children: unselectedContent
 							}), /* @__PURE__ */ jsx("div", {
-								className: "flex rounded-sm bg-blue-200 dark:bg-blue-700",
+								className: "flex rounded-sm bg-info/10",
 								children: selectedContent
 							})]
 						})
 					})
 				}),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-gray-50 dark:bg-slate-800" }),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-gray-50 dark:bg-slate-800" })
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-background" }),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-background" })
 			]
 		})
 	});
@@ -1979,7 +1979,7 @@ function ToolbarContainer(props) {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-border bg-background px-4", className),
 		children
 	});
 }
@@ -2049,7 +2049,7 @@ function ToolbarButton(props) {
 	return /* @__PURE__ */ jsx("button", {
 		...rest,
 		disabled,
-		className: twMerge("grid size-fit place-items-center rounded-lg border border-gray-200 bg-gray-50 p-1 text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", disabled ? "cursor-not-allowed text-gray-500 dark:text-slate-400" : "cursor-pointer active:opacity-70", className),
+		className: twMerge("grid size-fit place-items-center rounded-lg border border-border bg-background p-1 text-foreground hover:hover-effect active:active-effect disabled:disabled-effect", className),
 		children
 	});
 }
@@ -2209,7 +2209,7 @@ function ToolbarInput(props) {
 	const { defaultValue, className, onSubmit, onCancel, "aria-label": ariaLabel } = props;
 	return /* @__PURE__ */ jsx(NodeInput, {
 		defaultValue,
-		className: twMerge("text-center text-sm font-medium text-gray-500 dark:text-slate-400", className),
+		className: twMerge("text-center text-sm font-medium text-muted-foreground", className),
 		"aria-label": ariaLabel,
 		onCancel,
 		onSubmit
@@ -2247,7 +2247,7 @@ function ToolbarName(props) {
 		"aria-label": "Document name"
 	});
 	return /* @__PURE__ */ jsx("h1", {
-		className: twMerge("cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200", titleClassName),
+		className: twMerge("cursor-pointer text-sm font-medium text-muted-foreground hover:hover-effect", titleClassName),
 		onClick: activateEditing,
 		title: "Click to edit",
 		children: documentName
@@ -2448,20 +2448,20 @@ function ControlsContainerSlot(props) {
 function DriveAuthGate(props) {
 	const { onLogin, className } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("flex w-[28rem] max-w-[calc(100%-2rem)] flex-col items-center gap-4 rounded-3xl bg-gray-50 p-8 text-center shadow-2xl ring-1 ring-black/5 dark:bg-slate-700 dark:ring-white/10", className),
+		className: twMerge("flex w-[28rem] max-w-[calc(100%-2rem)] flex-col items-center gap-4 rounded-3xl bg-background p-8 text-center shadow-2xl ring-1 ring-black/5 dark:ring-white/10", className),
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "text-xl font-semibold text-gray-900 dark:text-slate-50",
+				className: "text-xl font-semibold text-foreground",
 				children: "Log in to access this drive"
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-sm text-gray-600 dark:text-slate-300",
+				className: "text-sm text-muted-foreground",
 				children: "This drive requires you to sign in with Renown to view or edit it."
 			}),
 			/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: onLogin,
-				className: "mt-2 flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-semibold text-gray-900 shadow-sm transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-700",
+				className: "mt-2 flex items-center gap-2 rounded-lg border border-border bg-card px-6 py-2.5 text-sm font-semibold text-foreground shadow-sm transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 				children: [/* @__PURE__ */ jsx("span", { children: "Log in with" }), /* @__PURE__ */ jsx(RenownLogo, {
 					width: 58,
 					height: 16,
@@ -2487,11 +2487,11 @@ function ConnectReplaceDuplicateModal(props) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between pb-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-2xl font-bold text-gray-900 dark:text-slate-100",
+						className: "text-2xl font-bold text-foreground",
 						children: title
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "flex size-6 items-center justify-center rounded-md outline-none hover:bg-gray-100 dark:hover:bg-slate-700",
+						className: "flex size-6 items-center justify-center rounded-md outline-none hover:hover-effect",
 						onClick: () => onOpenChange?.(false),
 						children: /* @__PURE__ */ jsx(Icon, {
 							name: "XmarkLight",
@@ -2500,7 +2500,7 @@ function ConnectReplaceDuplicateModal(props) {
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "my-6 rounded-md bg-gray-50 p-4 text-center text-gray-900 dark:bg-slate-700 dark:text-slate-100",
+					className: "my-6 rounded-md bg-background p-4 text-center text-foreground",
 					children: message || defaultMessage
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -2521,7 +2521,7 @@ function UploadFileItemErrorDetails(props) {
 	const { status, errorDetails } = props;
 	if (!((status === "failed" || status === "unsupported-document-type") && errorDetails)) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "text-xs leading-[18px] wrap-break-word text-gray-500 dark:text-slate-400",
+		className: "text-xs leading-[18px] wrap-break-word text-muted-foreground",
 		children: errorDetails
 	});
 }
@@ -2551,16 +2551,16 @@ function UploadFileItemHeader(props) {
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: getDocumentIcon(documentType),
 					size: 48,
-					className: "text-gray-700 dark:text-slate-200"
+					className: "text-foreground"
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 flex-col gap-0.5",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-xs leading-[18px] font-medium text-gray-900 dark:text-slate-50",
+					className: "text-xs leading-[18px] font-medium text-foreground",
 					children: fileName
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-xs leading-[18px] font-medium text-gray-500 dark:text-slate-400",
+					className: "text-xs leading-[18px] font-medium text-muted-foreground",
 					children: fileSize
 				})]
 			}),
@@ -2569,7 +2569,7 @@ function UploadFileItemHeader(props) {
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onClose,
-					className: "flex h-[18px] w-[18px] items-center justify-center text-gray-700 hover:text-gray-800 dark:text-slate-200 dark:hover:text-slate-100",
+					className: "flex h-[18px] w-[18px] items-center justify-center text-foreground hover:hover-effect",
 					"aria-label": "Close",
 					children: /* @__PURE__ */ jsx(Icon, {
 						name: "XmarkLight",
@@ -2586,9 +2586,9 @@ function UploadFileItemProgressBar(props) {
 	const { status, progress = 0 } = props;
 	if (status !== "uploading") return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "h-2 w-full overflow-hidden rounded-sm bg-gray-200 dark:bg-slate-600 dark:text-slate-100",
+		className: "h-2 w-full overflow-hidden rounded-sm bg-secondary",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full bg-blue-900 transition-all duration-300 ease-out dark:bg-blue-50",
+			className: "h-full bg-info transition-all duration-300 ease-out",
 			style: { width: `${Math.min(100, Math.max(0, progress))}%` }
 		})
 	});
@@ -2608,13 +2608,13 @@ function getStatusText(status) {
 }
 function getStatusColor(status) {
 	switch (status) {
-		case "success": return "text-green-700 dark:text-green-100";
+		case "success": return "text-success";
 		case "failed":
 		case "unsupported-document-type":
 		case "pending":
-		case "conflict": return "text-red-900 dark:text-red-400";
-		case "uploading": return "text-gray-900 dark:text-slate-50";
-		default: return "text-gray-900 dark:text-slate-50";
+		case "conflict": return "text-destructive";
+		case "uploading": return "text-foreground";
+		default: return "text-foreground";
 	}
 }
 function shouldShowCTA(status, onOpenDocument, onFindResolution) {
@@ -2640,13 +2640,13 @@ function UploadFileItemStatusRow(props) {
 				children: getStatusText(status)
 			}),
 			status === "uploading" && /* @__PURE__ */ jsxs("div", {
-				className: "text-xs leading-[18px] font-medium text-gray-900 dark:text-slate-50",
+				className: "text-xs leading-[18px] font-medium text-foreground",
 				children: [Math.round(progress), "%"]
 			}),
 			shouldShowCTA(status, onOpenDocument, onFindResolution) && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: handleCTAClick,
-				className: "text-xs leading-[18px] text-blue-900 hover:opacity-80 dark:text-blue-100",
+				className: "text-xs leading-[18px] text-info hover:hover-effect",
 				children: getCTAText(status)
 			})
 		]
@@ -2658,7 +2658,7 @@ const UploadFileItem = /* @__PURE__ */ forwardRef(function UploadFileItem(props,
 	const { fileName, fileSize, status, documentType, progress = 0, errorDetails, onClose, onOpenDocument, onFindResolution, className, ...delegatedProps } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: twMerge("flex w-full flex-col gap-0.5 rounded-md border border-gray-100 bg-gray-50 p-2 shadow-sidebar dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("flex w-full flex-col gap-0.5 rounded-md border border-border bg-background p-2 shadow-sidebar", className),
 		...delegatedProps,
 		children: [/* @__PURE__ */ jsx(UploadFileItemHeader, {
 			fileName,
@@ -2699,7 +2699,7 @@ function UploadFileList(props) {
 	const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 	const computedTitle = useMemo(() => getUploadListTitle(items.length, title), [items.length, title]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("w-89.5 rounded-md border border-gray-100 bg-gray-50 p-4 shadow-charcoal dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("w-89.5 rounded-md border border-border bg-background p-4 shadow-charcoal", className),
 		...delegatedProps,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
@@ -2708,7 +2708,7 @@ function UploadFileList(props) {
 				"aria-expanded": !isCollapsed,
 				"aria-label": isCollapsed ? "Expand list" : "Collapse list",
 				onClick: () => setIsCollapsed((v) => !v),
-				className: "min-w-0 flex-1 text-left text-sm/4 font-medium text-gray-900 hover:opacity-80 dark:text-slate-50",
+				className: "min-w-0 flex-1 text-left text-sm/4 font-medium text-foreground hover:hover-effect",
 				children: computedTitle
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-4",
@@ -2716,7 +2716,7 @@ function UploadFileList(props) {
 					type: "button",
 					"aria-label": isCollapsed ? "Expand" : "Collapse",
 					onClick: () => setIsCollapsed((v) => !v),
-					className: "text-gray-900 hover:opacity-80 dark:text-slate-50",
+					className: "text-foreground hover:hover-effect",
 					children: /* @__PURE__ */ jsx("span", {
 						className: twMerge("inline-block size-4 transition-transform select-none", isCollapsed ? "-rotate-90" : "rotate-0"),
 						children: /* @__PURE__ */ jsx(Icon, {
@@ -2729,7 +2729,7 @@ function UploadFileList(props) {
 					type: "button",
 					"aria-label": "Close",
 					onClick: onClose,
-					className: "text-gray-900 hover:opacity-80 dark:text-slate-50",
+					className: "text-foreground hover:hover-effect",
 					children: /* @__PURE__ */ jsx("span", {
 						className: "inline-block size-4 select-none",
 						children: /* @__PURE__ */ jsx(Icon, {
@@ -3063,18 +3063,18 @@ function DropZone(props) {
 		children: [
 			children,
 			enable && isDropTarget && /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-none fixed inset-0 z-1000 flex min-h-screen w-screen items-center justify-center bg-gray-900/50 dark:bg-slate-900/50",
+				className: "pointer-events-none fixed inset-0 z-1000 flex min-h-screen w-screen items-center justify-center bg-primary/50",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "rounded-3xl bg-gray-50 p-6 shadow-charcoal dark:bg-slate-800",
+					className: "rounded-3xl bg-background p-6 shadow-charcoal",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: "relative flex h-32.5 w-100 flex-col items-center justify-start overflow-visible rounded-lg border border-dashed border-gray-900 px-4 py-6",
+						className: "relative flex h-32.5 w-100 flex-col items-center justify-start overflow-visible rounded-lg border border-dashed border-foreground px-4 py-6",
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: "text-center text-base/5 text-gray-500 dark:text-slate-400",
+								className: "text-center text-base/5 text-muted-foreground",
 								children: title
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: "text-center text-base/5 text-gray-500 dark:text-slate-400",
+								className: "text-center text-base/5 text-muted-foreground",
 								children: subtitle
 							}),
 							/* @__PURE__ */ jsx("span", {
@@ -3136,9 +3136,9 @@ function ConnectDropdownMenu(props) {
 			className: "outline-none",
 			children
 		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			className: twMerge("cursor-pointer rounded-2xl border border-gray-200 bg-gray-50 text-sm font-medium text-gray-500 shadow-lg dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", menuClassName),
+			className: twMerge("cursor-pointer rounded-2xl border border-border bg-popover text-sm font-medium text-muted-foreground shadow-lg", menuClassName),
 			children: items.map(({ id, label, icon, className }) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-				className: twMerge("flex items-center px-5 py-2 outline-none first-of-type:rounded-t-2xl first-of-type:pt-3 last-of-type:rounded-b-2xl last-of-type:pb-3 hover:bg-gray-50 dark:hover:bg-slate-800", className),
+				className: twMerge("flex items-center px-5 py-2 outline-none first-of-type:rounded-t-2xl first-of-type:pt-3 last-of-type:rounded-b-2xl last-of-type:pb-3 hover:hover-effect", className),
 				onClick: (e) => e.stopPropagation(),
 				onSelect: () => onItemClick(id),
 				children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -3157,7 +3157,7 @@ function EditorActionButtons(props) {
 		className: "flex items-center gap-x-2",
 		children: [
 			onSwitchboardLinkClick && /* @__PURE__ */ jsx("button", {
-				className: "grid size-8 place-items-center rounded-lg border border-gray-200 bg-gray-50 text-gray-900 disabled:cursor-not-allowed disabled:text-gray-500 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:disabled:text-slate-400",
+				className: "grid size-8 place-items-center rounded-lg border border-border bg-background text-foreground disabled:disabled-effect",
 				onClick: onSwitchboardLinkClick,
 				disabled: !onSwitchboardLinkClick,
 				children: /* @__PURE__ */ jsx(Icon, {
@@ -3166,7 +3166,7 @@ function EditorActionButtons(props) {
 				})
 			}),
 			onShowRevisionHistory && /* @__PURE__ */ jsx("button", {
-				className: "grid size-8 place-items-center rounded-lg border border-gray-200 bg-gray-50 text-gray-900 disabled:cursor-not-allowed disabled:text-gray-500 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:disabled:text-slate-400",
+				className: "grid size-8 place-items-center rounded-lg border border-border bg-background text-foreground disabled:disabled-effect",
 				onClick: onShowRevisionHistory,
 				disabled: !onShowRevisionHistory,
 				children: /* @__PURE__ */ jsx(Icon, {
@@ -3175,7 +3175,7 @@ function EditorActionButtons(props) {
 				})
 			}),
 			onShowTimeline && /* @__PURE__ */ jsx("button", {
-				className: "grid size-8 place-items-center rounded-lg border border-gray-200 bg-gray-50 text-gray-900 disabled:cursor-not-allowed disabled:text-gray-500 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:disabled:text-slate-400",
+				className: "grid size-8 place-items-center rounded-lg border border-border bg-background text-foreground disabled:disabled-effect",
 				onClick: onShowTimeline,
 				disabled: !onShowTimeline,
 				children: /* @__PURE__ */ jsx(Icon, {
@@ -3184,7 +3184,7 @@ function EditorActionButtons(props) {
 				})
 			}),
 			/* @__PURE__ */ jsx("button", {
-				className: "grid size-8 place-items-center rounded-lg border border-gray-200 bg-gray-50 text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "grid size-8 place-items-center rounded-lg border border-border bg-background text-foreground",
 				onClick: onClose,
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "XmarkLight",
@@ -3198,15 +3198,15 @@ function EditorActionButtons(props) {
 //#region src/connect/components/editor-undo-redo-buttons/editor-undo-redo-buttons.tsx
 function EditorUndoRedoButtons(props) {
 	const { canUndo, canRedo, undo, redo } = props;
-	const buttonStyles = "w-8 h-8 rounded-lg flex justify-center items-center rounded border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100";
+	const buttonStyles = "w-8 h-8 rounded-lg flex justify-center items-center rounded border border-border bg-background";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex gap-x-2 text-gray-500 dark:text-slate-400",
+		className: "flex gap-x-2 text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("button", {
 			className: buttonStyles,
 			disabled: !canUndo,
 			onClick: undo,
 			children: /* @__PURE__ */ jsx(Icon, {
-				className: twMerge("-scale-x-100", canUndo ? "text-gray-900 active:opacity-50 dark:text-slate-50" : "text-gray-500 dark:text-slate-400"),
+				className: twMerge("-scale-x-100", canUndo ? "text-foreground active:active-effect" : "text-muted-foreground"),
 				name: "RedoArrow",
 				size: 18
 			})
@@ -3215,7 +3215,7 @@ function EditorUndoRedoButtons(props) {
 			disabled: !canRedo,
 			onClick: redo,
 			children: /* @__PURE__ */ jsx(Icon, {
-				className: twMerge(canRedo ? "text-gray-900 active:opacity-50 dark:text-slate-50" : "text-gray-500 dark:text-slate-400"),
+				className: twMerge(canRedo ? "text-foreground active:active-effect" : "text-muted-foreground"),
 				name: "RedoArrow",
 				size: 18
 			})
@@ -3320,7 +3320,7 @@ const debugNodeOptionsMap = {
 	ADD_TRIGGER: {
 		label: "Add Trigger",
 		icon: /* @__PURE__ */ jsx(Icon, {
-			className: "text-orange-900 dark:text-orange-100",
+			className: "text-warning",
 			name: "Plus",
 			size: 16
 		})
@@ -3328,7 +3328,7 @@ const debugNodeOptionsMap = {
 	REMOVE_TRIGGER: {
 		label: "Remove Trigger",
 		icon: /* @__PURE__ */ jsx(Icon, {
-			className: "text-orange-900 dark:text-orange-100",
+			className: "text-warning",
 			name: "Xmark",
 			size: 16
 		})
@@ -3336,7 +3336,7 @@ const debugNodeOptionsMap = {
 	ADD_INVALID_TRIGGER: {
 		label: "Add Trigger",
 		icon: /* @__PURE__ */ jsx(Icon, {
-			className: "text-orange-900 dark:text-orange-100",
+			className: "text-warning",
 			name: "Exclamation",
 			size: 16
 		})
@@ -3363,7 +3363,7 @@ const folderNodeDropdownOptions = {
 			name: "Trash",
 			size: 16
 		}),
-		className: "text-red-900 dark:text-red-400"
+		className: "text-destructive"
 	}
 };
 const fileNodeDropdownOptions = {
@@ -3412,37 +3412,37 @@ function SyncStatusIcon(props) {
 		[INITIAL_SYNC]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-blue-900 dark:text-blue-100", className),
+			className: twMerge("text-info", className),
 			name: icons[INITIAL_SYNC]
 		}),
 		[SYNCING]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-blue-900 dark:text-blue-100", className),
+			className: twMerge("text-info", className),
 			name: icons[SYNCING]
 		}),
 		[SUCCESS]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-green-900 dark:text-green-100", className),
+			className: twMerge("text-success", className),
 			name: icons[SUCCESS]
 		}),
 		[CONFLICT]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-orange-900 dark:text-orange-100", className),
+			className: twMerge("text-warning", className),
 			name: icons[CONFLICT]
 		}),
 		[MISSING]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-red-900 dark:text-red-400", className),
+			className: twMerge("text-destructive", className),
 			name: icons[MISSING]
 		}),
 		[ERROR]: /* @__PURE__ */ jsx(Icon, {
 			size: 16,
 			...iconProps,
-			className: twMerge("text-red-900 dark:text-red-400", className),
+			className: twMerge("text-destructive", className),
 			name: icons[ERROR]
 		})
 	}[syncStatus];
@@ -3510,7 +3510,7 @@ function FileItem(props) {
 			width: 32,
 			draggable: false
 		}) : /* @__PURE__ */ jsx(DefaultFileIcon, {}), isReadMode && syncStatus && /* @__PURE__ */ jsx("div", {
-			className: "absolute right-0 bottom-[-2px] size-3 rounded-full bg-gray-50 dark:bg-slate-800",
+			className: "absolute right-0 bottom-[-2px] size-3 rounded-full bg-background",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "absolute top-[-2px] left-[-2px]",
 				children: /* @__PURE__ */ jsx(SyncStatusIcon, {
@@ -3520,16 +3520,16 @@ function FileItem(props) {
 			})
 		})]
 	});
-	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-gray-200 px-2 text-gray-700 select-none hover:text-gray-800 dark:bg-slate-600 dark:text-slate-100 dark:hover:text-slate-100", isDragging ? "opacity-60" : "", className);
+	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-muted px-2 text-foreground select-none hover:hover-effect", isDragging ? "opacity-60" : "", className);
 	const content = isReadMode ? /* @__PURE__ */ jsxs("div", {
 		className: "flex w-52 items-center justify-between",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mr-2 truncate group-hover:mr-0",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "max-h-6 truncate text-sm font-medium text-gray-700 group-hover:text-gray-800 dark:text-slate-200 dark:group-hover:text-slate-100",
+				className: "max-h-6 truncate text-sm font-medium text-foreground group-hover:hover-effect",
 				children: fileNode.name
 			}), /* @__PURE__ */ jsx("div", {
-				className: "max-h-6 truncate text-xs font-medium text-gray-700 group-hover:text-gray-800 dark:text-slate-200 dark:group-hover:text-slate-100",
+				className: "max-h-6 truncate text-xs font-medium text-muted-foreground group-hover:hover-effect",
 				children: fileNode.documentType
 			})]
 		}), isAllowedToCreateDocuments ? /* @__PURE__ */ jsx(ConnectDropdownMenu, {
@@ -3544,7 +3544,7 @@ function FileItem(props) {
 					setIsDropdownMenuOpen(true);
 				},
 				children: /* @__PURE__ */ jsx(Icon, {
-					className: "text-gray-700 dark:text-slate-200",
+					className: "text-foreground",
 					name: "VerticalDots"
 				})
 			})
@@ -3573,7 +3573,7 @@ function FileItem(props) {
 }
 function DefaultFileIcon() {
 	return /* @__PURE__ */ jsx("div", {
-		className: "text-white dark:text-slate-800",
+		className: "text-primary-foreground",
 		children: /* @__PURE__ */ jsxs("svg", {
 			width: "32",
 			height: "40",
@@ -3719,7 +3719,7 @@ function FolderItem(props) {
 		setIsDropdownMenuOpen(false);
 	}
 	const content = isReadMode || !isAllowedToCreateDocuments ? /* @__PURE__ */ jsx("div", {
-		className: "ml-3 max-h-6 truncate font-medium text-gray-700 group-hover:text-gray-800 dark:text-slate-200 dark:group-hover:text-slate-100",
+		className: "ml-3 max-h-6 truncate font-medium text-foreground group-hover:hover-effect",
 		children: folderNode.name
 	}) : /* @__PURE__ */ jsx(NodeInput, {
 		className: "ml-3 font-medium",
@@ -3727,9 +3727,9 @@ function FolderItem(props) {
 		onCancel,
 		onSubmit
 	});
-	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-gray-200 px-2 select-none dark:bg-slate-600 dark:text-slate-100", isDragging ? "opacity-60" : isDropTarget ? "bg-blue-100 dark:bg-blue-800" : "", className);
+	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-muted px-2 select-none", isDragging ? "opacity-60" : isDropTarget ? "bg-info/10" : "", className);
 	return /* @__PURE__ */ jsx("div", {
-		className: "relative w-64",
+		className: "relative w-64 hover:hover-effect",
 		onClick: isReadMode ? () => setSelectedNode(folderNode) : void 0,
 		children: /* @__PURE__ */ jsxs("div", {
 			...dragProps,
@@ -3740,7 +3740,7 @@ function FolderItem(props) {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "p-1",
 					children: /* @__PURE__ */ jsx("div", {
-						className: "relative text-gray-700 dark:text-slate-200",
+						className: "relative text-foreground",
 						children: /* @__PURE__ */ jsx(Icon, {
 							name: "FolderClose",
 							size: 24
@@ -3759,7 +3759,7 @@ function FolderItem(props) {
 						setIsDropdownMenuOpen(true);
 					},
 					children: /* @__PURE__ */ jsx(Icon, {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						name: "VerticalDots"
 					})
 				})
@@ -3780,7 +3780,7 @@ function FooterLink(props) {
 //#region src/connect/components/footer/footer.tsx
 const Footer = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("footer", {
-		className: twMerge("flex items-center gap-x-6 text-xs font-medium text-gray-300 dark:text-slate-600", typeof className === "string" && className),
+		className: twMerge("flex items-center gap-x-6 text-xs font-medium text-foreground", typeof className === "string" && className),
 		...props,
 		children
 	});
@@ -3792,9 +3792,9 @@ const FormInput = /* @__PURE__ */ forwardRef(function FormInput(props, ref) {
 	const type = props.type ?? "text";
 	const isError = !!errorMessage;
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		className: twMerge("mb-1 flex gap-2 rounded-md border border-gray-200 bg-gray-50 p-3 text-gray-900 placeholder:text-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:placeholder:text-slate-900", isError && "border-red-900 dark:border-red-50", containerClassName),
+		className: twMerge("mb-1 flex gap-2 rounded-md border border-border bg-background p-3 text-foreground placeholder:text-muted-foreground disabled:disabled-effect", isError && "border-destructive", containerClassName),
 		children: [icon && /* @__PURE__ */ jsx("span", {
-			className: twJoin((!isDirty || isError) && "text-gray-200 dark:text-slate-200"),
+			className: twJoin((!isDirty || isError) && "text-foreground"),
 			children: icon
 		}), /* @__PURE__ */ jsx("input", {
 			...delegatedProps,
@@ -3803,7 +3803,7 @@ const FormInput = /* @__PURE__ */ forwardRef(function FormInput(props, ref) {
 			type
 		})]
 	}), /* @__PURE__ */ jsx("p", {
-		className: twMerge("hidden min-h-4 text-xs text-red-900 dark:text-red-400", isError && "block", hideErrors && "hidden", errorMessageClassName),
+		className: twMerge("hidden min-h-4 text-xs text-destructive", isError && "block", hideErrors && "hidden", errorMessageClassName),
 		children: errorMessage
 	})] });
 });
@@ -3843,22 +3843,22 @@ const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
 			type: "checkbox",
 			value: "",
 			...props
-		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-gray-500 peer-checked:bg-blue-900 peer-focus:outline-none after:absolute after:inset-s-0.5 after:top-0.5 after:size-5 after:rounded-full after:border after:border-none after:bg-gray-50 after:transition-all peer-checked:after:translate-x-full dark:bg-slate-400 dark:after:bg-slate-800" })]
+		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-muted-foreground peer-checked:bg-info peer-focus:outline-none after:absolute after:inset-s-0.5 after:top-0.5 after:size-5 after:rounded-full after:border after:border-none after:bg-background after:transition-all peer-checked:after:translate-x-full" })]
 	});
 });
 //#endregion
 //#region src/connect/components/form/inputs/available-offline-toggle.tsx
 const AvailableOfflineToggle = /* @__PURE__ */ forwardRef(function AvailableOfflineToggle(props, ref) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center rounded-md border border-gray-200 bg-gray-50 p-3 text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "flex items-center rounded-md border border-border bg-background p-3 text-foreground",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex-1",
 			children: [/* @__PURE__ */ jsx("label", {
-				className: "font-medium text-gray-900 dark:text-slate-50",
+				className: "font-medium text-foreground",
 				htmlFor: "availableOffline",
 				children: "Make available offline"
 			}), /* @__PURE__ */ jsxs("p", {
-				className: "text-xs text-gray-700 dark:text-slate-200",
+				className: "text-xs text-foreground",
 				children: [
 					"Check this options if you keep a local backup",
 					/* @__PURE__ */ jsx("br", {}),
@@ -3878,7 +3878,7 @@ function Label(props) {
 	const { children, className, ...labelProps } = props;
 	return /* @__PURE__ */ jsx("label", {
 		...labelProps,
-		className: twMerge("block font-semibold text-gray-500 dark:text-slate-400", className),
+		className: twMerge("block font-semibold text-muted-foreground", className),
 		children
 	});
 }
@@ -3915,7 +3915,7 @@ function AddLocalDriveForm(props) {
 			children: [
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
 					htmlFor: "name",
-					className: "text-sm font-medium text-gray-900 dark:text-slate-100",
+					className: "text-sm font-medium text-foreground",
 					children: "Drive Name"
 				}), /* @__PURE__ */ jsx(FormInput, {
 					...register("name", { required: "Drive name is required" }),
@@ -3924,7 +3924,7 @@ function AddLocalDriveForm(props) {
 				})] }),
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
 					htmlFor: "driveApp",
-					className: "text-sm font-medium text-gray-900 dark:text-slate-100",
+					className: "text-sm font-medium text-foreground",
 					children: "Drive App"
 				}), /* @__PURE__ */ jsx(AppFormInput, {
 					control,
@@ -3932,7 +3932,7 @@ function AddLocalDriveForm(props) {
 				})] }),
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
 					htmlFor: "sharingType",
-					className: "text-sm font-medium text-gray-900 dark:text-slate-100",
+					className: "text-sm font-medium text-foreground",
 					children: "Location"
 				}), /* @__PURE__ */ jsx(SharingTypeFormInput, { control })] }),
 				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvailableOfflineToggle, { ...register("availableOffline") }) }),
@@ -3949,9 +3949,9 @@ function AddLocalDriveForm(props) {
 //#region src/connect/components/form/inputs/drive-name.tsx
 function DriveName(props) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex gap-2 rounded-xl bg-gray-100 p-3 font-semibold text-gray-500 dark:bg-slate-700 dark:text-slate-400",
+		className: "flex gap-2 rounded-xl bg-muted p-3 font-semibold text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Icon, {
-			className: "text-gray-700 dark:text-slate-200",
+			className: "text-foreground",
 			name: "Drive"
 		}), props.driveName]
 	});
@@ -3963,9 +3963,9 @@ function LocationInfo(props) {
 	const locationInfo = locationInfoByLocation[location];
 	return /* @__PURE__ */ jsxs("div", {
 		...divProps,
-		className: twMerge("my-3 flex items-center gap-2 rounded-xl border border-gray-100 bg-gray-50 p-3 text-gray-900 shadow-sm dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("my-3 flex items-center gap-2 rounded-xl border border-border bg-background p-3 text-foreground shadow-sm", className),
 		children: [locationInfo.icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: locationInfo.title }), /* @__PURE__ */ jsx("p", {
-			className: "text-xs text-gray-200 dark:text-slate-700",
+			className: "text-xs text-foreground",
 			children: locationInfo.description
 		})] })]
 	});
@@ -4074,14 +4074,14 @@ function FormattedJsonViewer(props) {
 		children: [/* @__PURE__ */ jsx(JsonView.Copied, { render: ({ onClick, ...props }) => {
 			if (props["data-copied"]) return /* @__PURE__ */ jsx(Icon, {
 				...props,
-				className: "inline-block text-green-800 dark:text-green-100",
+				className: "inline-block text-success",
 				name: "FilesEarmark",
 				size: 16
 			});
 			return /* @__PURE__ */ jsx(Icon, {
 				...props,
 				onClick,
-				className: "inline-block cursor-pointer text-gray-700 dark:text-slate-200",
+				className: "inline-block cursor-pointer text-foreground",
 				name: "FilesEarmark",
 				size: 16
 			});
@@ -4122,7 +4122,7 @@ const HomeBackgroundImage = ({ src } = {}) => {
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "pointer-events-none fixed top-0 z-0 size-full bg-gray-50 dark:bg-slate-800",
+		className: "pointer-events-none fixed top-0 z-0 size-full bg-background",
 		children: /* @__PURE__ */ jsxs("svg", {
 			width: "1858",
 			height: "1256",
@@ -4209,15 +4209,15 @@ const HomeBackgroundImage = ({ src } = {}) => {
 const HomeScreenItem = function HomeScreenItem(props) {
 	const { icon, title, description, containerClassName, shareable, onClick } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("hover-bg-transparent relative flex h-24 w-40 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md p-2 text-center text-sm text-gray-900 dark:text-slate-50", containerClassName, onClick && "cursor-pointer"),
+		className: twMerge("relative flex h-24 w-40 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md p-2 text-center text-sm text-foreground hover:hover-effect", containerClassName, onClick && "cursor-pointer"),
 		onClick,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "mx-auto pb-2",
 				children: icon || /* @__PURE__ */ jsx("div", {
-					className: "size-8 items-center justify-center rounded-lg bg-gray-900 pt-1 dark:bg-slate-50",
+					className: "size-8 items-center justify-center rounded-lg bg-primary pt-1",
 					children: /* @__PURE__ */ jsx("span", {
-						className: "w-6 text-white dark:text-slate-900",
+						className: "w-6 text-primary-foreground",
 						children: title.slice(0, 1).toUpperCase()
 					})
 				})
@@ -4225,10 +4225,10 @@ const HomeScreenItem = function HomeScreenItem(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "w-full max-w-full",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "w-full max-w-full truncate px-2 text-gray-900 dark:text-slate-50",
+					className: "w-full max-w-full truncate px-2 text-foreground",
 					children: title
 				}), description && /* @__PURE__ */ jsx("p", {
-					className: "text-gray-500 dark:text-slate-400",
+					className: "text-muted-foreground",
 					children: description
 				})]
 			}),
@@ -4264,7 +4264,7 @@ const HomeScreen = function HomeScreen(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: twMerge("relative container mx-auto flex h-full flex-col", containerClassName),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "m-8 flex flex-wrap justify-center gap-4 bg-gray-50 pt-12 dark:bg-slate-800",
+			className: "m-8 flex flex-wrap justify-center gap-4 bg-background pt-12",
 			children: [/* @__PURE__ */ jsx(HomeBackgroundImage, { src: homeBackground ?? void 0 }), children]
 		})
 	});
@@ -4342,7 +4342,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 			/* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center justify-between",
 				children: /* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: "Integrity Inspector"
 				})
 			}),
@@ -4352,10 +4352,10 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-1 flex-col gap-1",
 						children: [/* @__PURE__ */ jsx("label", {
-							className: "text-xs font-medium text-gray-700 dark:text-slate-200",
+							className: "text-xs font-medium text-foreground",
 							children: "Document ID"
 						}), /* @__PURE__ */ jsx("input", {
-							className: "rounded-sm border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:focus:border-blue-500",
+							className: "rounded-sm border border-border px-3 py-1.5 text-sm outline-none focus:border-info",
 							onChange: (e) => setDocumentId(e.target.value),
 							placeholder: "Enter document ID",
 							type: "text",
@@ -4365,10 +4365,10 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex w-40 flex-col gap-1",
 						children: [/* @__PURE__ */ jsx("label", {
-							className: "text-xs font-medium text-gray-700 dark:text-slate-200",
+							className: "text-xs font-medium text-foreground",
 							children: "Branch (optional)"
 						}), /* @__PURE__ */ jsx("input", {
-							className: "rounded-sm border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:focus:border-blue-500",
+							className: "rounded-sm border border-border px-3 py-1.5 text-sm outline-none focus:border-info",
 							onChange: (e) => setBranch(e.target.value),
 							placeholder: "main",
 							type: "text",
@@ -4379,7 +4379,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 						className: "flex gap-2",
 						children: [
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded-sm border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm text-blue-700 hover:bg-blue-100 disabled:opacity-50 dark:border-blue-600 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+								className: "flex items-center gap-1 rounded-sm border border-info bg-info/10 px-3 py-1.5 text-sm text-info hover:hover-effect disabled:disabled-effect",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => void handleValidate(),
 								type: "button",
@@ -4389,7 +4389,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 								}), "Validate"]
 							}),
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded-sm border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50 dark:border-yellow-600 dark:bg-yellow-900 dark:text-yellow-100 dark:hover:bg-yellow-800",
+								className: "flex items-center gap-1 rounded-sm border border-warning bg-warning/10 px-3 py-1.5 text-sm text-warning hover:hover-effect disabled:disabled-effect",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => setConfirmAction("keyframes"),
 								type: "button",
@@ -4399,7 +4399,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 								}), "Rebuild Keyframes"]
 							}),
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded-sm border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50 dark:border-yellow-600 dark:bg-yellow-900 dark:text-yellow-100 dark:hover:bg-yellow-800",
+								className: "flex items-center gap-1 rounded-sm border border-warning bg-warning/10 px-3 py-1.5 text-sm text-warning hover:hover-effect disabled:disabled-effect",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => setConfirmAction("snapshots"),
 								type: "button",
@@ -4413,14 +4413,14 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 				]
 			}),
 			confirmAction && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-3 rounded-sm border border-yellow-400 bg-yellow-50 px-3 py-2 dark:border-yellow-500 dark:bg-yellow-900",
+				className: "flex shrink-0 items-center gap-3 rounded-sm border border-warning bg-warning/10 px-3 py-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-sm text-yellow-800 dark:text-yellow-100",
+						className: "text-sm text-warning",
 						children: confirmAction === "keyframes" ? "This will delete all keyframes for this document. Continue?" : "This will invalidate all cached snapshots for this document. Continue?"
 					}),
 					/* @__PURE__ */ jsx("button", {
-						className: "rounded-sm bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700 dark:bg-yellow-300 dark:text-slate-900 dark:hover:bg-yellow-200",
+						className: "rounded-sm bg-warning px-3 py-1 text-sm text-warning-foreground hover:hover-effect",
 						onClick: () => {
 							if (confirmAction === "keyframes") handleRebuildKeyframes();
 							else handleRebuildSnapshots();
@@ -4429,7 +4429,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 						children: "Confirm"
 					}),
 					/* @__PURE__ */ jsx("button", {
-						className: "rounded-sm border border-gray-300 bg-gray-50 px-3 py-1 text-sm text-gray-700 hover:bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-800",
+						className: "rounded-sm border border-border bg-background px-3 py-1 text-sm text-foreground hover:hover-effect",
 						onClick: () => setConfirmAction(null),
 						type: "button",
 						children: "Cancel"
@@ -4437,18 +4437,18 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "min-h-0 flex-1 overflow-auto rounded-lg border border-gray-300 p-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "min-h-0 flex-1 overflow-auto rounded-lg border border-border p-4",
 				children: [
 					status === "idle" && /* @__PURE__ */ jsx("div", {
-						className: "flex h-full items-center justify-center text-sm text-gray-400 dark:text-slate-500",
+						className: "flex h-full items-center justify-center text-sm text-muted-foreground",
 						children: "Enter a document ID and run an action"
 					}),
 					status === "running" && /* @__PURE__ */ jsx("div", {
-						className: "flex h-full items-center justify-center text-sm text-gray-500 dark:text-slate-400",
+						className: "flex h-full items-center justify-center text-sm text-muted-foreground",
 						children: "Running..."
 					}),
 					status === "error" && error && /* @__PURE__ */ jsx("div", {
-						className: "rounded-sm bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900 dark:text-red-100",
+						className: "rounded-sm bg-destructive/10 p-3 text-sm text-destructive",
 						children: error
 					}),
 					status === "done" && validationResult && /* @__PURE__ */ jsx(ValidationResultView, { result: validationResult }),
@@ -4465,67 +4465,67 @@ function ValidationResultView({ result }) {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { className: twMerge("size-3 rounded-full", result.isConsistent ? "bg-green-500 dark:bg-green-400" : "bg-red-500 dark:bg-red-400") }), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx("span", { className: twMerge("size-3 rounded-full", result.isConsistent ? "bg-success" : "bg-destructive") }), /* @__PURE__ */ jsx("span", {
 					className: "text-sm font-medium",
 					children: result.isConsistent ? "Document is consistent" : `Found ${totalIssues} issue(s)`
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "text-xs text-gray-500 dark:text-slate-400",
+				className: "text-xs text-muted-foreground",
 				children: ["Document: ", result.documentId]
 			}),
 			result.keyframeIssues.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-sm font-medium text-gray-700 dark:text-slate-200",
+					className: "text-sm font-medium text-foreground",
 					children: "Keyframe Issues"
 				}), /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse text-xs",
 					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-						className: "bg-gray-100 dark:bg-slate-700",
+						className: "bg-muted",
 						children: [
 							/* @__PURE__ */ jsx("th", {
-								className: "px-2 py-1 text-left font-medium text-gray-700 dark:text-slate-200",
+								className: "px-2 py-1 text-left font-medium text-foreground",
 								children: "Scope"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Branch"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Revision"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Keyframe Hash"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Replayed Hash"
 							})
 						]
 					}) }), /* @__PURE__ */ jsx("tbody", { children: result.keyframeIssues.map((issue, i) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 dark:odd:bg-slate-800 dark:even:bg-slate-800",
+						className: "odd:bg-card even:bg-background",
 						children: [
 							/* @__PURE__ */ jsx("td", {
 								className: "px-2 py-1",
 								children: issue.scope
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1",
 								children: issue.branch
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1",
 								children: issue.revision
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 font-mono dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 font-mono",
 								children: issue.keyframeHash
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 font-mono dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 font-mono",
 								children: issue.replayedHash
 							})
 						]
@@ -4535,47 +4535,47 @@ function ValidationResultView({ result }) {
 			result.snapshotIssues.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-sm font-medium text-gray-700 dark:text-slate-200",
+					className: "text-sm font-medium text-foreground",
 					children: "Snapshot Issues"
 				}), /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse text-xs",
 					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-						className: "bg-gray-100 dark:bg-slate-700",
+						className: "bg-muted",
 						children: [
 							/* @__PURE__ */ jsx("th", {
-								className: "px-2 py-1 text-left font-medium text-gray-700 dark:text-slate-200",
+								className: "px-2 py-1 text-left font-medium text-foreground",
 								children: "Scope"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Branch"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Snapshot Hash"
 							}),
 							/* @__PURE__ */ jsx("th", {
-								className: "border-l border-gray-300 px-2 py-1 text-left font-medium text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 text-left font-medium text-foreground",
 								children: "Replayed Hash"
 							})
 						]
 					}) }), /* @__PURE__ */ jsx("tbody", { children: result.snapshotIssues.map((issue, i) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 dark:odd:bg-slate-800 dark:even:bg-slate-800",
+						className: "odd:bg-card even:bg-background",
 						children: [
 							/* @__PURE__ */ jsx("td", {
 								className: "px-2 py-1",
 								children: issue.scope
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1",
 								children: issue.branch
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 font-mono dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 font-mono",
 								children: issue.snapshotHash
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-2 py-1 font-mono dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-2 py-1 font-mono",
 								children: issue.replayedHash
 							})
 						]
@@ -4591,21 +4591,21 @@ function RebuildResultView({ result }) {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-green-500 dark:bg-green-400" }), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-success" }), /* @__PURE__ */ jsx("span", {
 					className: "text-sm font-medium",
 					children: "Rebuild complete"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "text-xs text-gray-500 dark:text-slate-400",
+				className: "text-xs text-muted-foreground",
 				children: ["Document: ", result.documentId]
 			}),
 			result.keyframesDeleted > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "text-sm text-gray-700 dark:text-slate-200",
+				className: "text-sm text-foreground",
 				children: ["Keyframes deleted: ", result.keyframesDeleted]
 			}),
 			result.scopesInvalidated > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "text-sm text-gray-700 dark:text-slate-200",
+				className: "text-sm text-foreground",
 				children: ["Scopes invalidated: ", result.scopesInvalidated]
 			})
 		]
@@ -4617,7 +4617,7 @@ const LoadingScreen = (props) => {
 	const { showLoadingScreen, loadingComponent, size, className } = props;
 	if (loadingComponent && showLoadingScreen) return loadingComponent;
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("absolute inset-0 z-10 flex items-center justify-center bg-gray-50 dark:bg-slate-800", !showLoadingScreen && "hidden", className),
+		className: twMerge("absolute inset-0 z-10 flex items-center justify-center bg-background", !showLoadingScreen && "hidden", className),
 		children: /* @__PURE__ */ jsx(LogoAnimation, { size })
 	});
 };
@@ -4635,7 +4635,7 @@ function AddDriveModal(props) {
 		open,
 		children: /* @__PURE__ */ jsx("div", {
 			...containerProps,
-			className: twMerge("w-102 rounded-2xl bg-gray-50 p-6 dark:bg-slate-800", containerProps?.className),
+			className: twMerge("w-102 rounded-2xl bg-background p-6", containerProps?.className),
 			children: /* @__PURE__ */ jsxs(Tabs, {
 				defaultValue: "Create Drive",
 				children: [/* @__PURE__ */ jsx(TabContent, {
@@ -4694,17 +4694,17 @@ function CreateDocumentModal(props) {
 		...restProps,
 		children: /* @__PURE__ */ jsxs("form", {
 			name: "create-document",
-			className: "w-100 rounded-xl bg-gray-50 p-6 text-gray-300 dark:bg-slate-800 dark:text-slate-600",
+			className: "w-100 rounded-xl bg-background p-6 text-foreground",
 			onSubmit: handleSubmit,
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "pb-2 text-2xl font-bold text-gray-900 dark:text-slate-100",
+					className: "pb-2 text-2xl font-bold text-foreground",
 					children: "Create a new document"
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "my-6",
 					children: [!isValid && nodeName && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 text-red-500 dark:text-red-100",
+						className: "mb-2 text-destructive",
 						children: "Document name must not be empty or contain control characters."
 					}), /* @__PURE__ */ jsx(FormInput, {
 						icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
@@ -4745,7 +4745,7 @@ const ConnectDeleteDriveModal = (props) => {
 		...confirmationModalProps,
 		continueDisabled: inputName !== driveName,
 		body: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-			className: "my-6 rounded-md bg-gray-50 p-4 text-center dark:bg-slate-800",
+			className: "my-6 rounded-md bg-background p-4 text-center",
 			children: body
 		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FormInput, {
 			hideErrors: true,
@@ -4788,7 +4788,7 @@ function DeleteDrive(props) {
 	}
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsx("p", {
-			className: "mb-2 rounded-md bg-gray-50 p-4 text-center text-gray-200 dark:bg-slate-800 dark:text-slate-200",
+			className: "mb-2 rounded-md bg-background p-4 text-center text-foreground",
 			children: "Are you sure you want to delete this drive? All files and subfolders within it will be removed. Do you want to proceed?"
 		}),
 		/* @__PURE__ */ jsx(DriveNameInput, {
@@ -4856,19 +4856,19 @@ function DriveSettingsForm(props) {
 				title: "About this drive",
 				children: [
 					systemInfo.status === "local" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-gray-500 dark:text-slate-400",
+						className: "py-2 text-sm text-muted-foreground",
 						children: "Local drive — N/A"
 					}),
 					systemInfo.status === "loading" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-gray-400 dark:text-slate-500",
+						className: "py-2 text-sm text-muted-foreground",
 						children: "Loading…"
 					}),
 					systemInfo.status === "error" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-red-600 dark:text-red-100",
+						className: "py-2 text-sm text-destructive",
 						children: "Could not load system info"
 					}),
 					systemInfo.status === "ready" && /* @__PURE__ */ jsxs("div", {
-						className: "py-2 text-sm text-gray-700 dark:text-slate-200",
+						className: "py-2 text-sm text-foreground",
 						children: [/* @__PURE__ */ jsxs("div", { children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "font-medium",
@@ -4893,7 +4893,7 @@ function DriveSettingsForm(props) {
 				onOpenChange: () => setShowDangerZone(!showDangerZone),
 				title: "Danger zone",
 				children: /* @__PURE__ */ jsxs("button", {
-					className: "flex gap-2 py-3 font-semibold text-red-900 transition hover:brightness-125 dark:text-red-400",
+					className: "flex gap-2 py-3 font-semibold text-destructive transition hover:hover-effect",
 					onClick: () => setShowDeleteDrive(true),
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, { name: "Trash" }), "Delete drive"]
@@ -4935,15 +4935,15 @@ function DriveSettingsModal(props) {
 		open,
 		children: /* @__PURE__ */ jsxs("div", {
 			...containerProps,
-			className: twMerge("max-w-[408px] rounded-2xl bg-gray-50 p-6 dark:bg-slate-800", containerProps?.className),
+			className: twMerge("max-w-[408px] rounded-2xl bg-background p-6", containerProps?.className),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
 					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-xl font-bold text-gray-900 dark:text-slate-50",
+						className: "text-xl font-bold text-foreground",
 						children: "Drive settings"
 					}), /* @__PURE__ */ jsx("button", {
-						className: "flex size-8 items-center justify-center rounded-md bg-gray-100 text-gray-500 outline-none hover:text-gray-900 dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-50",
+						className: "flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground outline-none hover:hover-effect",
 						onClick: handleCancel,
 						tabIndex: -1,
 						children: /* @__PURE__ */ jsx(Icon, {
@@ -4998,14 +4998,14 @@ function ObjectInspectorModal({ open, onOpenChange, title, object }) {
 		open,
 		title,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex size-full flex-col bg-gray-50 dark:bg-slate-800",
+			className: "flex size-full flex-col bg-background",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "flex shrink-0 items-center justify-between border-b border-border px-4 py-3",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: title
 				}), /* @__PURE__ */ jsx("button", {
-					className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-500 outline-none hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-50",
+					className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none hover:hover-effect",
 					onClick: () => onOpenChange(false),
 					type: "button",
 					children: /* @__PURE__ */ jsx(Icon, {
@@ -5016,7 +5016,7 @@ function ObjectInspectorModal({ open, onOpenChange, title, object }) {
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex-1 overflow-auto p-4",
 				children: serializableObject ? /* @__PURE__ */ jsx(JsonViewer, { data: serializableObject }) : /* @__PURE__ */ jsx("p", {
-					className: "text-gray-500 dark:text-slate-400",
+					className: "text-muted-foreground",
 					children: "No data to display"
 				})
 			})]
@@ -5180,12 +5180,12 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: "Processors Inspector"
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-2",
 					children: /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -5197,19 +5197,19 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-4 rounded-lg bg-gray-100 px-4 py-2 text-sm dark:bg-slate-700",
+				className: "flex shrink-0 items-center gap-4 rounded-lg bg-muted px-4 py-2 text-sm",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						children: ["Total: ", /* @__PURE__ */ jsx("span", {
 							className: "font-medium",
 							children: processors.length
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 text-gray-700 dark:text-slate-200",
+						className: "flex items-center gap-2 text-foreground",
 						children: [
-							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-green-500 dark:bg-green-400" }),
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-success" }),
 							"Active: ",
 							/* @__PURE__ */ jsx("span", {
 								className: "font-medium",
@@ -5218,9 +5218,9 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 text-gray-700 dark:text-slate-200",
+						className: "flex items-center gap-2 text-foreground",
 						children: [
-							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-red-500 dark:bg-red-400" }),
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-destructive" }),
 							"Errored: ",
 							/* @__PURE__ */ jsx("span", {
 								className: "font-medium",
@@ -5231,20 +5231,20 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 				]
 			}),
 			error && /* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 rounded-lg border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700 dark:border-red-600 dark:bg-red-900 dark:text-red-100",
+				className: "shrink-0 rounded-lg border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive",
 				children: ["Failed to load processors: ", error]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "max-h-full overflow-auto rounded-lg border border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "max-h-full overflow-auto rounded-lg border border-border",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse",
 					children: [/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 bg-gray-100 dark:bg-slate-700",
+						className: "sticky top-0 bg-muted",
 						children: /* @__PURE__ */ jsx("tr", { children: COLUMNS$2.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
 							return /* @__PURE__ */ jsx("th", {
-								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100", index > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100"),
+								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-foreground hover:hover-effect", index > 0 && "border-l border-border"),
 								onClick: () => handleSort(column.key),
 								style: { width: column.width },
 								children: /* @__PURE__ */ jsxs("div", {
@@ -5260,38 +5260,38 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 							}, column.key);
 						}) })
 					}), /* @__PURE__ */ jsx("tbody", { children: loading && sortedProcessors.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: COLUMNS$2.length,
 						children: "Loading..."
 					}) }) : sortedProcessors.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: COLUMNS$2.length,
 						children: "No processors registered"
 					}) }) : sortedProcessors.map((processor) => /* @__PURE__ */ jsxs("tr", {
-						className: twMerge("hover:bg-blue-50 dark:hover:bg-blue-900", processor.status === "errored" ? "bg-red-50 dark:bg-red-900" : "odd:bg-white even:bg-gray-50 dark:odd:bg-slate-800 dark:even:bg-slate-800"),
+						className: twMerge("hover:hover-effect", processor.status === "errored" ? "bg-destructive/10" : "odd:bg-card even:bg-background"),
 						children: [
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+									className: "flex items-center gap-1 rounded-sm bg-info/10 px-2 py-1 text-xs text-info hover:hover-effect",
 									onClick: () => setSelectedProcessor(processor),
 									type: "button",
 									children: "View"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsxs("span", {
-									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", processor.status === "active" ? "bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-100" : "bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-100"),
+									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", processor.status === "active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"),
 									children: [
-										processor.status === "active" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-green-500 dark:bg-green-400" }),
-										processor.status === "errored" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-red-500 dark:bg-red-400" }),
+										processor.status === "active" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-success" }),
+										processor.status === "errored" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-destructive" }),
 										processor.status
 									]
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: processor.processorId,
@@ -5299,7 +5299,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: processor.factoryId,
@@ -5307,7 +5307,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: processor.driveId,
@@ -5315,39 +5315,39 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: processor.processorIndex
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: processor.lastOrdinal
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: processor.lastError ? /* @__PURE__ */ jsx("span", {
-									className: "block truncate text-red-600 dark:text-red-100",
+									className: "block truncate text-destructive",
 									title: processor.lastError,
 									children: processor.lastError
 								}) : /* @__PURE__ */ jsx("span", {
-									className: "text-gray-400 dark:text-slate-500",
+									className: "text-muted-foreground",
 									children: "-"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: processor.lastErrorTimestamp ? /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: processor.lastErrorTimestamp.toISOString(),
 									children: processor.lastErrorTimestamp.toLocaleString()
 								}) : /* @__PURE__ */ jsx("span", {
-									className: "text-gray-400 dark:text-slate-500",
+									className: "text-muted-foreground",
 									children: "-"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs",
 								children: processor.status === "errored" && onRetry && /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded-sm bg-yellow-50 px-2 py-1 text-xs text-yellow-700 hover:bg-yellow-100 disabled:opacity-50 dark:bg-yellow-900 dark:text-yellow-100 dark:hover:bg-yellow-800",
+									className: "flex items-center gap-1 rounded-sm bg-warning/10 px-2 py-1 text-xs text-warning hover:hover-effect disabled:disabled-effect",
 									disabled: retryingId === processor.processorId,
 									onClick: () => void handleRetry(processor.processorId),
 									type: "button",
@@ -5359,7 +5359,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 text-sm text-gray-700 dark:text-slate-200",
+				className: "shrink-0 text-sm text-foreground",
 				children: [
 					"Showing ",
 					sortedProcessors.length,
@@ -5535,12 +5535,12 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: "Queue Inspector"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsxs("button", {
-						className: twMerge("flex items-center gap-1 rounded-sm border px-3 py-1.5 text-sm disabled:opacity-50", state.isPaused ? "border-green-300 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-600 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800" : "border-yellow-300 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-600 dark:bg-yellow-900 dark:text-yellow-100 dark:hover:bg-yellow-800"),
+						className: twMerge("flex items-center gap-1 rounded-sm border px-3 py-1.5 text-sm disabled:disabled-effect", state.isPaused ? "border-success bg-success/10 text-success hover:hover-effect" : "border-warning bg-warning/10 text-warning hover:hover-effect"),
 						disabled: actionInProgress,
 						onClick: () => void handlePauseResume(),
 						type: "button",
@@ -5549,7 +5549,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							size: 14
 						}), state.isPaused ? "Resume" : "Pause"]
 					}), /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -5561,24 +5561,24 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-4 rounded-lg bg-gray-100 px-4 py-2 text-sm dark:bg-slate-700",
+				className: "flex shrink-0 items-center gap-4 rounded-lg bg-muted px-4 py-2 text-sm",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx("span", { className: twMerge("size-2 rounded-full", state.isPaused ? "bg-yellow-500 dark:bg-yellow-400" : "bg-green-500 dark:bg-green-400") }), /* @__PURE__ */ jsx("span", {
-							className: "font-medium text-gray-700 dark:text-slate-200",
+						children: [/* @__PURE__ */ jsx("span", { className: twMerge("size-2 rounded-full", state.isPaused ? "bg-warning" : "bg-success") }), /* @__PURE__ */ jsx("span", {
+							className: "font-medium text-foreground",
 							children: state.isPaused ? "Paused" : "Running"
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						children: ["Pending: ", /* @__PURE__ */ jsx("span", {
 							className: "font-medium",
 							children: state.totalPending
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						children: ["Executing: ", /* @__PURE__ */ jsx("span", {
 							className: "font-medium",
 							children: state.totalExecuting
@@ -5587,16 +5587,16 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "max-h-full overflow-auto rounded-lg border border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "max-h-full overflow-auto rounded-lg border border-border",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse",
 					children: [/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 bg-gray-100 dark:bg-slate-700",
+						className: "sticky top-0 bg-muted",
 						children: /* @__PURE__ */ jsx("tr", { children: COLUMNS$1.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
 							return /* @__PURE__ */ jsx("th", {
-								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100", index > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100"),
+								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-foreground hover:hover-effect", index > 0 && "border-l border-border"),
 								onClick: () => handleSort(column.key),
 								style: { width: column.width },
 								children: /* @__PURE__ */ jsxs("div", {
@@ -5612,27 +5612,27 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							}, column.key);
 						}) })
 					}), /* @__PURE__ */ jsx("tbody", { children: loading && sortedJobs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: COLUMNS$1.length,
 						children: "Loading..."
 					}) }) : sortedJobs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: COLUMNS$1.length,
 						children: "No jobs in queue"
 					}) }) : sortedJobs.map((job) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50 dark:odd:bg-slate-800 dark:even:bg-slate-800 dark:hover:bg-blue-900",
+						className: "odd:bg-card even:bg-background hover:hover-effect",
 						children: [
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+									className: "flex items-center gap-1 rounded-sm bg-info/10 px-2 py-1 text-xs text-info hover:hover-effect",
 									onClick: () => setSelectedJob(job),
 									type: "button",
 									children: "View"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: job.id,
@@ -5640,14 +5640,14 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
-									className: twMerge("inline-block rounded-sm px-1.5 py-0.5", job.kind === "mutation" ? "bg-purple-100 text-purple-700 dark:bg-purple-800 dark:text-purple-100" : "bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-100"),
+									className: twMerge("inline-block rounded-sm px-1.5 py-0.5", job.kind === "mutation" ? "bg-info/10 text-info" : "bg-info/10 text-info"),
 									children: job.kind
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: job.documentId,
@@ -5655,7 +5655,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: job.scope,
@@ -5663,7 +5663,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: job.branch,
@@ -5671,7 +5671,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: job.createdAt,
@@ -5679,14 +5679,14 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: job.retryCount ?? 0
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsxs("span", {
-									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", job.status === "executing" ? "bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-100" : "bg-gray-100 text-gray-700 dark:bg-slate-700 dark:text-slate-200"),
-									children: [job.status === "executing" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 animate-pulse rounded-full bg-green-500 dark:bg-green-400" }), job.status]
+									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", job.status === "executing" ? "bg-success/10 text-success" : "bg-muted text-foreground"),
+									children: [job.status === "executing" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 animate-pulse rounded-full bg-success" }), job.status]
 								})
 							})
 						]
@@ -5694,7 +5694,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 text-sm text-gray-700 dark:text-slate-200",
+				className: "shrink-0 text-sm text-foreground",
 				children: [
 					"Showing ",
 					sortedJobs.length,
@@ -5713,15 +5713,15 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 //#endregion
 //#region src/connect/components/remotes-inspector/components/connection-state-badge.tsx
 const stateStyles = {
-	connected: "bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100",
-	connecting: "bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100",
-	reconnecting: "bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100",
-	error: "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100",
-	disconnected: "bg-gray-100 text-gray-700 dark:bg-slate-700 dark:text-slate-200"
+	connected: "bg-success/10 text-success",
+	connecting: "bg-info/10 text-info",
+	reconnecting: "bg-warning/10 text-warning",
+	error: "bg-destructive/10 text-destructive",
+	disconnected: "bg-muted text-foreground"
 };
 function ConnectionStateBadge({ state, failureCount }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", stateStyles[state] ?? "bg-gray-100 text-gray-700 dark:bg-slate-700 dark:text-slate-200"),
+		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", stateStyles[state] ?? "bg-muted text-foreground"),
 		children: [state, failureCount > 0 && /* @__PURE__ */ jsxs("span", {
 			className: "text-xs opacity-75",
 			children: [
@@ -5891,7 +5891,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ jsxs("button", {
-					className: "flex items-center gap-2 text-left text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-slate-200 dark:hover:text-slate-50",
+					className: "flex items-center gap-2 text-left text-sm font-medium text-foreground hover:hover-effect",
 					onClick: onToggleCollapse,
 					type: "button",
 					children: [
@@ -5908,7 +5908,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 						")"
 					]
 				}), operations.length > 0 && /* @__PURE__ */ jsxs("button", {
-					className: "flex items-center gap-1 rounded-sm bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+					className: "flex items-center gap-1 rounded-sm bg-muted px-2 py-1 text-xs text-foreground hover:hover-effect",
 					onClick: () => void handleCopyAll(),
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, {
@@ -5918,16 +5918,16 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 				})]
 			}),
 			!collapsed && /* @__PURE__ */ jsx("div", {
-				className: "scrollbar-thin overflow-auto rounded-lg border border-gray-300 scrollbar-thumb-gray-300 scrollbar-thumb-rounded-md scrollbar-track-transparent dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:scrollbar-thumb-slate-600",
+				className: "scrollbar-thin overflow-auto rounded-lg border border-border scrollbar-thumb-border scrollbar-thumb-rounded-md scrollbar-track-transparent",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse",
 					children: [/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 bg-gray-100 dark:bg-slate-700",
+						className: "sticky top-0 bg-muted",
 						children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
 							return /* @__PURE__ */ jsx("th", {
-								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100", index > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100"),
+								className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-foreground hover:hover-effect", index > 0 && "border-l border-border"),
 								onClick: () => handleSort(column.key),
 								style: { width: column.width },
 								children: /* @__PURE__ */ jsxs("div", {
@@ -5943,23 +5943,23 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 							}, column.key);
 						}) })
 					}), /* @__PURE__ */ jsx("tbody", { children: sortedOps.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-4 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-4 text-center text-sm text-muted-foreground",
 						colSpan: columns.length,
 						children: "No operations"
 					}) }) : sortedOps.map((op) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50 dark:odd:bg-slate-800 dark:even:bg-slate-800 dark:hover:bg-blue-900",
+						className: "odd:bg-card even:bg-background hover:hover-effect",
 						children: [
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+									className: "flex items-center gap-1 rounded-sm bg-info/10 px-2 py-1 text-xs text-info hover:hover-effect",
 									onClick: () => setSelectedOperation(op),
 									type: "button",
 									children: "View"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: op.documentId,
@@ -5967,7 +5967,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: op.branch,
@@ -5975,7 +5975,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: op.scopes.join(", "),
@@ -5983,20 +5983,20 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 								})
 							}),
 							mailboxType === "deadLetter" ? /* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("span", {
-									className: "block truncate text-red-600 dark:text-red-100",
+									className: "block truncate text-destructive",
 									title: getErrorMessage(op.error),
 									children: getErrorMessage(op.error) || "Unknown error"
 								})
 							}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsxs("span", {
 									className: "flex items-center gap-1",
 									children: [getStatusIcon(op.status), getStatusLabel(op.status)]
 								})
 							}), /* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: op.operations.length
 							})] })
 						]
@@ -6112,7 +6112,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-2 py-1 text-sm text-foreground hover:hover-effect",
 						onClick: onBack,
 						type: "button",
 						children: [/* @__PURE__ */ jsx(Icon, {
@@ -6121,11 +6121,11 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 							size: 14
 						}), "Back"]
 					}), /* @__PURE__ */ jsxs("h2", {
-						className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+						className: "text-lg font-semibold text-foreground",
 						children: ["Channel: ", remoteName]
 					})]
 				}), onRefresh && /* @__PURE__ */ jsxs("button", {
-					className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+					className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 					onClick: onRefresh,
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, {
@@ -6135,12 +6135,12 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			connectionState && /* @__PURE__ */ jsxs("div", {
-				className: "rounded-sm border border-gray-200 bg-gray-50 p-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "rounded-sm border border-border bg-background p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "mb-3 text-sm font-semibold text-gray-900 dark:text-slate-50",
+					className: "mb-3 text-sm font-semibold text-foreground",
 					children: "Connection State"
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center gap-4 text-sm text-gray-700 dark:text-slate-200",
+					className: "flex flex-wrap items-center gap-4 text-sm text-foreground",
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2",
@@ -6156,11 +6156,11 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 							"Push:",
 							" ",
 							/* @__PURE__ */ jsx("span", {
-								className: connectionState.pushBlocked ? "text-red-600 dark:text-red-100" : "text-green-600 dark:text-green-100",
+								className: connectionState.pushBlocked ? "text-destructive" : "text-success",
 								children: connectionState.pushBlocked ? "Blocked" : "OK"
 							}),
 							connectionState.pushFailureCount > 0 && /* @__PURE__ */ jsxs("span", {
-								className: "ml-1 text-red-600 dark:text-red-100",
+								className: "ml-1 text-destructive",
 								children: [
 									"(",
 									connectionState.pushFailureCount,
@@ -6172,21 +6172,21 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			pollerControls && /* @__PURE__ */ jsxs("div", {
-				className: "rounded-sm border border-gray-200 bg-gray-50 p-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "rounded-sm border border-border bg-background p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "mb-3 text-sm font-semibold text-gray-900 dark:text-slate-50",
+					className: "mb-3 text-sm font-semibold text-foreground",
 					children: "Poller"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-4",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "text-sm text-gray-700 dark:text-slate-200",
+							className: "text-sm text-foreground",
 							children: [
 								"Status:",
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: pollerState.isPaused ? "text-yellow-600 dark:text-yellow-100" : "text-green-600 dark:text-green-100",
+									className: pollerState.isPaused ? "text-warning" : "text-success",
 									children: pollerState.isPaused ? "Paused" : "Running"
 								})
 							]
@@ -6194,12 +6194,12 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 							className: "flex items-center gap-1",
 							children: [
 								/* @__PURE__ */ jsx("label", {
-									className: "text-sm text-gray-700 dark:text-slate-200",
+									className: "text-sm text-foreground",
 									htmlFor: "poll-interval",
 									children: "Interval:"
 								}),
 								/* @__PURE__ */ jsx("input", {
-									className: "w-20 rounded-sm border border-gray-300 px-2 py-1 text-sm dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+									className: "w-20 rounded-sm border border-border px-2 py-1 text-sm",
 									id: "poll-interval",
 									min: 100,
 									onChange: (e) => setIntervalMs(Number(e.target.value)),
@@ -6210,11 +6210,11 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 									value: intervalMs
 								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "text-sm text-gray-500 dark:text-slate-400",
+									className: "text-sm text-muted-foreground",
 									children: "ms"
 								}),
 								/* @__PURE__ */ jsx("button", {
-									className: "ml-1 rounded-sm border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+									className: "ml-1 rounded-sm border border-border bg-background px-2 py-1 text-sm text-foreground hover:hover-effect",
 									onClick: handleApplyInterval,
 									type: "button",
 									children: "Apply"
@@ -6224,17 +6224,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex gap-2",
 						children: [pollerState.isPaused ? /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 							onClick: handleResume,
 							type: "button",
 							children: "Resume"
 						}) : /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 							onClick: handlePause,
 							type: "button",
 							children: "Pause"
 						}), /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: !pollerState.isPaused,
 							onClick: handlePollNow,
 							type: "button",
@@ -6244,25 +6244,25 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "rounded-sm border border-gray-200 bg-gray-50 p-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "rounded-sm border border-border bg-background p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "mb-3 text-sm font-semibold text-gray-900 dark:text-slate-50",
+					className: "mb-3 text-sm font-semibold text-foreground",
 					children: "Mailbox Processing"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-3",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3 text-sm text-gray-700 dark:text-slate-200",
+							className: "flex items-center gap-3 text-sm text-foreground",
 							children: [/* @__PURE__ */ jsxs("span", { children: [
 								"Inbox:",
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: mailboxStates.inbox.isPaused ? "text-yellow-600 dark:text-yellow-100" : "text-green-600 dark:text-green-100",
+									className: mailboxStates.inbox.isPaused ? "text-warning" : "text-success",
 									children: mailboxStates.inbox.isPaused ? "Paused" : "Active"
 								})
 							] }), /* @__PURE__ */ jsxs("span", {
-								className: "font-mono text-sm text-gray-500 dark:text-slate-400",
+								className: "font-mono text-sm text-muted-foreground",
 								children: [
 									"We ack'd (theirs): ",
 									channel.inbox.ackOrdinal,
@@ -6274,17 +6274,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [mailboxStates.inbox.isPaused ? /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 								onClick: () => handleMailboxResume("inbox"),
 								type: "button",
 								children: "Resume"
 							}) : /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 								onClick: () => handleMailboxPause("inbox"),
 								type: "button",
 								children: "Pause"
 							}), /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 								disabled: !mailboxStates.inbox.isPaused,
 								onClick: () => handleMailboxFlush("inbox"),
 								type: "button",
@@ -6294,16 +6294,16 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3 text-sm text-gray-700 dark:text-slate-200",
+							className: "flex items-center gap-3 text-sm text-foreground",
 							children: [/* @__PURE__ */ jsxs("span", { children: [
 								"Outbox:",
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: mailboxStates.outbox.isPaused ? "text-yellow-600 dark:text-yellow-100" : "text-green-600 dark:text-green-100",
+									className: mailboxStates.outbox.isPaused ? "text-warning" : "text-success",
 									children: mailboxStates.outbox.isPaused ? "Paused" : "Active"
 								})
 							] }), /* @__PURE__ */ jsxs("span", {
-								className: "font-mono text-sm text-gray-500 dark:text-slate-400",
+								className: "font-mono text-sm text-muted-foreground",
 								children: [
 									"They ack'd (ours): ",
 									channel.outbox.ackOrdinal,
@@ -6315,17 +6315,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [mailboxStates.outbox.isPaused ? /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 								onClick: () => handleMailboxResume("outbox"),
 								type: "button",
 								children: "Resume"
 							}) : /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect",
 								onClick: () => handleMailboxPause("outbox"),
 								type: "button",
 								children: "Pause"
 							}), /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+								className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 								disabled: !mailboxStates.outbox.isPaused,
 								onClick: () => handleMailboxFlush("outbox"),
 								type: "button",
@@ -6530,14 +6530,14 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between gap-2",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+					className: "text-lg font-semibold text-foreground",
 					children: "Remotes Inspector"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [addRemoteManual && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1",
 						children: [/* @__PURE__ */ jsx("input", {
-							className: "w-[260px] rounded-sm border border-gray-300 px-2 py-1.5 text-sm text-gray-900 placeholder:text-gray-400 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:placeholder:text-slate-500",
+							className: "w-[260px] rounded-sm border border-border px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground disabled:disabled-effect",
 							disabled: adding,
 							onChange: (e) => setManualUrl(e.target.value),
 							onKeyDown: (e) => {
@@ -6547,7 +6547,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							type: "text",
 							value: manualUrl
 						}), /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+							className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 							disabled: adding || !manualUrl.trim(),
 							onClick: () => void handleAddManual(),
 							title: "Register a remote drive in manual poll mode (no background polling)",
@@ -6555,7 +6555,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							children: "Add (manual)"
 						})]
 					}), /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -6567,21 +6567,21 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 				})]
 			}),
 			addError && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-xs text-red-700 dark:border-red-600 dark:bg-red-900 dark:text-red-100",
+				className: "shrink-0 rounded-sm border border-destructive bg-destructive/10 px-3 py-1.5 text-xs text-destructive",
 				children: addError
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "scrollbar-thin max-h-full overflow-auto rounded-lg border border-gray-300 scrollbar-thumb-gray-300 scrollbar-thumb-rounded-md scrollbar-track-transparent dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:scrollbar-thumb-slate-600",
+				className: "scrollbar-thin max-h-full overflow-auto rounded-lg border border-border scrollbar-thumb-border scrollbar-thumb-rounded-md scrollbar-track-transparent",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full border-collapse",
 					children: [/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 bg-gray-100 dark:bg-slate-700",
+						className: "sticky top-0 bg-muted",
 						children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
 							const isSortable = column.key !== "channel" && column.key !== "actions" && column.key !== "status";
 							return /* @__PURE__ */ jsx("th", {
-								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-gray-700 dark:text-slate-200", index > 0 && "border-l border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", isSortable && "cursor-pointer hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-slate-600 dark:hover:text-slate-100"),
+								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border", isSortable && "cursor-pointer hover:hover-effect"),
 								onClick: () => isSortable && handleSort(column.key),
 								style: { width: column.width },
 								children: /* @__PURE__ */ jsxs("div", {
@@ -6597,18 +6597,18 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							}, column.key);
 						}) })
 					}), /* @__PURE__ */ jsx("tbody", { children: loading && sortedRemotes.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: columns.length,
 						children: "Loading..."
 					}) }) : sortedRemotes.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-						className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-slate-400",
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
 						colSpan: columns.length,
 						children: "No remotes configured"
 					}) }) : sortedRemotes.map((remote) => /* @__PURE__ */ jsxs("tr", {
-						className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50 dark:odd:bg-slate-800 dark:even:bg-slate-800 dark:hover:bg-blue-900",
+						className: "odd:bg-card even:bg-background hover:hover-effect",
 						children: [
 							/* @__PURE__ */ jsx("td", {
-								className: "px-3 py-2 text-xs text-gray-900 dark:text-slate-50",
+								className: "px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: remote.id,
@@ -6616,7 +6616,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: remote.name,
@@ -6624,17 +6624,17 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2",
 								children: connectionStates?.get(remote.name) ? /* @__PURE__ */ jsx(ConnectionStateBadge, {
 									failureCount: connectionStates.get(remote.name).failureCount,
 									state: connectionStates.get(remote.name).state
 								}) : /* @__PURE__ */ jsx("span", {
-									className: "text-xs text-gray-400 dark:text-slate-500",
+									className: "text-xs text-muted-foreground",
 									children: "-"
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: remote.collectionId.key,
@@ -6642,7 +6642,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "block truncate",
 									title: formatFilter(remote.filter),
@@ -6650,9 +6650,9 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								})
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2",
 								children: /* @__PURE__ */ jsxs("button", {
-									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+									className: "flex items-center gap-1 rounded-sm bg-info/10 px-2 py-1 text-xs text-info hover:hover-effect",
 									onClick: () => handleViewChannel(remote),
 									type: "button",
 									children: ["View", /* @__PURE__ */ jsx(Icon, {
@@ -6662,17 +6662,17 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								})
 							}),
 							hasRowActions && /* @__PURE__ */ jsx("td", {
-								className: "border-l border-gray-300 px-3 py-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+								className: "border-l border-border px-3 py-2",
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-1",
 									children: [triggerPull && /* @__PURE__ */ jsx("button", {
-										className: "rounded-sm bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+										className: "rounded-sm bg-muted px-2 py-1 text-xs text-foreground hover:hover-effect",
 										onClick: () => handlePull(remote),
 										title: "Trigger a single pull cycle for this remote",
 										type: "button",
 										children: "Pull"
 									}), removeRemote && /* @__PURE__ */ jsx("button", {
-										className: "rounded-sm bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800",
+										className: "rounded-sm bg-destructive/10 px-2 py-1 text-xs text-destructive hover:hover-effect",
 										onClick: () => void handleRemove(remote),
 										type: "button",
 										children: "Remove"
@@ -6684,7 +6684,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 text-sm text-gray-700 dark:text-slate-200",
+				className: "shrink-0 text-sm text-foreground",
 				children: [
 					"Showing ",
 					sortedRemotes.length,
@@ -6715,7 +6715,7 @@ function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExpl
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center justify-end px-3 pt-3",
 				children: /* @__PURE__ */ jsx("button", {
-					className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-500 outline-none hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-50",
+					className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none hover:hover-effect",
 					onClick: () => onOpenChange(false),
 					type: "button",
 					children: /* @__PURE__ */ jsx(Icon, {
@@ -6776,7 +6776,7 @@ function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExpl
 }
 //#endregion
 //#region src/connect/components/modal/missing-package-modal.tsx
-const buttonStyles = "min-h-[36px] text-sm font-semibold py-2 px-4 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all";
+const buttonStyles = "min-h-[36px] text-sm font-semibold py-2 px-4 rounded-xl outline-none active:active-effect hover:hover-effect transform transition-all";
 function groupByPackage(installations) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const item of installations) {
@@ -6819,14 +6819,14 @@ function PackageInstallModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-[460px] rounded-xl bg-gray-50 p-6 text-gray-300 dark:bg-slate-800 dark:text-slate-600",
+			className: "w-[460px] rounded-xl bg-background p-6 text-foreground",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "border-b border-gray-50 pb-2 text-2xl font-bold text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+					className: "border-b border-border pb-2 text-2xl font-bold text-foreground",
 					children: grouped.length === 1 ? "Package Required" : "Packages Required"
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "my-4 text-sm text-gray-700 dark:text-slate-200",
+					className: "my-4 text-sm text-foreground",
 					children: grouped.length === 1 ? "A document requires a package that is not installed." : "Documents require packages that are not installed."
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -6834,14 +6834,14 @@ function PackageInstallModal(props) {
 					children: grouped.map(({ packageName, documentTypes }) => {
 						const installing = installingPackages.has(packageName);
 						return /* @__PURE__ */ jsxs("div", {
-							className: "rounded-xl bg-gray-50 p-4 dark:bg-slate-800",
+							className: "rounded-xl bg-background p-4",
 							children: [
 								/* @__PURE__ */ jsx("div", {
-									className: "mb-1 text-sm font-semibold text-gray-900 dark:text-slate-100",
+									className: "mb-1 text-sm font-semibold text-foreground",
 									children: packageName
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									className: "mb-3 text-xs text-gray-500 dark:text-slate-400",
+									className: "mb-3 text-xs text-muted-foreground",
 									children: [
 										"Required for document type",
 										documentTypes.length > 1 ? "s" : "",
@@ -6856,13 +6856,13 @@ function PackageInstallModal(props) {
 										type: "button",
 										onClick: () => onDismiss(packageName),
 										disabled: installing,
-										className: twMerge(buttonStyles, "border border-gray-200 bg-gray-50 text-gray-800 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", installing && "cursor-not-allowed opacity-50"),
+										className: twMerge(buttonStyles, "border border-border bg-background text-foreground", installing && "cursor-not-allowed opacity-50"),
 										children: "Dismiss"
 									}), /* @__PURE__ */ jsx("button", {
 										type: "button",
 										onClick: () => void handleInstall(packageName),
 										disabled: installing,
-										className: twMerge(buttonStyles, "bg-gray-800 text-gray-50 dark:bg-slate-100 dark:text-slate-900", installing && "cursor-not-allowed opacity-50"),
+										className: twMerge(buttonStyles, "bg-primary text-primary-foreground", installing && "cursor-not-allowed opacity-50"),
 										children: installing ? "Installing..." : "Install"
 									})]
 								})
@@ -6907,12 +6907,12 @@ function ReadRequiredModal(props) {
 			className: "w-[500px] p-6",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "border-b border-gray-100 pb-2 text-2xl font-bold text-gray-900 dark:border-slate-500 dark:text-slate-100",
+					className: "border-b border-border pb-2 text-2xl font-bold text-foreground",
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {
 					ref: contentRef,
-					className: twMerge("my-6 max-h-[245px] overflow-scroll rounded-md bg-gray-50 p-4 text-center dark:bg-slate-700", bodyClassName),
+					className: twMerge("my-6 max-h-[245px] overflow-scroll rounded-md bg-background p-4 text-center", bodyClassName),
 					children: body
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -6920,7 +6920,7 @@ function ReadRequiredModal(props) {
 					children: /* @__PURE__ */ jsx("button", {
 						disabled: disableClose,
 						onClick: onContinue,
-						className: twMerge("min-h-12 flex-1 transform rounded-xl px-6 py-3 text-base font-semibold transition-all outline-none hover:scale-105 active:opacity-75", "bg-gray-800 text-gray-50 dark:bg-slate-100 dark:text-slate-900", disableClose && "cursor-not-allowed bg-gray-300 hover:scale-100 dark:bg-slate-600 dark:text-slate-100"),
+						className: twMerge("min-h-12 flex-1 transform rounded-xl px-6 py-3 text-base font-semibold transition-all outline-none hover:hover-effect active:active-effect", "bg-primary text-primary-foreground", disableClose && "cursor-not-allowed bg-secondary hover:hover-effect"),
 						children: closeLabel
 					})
 				})
@@ -6963,9 +6963,9 @@ function DependencyVersions(props) {
 		isOpen,
 		onOpenChange: () => setIsOpen(!isOpen),
 		title: `App version: ${validatedData.version}`,
-		toggleClassName: "text-gray-900 text-sm dark:text-slate-50",
+		toggleClassName: "text-sm text-foreground",
 		children: /* @__PURE__ */ jsxs("ul", {
-			className: "text-sm text-gray-700 dark:text-slate-200",
+			className: "text-sm text-foreground",
 			children: [Object.entries(validatedData.dependencies).map(([dep, version]) => /* @__PURE__ */ jsxs("li", {
 				className: "my-1 flex justify-between pr-1",
 				children: [/* @__PURE__ */ jsxs("span", { children: [dep.replace("@powerhousedao/", ""), ":"] }), /* @__PURE__ */ jsx("span", {
@@ -6987,14 +6987,14 @@ function DependencyVersions(props) {
 function About(props) {
 	const { packageJson, phCliVersion } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "bg-gray-50 p-3 dark:bg-slate-800",
+		className: "bg-background p-3",
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "font-semibold text-gray-900 dark:text-slate-100",
+				className: "font-semibold text-foreground",
 				children: "About"
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-normal text-gray-700 dark:text-slate-200",
+				className: "text-sm font-normal text-foreground",
 				children: "Connect is the hub for your most important documents and processes translated into software. Easily capture data in a structured way with Connect."
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -7022,15 +7022,15 @@ function getDriveSharingType(drive) {
 function DangerZone(props) {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("h-full rounded-lg bg-gray-50 p-3 dark:bg-slate-800", className),
+		className: twMerge("h-full rounded-lg bg-background p-3", className),
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "mb-4 font-semibold text-gray-900 dark:text-slate-100",
+				className: "mb-4 font-semibold text-foreground",
 				children: "Modify Drives"
 			}),
 			/* @__PURE__ */ jsx(ModifyDrives, { ...rest }),
 			/* @__PURE__ */ jsx("h2", {
-				className: "my-4 font-semibold text-gray-900 dark:text-slate-100",
+				className: "my-4 font-semibold text-foreground",
 				children: "Local Storage"
 			}),
 			/* @__PURE__ */ jsx(LocalStorage, { ...rest })
@@ -7084,7 +7084,7 @@ function Drive(props) {
 	}
 	const icon = getNodeIcon();
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("mb-4 flex w-96 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 shadow-sm last-of-type:mb-0 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("mb-4 flex w-96 items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-foreground shadow-sm last-of-type:mb-0", className),
 		children: [
 			icon,
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
@@ -7093,17 +7093,17 @@ function Drive(props) {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-baseline gap-x-2 leading-4.5",
 				children: [/* @__PURE__ */ jsxs("span", {
-					className: "text-sm text-gray-700 dark:text-slate-200",
+					className: "text-sm text-foreground",
 					children: [capitalCase(getDriveSharingType(drive)), " App"]
 				}), /* @__PURE__ */ jsxs("a", {
 					href: "https://www.powerhouse.inc/",
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "group flex items-center gap-x-2 text-sm text-gray-500 transition-colors hover:text-purple-700 dark:text-slate-500 dark:hover:text-purple-100",
+					className: "group flex items-center gap-x-2 text-sm text-muted-foreground transition-colors hover:hover-effect",
 					children: ["By Powerhouse", /* @__PURE__ */ jsx("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						viewBox: "0 0 12 12",
-						className: "size-4 text-gray-400 transition-colors group-hover:text-inherit dark:text-slate-500",
+						className: "size-4 text-muted-foreground transition-colors group-hover:hover-effect",
 						children: /* @__PURE__ */ jsx("path", {
 							d: "M7.99365 11.9939C9.46632 11.9939 10.6603 10.7999 10.6603 9.32722V7.32722C10.6603 6.95922 10.3617 6.66056 9.99365 6.66056C9.62565 6.66056 9.32699 6.95922 9.32699 7.32722V9.32722C9.32699 10.0639 8.73032 10.6606 7.99365 10.6606H2.66032C1.92365 10.6606 1.32699 10.0639 1.32699 9.32722V3.99389C1.32699 3.25723 1.92365 2.66056 2.66032 2.66056H4.66032C5.02832 2.66056 5.32699 2.36189 5.32699 1.99389C5.32699 1.6259 5.02832 1.32723 4.66032 1.32723H2.66032C1.18765 1.32723 -0.00634766 2.52123 -0.00634766 3.99389V9.32722C-0.00634766 10.7999 1.18765 11.9939 2.66032 11.9939H7.99365ZM5.32699 7.32722C5.49765 7.32722 5.67565 7.26989 5.80632 7.13989L10.1396 2.80656L11.9937 4.66056V-0.00610352H7.32699L9.18099 1.8479L4.84766 6.18123C4.58766 6.4419 4.58766 6.87922 4.84766 7.13989C4.97832 7.26989 5.15632 7.32722 5.32699 7.32722Z",
 							fill: "currentColor"
@@ -7116,7 +7116,7 @@ function Drive(props) {
 					id: "delete-drive",
 					label: "Delete",
 					icon: /* @__PURE__ */ jsx(Icon, { name: "Trash" }),
-					className: "text-red-900 dark:text-red-400"
+					className: "text-destructive"
 				}],
 				onItemClick: (id) => {
 					if (id === "delete-drive") onDeleteDrive(drive);
@@ -7130,7 +7130,7 @@ function Drive(props) {
 						setIsDropdownMenuOpen(true);
 					},
 					children: /* @__PURE__ */ jsx(Icon, {
-						className: "text-gray-700 group-hover:text-gray-900 dark:text-slate-200 dark:group-hover:text-slate-50",
+						className: "text-foreground group-hover:hover-effect",
 						name: "VerticalDots",
 						size: 16
 					})
@@ -7142,7 +7142,7 @@ function Drive(props) {
 function LocalStorage(props) {
 	const { onClearStorage } = props;
 	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("button", {
-		className: "flex items-center gap-x-2 rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm font-medium text-red-900 transition-colors hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
+		className: "flex items-center gap-x-2 rounded-md border border-border bg-transparent px-3 py-1 text-sm font-medium text-destructive transition-colors hover:hover-effect",
 		onClick: () => void onClearStorage(),
 		children: ["Clear Storage ", /* @__PURE__ */ jsx(Icon, {
 			name: "Trash",
@@ -7155,14 +7155,14 @@ function LocalStorage(props) {
 function DefaultEditor(props) {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("rounded-lg bg-gray-50 p-3 dark:bg-slate-800", className),
+		className: twMerge("rounded-lg bg-background p-3", className),
 		children: /* @__PURE__ */ jsx(DefaultEditorSelect, { ...rest })
 	});
 }
 function DefaultEditorSelect(props) {
 	const { documentModelEditor, setDocumentModelEditor, documentModelEditorOptions, className } = props;
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-		className: "mb-4 font-semibold text-gray-900 dark:text-slate-50",
+		className: "mb-4 font-semibold text-foreground",
 		children: "Default Editor Selection"
 	}), /* @__PURE__ */ jsx(SelectFieldRaw, {
 		className: twMerge("max-w-fit min-w-36", className),
@@ -7266,7 +7266,7 @@ const VersionPicker = (props) => {
 		},
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 			disabled: disabled || !hasAnyPickable,
-			className: twMerge("flex items-center justify-between gap-2 rounded-md border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-900 transition-colors dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", "hover:bg-gray-50 focus:ring-2 focus:ring-gray-900/20 focus:outline-none dark:hover:bg-slate-800", "disabled:cursor-not-allowed disabled:opacity-60", className),
+			className: twMerge("flex items-center justify-between gap-2 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors", "hover:hover-effect focus:ring-2 focus:ring-ring/20 focus:outline-none", "disabled:disabled-effect", className),
 			"data-version-picker-trigger": true,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "truncate",
@@ -7274,7 +7274,7 @@ const VersionPicker = (props) => {
 			}), /* @__PURE__ */ jsx(Icon, {
 				name: "ChevronDown",
 				size: 12,
-				className: "shrink-0 text-gray-500 dark:text-slate-400"
+				className: "shrink-0 text-muted-foreground"
 			})]
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			"data-version-picker": true,
@@ -7283,13 +7283,13 @@ const VersionPicker = (props) => {
 			className: "w-56 p-0",
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "border-b border-gray-200 p-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "border-b border-border p-2",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative",
 					children: [/* @__PURE__ */ jsx(Icon, {
 						name: "Search",
 						size: 14,
-						className: "absolute top-1/2 left-2 -translate-y-1/2 text-gray-400 dark:text-slate-500"
+						className: "absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground"
 					}), /* @__PURE__ */ jsx(Input, {
 						value: query,
 						onChange: (e) => setQuery(e.target.value),
@@ -7301,13 +7301,13 @@ const VersionPicker = (props) => {
 				className: "max-h-60 overflow-y-auto py-1",
 				children: [
 					filteredTags.length === 0 && filteredVersions.length === 0 && /* @__PURE__ */ jsx("p", {
-						className: "px-3 py-4 text-center text-xs text-gray-500 dark:text-slate-400",
+						className: "px-3 py-4 text-center text-xs text-muted-foreground",
 						children: "No matches."
 					}),
 					filteredTags.length > 0 && /* @__PURE__ */ jsxs("div", {
 						className: "pb-1",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: "px-3 py-1 text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-slate-400",
+							className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 							children: "Tags"
 						}), filteredTags.map(([tag, ver]) => {
 							return /* @__PURE__ */ jsxs("button", {
@@ -7320,19 +7320,19 @@ const VersionPicker = (props) => {
 									setOpen(false);
 									setQuery("");
 								},
-								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:bg-gray-100 dark:hover:bg-slate-700", selected.kind === "tag" && selected.value === tag && "bg-gray-100 font-semibold dark:bg-slate-700"),
+								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "tag" && selected.value === tag && "bg-muted font-semibold"),
 								children: [/* @__PURE__ */ jsx("span", {
-									className: "truncate text-gray-900 dark:text-slate-50",
+									className: "truncate text-foreground",
 									children: tag
 								}), /* @__PURE__ */ jsx("span", {
-									className: "truncate text-gray-500 dark:text-slate-400",
+									className: "truncate text-muted-foreground",
 									children: ver
 								})]
 							}, `tag:${tag}`);
 						})]
 					}),
 					filteredVersions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "px-3 py-1 text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-slate-400",
+						className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 						children: "Versions"
 					}), filteredVersions.map((ver) => {
 						return /* @__PURE__ */ jsx("button", {
@@ -7345,9 +7345,9 @@ const VersionPicker = (props) => {
 								setOpen(false);
 								setQuery("");
 							},
-							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:bg-gray-100 dark:hover:bg-slate-700", selected.kind === "version" && selected.value === ver && "bg-gray-100 font-semibold dark:bg-slate-700"),
+							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "version" && selected.value === ver && "bg-muted font-semibold"),
 							children: /* @__PURE__ */ jsx("span", {
-								className: "truncate text-gray-900 dark:text-slate-50",
+								className: "truncate text-foreground",
 								children: ver
 							})
 						}, `ver:${ver}`);
@@ -7393,20 +7393,20 @@ function PackageResultCard(props) {
 	const isSelecting = selectingValue === installSpec;
 	const isDisabled = option.disabled === true;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start justify-between gap-3 rounded-md p-2 hover:bg-gray-50 dark:hover:bg-slate-800",
+		className: "flex items-start justify-between gap-3 rounded-md p-2 hover:hover-effect",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
 			children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "truncate text-sm font-medium text-gray-900 dark:text-slate-50",
+					className: "truncate text-sm font-medium text-foreground",
 					children: baseName
 				}),
 				option.description && /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-gray-700 dark:text-slate-200",
+					className: "truncate text-xs text-foreground",
 					children: option.description
 				}),
 				option.meta && /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-gray-700 dark:text-slate-200",
+					className: "truncate text-xs text-foreground",
 					children: option.meta
 				}),
 				hasVersionMetadata && /* @__PURE__ */ jsx("div", {
@@ -7426,12 +7426,12 @@ function PackageResultCard(props) {
 				className: "flex items-center justify-center",
 				children: selectingContent
 			}) : isDisabled ? /* @__PURE__ */ jsx("span", {
-				className: "rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500 dark:bg-slate-700 dark:text-slate-400",
+				className: "rounded-md bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
 				children: option.disabledLabel ?? "Unavailable"
 			}) : /* @__PURE__ */ jsx("button", {
 				onClick: () => handleSelect(installSpec),
 				disabled: isSelecting,
-				className: "rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
+				className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect",
 				children: isSelecting ? "..." : selectLabel
 			})
 		})]
@@ -7479,7 +7479,7 @@ const PackageManagerInput = (props) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [/* @__PURE__ */ jsx("h3", {
-			className: "mb-4 font-semibold text-gray-900 dark:text-slate-50",
+			className: "mb-4 font-semibold text-foreground",
 			children: "Install Package"
 		}), /* @__PURE__ */ jsx(SearchAutocomplete, {
 			fetchOptions,
@@ -7504,10 +7504,10 @@ const PackageDetail = ({ label, value }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-start gap-2 text-sm",
 		children: [/* @__PURE__ */ jsxs("p", {
-			className: "text-gray-700 dark:text-slate-200",
+			className: "text-foreground",
 			children: [label, ":"]
 		}), /* @__PURE__ */ jsx("p", {
-			className: "text-gray-700 dark:text-slate-200",
+			className: "text-foreground",
 			children: value
 		})]
 	});
@@ -7526,25 +7526,25 @@ const PackageManagerListItem = (props) => {
 		id: "install",
 		label: "Install",
 		icon: /* @__PURE__ */ jsx(Icon, { name: "DownloadFile" }),
-		className: "text-gray-900 dark:text-slate-100"
+		className: "text-foreground"
 	};
 	const uninstallDropdownItem = {
 		id: "uninstall",
 		label: "Uninstall",
 		icon: /* @__PURE__ */ jsx(Icon, { name: "Trash" }),
-		className: "text-red-900 dark:text-red-400"
+		className: "text-destructive"
 	};
 	function getDropdownItems() {
 		return [canPickVersion ? installDropdownItem : void 0, registryPackage.status === "registry-install" ? uninstallDropdownItem : void 0].filter((item) => item !== void 0);
 	}
 	const dropdownItems = getDropdownItems();
 	return /* @__PURE__ */ jsxs("li", {
-		className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 bg-gray-50 p-3 text-sm/5 shadow-sm dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", className),
+		className: twMerge("relative flex flex-col items-start rounded-md border border-border bg-background p-3 text-sm/5 shadow-sm", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2 pr-8",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "font-semibold text-gray-900 dark:text-slate-50",
+					className: "font-semibold text-foreground",
 					children: registryPackage.name
 				}), canPickVersion && hasVersionMetadata ? /* @__PURE__ */ jsx(VersionPicker, {
 					distTags: registryPackage.distTags,
@@ -7552,7 +7552,7 @@ const PackageManagerListItem = (props) => {
 					selected,
 					onChange: setSelected
 				}) : registryPackage.version ? /* @__PURE__ */ jsxs("span", {
-					className: "text-xs font-normal text-gray-500 dark:text-slate-400",
+					className: "text-xs font-normal text-muted-foreground",
 					children: ["v", registryPackage.version]
 				}) : null]
 			}),
@@ -7600,7 +7600,7 @@ const PackageManagerListItem = (props) => {
 						setIsDropdownMenuOpen(true);
 					},
 					children: /* @__PURE__ */ jsx(Icon, {
-						className: "text-gray-700 group-hover:text-gray-900 dark:text-slate-200 dark:group-hover:text-slate-50",
+						className: "text-foreground group-hover:hover-effect",
 						name: "VerticalDots"
 					})
 				})
@@ -7714,22 +7714,22 @@ const PackageSection = ({ sectionId, title, count, isEmpty, emptyText, children
 	return /* @__PURE__ */ jsxs("section", {
 		className: "mb-6",
 		children: [/* @__PURE__ */ jsx("h3", {
-			className: "sticky top-0 z-10 mb-3 border-b border-gray-200 bg-gray-50 text-gray-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100",
+			className: "sticky top-0 z-10 mb-3 border-b border-border bg-background text-foreground",
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: toggle,
 				"aria-expanded": !collapsed,
 				"aria-controls": contentId,
-				className: "flex w-full items-center gap-2 pb-2 text-left text-base font-semibold text-gray-900 hover:text-gray-700 dark:text-slate-100 dark:hover:text-slate-200",
+				className: "flex w-full items-center gap-2 pb-2 text-left text-base font-semibold text-foreground hover:hover-effect",
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
 						name: "ChevronDown",
 						size: 16,
-						className: twMerge("shrink-0 text-gray-700 transition-transform dark:text-slate-200", collapsed && "-rotate-90")
+						className: twMerge("shrink-0 text-foreground transition-transform", collapsed && "-rotate-90")
 					}),
 					/* @__PURE__ */ jsx("span", { children: title }),
 					/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-gray-700 dark:text-slate-200",
+						className: "text-xs font-medium text-foreground",
 						children: count
 					})
 				]
@@ -7737,7 +7737,7 @@ const PackageSection = ({ sectionId, title, count, isEmpty, emptyText, children
 		}), !collapsed && /* @__PURE__ */ jsx("div", {
 			id: contentId,
 			children: isEmpty ? /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-gray-700 dark:text-slate-200",
+				className: "text-sm text-foreground",
 				children: emptyText
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "flex flex-col gap-4",
@@ -7748,9 +7748,9 @@ const PackageSection = ({ sectionId, title, count, isEmpty, emptyText, children
 };
 const PackageSubSection = ({ title, count, children }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h4", {
-		className: "mb-2 flex items-baseline gap-2 text-xs font-semibold tracking-wide text-gray-700 uppercase dark:text-slate-200",
+		className: "mb-2 flex items-baseline gap-2 text-xs font-semibold tracking-wide text-foreground uppercase",
 		children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsxs("span", {
-			className: "font-medium tracking-normal text-gray-500 normal-case dark:text-slate-400",
+			className: "font-medium tracking-normal text-muted-foreground normal-case",
 			children: [
 				"(",
 				count,
@@ -7774,7 +7774,7 @@ const PackageList = ({ packages, onInstall, onUninstall }) => {
 const PackageManager = (props) => {
 	const { registryPackageList, onInstall, onUninstall, mutable, disabled, className } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("flex h-full flex-1 flex-col rounded-lg bg-gray-50 p-3 text-gray-900 dark:bg-slate-800 dark:text-slate-100", className),
+		className: twMerge("flex h-full flex-1 flex-col rounded-lg bg-background p-3 text-foreground", className),
 		children: [mutable && /* @__PURE__ */ jsx(PackageManagerInput, {
 			className: "mb-4",
 			registryPackageList,
@@ -7796,7 +7796,7 @@ function SettingsModal(props) {
 		type: "button",
 		onClick: () => setSelectedTab(tab.id),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex h-9 w-48 cursor-pointer items-center gap-x-2 rounded-md pl-3 text-gray-700 hover:bg-gray-50 dark:text-slate-200 dark:hover:bg-slate-800", selectedTab === tab.id ? "bg-gray-50 dark:bg-slate-800" : "bg-transparent"),
+			className: twMerge("flex h-9 w-48 cursor-pointer items-center gap-x-2 rounded-md pl-3 text-foreground hover:hover-effect", selectedTab === tab.id ? "bg-background" : "bg-transparent"),
 			children: [tab.icon, /* @__PURE__ */ jsx("span", { children: tab.label })]
 		})
 	}, tab.id));
@@ -7817,13 +7817,13 @@ function SettingsModal(props) {
 		},
 		...restProps,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between rounded-t-xl border-b border-gray-50 p-4 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+			className: "flex justify-between rounded-t-xl border-b border-border p-4",
 			children: [/* @__PURE__ */ jsx("h1", {
-				className: "text-center text-xl font-semibold text-gray-900 dark:text-slate-50",
+				className: "text-center text-xl font-semibold text-foreground",
 				children: title
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "flex size-6 items-center justify-center rounded-md text-gray-900 outline-none dark:text-slate-100",
+				className: "flex size-6 items-center justify-center rounded-md text-foreground outline-none",
 				onClick: () => onOpenChange?.(false),
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "XmarkLight",
@@ -7838,11 +7838,11 @@ function SettingsModal(props) {
 					className: "flex flex-col gap-y-1",
 					children: tabsContent
 				}), navFooter && /* @__PURE__ */ jsx("div", {
-					className: "mt-auto border-t border-gray-100 pt-2 dark:border-slate-700",
+					className: "mt-auto border-t border-border pt-2",
 					children: navFooter
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-gray-50 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-background",
 				children: typeof SelectedTabComponent === "function" ? /* @__PURE__ */ jsx(SelectedTabComponent, {}) : SelectedTabComponent
 			})]
 		})]
@@ -7861,14 +7861,14 @@ function ConnectUpgradeDriveModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-100 bg-gray-50 p-6 text-gray-300 dark:bg-slate-800 dark:text-slate-200",
+			className: "w-100 bg-background p-6 text-foreground",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "pb-2 text-2xl font-bold text-gray-900 dark:text-slate-100",
+					className: "pb-2 text-2xl font-bold text-foreground",
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "my-6 rounded-md bg-gray-50 p-4 text-center text-gray-900 dark:bg-slate-800 dark:text-slate-100",
+					className: "my-6 rounded-md bg-background p-4 text-center text-foreground",
 					children: body
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -7892,12 +7892,12 @@ function ConnectUpgradeDriveModal(props) {
 function Branch(props) {
 	const { branch = "main" } = props;
 	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-gray-50 pr-2 pl-1 text-xs text-stone-300 dark:bg-slate-800",
+		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-background pr-2 pl-1 text-xs text-foreground",
 		children: [
 			/* @__PURE__ */ jsx(Icon, { name: "Branch" }),
 			/* @__PURE__ */ jsx("span", { children: "BRANCH" }),
 			/* @__PURE__ */ jsx("span", {
-				className: "text-gray-900 dark:text-slate-50",
+				className: "text-foreground",
 				children: branch
 			})
 		]
@@ -7918,13 +7918,13 @@ function DocId(props) {
 		};
 	}
 	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-gray-50 pr-2 pl-1 text-xs text-stone-300 dark:bg-slate-800",
+		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-background pr-2 pl-1 text-xs text-foreground",
 		onClick: handleCopy(docId),
 		children: [
 			/* @__PURE__ */ jsx(Icon, { name: "Link" }),
 			"DOC ID",
 			/* @__PURE__ */ jsx("span", {
-				className: "text-gray-900 dark:text-slate-50",
+				className: "text-foreground",
 				children: docId
 			})
 		]
@@ -7943,7 +7943,7 @@ const DocumentState = (props) => {
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
-		className: "rounded-lg bg-gray-50 p-1 text-stone-300 dark:bg-slate-800",
+		className: "rounded-lg bg-background p-1 text-foreground",
 		onClick: handleCopy,
 		children: /* @__PURE__ */ jsx(Icon, { name: "CurlyBrackets" })
 	});
@@ -7954,9 +7954,9 @@ function Scope(props) {
 	const { value, onChange } = props;
 	return /* @__PURE__ */ jsx(ConnectSelect, {
 		absolutePositionMenu: true,
-		containerClassName: "bg-gray-50 text-gray-500 rounded-lg w-fit text-xs z-10 dark:bg-slate-800 dark:text-slate-400",
+		containerClassName: "z-10 w-fit rounded-lg bg-background text-xs text-muted-foreground",
 		id: "scope select",
-		itemClassName: "py-2 text-gray-500 grid grid-cols-[auto,auto] gap-1 dark:text-slate-400",
+		itemClassName: "grid grid-cols-[auto,auto] gap-1 py-2 text-muted-foreground",
 		items: [{
 			displayValue: "Global scope",
 			value: "global"
@@ -7964,7 +7964,7 @@ function Scope(props) {
 			displayValue: "Local scope",
 			value: "local"
 		}],
-		menuClassName: "min-w-0 text-gray-500 dark:text-slate-400",
+		menuClassName: "min-w-0 text-muted-foreground",
 		onChange,
 		value
 	});
@@ -7980,11 +7980,11 @@ function Header(props) {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ jsx("button", {
 				name: "close-revision-history",
-				className: "rounded-lg bg-gray-50 p-1 text-stone-300 shadow-button dark:bg-slate-800",
+				className: "rounded-lg bg-background p-1 text-foreground shadow-button",
 				onClick: onClose,
 				children: /* @__PURE__ */ jsx(Icon, { name: "VariantArrowLeft" })
 			}), /* @__PURE__ */ jsx("h1", {
-				className: "text-xs text-gray-900 dark:text-slate-50",
+				className: "text-xs text-foreground",
 				children: title
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -8105,7 +8105,7 @@ function CodePopover(props) {
 					bottom: -1e4,
 					left: 24
 				},
-				className: "z-50 rounded-lg border border-gray-200 bg-gray-50 p-2 text-xs shadow-tooltip outline-none dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "z-50 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-tooltip outline-none",
 				children: content
 			}) })
 		]
@@ -8121,7 +8121,7 @@ function Address(props) {
 	return /* @__PURE__ */ jsx(CodePopover, {
 		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: { address } }),
 		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg bg-gray-100 p-1 text-xs text-gray-100 dark:bg-slate-700 dark:text-slate-800",
+			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg bg-muted p-1 text-xs text-muted-foreground",
 			children: [/* @__PURE__ */ jsx(ENSAvatar, {
 				address,
 				chainId,
@@ -8135,7 +8135,7 @@ function Address(props) {
 function Errors(props) {
 	const { errors } = props;
 	const hasErrors = !!errors?.length;
-	const color = hasErrors ? "text-red-800 dark:text-red-100" : "text-green-700 dark:text-green-100";
+	const color = hasErrors ? "text-destructive" : "text-success";
 	const icon = hasErrors ? /* @__PURE__ */ jsx(Icon, {
 		name: "Exclamation",
 		size: 16
@@ -8145,7 +8145,7 @@ function Errors(props) {
 	});
 	const text = hasErrors ? `Error: ${errors[0]}` : "No errors";
 	const content = /* @__PURE__ */ jsxs("span", {
-		className: twMerge("flex w-fit items-center rounded-lg border border-gray-200 bg-gray-50 px-2 py-1 text-xs dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", color, hasErrors && "cursor-pointer"),
+		className: twMerge("flex w-fit items-center rounded-lg border border-border bg-background px-2 py-1 text-xs", color, hasErrors && "cursor-pointer"),
 		children: [icon, /* @__PURE__ */ jsx("span", {
 			className: twMerge("inline-block max-w-36 truncate"),
 			children: text
@@ -8164,9 +8164,9 @@ function Operation$1(props) {
 	return /* @__PURE__ */ jsx(CodePopover, {
 		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: operationInput }),
 		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex cursor-pointer items-center gap-2 text-xs text-gray-900 dark:text-slate-50",
+			className: "flex cursor-pointer items-center gap-2 text-xs text-foreground",
 			children: [operationType, /* @__PURE__ */ jsx(Icon, {
-				className: "text-gray-300 dark:text-slate-600",
+				className: "text-foreground",
 				name: "Braces",
 				size: 16
 			})]
@@ -8185,13 +8185,13 @@ function RevisionNumber(props) {
 			stateHash
 		} }),
 		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex cursor-pointer items-center gap-2 text-xs text-gray-700 dark:text-slate-200",
+			className: "flex cursor-pointer items-center gap-2 text-xs text-foreground",
 			children: [
 				"Revision ",
 				revisionNumber,
 				".",
 				/* @__PURE__ */ jsx("a", { children: /* @__PURE__ */ jsx(Icon, {
-					className: "cursor-pointer text-gray-100 dark:text-slate-800",
+					className: "cursor-pointer text-foreground",
 					name: "Ellipsis",
 					size: 14
 				}) })
@@ -8206,12 +8206,12 @@ function Signature(props) {
 	if (!signatures?.length) return null;
 	return /* @__PURE__ */ jsx(CodePopover, {
 		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 px-2 py-1 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg border border-border bg-background px-2 py-1",
 			children: [
 				/* @__PURE__ */ jsx(VerificationStatus, { signatures }),
 				" ",
 				/* @__PURE__ */ jsx(Icon, {
-					className: "text-gray-300 dark:text-slate-600",
+					className: "text-foreground",
 					name: "InfoSquare",
 					size: 16
 				})
@@ -8230,7 +8230,7 @@ function VerificationStatus(props) {
 	const verifiedSignaturesCount = signatures.filter((signature) => signature.isVerified).length;
 	const verificationStatusText = `${verifiedSignaturesCount}/${signatureCount} ${signatureCount === 1 ? "signature" : "signatures"} verified`;
 	return /* @__PURE__ */ jsx("span", {
-		className: `text-xs ${verifiedSignaturesCount === 0 ? "text-red-800 dark:text-red-100" : verifiedSignaturesCount === signatureCount ? "text-green-700 dark:text-green-100" : "text-orange-700 dark:text-orange-100"}`,
+		className: twMerge(`text-xs`, verifiedSignaturesCount === 0 ? "text-destructive" : verifiedSignaturesCount === signatureCount ? "text-success" : "text-warning"),
 		children: verificationStatusText
 	});
 }
@@ -8247,7 +8247,7 @@ function Timestamp(props) {
 			timestampUtcMs: timestamp
 		} }),
 		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "cursor-pointer text-xs text-gray-900 dark:text-slate-50",
+			className: "cursor-pointer text-xs text-foreground",
 			children: ["committed at ", shortDate]
 		})
 	});
@@ -8256,7 +8256,7 @@ function Timestamp(props) {
 //#region src/connect/components/revision-history/revision/revision.tsx
 function _Revision(props) {
 	return /* @__PURE__ */ jsxs("article", {
-		className: "flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "flex items-center justify-between rounded-xl border border-border bg-background px-4 py-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
@@ -8281,16 +8281,16 @@ function Skip(props) {
 	return /* @__PURE__ */ jsxs("article", {
 		className: "grid grid-cols-[1fr,auto,1fr] items-center py-2",
 		children: [
-			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-gray-100 dark:bg-slate-700" }),
+			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-muted" }),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mx-3 text-xs text-gray-100 dark:text-slate-800",
+				className: "mx-3 text-xs text-foreground",
 				children: [
 					"[Skipped Revision ",
 					skippedRevisions,
 					"]"
 				]
 			}),
-			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-gray-100 dark:bg-slate-700" })
+			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-muted" })
 		]
 	});
 }
@@ -8353,7 +8353,7 @@ function Day(props) {
 	const { timestampUtcMs: timestamp } = props;
 	const formattedDate = format(timestamp, "MMM dd, yyyy");
 	return /* @__PURE__ */ jsxs("h2", {
-		className: "-ml-6 flex items-center gap-1 bg-gray-50 py-2 text-xs text-gray-100 dark:bg-slate-800 dark:text-slate-800",
+		className: "-ml-6 flex items-center gap-1 bg-background py-2 text-xs text-foreground",
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
 				name: "Ring",
@@ -8404,7 +8404,7 @@ function Timeline(props) {
 		};
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-l border-gray-100 dark:border-none dark:bg-slate-800 dark:text-slate-100",
+		className: "border-l border-border dark:border-none",
 		ref: parentRef,
 		style: {
 			height: `${rowVirtualizer.getTotalSize()}px`,
@@ -8470,7 +8470,7 @@ function RevisionHistory(props) {
 		})
 	}) : /* @__PURE__ */ jsx("hr", { className: "h-12 border-none" });
 	return /* @__PURE__ */ jsx(ConnectTooltipProvider, { children: /* @__PURE__ */ jsxs("div", {
-		className: "p-6 dark:bg-slate-800",
+		className: "p-6",
 		children: [
 			/* @__PURE__ */ jsx(Header, {
 				docId: documentId,
@@ -8484,7 +8484,7 @@ function RevisionHistory(props) {
 			}),
 			PaginationComponent,
 			/* @__PURE__ */ jsx("div", {
-				className: "mt-4 flex justify-center rounded-md bg-gray-50 p-4 dark:bg-slate-800",
+				className: "mt-4 flex justify-center rounded-md bg-background p-4",
 				children: visibleOperations.length > 0 ? /* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-[minmax(min-content,1018px)]",
 					children: /* @__PURE__ */ jsx(Timeline, {
@@ -8493,7 +8493,7 @@ function RevisionHistory(props) {
 						scope
 					})
 				}) : /* @__PURE__ */ jsx("h3", {
-					className: "my-40 text-gray-700 dark:text-slate-200",
+					className: "my-40 text-foreground",
 					children: "This document has no recorded operations yet."
 				})
 			}),
@@ -8509,7 +8509,7 @@ const FilterItem = (props) => {
 		className: twMerge("flex h-full flex-row items-center justify-between gap-x-4 px-2", typeof className === "string" && className),
 		...containerProps,
 		children: [item.icon, /* @__PURE__ */ jsx("div", {
-			className: "text-sm font-semibold text-gray-200 dark:text-slate-700",
+			className: "text-sm font-semibold text-foreground",
 			children: item.label
 		})]
 	});
@@ -8527,7 +8527,7 @@ const ConnectSearchBar = (props) => {
 		className: "gap-x-1",
 		item: selectedItemFilter
 	}) : filterLabel && /* @__PURE__ */ jsx("div", {
-		className: "mr-2 text-sm font-semibold text-gray-200 dark:text-slate-700",
+		className: "mr-2 text-sm font-semibold text-foreground",
 		children: filterLabel
 	});
 	function handleChange(event) {
@@ -8537,11 +8537,11 @@ const ConnectSearchBar = (props) => {
 		className: twMerge("flex items-center", className),
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
-				className: "mr-3 text-gray-700 dark:text-slate-200",
+				className: "mr-3 text-foreground",
 				name: "Search"
 			}),
 			/* @__PURE__ */ jsx("input", {
-				className: twMerge("flex h-[52px] min-w-0 flex-1 items-center rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm text-gray-200 outline-none dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100"),
+				className: twMerge("flex h-[52px] min-w-0 flex-1 items-center rounded-xl border border-border bg-background px-4 text-sm text-foreground outline-none"),
 				onChange: handleChange,
 				placeholder,
 				value
@@ -8554,9 +8554,9 @@ const ConnectSearchBar = (props) => {
 					/* @__PURE__ */ jsx(Icon, { name: "ChevronDown" })
 				]
 			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-				className: "rounded-xl border border-gray-100 bg-gray-50 p-2 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				className: "rounded-xl border border-border bg-background p-2",
 				children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-					className: "h-10 cursor-pointer overflow-hidden rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700",
+					className: "h-10 cursor-pointer overflow-hidden rounded-lg hover:hover-effect",
 					id: item.id,
 					onSelect: () => onFilterSelect(item.id),
 					children: item.content
@@ -8573,16 +8573,16 @@ const SidebarItem = function SidebarItem(props) {
 		content: title,
 		side: "right",
 		sideOffset: 12,
-		className: "border-none bg-gray-800 px-3 py-2 text-sm text-white dark:bg-slate-100 dark:text-slate-900",
+		className: "border-none bg-primary px-3 py-2 text-sm text-primary-foreground",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-gray-900 dark:text-slate-50", containerClassName, active && "bg-gray-50 dark:bg-slate-800", onClick && "cursor-pointer"),
+			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-foreground", containerClassName, active && "bg-sidebar-accent text-sidebar-accent-foreground", onClick && "cursor-pointer"),
 			onClick,
-			children: [active ? /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-violet-400 dark:bg-violet-500" }) : /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-gray-300 opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 dark:bg-slate-600 dark:text-slate-100" }), /* @__PURE__ */ jsx("div", {
+			children: [active ? /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info" }) : /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100" }), /* @__PURE__ */ jsx("div", {
 				className: "mx-auto py-4",
 				children: icon || /* @__PURE__ */ jsx("div", {
-					className: "flex size-8 items-center justify-center rounded-lg bg-gray-900 dark:bg-slate-50",
+					className: "flex size-8 items-center justify-center rounded-lg bg-primary",
 					children: /* @__PURE__ */ jsx("span", {
-						className: "text-sm font-medium text-white dark:text-slate-900",
+						className: "text-sm font-medium text-primary-foreground",
 						children: title.slice(0, 1).toUpperCase()
 					})
 				})
@@ -8637,7 +8637,7 @@ const AccountPopoverLogin = ({ onLogin }) => {
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "mb-4 flex justify-center",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "flex h-5.5 w-20.75 items-center justify-center overflow-hidden text-gray-900 dark:text-slate-50",
+				className: "flex h-5.5 w-20.75 items-center justify-center overflow-hidden text-foreground",
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "RenownLight",
 					size: 83
@@ -8645,7 +8645,7 @@ const AccountPopoverLogin = ({ onLogin }) => {
 			})
 		}), /* @__PURE__ */ jsx("button", {
 			onClick: allowLogin ? handleLogin : void 0,
-			className: twMerge("mt-4 flex h-7 w-full cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-transparent text-sm text-gray-900 active:opacity-70 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", allowLogin ? "cursor-pointer" : "cursor-wait"),
+			className: twMerge("mt-4 flex h-7 w-full cursor-pointer items-center justify-center rounded-lg border border-border bg-transparent text-sm text-foreground active:active-effect", allowLogin ? "cursor-pointer" : "cursor-wait"),
 			type: "button",
 			children: content
 		})]
@@ -8662,7 +8662,7 @@ const SidebarLogin = ({ onLogin }) => {
 	return /* @__PURE__ */ jsx(AccountPopover, {
 		content,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("group/sidebar-footer flex w-full items-baseline justify-start text-sm/10 font-semibold text-gray-700 dark:text-slate-200", onLogin ? "cursor-pointer" : "cursor-wait"),
+			className: twMerge("group/sidebar-footer flex w-full items-baseline justify-start text-sm/10 font-semibold text-foreground", onLogin ? "cursor-pointer" : "cursor-wait"),
 			children: [/* @__PURE__ */ jsx("img", {
 				width: 42,
 				height: 42,
@@ -8696,7 +8696,7 @@ const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = ""
 		}
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col divide-y divide-gray-200 text-gray-900 dark:divide-slate-500 dark:text-slate-50",
+		className: "flex flex-col divide-y divide-border text-foreground",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "px-3 py-2",
@@ -8709,12 +8709,12 @@ const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = ""
 						size: "small",
 						color: "light",
 						onClick: () => void copyToClipboard(address),
-						className: "w-full cursor-pointer bg-transparent p-0 active:opacity-70",
+						className: "w-full cursor-pointer bg-transparent p-0 active:active-effect",
 						type: "button",
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "relative flex w-full items-center gap-1",
 							children: [/* @__PURE__ */ jsxs("div", {
-								className: `flex items-center gap-1 transition-opacity duration-150 ${isCopied ? "opacity-0" : "opacity-100"}`,
+								className: twMerge(`flex items-center gap-1 transition-opacity duration-150`, isCopied ? "opacity-0" : "opacity-100"),
 								children: [/* @__PURE__ */ jsx("span", {
 									className: "text-xs",
 									children: shortAddress(address)
@@ -8724,7 +8724,7 @@ const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = ""
 									size: 14
 								})]
 							}), /* @__PURE__ */ jsx("div", {
-								className: `absolute left-0 text-xs transition-opacity duration-150 ${isCopied ? "opacity-100" : "opacity-0"}`,
+								className: twMerge(`absolute left-0 text-xs transition-opacity duration-150`, isCopied ? "opacity-100" : "opacity-0"),
 								children: "Copied to clipboard!"
 							})]
 						})
@@ -8737,7 +8737,7 @@ const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = ""
 					href: etherscanUrl,
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "flex items-center gap-2 text-sm text-gray-900 hover:text-gray-600 dark:text-slate-50 dark:hover:text-slate-300",
+					className: "flex items-center gap-2 text-sm text-foreground hover:hover-effect",
 					children: [/* @__PURE__ */ jsx(Icon, {
 						name: "Ethscan",
 						size: 14
@@ -8748,7 +8748,7 @@ const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = ""
 				className: "px-3 py-2",
 				children: /* @__PURE__ */ jsxs("button", {
 					onClick: onDisconnect,
-					className: twMerge("flex w-full items-center gap-2 text-sm text-red-900 dark:text-red-400", onDisconnect ? "cursor-pointer hover:text-red-700 dark:hover:text-red-100" : "pointer-events-none cursor-wait"),
+					className: twMerge("flex w-full items-center gap-2 text-sm text-destructive", onDisconnect ? "cursor-pointer hover:hover-effect" : "pointer-events-none cursor-wait"),
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, {
 						name: "Disconnect",
@@ -8784,7 +8784,7 @@ const SidebarUser = ({ address, ensName, avatarUrl, etherscanUrl, onDisconnect }
 const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin, onClickSettings, onDisconnect, onHomeClick, showDebug, onDebugClick, etherscanUrl = "", ...props }) => {
 	return /* @__PURE__ */ jsxs(SidebarFooter, {
 		...props,
-		className: twMerge("flex flex-col items-center gap-3 border-t border-gray-300 px-2 py-4 dark:border-none dark:bg-slate-700 dark:text-slate-100", className),
+		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 dark:border-none", className),
 		children: [
 			onHomeClick && /* @__PURE__ */ jsx("button", {
 				"aria-label": "Home",
@@ -8792,7 +8792,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				className: "cursor-pointer",
 				onClick: onHomeClick,
 				children: /* @__PURE__ */ jsx(Icon, {
-					className: "text-gray-700 dark:text-slate-200",
+					className: "text-muted-foreground",
 					name: "ConnectSmall",
 					size: 24
 				})
@@ -8804,7 +8804,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				className: "cursor-pointer",
 				onClick: onDebugClick,
 				children: /* @__PURE__ */ jsx(Icon, {
-					className: "text-gray-700 dark:text-slate-200",
+					className: "text-foreground",
 					name: "Tube"
 				})
 			}),
@@ -8824,11 +8824,11 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				className: twMerge(onClickSettings ? "cursor-pointer" : "cursor-wait"),
 				onClick: onClickSettings,
 				children: [/* @__PURE__ */ jsx(Settings, {
-					className: "text-gray-700 dark:text-slate-200",
+					className: "text-foreground",
 					size: 24,
 					strokeWidth: 2
 				}), /* @__PURE__ */ jsx("span", {
-					className: "hidden text-sm/6 font-semibold text-gray-900 dark:text-slate-100",
+					className: "hidden text-sm/6 font-semibold text-foreground",
 					children: "Settings"
 				})]
 			})
@@ -8841,7 +8841,7 @@ const ConnectSidebarHeader = ({ className, children, ...props }) => {
 	if (!children) return null;
 	return /* @__PURE__ */ jsx(SidebarHeader, {
 		...props,
-		className: twMerge("flex justify-center gap-4 border-b border-gray-300 py-4 text-gray-500 dark:bg-slate-700 dark:text-slate-100", className),
+		className: twMerge("flex justify-center gap-4 border-b border-sidebar-border py-4 text-muted-foreground", className),
 		children
 	});
 };
@@ -8910,7 +8910,7 @@ function ThemeSwitch({ horizontal = false }) {
 			tabIndex: 0,
 			onClick: () => select(value),
 			onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && select(value),
-			className: twMerge("flex cursor-pointer items-center justify-center rounded-md p-1 transition-colors", isActive(value) ? "bg-gray-50 text-gray-700 dark:bg-slate-800 dark:text-slate-200" : "text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-400"),
+			className: twMerge("flex cursor-pointer items-center justify-center rounded-md p-1 transition-colors", isActive(value) ? "bg-background text-foreground" : "text-muted-foreground hover:text-muted-foreground"),
 			children: /* @__PURE__ */ jsx(Icon, {
 				size: 16,
 				"aria-hidden": "true"
@@ -8928,7 +8928,7 @@ function ThemeSwitch({ horizontal = false }) {
 			tabIndex: 0,
 			onClick: () => select(value),
 			onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && select(value),
-			className: twMerge("flex size-fit cursor-pointer content-center items-center transition-colors", isActive(value) ? "text-gray-900 dark:text-slate-50" : "text-gray-500 dark:text-slate-400"),
+			className: twMerge("flex size-fit cursor-pointer content-center items-center transition-colors", isActive(value) ? "text-foreground" : "text-muted-foreground"),
 			children: /* @__PURE__ */ jsx(Icon, {
 				size: 24,
 				strokeWidth: 2,