npm - @fluid-app/portal-sdk - Versions diffs - 0.1.526 → 0.1.528 - Mend

@fluid-app/portal-sdk 0.1.526 → 0.1.528

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/{MessagingScreen-D_Y3Coa6.cjs → MessagingScreen-_1KfmCJQ.cjs} RENAMED Viewed

@@ -3489,7 +3489,7 @@ function ProfilePhoto({ conversation, user, size, className, onClick, showStatus
 	const recipientStatus = conversation.recipients?.find((r) => r.id === user.id)?.status;
 	const resolvedStatus = directStatus || recipientStatus;
 	const showDot = showStatusDot && size !== "xxl" && (resolvedStatus === "online" || resolvedStatus === "away");
-	const imageClassName = (0, clsx.default)("origin-top-left rounded-full border border-gray-50 object-cover", size === "xxl" && "h-[120px] w-[120px]", size === "xl" && "size-12", size === "lg" && "size-8", size === "md" && "size-6", size === "sm" && "size-5", size === "xs" && "size-4");
+	const imageClassName = (0, clsx.default)("origin-top-left rounded-full border border-[color:var(--messaging-border,var(--color-gray-50))] object-cover", size === "xxl" && "h-[120px] w-[120px]", size === "xl" && "size-12", size === "lg" && "size-8", size === "md" && "size-6", size === "sm" && "size-5", size === "xs" && "size-4");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_src.cn("relative shrink-0 select-none", onClick && "cursor-pointer", className),
 		onClick,
@@ -3508,10 +3508,10 @@ function ProfilePhoto({ conversation, user, size, className, onClick, showStatus
 			height: 120,
 			className: imageClassName
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("grid origin-top-left place-items-center rounded-full border border-white bg-blue-800 font-medium tracking-tighter text-white uppercase", size === "xxl" && "text-messaging-1 h-[120px] w-[120px] text-4xl", size === "xl" && "text-messaging-1 size-12", size === "lg" && "text-messaging-4 size-8", size === "md" && "text-messaging-6 size-6", size === "sm" && "text-messaging-7 size-5", size === "xs" && "text-messaging-7 size-4"),
+			className: (0, clsx.default)("grid origin-top-left place-items-center rounded-full border border-[color:var(--messaging-border,var(--color-white))] bg-[color:var(--messaging-primary,var(--color-blue-800))] font-medium tracking-tighter text-[color:var(--messaging-primary-foreground,var(--color-white))] uppercase", size === "xxl" && "text-messaging-1 h-[120px] w-[120px] text-4xl", size === "xl" && "text-messaging-1 size-12", size === "lg" && "text-messaging-4 size-8", size === "md" && "text-messaging-6 size-6", size === "sm" && "text-messaging-7 size-5", size === "xs" && "text-messaging-7 size-4"),
 			style: { background: `linear-gradient(135deg, hsl(from ${baseColor} h 100 80) 0%, hsl(from ${baseColor} calc(h + 45) 90 50) 100%)` },
 			children: initials
-		}), showDot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_src.cn("absolute right-0 bottom-0 size-2 rounded-full border border-white", resolvedStatus === "online" && "bg-green-400", resolvedStatus === "away" && "bg-yellow-400", size === "xl" && "size-4", size === "lg" && "size-3", size === "xs" && "size-3") })]
+		}), showDot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_src.cn("absolute right-0 bottom-0 size-2 rounded-full border border-[color:var(--messaging-border,var(--color-white))]", resolvedStatus === "online" && "bg-green-400", resolvedStatus === "away" && "bg-yellow-400", size === "xl" && "size-4", size === "lg" && "size-3", size === "xs" && "size-3") })]
 	});
 }
 //#endregion
@@ -3528,7 +3528,7 @@ function GroupAvatars({ conversation, currentUserId, groupSize = GROUP_MAX, rend
 			size: "md",
 			renderImage
 		}, recipient.id)), users.length > displaySize && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "text-messaging-7 messaging-gradient z-10 flex size-6 items-center justify-center rounded-full border border-gray-200 bg-gray-200 text-white",
+			className: "text-messaging-7 messaging-gradient z-10 flex size-6 items-center justify-center rounded-full border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-200))] text-white",
 			children: ["+", users.length - displaySize]
 		})]
 	});
@@ -3572,13 +3572,13 @@ function MessagesHeaderActions({ conversation, currentUser, navigation, renderIm
 			renderImage
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-blue-200 bg-blue-50", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-gray-200 bg-gray-50"),
+			className: (0, clsx.default)("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]"),
 			children: [
-				messageType === "public-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "size-3 text-blue-700" }),
+				messageType === "public-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "size-3 text-[color:var(--messaging-primary,var(--color-blue-700))]" }),
 				messageType === "sms" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Phone, { className: "size-3 text-green-700" }),
 				messageType === "email" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mail, { className: "size-3 text-pink-600" }),
 				messageType === "private-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Lock, { className: "size-2.5 text-purple-700" }),
-				messageType === "broadcast" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "size-3 text-gray-700" })
+				messageType === "broadcast" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "size-3 text-[color:var(--messaging-foreground,var(--color-gray-700))]" })
 			]
 		}),
 		isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconButton, {
@@ -3636,37 +3636,37 @@ function MessagesHeaderActions({ conversation, currentUser, navigation, renderIm
 			align: "end",
 			className: "w-60 p-0",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
-				className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+				className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 				children: t("header_channel_options")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "px-0 py-1",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.User, { className: "size-4 text-gray-500" }), t("header_channel_details")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.User, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_channel_details")]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-4 text-gray-500" }), t("header_channel_settings")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_channel_settings")]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BellOff, { className: "size-4 text-gray-500" }), t("header_mute_channel")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BellOff, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_mute_channel")]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 						onSelect: () => navigation.navigate({
 							view: "pins",
 							conversationId
 						}),
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "size-4 text-gray-500" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }),
 							t("header_pinned_messages"),
 							(conversation.pinned_messages_count ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "ml-auto text-xs text-gray-500",
+								className: "ml-auto text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 								children: conversation.pinned_messages_count ?? 0
 							})
 						]
@@ -3782,7 +3782,7 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 		className: (0, clsx.default)("sticky bottom-0 mt-auto md:-mx-4", !showAdminFeatures && "max-md:hidden"),
 		ref: menuRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("absolute bottom-full left-0 -z-10 grid w-full gap-2 border-t border-gray-200 bg-white p-4 text-sm font-medium text-gray-700 transition-transform", createChatOpen ? "" : "hidden"),
+			className: (0, clsx.default)("absolute bottom-full left-0 -z-10 grid w-full gap-2 border-t border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-4 text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] transition-transform", createChatOpen ? "" : "hidden"),
 			inert: !createChatOpen,
 			"aria-hidden": !createChatOpen,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -3790,21 +3790,21 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 					setCreateChatOpen(false);
 					navigation.navigate({ view: "new" });
 				},
-				className: "flex items-center justify-between rounded-md p-2 hover:bg-gray-50 active:bg-gray-100",
+				className: "flex items-center justify-between rounded-md p-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]",
 				children: [t("sidebar_new_message"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, { className: "size-4" })]
 			}), showAdminFeatures && renderNewChannelSidebar?.({
 				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					onClick: () => setCreateChatOpen(false),
-					className: "flex items-center justify-between rounded-md p-2 hover:bg-gray-50 active:bg-gray-100",
+					className: "flex items-center justify-between rounded-md p-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]",
 					children: [t("sidebar_new_channel"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, { className: "size-4" })]
 				}),
 				open: channelSidebarOpen,
 				onOpenChange: setChannelSidebarOpen
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex gap-2 border-t border-t-gray-200 bg-gray-50 p-4",
+			className: "flex gap-2 border-t border-t-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] p-4",
 			children: [showAdminFeatures && (isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-				className: "size-9 items-center justify-center text-gray-700",
+				className: "size-9 items-center justify-center text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 				onClick: () => setIsNavigationOpen(true),
 				"aria-label": t("header_more_options"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Menu, { className: "size-4" })
@@ -3824,7 +3824,7 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-					className: "size-9 items-center justify-center text-gray-700",
+					className: "size-9 items-center justify-center text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Menu, { className: "size-4" })
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
@@ -3837,18 +3837,18 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 						onClick: () => {
 							navigation.navigate({ view: "index" });
 						},
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BookUser, { className: "size-4 text-gray-500" }), t("sidebar_contacts")]
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BookUser, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("sidebar_contacts")]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 						onClick: () => {
 							navigation.navigate({ view: "scheduled" });
 						},
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarClock, { className: "size-4 text-gray-500" }), t("sidebar_scheduled_messages")]
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarClock, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("sidebar_scheduled_messages")]
 					})]
 				})
 			})] })), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				className: "h-9 grow items-center justify-center gap-2 text-gray-900",
+				className: "h-9 grow items-center justify-center gap-2 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 				onClick: () => setCreateChatOpen((p) => !p),
 				children: [createChatOpen ? t("sidebar_new_button_close") : t("sidebar_new_button_open"), createChatOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SquarePen, { className: "size-4" })]
 			})]
@@ -3924,12 +3924,12 @@ const TooltipWithArrow = ({ title, content, children, className, side, align, si
 			side,
 			align,
 			sideOffset,
-			className: (0, tailwind_merge.twMerge)(`group relative max-w-80 overflow-visible rounded-lg bg-gray-900 px-3 py-2 text-white`, className),
+			className: (0, tailwind_merge.twMerge)(`group relative max-w-80 overflow-visible rounded-lg bg-[color:var(--messaging-muted,var(--color-gray-900))] px-3 py-2 text-white`, className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "text-xs font-semibold text-white",
 				children: title
 			}), content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-1 text-xs font-medium text-gray-300",
+				className: "mt-1 text-xs font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]",
 				children: content
 			})]
 		})]
@@ -3974,7 +3974,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				onClick: () => loadState.load(),
-				className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-[10px] font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+				className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-2.5 py-0.5 text-[10px] font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 				children: t("sidebar_load_more")
 			})
 		}, "load-more")
@@ -3998,8 +3998,8 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 					className: "group/summary text-muted-foreground hover:bg-accent mx-3 mb-1 flex min-h-10 touch-manipulation items-center gap-2 rounded-lg px-1 text-xs font-semibold tracking-wide uppercase group-last/details:mb-0 group-open/details:mb-1 md:mx-0 md:min-h-0 md:tracking-normal md:normal-case",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "group/icon grid size-5 place-items-center rounded-sm hover:bg-gray-300",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "col-start-1 row-start-1 size-3.5 text-gray-500 transition-opacity group-hover/summary:opacity-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "col-start-1 row-start-1 size-3.5 -rotate-90 text-gray-400 opacity-0 transition-all group-open/details:rotate-0 group-hover/icon:text-gray-500 group-hover/summary:opacity-100 group-active/icon:text-gray-600" })]
+							className: "group/icon grid size-5 place-items-center rounded-sm hover:bg-[color:var(--messaging-muted,var(--color-gray-300))]",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "col-start-1 row-start-1 size-3.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] transition-opacity group-hover/summary:opacity-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "col-start-1 row-start-1 size-3.5 -rotate-90 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] opacity-0 transition-all group-open/details:rotate-0 group-hover/icon:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] group-hover/summary:opacity-100 group-active/icon:text-[color:var(--messaging-muted-foreground,var(--color-gray-600))]" })]
 						}),
 						label,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipWithArrow, {
@@ -4007,7 +4007,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 							content: description,
 							side: "right",
 							sideOffset: 10,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleHelp, { className: "invisible ml-auto size-4 rounded-sm p-1 group-hover/summary:visible hover:bg-gray-300 hover:text-gray-500" })
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleHelp, { className: "invisible ml-auto size-4 rounded-sm p-1 group-hover/summary:visible hover:bg-[color:var(--messaging-muted,var(--color-gray-300))] hover:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" })
 						})
 					]
 				}),
@@ -4017,7 +4017,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 					role: "region",
 					"aria-label": `View all ${label} conversations`,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
-						className: "list-none p-1 text-xs font-medium text-gray-500 hover:text-gray-700",
+						className: "list-none p-1 text-xs font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "group-open/nested:hidden",
 							children: t("sidebar_show_all")
@@ -4480,7 +4480,7 @@ function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNew
 						children: initialLoadInProgress ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagingLoadingSkeleton, { label: t("loading_messaging") }) : userWithoutChannels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex h-full min-h-[30vh] w-full items-center justify-center",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-gray-500",
+								className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 								children: t("no_conversations")
 							})
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollerContext.Provider, {
@@ -4503,7 +4503,7 @@ function ChannelHeader({ conversation, renderImage, onToast }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center gap-2",
 			children: [currentEmoji ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "grid size-12 place-items-center rounded-sm bg-gray-100 text-2xl",
+				className: "grid size-12 place-items-center rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-100))] text-2xl",
 				children: currentEmoji
 			}) : conversation.image_url ? renderImage({
 				src: conversation.image_url,
@@ -4517,7 +4517,7 @@ function ChannelHeader({ conversation, renderImage, onToast }) {
 					className: "text-xl font-medium",
 					children: ["#", formatMessageChannelName(nameWithoutEmojiText)]
 				}), conversation.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-gray-900",
+					className: "text-xs text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: conversation.description
 				})]
 			})]
@@ -4570,13 +4570,13 @@ function DirectMessageHeader({ conversation, renderImage, renderUserProfile }) {
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "text-center",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-					className: "text-xl font-medium text-gray-900",
+					className: "text-xl font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: conversation.type === "GroupConversation" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: groupName.displayName }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-gray-500",
+						className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 						children: [" ", groupName.remainder]
 					})] }) : conversation.name
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-gray-500",
+					className: "text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: conversation.type === "SmsConversation" ? t("header_sms_message") : conversation.type === "EmailConversation" ? t("header_email_message") : conversation.type === "GroupConversation" ? t("header_group_message") : conversation.type === "DownlineConversation" ? t("header_downline_message") : t("header_direct_message")
 				})]
 			})]
@@ -5708,18 +5708,18 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							"aria-label": t("date_picker_previous_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => subMonths(m, 1)),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-base font-semibold text-gray-700",
+							className: "text-base font-semibold text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 							children: require_isAfter.format(currentMonth, "MMMM yyyy")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							"aria-label": t("date_picker_next_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-30",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))] disabled:cursor-not-allowed disabled:opacity-30",
 							onClick: () => setCurrentMonth((m) => require_isAfter.addMonths(m, 1)),
 							disabled: !canGoNext,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {})
@@ -5738,7 +5738,7 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 							setCurrentMonth(new Date(value));
 						},
 						max: require_isAfter.format(now, "yyyy-MM-dd"),
-						className: (0, clsx.default)("hide-date-picker border border-gray-300")
+						className: (0, clsx.default)("hide-date-picker border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 						type: "button",
 						onClick: () => {
@@ -5766,16 +5766,16 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 						caption: (0, clsx.default)("hidden"),
 						head_cell: (0, clsx.default)("flex size-10 items-center justify-center text-sm font-medium"),
 						cell: (0, clsx.default)("flex size-10 items-center justify-center"),
-						day: (0, clsx.default)("size-10 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200"),
-						day_selected: (0, clsx.default)("bg-blue-600! text-white!"),
-						day_outside: (0, clsx.default)("text-gray-500!"),
-						day_disabled: (0, clsx.default)("pointer-events-none text-gray-500 opacity-50")
+						day: (0, clsx.default)("size-10 rounded-full text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"),
+						day_selected: (0, clsx.default)("bg-[color:var(--messaging-primary,var(--color-blue-600))]! text-[color:var(--messaging-primary-foreground,var(--color-white))]!"),
+						day_outside: (0, clsx.default)("text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]!"),
+						day_disabled: (0, clsx.default)("pointer-events-none text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] opacity-50")
 					},
 					initialFocus: true
 				})
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex w-full items-center gap-3 border-t border-gray-200 pt-4",
+			className: "flex w-full items-center gap-3 border-t border-[color:var(--messaging-border,var(--color-gray-200))] pt-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 				variant: "default",
 				onClick: () => onOpenChange(false),
@@ -5799,11 +5799,11 @@ function UnreadDivider() {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "absolute inset-0 flex items-center",
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-5 w-full -translate-y-1/2 border-b border-slate-300 bg-white" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-5 w-full -translate-y-1/2 border-b border-[color:var(--messaging-border,var(--color-slate-300))] bg-[color:var(--messaging-background,var(--color-white))]" })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "relative z-10 flex justify-center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rounded-2xl border border-indigo-800 bg-white px-2 py-0.5 text-xs font-medium text-indigo-900",
+				className: "rounded-2xl border border-indigo-800 bg-[color:var(--messaging-background,var(--color-white))] px-2 py-0.5 text-xs font-medium text-indigo-900",
 				children: t("message_new")
 			})
 		})]
@@ -5831,13 +5831,13 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "absolute inset-0 flex items-center",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-full border-t border-gray-200" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-full border-t border-[color:var(--messaging-border,var(--color-gray-200))]" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "relative flex justify-center",
 				children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
-					className: require_src.cn("flex items-center gap-1.5 rounded-2xl border border-gray-200 bg-gray-50 py-0.5 pr-2.5 pl-3 text-xs font-medium text-gray-700", conversationId ? "cursor-pointer hover:bg-gray-100" : "cursor-default"),
+					className: require_src.cn("flex items-center gap-1.5 rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-0.5 pr-2.5 pl-3 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]", conversationId ? "cursor-pointer hover:bg-[color:var(--messaging-muted,var(--color-gray-100))]" : "cursor-default"),
 					"aria-label": conversationId ? t("divider_jump_to") : void 0,
 					disabled: !conversationId,
 					onClick: () => setDateMenuOpen(true),
@@ -5885,7 +5885,7 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
-							className: require_src.cn("flex items-center gap-1.5 rounded-2xl border border-gray-200 bg-gray-50 py-0.5 pr-2.5 pl-3 text-xs font-medium text-gray-700", conversationId ? "cursor-pointer hover:bg-gray-100" : "cursor-default"),
+							className: require_src.cn("flex items-center gap-1.5 rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-0.5 pr-2.5 pl-3 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]", conversationId ? "cursor-pointer hover:bg-[color:var(--messaging-muted,var(--color-gray-100))]" : "cursor-default"),
 							"aria-label": conversationId ? t("divider_jump_to") : void 0,
 							disabled: !conversationId,
 							children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: (0, clsx.default)("transition-transform duration-200", dateMenuOpen ? "rotate-180" : "") })]
@@ -5894,39 +5894,39 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 						align: "center",
 						className: "w-60 p-0",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
-							className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+							className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: t("divider_jump_to")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "px-0 py-1",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(require_isAfter.startOfDay(/* @__PURE__ */ new Date())),
 									children: t("divider_today")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(require_isAfter.startOfDay(subDays(/* @__PURE__ */ new Date(), 1))),
 									children: t("divider_yesterday")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(require_isAfter.startOfDay(subDays(/* @__PURE__ */ new Date(), 7))),
 									children: t("divider_last_week")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(require_isAfter.startOfDay(subDays(/* @__PURE__ */ new Date(), 30))),
 									children: t("divider_last_month")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate("start"),
 									children: t("divider_very_beginning")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, { className: "mx-0 my-1" }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: onSelectSpecificDate,
 									children: t("divider_specific_date")
 								})
@@ -5964,16 +5964,16 @@ function ErrorState({ title, message, onRetry }) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-col items-center gap-2 text-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "text-base leading-tight font-semibold text-slate-900",
+						className: "text-base leading-tight font-semibold text-[color:var(--messaging-foreground,var(--color-slate-900))]",
 						children: effectiveTitle
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-sm leading-tight text-slate-600",
+						className: "text-sm leading-tight text-[color:var(--messaging-muted-foreground,var(--color-slate-600))]",
 						children: effectiveMessage
 					})]
 				}),
 				onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: onRetry,
-					className: "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+					className: "rounded-md bg-[color:var(--messaging-primary,var(--color-blue-600))] px-4 py-2 text-sm font-medium text-[color:var(--messaging-primary-foreground,var(--color-white))] hover:bg-[color:var(--messaging-primary,var(--color-blue-700))] focus:ring-2 focus:ring-[color:var(--messaging-primary,var(--color-blue-500))] focus:ring-offset-2 focus:outline-none",
 					children: t("error_retry")
 				})
 			]
@@ -6074,7 +6074,7 @@ function EmojiPickerFooter({ className, ...props }) {
 			children: "Select an emoji…"
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dist.at.SkinToneSelector, {
 			emoji: "👋",
-			className: "ml-auto aspect-square h-full rounded-sm hover:bg-gray-100 active:bg-gray-200"
+			className: "ml-auto aspect-square h-full rounded-sm hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"
 		})]
 	});
 }
@@ -6188,18 +6188,18 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 	const showAsImage = metadata && thumbnail_url && !showAsVideo;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		!showAsVideo && !showAsImage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "group/file max-w-96 overflow-clip rounded-xl border border-gray-200 bg-gray-50",
+			className: "group/file max-w-96 overflow-clip rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 p-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					onClick: () => window.open(url, "_blank"),
-					className: "-m-1 flex items-center gap-2 rounded-lg p-1 text-left hover:bg-gray-100 active:bg-gray-200",
+					className: "-m-1 flex items-center gap-2 rounded-lg p-1 text-left hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, clsx.default)("isolate flex size-8 shrink-0 flex-col rounded-sm border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300"),
+						className: (0, clsx.default)("isolate flex size-8 shrink-0 flex-col rounded-sm border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-tl-[0.1875rem] rounded-tr-[0.1875rem] bg-gradient-to-b from-gray-100 to-gray-50",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "-mb-1.5 size-2.5 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+							className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-tl-[0.1875rem] rounded-tr-[0.1875rem] bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "-mb-1.5 size-2.5 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, clsx.default)("text-messaging-6 z-10 m-px mt-0 flex h-4 items-center justify-center rounded-[0.25rem] border text-center text-white uppercase text-shadow-2xs", config.borderColor),
 							style: { background: config.bgColor },
@@ -6208,15 +6208,15 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mr-3 grid gap-1.5",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-messaging-2 capsize -my-1 truncate py-1 text-gray-900",
+							className: "text-messaging-2 capsize -my-1 truncate py-1 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 							children: filename
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-messaging-6 capsize text-gray-500",
+							className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 							children: content_size ? formatFileSize(content_size) : t("attachment_unknown_size")
 						})]
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "ml-auto flex gap-1 rounded-lg border border-gray-200 bg-white p-1 opacity-0 transition-opacity group-hover/file:opacity-100",
+					className: "ml-auto flex gap-1 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-1 opacity-0 transition-opacity group-hover/file:opacity-100",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconButton, {
 						size: "icon-xs",
 						icon: lucide_react.Download,
@@ -6233,7 +6233,7 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 					src: image_url,
 					alt: filename,
-					className: "h-40 w-80 min-w-full border-t border-gray-200 object-cover object-top"
+					className: "h-40 w-80 min-w-full border-t border-[color:var(--messaging-border,var(--color-gray-200))] object-cover object-top"
 				})
 			})]
 		}),
@@ -6248,7 +6248,7 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 				alt: filename,
 				width: metadata?.width,
 				height: metadata?.height,
-				className: "h-svh max-h-full w-svw max-w-full rounded-lg bg-gray-100 object-cover"
+				className: "h-svh max-h-full w-svw max-w-full rounded-lg bg-[color:var(--messaging-muted,var(--color-gray-100))] object-cover"
 			})
 		}),
 		showAsVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
@@ -29478,7 +29478,7 @@ const UserMentionChip = ({ userId }) => {
 	const { t } = useMessagingTranslation();
 	const thisUser = (users ?? []).find((user) => user.id.toString() === userId);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "font-medium text-blue-600 not-italic",
+		className: "font-medium text-[color:var(--messaging-primary,var(--color-blue-600))] not-italic",
 		children: ["@", [thisUser?.first_name, thisUser?.last_name].filter(Boolean).join(" ") || t("unknown")]
 	});
 };
@@ -29549,7 +29549,7 @@ const markdownComponents = {
 	},
 	blockquote: ({ children }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("blockquote", {
-			className: "border-l-2 border-gray-400 bg-black/5 p-2",
+			className: "border-l-2 border-[color:var(--messaging-border,var(--color-gray-400))] bg-[color:var(--messaging-foreground,var(--color-black))]/5 p-2",
 			children: processChildren(children)
 		});
 	},
@@ -29561,13 +29561,13 @@ const markdownComponents = {
 	},
 	code: ({ children }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-			className: "my-0.5 inline-block rounded-xs bg-gray-800/5 px-1",
+			className: "my-0.5 inline-block rounded-xs bg-[color:var(--messaging-muted,var(--color-gray-800))]/5 px-1",
 			children: processChildren(children)
 		});
 	},
 	a: ({ href, children }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-			className: "text-blue-600 visited:text-purple-600 hover:underline",
+			className: "text-[color:var(--messaging-primary,var(--color-blue-600))] visited:text-purple-600 hover:underline",
 			href,
 			target: "_blank",
 			rel: "noopener noreferrer",
@@ -29582,13 +29582,13 @@ const markdownComponents = {
 	},
 	td: ({ children }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-			className: "border border-gray-300 px-3 py-1.5",
+			className: "border border-[color:var(--messaging-border,var(--color-gray-300))] px-3 py-1.5",
 			children: processChildren(children)
 		});
 	},
 	th: ({ children }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-			className: "border border-gray-300 px-3 py-1.5",
+			className: "border border-[color:var(--messaging-border,var(--color-gray-300))] px-3 py-1.5",
 			children: processChildren(children)
 		});
 	},
@@ -29609,7 +29609,7 @@ const markdownComponents = {
 	},
 	img: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProcessedImage, { ...props }),
 	hr: () => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "my-2 border-gray-300" });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "my-2 border-[color:var(--messaging-border,var(--color-gray-300))]" });
 	},
 	br: () => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", { className: "[&+&+&+&+&]:hidden" });
@@ -39824,7 +39824,7 @@ function MessageReactions({ reactions: rawReactions, my_reaction, onUnreact, onR
 						initial: prefersReducedMotion ? false : { opacity: 0 },
 						animate: prefersReducedMotion ? void 0 : { opacity: 1 },
 						exit: prefersReducedMotion ? void 0 : { opacity: 0 },
-						className: (0, tailwind_merge.twMerge)("relative z-10 flex h-6 items-center gap-1.5 overflow-clip rounded-md border", splitEmojis(my_reaction).includes(clickedEmoji) ? "border-gray-200 bg-gray-100 px-1.5 text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300" : "border-gray-200 bg-white px-1.5 text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300"),
+						className: (0, tailwind_merge.twMerge)("relative z-10 flex h-6 items-center gap-1.5 overflow-clip rounded-md border", splitEmojis(my_reaction).includes(clickedEmoji) ? "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-100))] px-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]" : "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] px-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]"),
 						style: { "--emoji": `"${clickedEmoji}"` },
 						onClick: () => {
 							const currentReactionEmojis = splitEmojis(my_reaction);
@@ -39849,7 +39849,7 @@ function MessageReactions({ reactions: rawReactions, my_reaction, onUnreact, onR
 						open: emojiPickerOpen,
 						onOpenChange: setEmojiPickerOpen,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverTrigger, {
-							className: "grid size-6 place-items-center rounded-md bg-white text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300",
+							className: "grid size-6 place-items-center rounded-md bg-[color:var(--messaging-background,var(--color-white))] text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-4" })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverContent, {
 							align: "center",
@@ -39987,12 +39987,12 @@ function Timestamp({ children: timestamp, className = "", displayMode = "auto" }
 			className: "capsize grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1 pr-2 pb-1",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "rounded-sm bg-gray-700 px-1 py-0.5",
+					className: "rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-700))] px-1 py-0.5",
 					children: userTimezoneFormatted.timezone
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: userTimezoneFormatted.dateTime }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "rounded-sm bg-gray-700 px-1 py-0.5",
+					className: "rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-700))] px-1 py-0.5",
 					children: utcFormatted.timezone
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: utcFormatted.dateTime })
@@ -40075,7 +40075,7 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 		className: require_src.cn("group/message children-pointer-events-auto content-auto pointer-events-none relative px-3 py-1.5 pt-6 select-text hover:z-10 md:px-4 md:pt-[1.375rem]", isGrouped ? "mt-1" : "-mt-3", message.status === "queued" ? "opacity-50" : "transition-opacity duration-1000", emojiPickerOpen && "z-20", optionsOpen && "z-20"),
 		children: [
 			pinned && highlightType !== "never" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("text-messaging-6 mb-2 ml-10.5 flex items-center gap-1.5", pinned && highlightType === "auto" && "text-orange-600", highlightType === "search" && "text-blue-600"),
+				className: (0, clsx.default)("text-messaging-6 mb-2 ml-10.5 flex items-center gap-1.5", pinned && highlightType === "auto" && "text-orange-600", highlightType === "search" && "text-[color:var(--messaging-primary,var(--color-blue-600))]"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, {
 					className: "h-2!",
 					fill: "currentColor"
@@ -40087,7 +40087,7 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex gap-2.5",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_src.cn("absolute inset-0 top-4 -z-10 group-hover/message:bg-gray-50", pinned && highlightType === "auto" && "bg-amber-50 group-hover/message:bg-amber-100/75", highlightType === "search" && "bg-blue-50 group-hover/message:bg-blue-100/75") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_src.cn("absolute inset-0 top-4 -z-10 group-hover/message:bg-[color:var(--messaging-muted,var(--color-gray-50))]", pinned && highlightType === "auto" && "bg-amber-50 group-hover/message:bg-amber-100/75", highlightType === "search" && "bg-[color:var(--messaging-primary-tint,var(--color-blue-50))] group-hover/message:bg-[color:var(--messaging-primary-tint,var(--color-blue-100))]/75") }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: require_src.cn("text-muted-foreground md:border-border md:bg-background visible absolute top-2 right-2 flex items-center gap-1 rounded-full bg-transparent p-0 md:invisible md:top-0 md:right-4 md:rounded-md md:border md:p-1 md:shadow-lg md:group-hover/message:visible", emojiPickerOpen && "visible", optionsOpen && "visible"),
 						children: [conversation.type !== "SmsConversation" && conversation.type !== "EmailConversation" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Popover, {
@@ -40151,12 +40151,12 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 										setPin(!pinned);
 										setOptionsOpen(false);
 									},
-									className: "cursor-pointer text-sm font-medium text-gray-700",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "text-gray-500" }), pinned ? t("message_unpin") : t("message_pin")]
+									className: "cursor-pointer text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), pinned ? t("message_unpin") : t("message_pin")]
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
 									onSelect: copyMessageLink,
-									className: "cursor-pointer text-sm font-medium text-gray-700",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "text-gray-500" }), t("message_copy_link")]
+									className: "cursor-pointer text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("message_copy_link")]
 								})]
 							})]
 						})]
@@ -40348,7 +40348,7 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-2.5",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 top-4 -z-10 group-hover/message:bg-gray-50" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 top-4 -z-10 group-hover/message:bg-[color:var(--messaging-muted,var(--color-gray-50))]" }),
 				profileTrigger(message.sender_recipient.id, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfilePhoto, {
 					size: "lg",
 					conversation,
@@ -40361,7 +40361,7 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mb-1 flex h-4 items-center gap-1.5",
 						children: [profileTrigger(message.sender_recipient.id, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "text-messaging-2 capsize cursor-pointer text-gray-900 hover:underline",
+							className: "text-messaging-2 capsize cursor-pointer text-[color:var(--messaging-foreground,var(--color-gray-900))] hover:underline",
 							children: [
 								message.sender_recipient.first_name,
 								" ",
@@ -40369,11 +40369,11 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 								!message.sender_recipient.first_name && !message.sender_recipient.last_name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: message.sender_recipient.phone || message.sender_recipient.email || t("message_unknown_sender") })
 							]
 						})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timestamp, {
-							className: "text-messaging-6 capsize text-gray-400",
+							className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 							children: message.sent_at || message.created_at
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-messaging-3 capsize text-gray-400",
+						className: "text-messaging-3 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 						children: getSystemMessageText()
 					})]
 				})
@@ -52609,16 +52609,16 @@ function AttachmentDropzone({ props, isDragOver }) {
 		onDragEnter: void 0,
 		onDragOver: void 0
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "absolute inset-0 z-10 rounded-lg border border-gray-200 bg-white shadow-sm",
+		className: "absolute inset-0 z-10 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] shadow-sm",
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex h-full flex-col",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_src.cn("flex h-full flex-1 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors", isDragOver ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-gray-50"),
+				className: require_src.cn("flex h-full flex-1 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors", isDragOver ? "border-[color:var(--messaging-primary,var(--color-blue-500))] bg-[color:var(--messaging-primary-tint,var(--color-blue-100))]" : "border-[color:var(--messaging-border,var(--color-gray-300))] bg-[color:var(--messaging-muted,var(--color-gray-50))]"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2 text-center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "h-8 w-8 text-blue-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "font-medium text-blue-600",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "h-8 w-8 text-[color:var(--messaging-primary,var(--color-blue-500))]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "font-medium text-[color:var(--messaging-primary,var(--color-blue-600))]",
 						children: t("dropzone_upload")
 					})]
 				})
@@ -53665,10 +53665,10 @@ const MentionList = (0, react.forwardRef)((props, ref) => {
 		return false;
 	} }));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "group/mentions grid min-w-64 rounded-lg border border-gray-200 bg-white p-1 shadow-lg",
+		className: "group/mentions grid min-w-64 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-1 shadow-lg",
 		children: props.items.length > 0 ? props.items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: require_src.cn("text-messaging-3 flex items-center gap-2 rounded-md p-1 pr-2 hover:bg-gray-200 active:bg-gray-300", index === selectedIndex ? "bg-gray-200 group-has-[button:hover]/mentions:not-hover:bg-white" : ""),
+			className: require_src.cn("text-messaging-3 flex items-center gap-2 rounded-md p-1 pr-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]", index === selectedIndex ? "bg-[color:var(--messaging-muted,var(--color-gray-200))] group-has-[button:hover]/mentions:not-hover:bg-[color:var(--messaging-background,var(--color-white))]" : ""),
 			onClick: () => selectItem(index),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfilePhoto, {
 				user: item.userDetails,
@@ -53677,7 +53677,7 @@ const MentionList = (0, react.forwardRef)((props, ref) => {
 				renderImage: props.renderImage
 			}), item.label]
 		}, item.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-messaging-4 px-2.5 py-1.5 text-gray-500",
+			className: "text-messaging-4 px-2.5 py-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 			children: "No results"
 		})
 	});
@@ -53771,7 +53771,7 @@ function AttachmentPreview({ file, onRemove }) {
 	const [previewLoaded, setPreviewLoaded] = (0, react.useState)(false);
 	if (!canShowPreview && previewLoaded) setPreviewLoaded(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("group/file relative flex max-w-80 items-center gap-2 rounded-xl border border-gray-200 bg-gray-50", previewLoaded ? "" : "min-w-48 p-2 pr-6", file.status === "failed" && "border-red-200 bg-red-50"),
+		className: (0, clsx.default)("group/file relative flex max-w-80 items-center gap-2 rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]", previewLoaded ? "" : "min-w-48 p-2 pr-6", file.status === "failed" && "border-red-200 bg-red-50"),
 		children: [
 			canShowPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, clsx.default)("overlapping-children size-16 shrink-0 place-items-center overflow-clip rounded-[0.8125rem]", previewLoaded ? "" : "hidden"),
@@ -53793,10 +53793,10 @@ function AttachmentPreview({ file, onRemove }) {
 				})] })]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("flex size-12 shrink-0 flex-col rounded-md border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300", previewLoaded && "hidden"),
+				className: (0, clsx.default)("flex size-12 shrink-0 flex-col rounded-md border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]", previewLoaded && "hidden"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mx-1 mt-1 grid grow place-items-center rounded-tl-sm rounded-tr-sm bg-gradient-to-b from-gray-100 to-gray-50",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "size-4 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+					className: "mx-1 mt-1 grid grow place-items-center rounded-tl-sm rounded-tr-sm bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "size-4 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, clsx.default)("text-messaging-6 m-1 mt-0 flex h-4 items-center justify-center rounded-sm border text-center text-white uppercase text-shadow-2xs", config.borderColor),
 					style: { background: config.bgColor },
@@ -53806,23 +53806,23 @@ function AttachmentPreview({ file, onRemove }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, clsx.default)("grid gap-1.5", previewLoaded && "hidden"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-messaging-2 capsize -my-1 truncate py-1 text-gray-900",
+					className: "text-messaging-2 capsize -my-1 truncate py-1 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: file.filename
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-messaging-6 capsize text-gray-500",
+					className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: file.status === "completed" ? file.content_size ? formatFileSize(file.content_size) : t("attachment_unknown_size") : file.status === "uploading" ? file.progress === 0 ? t("attachment_starting_upload") : `${file.progress}%` : file.error
 				})]
 			}),
 			onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconButton, {
 				onClick: onRemove,
-				className: "absolute -top-2 -right-2 border border-gray-200 opacity-0 shadow-xs group-hover/file:opacity-100",
+				className: "absolute -top-2 -right-2 border border-[color:var(--messaging-border,var(--color-gray-200))] opacity-0 shadow-xs group-hover/file:opacity-100",
 				title: t("attachment_remove"),
 				size: "icon-xs",
 				icon: lucide_react.X
 			}),
 			file.status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("overlapping-children absolute -top-2 -right-2 grid size-5 place-items-center rounded-sm border border-gray-200 bg-white", "group-hover/file:hidden"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Circle, { className: "size-2.5 text-gray-300" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-2.5 animate-spin text-blue-600" })]
+				className: (0, clsx.default)("overlapping-children absolute -top-2 -right-2 grid size-5 place-items-center rounded-sm border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))]", "group-hover/file:hidden"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Circle, { className: "size-2.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-2.5 animate-spin text-[color:var(--messaging-primary,var(--color-blue-600))]" })]
 			})
 		]
 	});
@@ -53889,18 +53889,18 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							"aria-label": t("schedule_dialog_previous_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => subMonths(m, 1)),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-base font-semibold text-gray-700",
+							className: "text-base font-semibold text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 							children: require_isAfter.format(currentMonth, "MMMM yyyy")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							"aria-label": t("schedule_dialog_next_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => require_isAfter.addMonths(m, 1)),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {})
 						})
@@ -53919,7 +53919,7 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 							setCurrentMonth(d);
 						},
 						min: require_isAfter.format(minDay, "yyyy-MM-dd"),
-						className: (0, clsx.default)("hide-date-picker border border-gray-300")
+						className: (0, clsx.default)("hide-date-picker border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
 						name: "time",
 						type: "time",
@@ -53927,7 +53927,7 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						value: timeHM,
 						min: minTimeForSelectedDay,
 						onChange: (e) => setTimeHM(e.target.value),
-						className: (0, clsx.default)("border border-gray-300")
+						className: (0, clsx.default)("border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Calendar, {
@@ -53946,16 +53946,16 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						caption: (0, clsx.default)("hidden"),
 						head_cell: (0, clsx.default)("flex size-10 items-center justify-center text-sm font-medium"),
 						cell: (0, clsx.default)("flex size-10 items-center justify-center"),
-						day: (0, clsx.default)("size-10 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200"),
-						day_selected: (0, clsx.default)("bg-blue-600! text-white!"),
-						day_outside: (0, clsx.default)("text-gray-500!"),
-						day_disabled: (0, clsx.default)("pointer-events-none text-gray-500 opacity-50")
+						day: (0, clsx.default)("size-10 rounded-full text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"),
+						day_selected: (0, clsx.default)("bg-[color:var(--messaging-primary,var(--color-blue-600))]! text-[color:var(--messaging-primary-foreground,var(--color-white))]!"),
+						day_outside: (0, clsx.default)("text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]!"),
+						day_disabled: (0, clsx.default)("pointer-events-none text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] opacity-50")
 					},
 					initialFocus: true
 				})
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex w-full items-center gap-3 border-t border-gray-200 pt-4",
+			className: "flex w-full items-center gap-3 border-t border-[color:var(--messaging-border,var(--color-gray-200))] pt-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 				variant: "default",
 				onClick: () => onOpenChange(false),
@@ -54062,12 +54062,12 @@ function ComposerActions({ editor, onAttachment, onSend, onSchedule, canSendMess
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mr-auto" }),
 			messageHasContent && mode === "normal" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: "overlapping-children items-center justify-end rounded-sm px-2 hover:bg-gray-100 active:bg-gray-200",
+				className: "overlapping-children items-center justify-end rounded-sm px-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 				onClick: () => {
 					setSendWithEnter(!sendWithEnter);
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-messaging-6 text-gray-400",
+					className: "text-messaging-6 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 					children: sendWithEnter ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("composer_enter_to_send") }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("composer_shift_enter_to_send") })
 				})
 			}),
@@ -54109,19 +54109,19 @@ function ComposerActions({ editor, onAttachment, onSend, onSchedule, canSendMess
 						align: "end",
 						className: "w-60 p-0",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
-							className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+							className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: t("composer_schedule_send")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "px-0 py-1",
 							children: [
 								quickScheduleOptions.map((dt, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => onSchedule(dt),
 									children: formatOptionLabel(dt)
 								}, idx)),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, { className: "mx-0 my-1" }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => setCustomDialogOpen(true),
 									children: t("composer_custom_date_time")
 								})
@@ -54198,7 +54198,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 		initialText: linkInitialState.text,
 		initialUrl: linkInitialState.url
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_src.cn("flex items-center gap-1.5 border-b border-gray-200 px-2 py-1.5", "-mt-[calc(2.25rem+1px)] transition-all group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:mt-0"),
+		className: require_src.cn("flex items-center gap-1.5 border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-2 py-1.5", "-mt-[calc(2.25rem+1px)] transition-all group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:mt-0"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconToggle, {
 				size: "icon-xs",
@@ -54221,7 +54221,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 				icon: lucide_react.Strikethrough,
 				pressed: editor.isActive("strike")
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-0.5 h-4 w-px rounded-full bg-gray-300" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-0.5 h-4 w-px rounded-full bg-[color:var(--messaging-muted,var(--color-gray-300))]" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconToggle, {
 				size: "icon-xs",
 				onPressedChange: () => openLinkModal(),
@@ -54244,7 +54244,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 				pressed: editor.isActive("orderedList")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)("text-messaging-6 mr-1 ml-auto text-gray-300 transition-[opacity,transform]", isSaving ? "opacity-100" : "opacity-0", "translate-y-7 group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:translate-y-0"),
+				className: (0, clsx.default)("text-messaging-6 mr-1 ml-auto text-[color:var(--messaging-muted-foreground,var(--color-gray-300))] transition-[opacity,transform]", isSaving ? "opacity-100" : "opacity-0", "translate-y-7 group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:translate-y-0"),
 				children: t("composer_saving")
 			})
 		]
@@ -54454,14 +54454,14 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 			}),
 			require_dist$1.Placeholder.configure({
 				placeholder,
-				emptyEditorClass: require_src.cn("before:text-messaging-3 before:absolute before:text-gray-400 before:content-[attr(data-placeholder)]")
+				emptyEditorClass: require_src.cn("before:text-messaging-3 before:absolute before:text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] before:content-[attr(data-placeholder)]")
 			}),
 			Link$1.configure({
 				openOnClick: false,
 				autolink: true,
 				linkOnPaste: true,
 				HTMLAttributes: {
-					class: "text-blue-600 underline",
+					class: "text-[color:var(--messaging-primary,var(--color-blue-600))] underline",
 					target: "_blank",
 					rel: "noopener noreferrer nofollow"
 				}
@@ -54471,7 +54471,7 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 				bulletListMarker: "-"
 			}),
 			CustomMention.configure({
-				HTMLAttributes: { class: "text-blue-600 font-medium not-italic rounded-sm bg-blue-100 px-1 py-0.5" },
+				HTMLAttributes: { class: "text-[color:var(--messaging-primary,var(--color-blue-600))] font-medium not-italic rounded-sm bg-[color:var(--messaging-primary-tint,var(--color-blue-100))] px-1 py-0.5" },
 				suggestion: createMentionSuggestion(mentionableUsers ?? [], { renderImage })
 			})
 		],
@@ -54562,7 +54562,7 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 			}),
 			conversationType !== "SmsConversation" && conversationType !== "EmailConversation" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-toolbar": true,
-				className: "sticky top-0 z-10 bg-white",
+				className: "sticky top-0 z-10 bg-[color:var(--messaging-background,var(--color-white))]",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerToolbar, {
 					editor,
 					isSaving,
@@ -54631,7 +54631,7 @@ function MessagesViewComposer({ conversationId, conversationMetadata, uploader,
 	if (conversationMetadata?.["messaging_enabled?"] === false || !isLoading && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "p-4",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-messaging-4 flex h-9 items-center rounded-md border border-gray-200 bg-white p-2 shadow-sm ring-4 ring-gray-500/10",
+			className: "text-messaging-4 flex h-9 items-center rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-2 shadow-sm ring-4 ring-[color:var(--messaging-border,var(--color-gray-500))]/10",
 			children: conversationMetadata?.["messaging_enabled?"] === false ? t("send_permission_denied") : t("send_account_loading")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "hidden",
@@ -55035,7 +55035,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 		if (noDateResults || elements.length === 0 && isDateView) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-center py-2",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rounded-2xl border border-gray-200 bg-yellow-50 px-3 py-0.5 text-xs font-medium text-yellow-800",
+				className: "rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-yellow-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-yellow-800))]",
 				children: t("error_no_messages_on_date")
 			})
 		}, "no-messages"));
@@ -55043,7 +55043,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 			if ((conversationMetadata.creator?.id ?? null) !== (user?.recipient_id ?? null)) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex justify-center py-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700",
+					className: "rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 					children: t("error_joined_channel")
 				})
 			}, "joined-fallback"));
@@ -55197,7 +55197,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							fetchInProgressRef.current = true;
 							fetchNextPage();
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: t("message_load_more")
 					})
 				}, "watcher-top"),
@@ -55232,7 +55232,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							fetchInProgressRef.current = true;
 							fetchPreviousPage();
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: t("message_load_more")
 					})
 				}, "watcher-bottom")
@@ -55254,7 +55254,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							scrollToBottomNow();
 							setHasNewMessages(false);
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDown, { className: "mr-1 h-3 w-3" }), t("message_new_messages")]
 					})
 				}),
@@ -55335,7 +55335,7 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 	const messageElements = (0, react.useMemo)(() => {
 		if (!conversationMetadata) return [];
 		return messages.map((message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "relative isolate w-full rounded-xl border border-gray-200 bg-gray-50 py-2.5",
+			className: "relative isolate w-full rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-2.5",
 			onClick: (event) => {
 				if (event.target.closest("a,button,[role=button],[tabindex]") === null) navigate({
 					view: "message",
@@ -55366,18 +55366,18 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex h-full items-center justify-center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rounded-md border border-gray-200 bg-white p-4 text-center text-gray-600 shadow-sm",
+				className: "rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-4 text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-600))] shadow-sm",
 				children: errorWithStatus.success && errorWithStatus.data.status === 404 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm font-medium text-gray-900",
+					className: "text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: t("pinned_conversation_not_found")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mt-1 text-xs text-gray-500",
+					className: "mt-1 text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("pinned_conversation_deleted")
 				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm font-medium text-gray-900",
+					className: "text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: t("pinned_error")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mt-1 text-xs text-gray-500",
+					className: "mt-1 text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("pinned_error_try_again")
 				})] })
 			})
@@ -55386,8 +55386,8 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 	if (messages.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex min-h-[60vh] items-center justify-center",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "text-center text-gray-500",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "mb-2 size-8 text-gray-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "mb-2 size-8 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-sm",
 				children: t("pinned_no_messages")
 			})]
@@ -55412,7 +55412,7 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => fetchNextPage(),
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: "Load more"
 					})
 				}),
@@ -55479,7 +55479,7 @@ function TagOptionAvatar({ option: opt, context = "dropdown", renderImage }) {
 		const { emoji } = extractEmoji$1(opt.conversationName || opt.label);
 		const fallback = opt.userData?.image_url ? renderImageElement(renderImage, opt.userData.image_url, opt.label, 20, 20, "h-full w-full object-cover") : "#";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("grid shrink-0 place-items-center overflow-clip rounded bg-neutral-100", context === "dropdown" ? "size-6 text-sm" : "size-4 text-xs"),
+			className: (0, clsx.default)("grid shrink-0 place-items-center overflow-clip rounded bg-[color:var(--messaging-muted,var(--color-neutral-100))]", context === "dropdown" ? "size-6 text-sm" : "size-4 text-xs"),
 			children: emoji || fallback
 		});
 	}
@@ -55494,7 +55494,7 @@ function TagOptionAvatar({ option: opt, context = "dropdown", renderImage }) {
 function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading, isError, query, dropdownRef, onHighlight, onToggle, renderImage }) {
 	const { t } = useMessagingTranslation();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "absolute top-full right-0 left-0 z-[9999] max-h-80 translate-y-1 overflow-auto rounded-lg border border-gray-200 bg-white shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08)]",
+		className: "absolute top-full right-0 left-0 z-[9999] max-h-80 translate-y-1 overflow-auto rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08)]",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: dropdownRef,
 			className: "flex flex-1 flex-col items-start justify-start py-1",
@@ -55510,7 +55510,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 						className: "flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex flex-1 items-center justify-start gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-4 w-4 animate-pulse rounded-full bg-gray-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-4 w-24 animate-pulse rounded bg-gray-200" })]
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-4 w-4 animate-pulse rounded-full bg-[color:var(--messaging-muted,var(--color-gray-200))]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-4 w-24 animate-pulse rounded bg-[color:var(--messaging-muted,var(--color-gray-200))]" })]
 						})
 					})
 				}, i)) }),
@@ -55519,7 +55519,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 					children: t("wizard_error_loading_results")
 				}),
 				!isLoading && !isError && options.length === 0 && query.trim() !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "p-2 text-sm text-gray-500",
+					className: "p-2 text-sm text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("wizard_no_results")
 				}),
 				options.map((opt, idx) => {
@@ -55530,7 +55530,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 						onMouseEnter: () => onHighlight(idx),
 						onClick: () => onToggle(opt),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: `flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2 transition-colors duration-150 ${highlight === idx ? "border border-blue-200 bg-blue-50" : isSelected ? "bg-gray-50" : "hover:bg-gray-50 active:bg-gray-100"}`,
+							className: `flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2 transition-colors duration-150 ${highlight === idx ? "border border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]" : isSelected ? "bg-[color:var(--messaging-muted,var(--color-gray-50))]" : "hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]"}`,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex flex-1 items-center justify-start gap-2",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagOptionAvatar, {
@@ -55538,25 +55538,25 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 									context: "dropdown",
 									renderImage
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm leading-tight font-medium text-gray-900",
+									className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm leading-tight font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 									children: [
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "mr-1",
 											children: opt.label
 										}),
 										opt.userData?.phone && opt.label !== opt.userData.phone && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "font-normal text-gray-500",
+											className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 											children: opt.userData.phone
 										}),
 										opt.userData?.email && !opt.userData?.phone && opt.label !== opt.userData.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "font-normal text-gray-500",
+											className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 											children: opt.userData.email
 										})
 									]
 								})]
 							}), isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "relative h-4 w-5 overflow-hidden",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "absolute top-0 left-[3px] h-4 w-4 text-black" })
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "absolute top-0 left-[3px] h-4 w-4 text-[color:var(--messaging-foreground,var(--color-black))]" })
 							})]
 						})
 					}, opt.id);
@@ -55675,7 +55675,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-1 flex-wrap gap-1",
 				children: [selectedOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "inline-flex min-h-6 items-center justify-center gap-[3px] rounded-md border border-gray-300 bg-white py-0.5 pr-1 pl-[5px]",
+					className: "inline-flex min-h-6 items-center justify-center gap-[3px] rounded-md border border-[color:var(--messaging-border,var(--color-gray-300))] bg-[color:var(--messaging-background,var(--color-white))] py-0.5 pr-1 pl-[5px]",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-start gap-[5px]",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagOptionAvatar, {
@@ -55683,18 +55683,18 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 							context: "chip",
 							renderImage
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm/tight leading-tight font-medium text-slate-700",
+							className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm/tight leading-tight font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "mr-1",
 									children: opt.label
 								}),
 								opt.userData?.phone && opt.label !== opt.userData.phone && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "font-normal text-gray-500",
+									className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 									children: opt.userData.phone
 								}),
 								opt.userData?.email && !opt.userData?.phone && opt.label !== opt.userData.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "font-normal text-gray-500",
+									className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 									children: opt.userData.email
 								})
 							]
@@ -55705,8 +55705,8 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 							e.stopPropagation();
 							onSelectionChange(selectedOptions.filter((selected) => selected.id !== opt.id));
 						},
-						className: "inline-flex flex-col items-start justify-start overflow-hidden rounded-sm p-0.5 hover:bg-gray-100 active:bg-gray-200",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-3 w-3 text-gray-900" })
+						className: "inline-flex flex-col items-start justify-start overflow-hidden rounded-sm p-0.5 hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-3 w-3 text-[color:var(--messaging-foreground,var(--color-gray-900))]" })
 					})]
 				}, opt.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: inputRef,
@@ -55719,7 +55719,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 					onKeyDown: handleKeyDown,
 					onFocus: openDropdown,
 					placeholder,
-					className: "m-0 h-6 w-full min-w-48 flex-1 border-none bg-transparent px-0 py-0 text-sm leading-6 text-gray-900 outline-none placeholder:text-gray-500 focus:ring-0 focus:outline-none",
+					className: "m-0 h-6 w-full min-w-48 flex-1 border-none bg-transparent px-0 py-0 text-sm leading-6 text-[color:var(--messaging-foreground,var(--color-gray-900))] outline-none placeholder:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] focus:ring-0 focus:outline-none",
 					style: {
 						height: "24px",
 						lineHeight: "24px"
@@ -55727,7 +55727,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 				})]
 			}), showChevron && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex flex-shrink-0 items-center justify-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: `h-3 w-3 text-gray-400 transition-transform duration-200 ${open ? "rotate-180" : ""}` })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: `h-3 w-3 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] transition-transform duration-200 ${open ? "rotate-180" : ""}` })
 			})]
 		}), open && (query.trim() !== "" || options.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagMultiSelectDropdown, {
 			options,
@@ -55915,9 +55915,9 @@ function RecipientConfigBar({ selectedRecipients, onRecipientsChange, searchUser
 		};
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-h-14 items-center justify-start gap-2 self-stretch border-b border-gray-200 bg-gray-50 px-6 py-3",
+		className: "flex min-h-14 items-center justify-start gap-2 self-stretch border-b border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-6 py-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "justify-start text-xs leading-tight font-normal text-slate-600",
+			className: "justify-start text-xs leading-tight font-normal text-[color:var(--messaging-muted-foreground,var(--color-slate-600))]",
 			children: t("recipient_to")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "relative flex-1",
@@ -55978,7 +55978,7 @@ function ScheduledMessageConfirmDialog({ open, onOpenChange, title, description,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "grid gap-3",
 			children: [content, description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-sm text-gray-600",
+				className: "text-sm text-[color:var(--messaging-muted-foreground,var(--color-gray-600))]",
 				children: description
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -56011,16 +56011,16 @@ function MessageTypeBadge({ messageKind, messageType }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mail, { className: "h-3 w-3 text-pink-600" })
 	});
 	if (messageKind === "public-channel" || messageType === "ChannelMessage") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_src.cn("inline-flex items-center justify-center rounded-md border px-1.5 py-1", "border-blue-200 bg-blue-50"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "h-3 w-3 text-blue-700" })
+		className: require_src.cn("inline-flex items-center justify-center rounded-md border px-1.5 py-1", "border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "h-3 w-3 text-[color:var(--messaging-primary,var(--color-blue-700))]" })
 	});
 	if (messageKind === "private-channel") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "inline-flex items-center justify-center rounded-md border border-purple-200 bg-purple-50 px-1.5 py-1",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Lock, { className: "h-3 w-3 text-purple-700" })
 	});
 	if (messageKind === "broadcast") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "inline-flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-1.5 py-1",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "h-3 w-3 text-gray-700" })
+		className: "inline-flex items-center justify-center rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-1.5 py-1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "h-3 w-3 text-[color:var(--messaging-foreground,var(--color-gray-700))]" })
 	});
 	return null;
 }
@@ -56045,7 +56045,7 @@ function OverdueBadge({ scheduledAt }) {
 //#region ../../messaging/ui/src/components/ScheduledMessageConversationAvatar.tsx
 function ScheduledMessageConversationAvatar({ size, fullConversation, effectiveConversation: _effectiveConversation, otherUsers, channelEmoji, renderImage }) {
 	if (!fullConversation) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_src.cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[#F5F6F9] text-base leading-5 ring-1 ring-gray-200 ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
+		className: require_src.cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[#F5F6F9] text-base leading-5 ring-1 ring-[color:var(--messaging-border,var(--color-gray-200))] ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
 		children: channelEmoji
 	});
 	const { isChannel } = getMessageType(fullConversation);
@@ -56063,7 +56063,7 @@ function ScheduledMessageConversationAvatar({ size, fullConversation, effectiveC
 			className: "h-full w-full object-cover"
 		}) : "#";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_src.cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-gray-50 text-base leading-5 ring-1 ring-gray-200 ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
+			className: require_src.cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-50))] text-base leading-5 ring-1 ring-[color:var(--messaging-border,var(--color-gray-200))] ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
 			children: emoji || fullConversation.avatar_emoji || fallback
 		});
 	}
@@ -56090,12 +56090,12 @@ function ScheduledMessageTinyAttachment({ attachment }) {
 	if (isImage || isVideo) {
 		const thumb = attachment.thumbnail_url || attachment.image_url || void 0;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative size-8 overflow-hidden rounded-md border border-gray-200",
+			className: "relative size-8 overflow-hidden rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))]",
 			children: [thumb ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 				src: thumb,
 				alt: attachment.filename,
 				className: "size-full object-cover"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-full bg-gray-100" }), isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-full bg-[color:var(--messaging-muted,var(--color-gray-100))]" }), isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, {
 				className: "absolute [inset:0] top-0 left-0 m-auto grid size-4 place-items-center text-white drop-shadow",
 				fill: "currentColor"
 			})]
@@ -56105,10 +56105,10 @@ function ScheduledMessageTinyAttachment({ attachment }) {
 	const FileIcon = fileConfig.icon;
 	const ext = getFileExtensionFromFilename(attachment.filename).slice(0, 4).toUpperCase();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "isolate flex size-8 shrink-0 flex-col rounded-md border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300",
+		className: "isolate flex size-8 shrink-0 flex-col rounded-md border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-t-[0.1875rem] bg-gradient-to-b from-gray-100 to-gray-50",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "-mb-1.5 size-3 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+			className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-t-[0.1875rem] bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { className: "-mb-1.5 size-3 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: require_src.cn("z-10 m-px mt-0 flex h-3 items-center justify-center rounded-[0.25rem] border text-center text-[9px] leading-3 font-bold text-white text-shadow-2xs", fileConfig.borderColor),
 			style: { background: fileConfig.bgColor },
@@ -56125,7 +56125,7 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		"aria-label": t("scheduled_action_more_options"),
-		className: "grid h-6 w-6 place-items-center rounded-md text-gray-500 hover:bg-gray-100 active:bg-gray-200",
+		className: "grid h-6 w-6 place-items-center rounded-md text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 		onClick: (event) => {
 			event.stopPropagation();
 			setOpen(true);
@@ -56169,7 +56169,7 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": t("scheduled_action_more_options"),
-			className: "grid h-6 w-6 place-items-center rounded-md text-gray-500 hover:bg-gray-100 active:bg-gray-200",
+			className: "grid h-6 w-6 place-items-center rounded-md text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EllipsisVertical, { className: "h-4 w-4" })
 		})
@@ -56180,36 +56180,36 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 			className: "px-0 py-1",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onNavigateConversation();
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_go_to_conversation")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_go_to_conversation")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onNavigateEdit();
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_edit_message")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_edit_message")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onReschedule();
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarClock, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_reschedule")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarClock, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_reschedule")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onSendNow();
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Send, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_send_now")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Send, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_send_now")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
@@ -56352,10 +56352,10 @@ function ScheduledMessageRow({ message, onToast }) {
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex min-w-0 flex-col justify-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-messaging-2 capsize mb-2 text-gray-900",
+						className: "text-messaging-2 capsize mb-2 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					}), message.body && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "-my-1 line-clamp-1 py-1 text-xs leading-4 text-gray-900",
+						className: "-my-1 line-clamp-1 py-1 text-xs leading-4 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBody, {
 							mentions: message.mentioned_recipients,
 							children: message.body
@@ -56367,7 +56367,7 @@ function ScheduledMessageRow({ message, onToast }) {
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverdueBadge, { scheduledAt }),
 					scheduledAt && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-[9px] leading-3 font-medium text-gray-400",
+						className: "text-[9px] leading-3 font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 						children: formatScheduledShort(scheduledAt)
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTypeBadge, {
@@ -56408,7 +56408,7 @@ function ScheduledMessageRow({ message, onToast }) {
 			content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-sm font-semibold text-black",
+					className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-black))]",
 					children: t("scheduled_send_message_to")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "inline-flex items-center gap-2",
@@ -56416,7 +56416,7 @@ function ScheduledMessageRow({ message, onToast }) {
 						size: "sm",
 						...avatarProps
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-sm font-semibold text-gray-900",
+						className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					})]
 				})]
@@ -56446,7 +56446,7 @@ function ScheduledMessageRow({ message, onToast }) {
 			content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-sm font-semibold text-black",
+					className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-black))]",
 					children: t("scheduled_delete_message_to")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "inline-flex items-center gap-2",
@@ -56454,7 +56454,7 @@ function ScheduledMessageRow({ message, onToast }) {
 						size: "sm",
 						...avatarProps
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-sm font-semibold text-gray-900",
+						className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					})]
 				})]
@@ -56484,7 +56484,7 @@ function ScheduledMessagesView({ onToast }) {
 	if (messages.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex min-h-[60vh] items-center justify-center",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-center text-gray-500",
+			className: "text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 			children: t("scheduled_no_messages")
 		})
 	});
@@ -56494,7 +56494,7 @@ function ScheduledMessagesView({ onToast }) {
 			className: "flex flex-col gap-2",
 			children: [
 				messages.map((message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "relative isolate w-full rounded-xl border border-gray-200 bg-gray-50 p-4",
+					className: "relative isolate w-full rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] p-4",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScheduledMessageRow, {
 						message,
 						onToast
@@ -56513,7 +56513,7 @@ function ScheduledMessagesView({ onToast }) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => fetchNextPage(),
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: "Load more"
 					})
 				}),
@@ -56871,4 +56871,4 @@ Object.defineProperty(exports, "useMessagingConfig", {
 	}
 });
-//# sourceMappingURL=MessagingScreen-D_Y3Coa6.cjs.map
+//# sourceMappingURL=MessagingScreen-_1KfmCJQ.cjs.map