feat: delete memories and theme issues across the app (#449)10-02-fix_ui_theme_issues_across_the_app

# Add document deletion functionality and fix UI theme issues

This PR adds the ability to delete documents and their associated memories across all content card types (Google Docs, Notes, Tweets, and Websites). Each card now includes:

- A delete button that appears on hover
- A confirmation dialog to prevent accidental deletions
- Proper event handling to avoid triggering card clicks when using delete controls

Additionally, this PR fixes various UI theme issues:

- Updates button styling in the ActionButtons component
- Improves theme consistency by replacing hardcoded colors with theme variables
- Fixes text color issues in login page components
- Ensures proper color contrast in various UI elements

The masonry layout was also improved to properly re-render when documents are removed.

15 files changed, 383 insertions, 132 deletions

diff --git a/apps/web/components/content-cards/google-docs.tsx b/apps/web/components/content-cards/google-docs.tsx
index 22f06f77..0306876d 100644
--- a/apps/web/components/content-cards/google-docs.tsx
+++ b/apps/web/components/content-cards/google-docs.tsx
@@ -2,8 +2,18 @@
 
 import { Card, CardContent } from "@repo/ui/components/card"
 import { Badge } from "@repo/ui/components/badge"
-import { ExternalLink, FileText, Brain } from "lucide-react"
-import { useState } from "react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/components/alert-dialog"
+import { ExternalLink, FileText, Brain, Trash2 } from "lucide-react"
 import { cn } from "@lib/utils"
 import { colors } from "@repo/ui/memory-graph/constants"
 import { getPastelBackgroundColor } from "../memories-utils"
@@ -14,6 +24,7 @@ interface GoogleDocsCardProps {
 	description?: string | null
 	className?: string
 	onClick?: () => void
+	onDelete?: () => void
 	showExternalLink?: boolean
 	activeMemories?: Array<{ id: string; isForgotten?: boolean }>
 	lastModified?: string | Date
@@ -25,12 +36,11 @@ export const GoogleDocsCard = ({
 	description,
 	className,
 	onClick,
+	onDelete,
 	showExternalLink = true,
 	activeMemories,
 	lastModified,
 }: GoogleDocsCardProps) => {
-	const [imageError, setImageError] = useState(false)
-
 	const handleCardClick = () => {
 		if (onClick) {
 			onClick()
@@ -57,6 +67,54 @@ export const GoogleDocsCard = ({
 				backgroundColor: getPastelBackgroundColor(url || title || "googledocs"),
 			}}
 		>
+			{onDelete && (
+				<AlertDialog>
+					<AlertDialogTrigger asChild>
+						<button
+							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
+							onClick={(e) => {
+								e.stopPropagation()
+							}}
+							style={{
+								color: colors.text.muted,
+								backgroundColor: "rgba(255, 255, 255, 0.1)",
+								backdropFilter: "blur(4px)",
+							}}
+							type="button"
+						>
+							<Trash2 className="w-3.5 h-3.5" />
+						</button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Delete Document</AlertDialogTitle>
+							<AlertDialogDescription>
+								Are you sure you want to delete this document and all its
+								related memories? This action cannot be undone.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel
+								onClick={(e) => {
+									e.stopPropagation()
+								}}
+							>
+								Cancel
+							</AlertDialogCancel>
+							<AlertDialogAction
+								className="bg-red-600 hover:bg-red-700 text-white"
+								onClick={(e) => {
+									e.stopPropagation()
+									onDelete()
+								}}
+							>
+								Delete
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
+
 			<CardContent className="p-0">
 				<div className="px-4 border-b border-white/10">
 					<div className="flex items-center justify-between">
@@ -99,16 +157,18 @@ export const GoogleDocsCard = ({
 								</span>
 							</div>
 						</div>
-						{showExternalLink && (
-							<button
-								onClick={handleExternalLinkClick}
-								className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-white/10 flex-shrink-0"
-								type="button"
-								aria-label="Open in Google Docs"
-							>
-								<ExternalLink className="w-4 h-4" />
-							</button>
-						)}
+						<div className="flex items-center gap-1">
+							{showExternalLink && (
+								<button
+									onClick={handleExternalLinkClick}
+									className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-white/10 flex-shrink-0"
+									type="button"
+									aria-label="Open in Google Docs"
+								>
+									<ExternalLink className="w-4 h-4" />
+								</button>
+							)}
+						</div>
 					</div>
 				</div>
 
diff --git a/apps/web/components/content-cards/note.tsx b/apps/web/components/content-cards/note.tsx
index e7703d9b..b0014bf6 100644
--- a/apps/web/components/content-cards/note.tsx
+++ b/apps/web/components/content-cards/note.tsx
@@ -1,8 +1,19 @@
 import { Badge } from "@repo/ui/components/badge"
 import { Card, CardContent, CardHeader } from "@repo/ui/components/card"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/components/alert-dialog"
 
 import { colors } from "@repo/ui/memory-graph/constants"
-import { Brain, ExternalLink } from "lucide-react"
+import { Brain, ExternalLink, Trash2 } from "lucide-react"
 import { cn } from "@lib/utils"
 import {
 	formatDate,
@@ -32,6 +43,7 @@ export const NoteCard = ({
 	activeMemories,
 	forgottenMemories,
 	onOpenDetails,
+	onDelete,
 }: NoteCardProps) => {
 	return (
 		<Card
@@ -47,6 +59,52 @@ export const NoteCard = ({
 				width: width,
 			}}
 		>
+			<AlertDialog>
+				<AlertDialogTrigger asChild>
+					<button
+						className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 group-hover:cursor-pointer transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
+						onClick={(e) => {
+							e.stopPropagation()
+						}}
+						style={{
+							color: colors.text.muted,
+							backgroundColor: "rgba(255, 255, 255, 0.1)",
+							backdropFilter: "blur(4px)",
+						}}
+						type="button"
+					>
+						<Trash2 className="w-3.5 h-3.5" />
+					</button>
+				</AlertDialogTrigger>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Document</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this document and all its related
+							memories? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel
+							onClick={(e) => {
+								e.stopPropagation()
+							}}
+						>
+							Cancel
+						</AlertDialogCancel>
+						<AlertDialogAction
+							className="bg-red-600 hover:bg-red-700 text-white"
+							onClick={(e) => {
+								e.stopPropagation()
+								onDelete(document)
+							}}
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
 			<CardHeader className="relative z-10 px-0 pb-0">
 				<div className="flex items-center justify-between gap-2">
 					<div className="flex items-center gap-1">
@@ -59,23 +117,25 @@ export const NoteCard = ({
 							{document.title || "Untitled Document"}
 						</p>
 					</div>
-					{document.url && (
-						<button
-							className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded"
-							onClick={(e) => {
-								e.stopPropagation()
-								const sourceUrl = getSourceUrl(document)
-								window.open(sourceUrl ?? undefined, "_blank")
-							}}
-							style={{
-								backgroundColor: "rgba(255, 255, 255, 0.05)",
-								color: colors.text.secondary,
-							}}
-							type="button"
-						>
-							<ExternalLink className="w-3 h-3" />
-						</button>
-					)}
+					<div className="flex items-center gap-1">
+						{document.url && (
+							<button
+								className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded"
+								onClick={(e) => {
+									e.stopPropagation()
+									const sourceUrl = getSourceUrl(document)
+									window.open(sourceUrl ?? undefined, "_blank")
+								}}
+								style={{
+									backgroundColor: "rgba(255, 255, 255, 0.05)",
+									color: colors.text.secondary,
+								}}
+								type="button"
+							>
+								<ExternalLink className="w-3 h-3" />
+							</button>
+						)}
+					</div>
 					<div className="flex items-center gap-2 text-[10px] text-muted-foreground">
 						<span>{formatDate(document.createdAt)}</span>
 					</div>
diff --git a/apps/web/components/content-cards/tweet.tsx b/apps/web/components/content-cards/tweet.tsx
index 3f46d6cc..34db9eb5 100644
--- a/apps/web/components/content-cards/tweet.tsx
+++ b/apps/web/components/content-cards/tweet.tsx
@@ -14,7 +14,18 @@ import {
 	enrichTweet,
 } from "react-tweet"
 import { Badge } from "@repo/ui/components/badge"
-import { Brain } from "lucide-react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/components/alert-dialog"
+import { Brain, Trash2 } from "lucide-react"
 import { colors } from "@repo/ui/memory-graph/constants"
 import { getPastelBackgroundColor } from "../memories-utils"
 
@@ -71,18 +82,69 @@ const CustomTweet = ({
 export const TweetCard = ({
 	data,
 	activeMemories,
+	onDelete,
 }: {
 	data: Tweet
 	activeMemories?: Array<{ id: string; isForgotten?: boolean }>
+	onDelete?: () => void
 }) => {
 	return (
 		<div
-			className="relative transition-all"
+			className="relative transition-all group"
 			style={{
 				backgroundColor: getPastelBackgroundColor(data.id_str || "tweet"),
 			}}
 		>
 			<CustomTweet components={{}} tweet={data} />
+
+			{onDelete && (
+				<AlertDialog>
+					<AlertDialogTrigger asChild>
+						<button
+							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
+							onClick={(e) => {
+								e.stopPropagation()
+							}}
+							style={{
+								color: colors.text.muted,
+								backgroundColor: "rgba(255, 255, 255, 0.1)",
+								backdropFilter: "blur(4px)",
+							}}
+							type="button"
+						>
+							<Trash2 className="w-3.5 h-3.5" />
+						</button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Delete Document</AlertDialogTitle>
+							<AlertDialogDescription>
+								Are you sure you want to delete this document and all its
+								related memories? This action cannot be undone.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel
+								onClick={(e) => {
+									e.stopPropagation()
+								}}
+							>
+								Cancel
+							</AlertDialogCancel>
+							<AlertDialogAction
+								className="bg-red-600 hover:bg-red-700 text-white"
+								onClick={(e) => {
+									e.stopPropagation()
+									onDelete()
+								}}
+							>
+								Delete
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
+
 			{activeMemories && activeMemories.length > 0 && (
 				<div className="absolute bottom-2 left-4 z-10">
 					<Badge
diff --git a/apps/web/components/content-cards/website.tsx b/apps/web/components/content-cards/website.tsx
index f36cd247..b3ee7df6 100644
--- a/apps/web/components/content-cards/website.tsx
+++ b/apps/web/components/content-cards/website.tsx
@@ -1,10 +1,22 @@
 "use client"
 
 import { Card, CardContent } from "@repo/ui/components/card"
-import { ExternalLink } from "lucide-react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/components/alert-dialog"
+import { ExternalLink, Trash2 } from "lucide-react"
 import { useState } from "react"
 import { cn } from "@lib/utils"
 import { getPastelBackgroundColor } from "../memories-utils"
+import { colors } from "@repo/ui/memory-graph/constants"
 
 interface WebsiteCardProps {
 	title: string
@@ -13,6 +25,7 @@ interface WebsiteCardProps {
 	description?: string
 	className?: string
 	onClick?: () => void
+	onDelete?: () => void
 	showExternalLink?: boolean
 }
 
@@ -23,6 +36,7 @@ export const WebsiteCard = ({
 	description,
 	className,
 	onClick,
+	onDelete,
 	showExternalLink = true,
 }: WebsiteCardProps) => {
 	const [imageError, setImageError] = useState(false)
@@ -51,7 +65,7 @@ export const WebsiteCard = ({
 	return (
 		<Card
 			className={cn(
-				"cursor-pointer transition-all hover:shadow-md group overflow-hidden py-0",
+				"cursor-pointer transition-all hover:shadow-md group overflow-hidden py-0 relative",
 				className,
 			)}
 			onClick={handleCardClick}
@@ -59,6 +73,54 @@ export const WebsiteCard = ({
 				backgroundColor: getPastelBackgroundColor(url || title || "website"),
 			}}
 		>
+			{onDelete && (
+				<AlertDialog>
+					<AlertDialogTrigger asChild>
+						<button
+							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
+							onClick={(e) => {
+								e.stopPropagation()
+							}}
+							style={{
+								color: colors.text.muted,
+								backgroundColor: "rgba(255, 255, 255, 0.1)",
+								backdropFilter: "blur(4px)",
+							}}
+							type="button"
+						>
+							<Trash2 className="w-3.5 h-3.5" />
+						</button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Delete Document</AlertDialogTitle>
+							<AlertDialogDescription>
+								Are you sure you want to delete this document and all its
+								related memories? This action cannot be undone.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel
+								onClick={(e) => {
+									e.stopPropagation()
+								}}
+							>
+								Cancel
+							</AlertDialogCancel>
+							<AlertDialogAction
+								className="bg-red-600 hover:bg-red-700 text-white"
+								onClick={(e) => {
+									e.stopPropagation()
+									onDelete()
+								}}
+							>
+								Delete
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
+
 			<CardContent className="p-0">
 				{image && !imageError && (
 					<div className="relative h-38 bg-gray-100 overflow-hidden">
@@ -75,16 +137,18 @@ export const WebsiteCard = ({
 				<div className="px-4 py-2 space-y-2">
 					<div className="font-semibold text-sm line-clamp-2 leading-tight flex items-center justify-between">
 						{title}
-						{showExternalLink && (
-							<button
-								onClick={handleExternalLinkClick}
-								className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-gray-100 flex-shrink-0"
-								type="button"
-								aria-label="Open in new tab"
-							>
-								<ExternalLink className="w-3 h-3" />
-							</button>
-						)}
+						<div className="flex items-center gap-1">
+							{showExternalLink && (
+								<button
+									onClick={handleExternalLinkClick}
+									className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-gray-100 flex-shrink-0"
+									type="button"
+									aria-label="Open in new tab"
+								>
+									<ExternalLink className="w-3 h-3" />
+								</button>
+							)}
+						</div>
 					</div>
 
 					{description && (
diff --git a/apps/web/components/masonry-memory-list.tsx b/apps/web/components/masonry-memory-list.tsx
index 2f634f74..93326e49 100644
--- a/apps/web/components/masonry-memory-list.tsx
+++ b/apps/web/components/masonry-memory-list.tsx
@@ -63,6 +63,7 @@ const DocumentCard = memo(
 					description={document.content}
 					activeMemories={activeMemories}
 					lastModified={document.updatedAt || document.createdAt}
+					onDelete={() => onDelete(document)}
 				/>
 			)
 		}
@@ -77,6 +78,7 @@ const DocumentCard = memo(
 						document.metadata?.sm_internal_twitter_metadata as unknown as Tweet
 					}
 					activeMemories={activeMemories}
+					onDelete={() => onDelete(document)}
 				/>
 			)
 		}
@@ -87,6 +89,7 @@ const DocumentCard = memo(
 					url={document.url}
 					title={document.title || "Untitled Document"}
 					image={document.ogImage}
+					onDelete={() => onDelete(document)}
 				/>
 			)
 		}
@@ -212,9 +215,7 @@ export const MasonryMemoryList = ({
 				) : isLoading ? (
 					<div className="h-full flex items-center justify-center p-4">
 						<div className="rounded-xl overflow-hidden">
-							<div
-								className="relative z-10 px-6 py-4"
-							>
+							<div className="relative z-10 px-6 py-4">
 								<div className="flex items-center gap-2">
 									<Sparkles className="w-4 h-4 animate-spin text-blue-400" />
 									<span>Loading memory list...</span>
@@ -232,6 +233,7 @@ export const MasonryMemoryList = ({
 						data-theme="light"
 					>
 						<Masonry
+							key={`masonry-${filteredDocuments.length}-${filteredDocuments.map((d) => d.id).join(",")}`}
 							items={filteredDocuments}
 							render={renderDocumentCard}
 							columnGutter={16}
diff --git a/apps/web/components/views/add-memory/action-buttons.tsx b/apps/web/components/views/add-memory/action-buttons.tsx
index fc901ba9..3f93fe17 100644
--- a/apps/web/components/views/add-memory/action-buttons.tsx
+++ b/apps/web/components/views/add-memory/action-buttons.tsx
@@ -1,67 +1,67 @@
-import { Button } from '@repo/ui/components/button';
-import { Loader2, type LucideIcon } from 'lucide-react';
-import { motion } from 'motion/react';
+import { Button } from "@repo/ui/components/button"
+import { Loader2, type LucideIcon } from "lucide-react"
+import { motion } from "motion/react"
 
 interface ActionButtonsProps {
-  onCancel: () => void;
-  onSubmit?: () => void;
-  submitText: string;
-  submitIcon?: LucideIcon;
-  isSubmitting?: boolean;
-  isSubmitDisabled?: boolean;
-  submitType?: 'button' | 'submit';
-  className?: string;
+	onCancel: () => void
+	onSubmit?: () => void
+	submitText: string
+	submitIcon?: LucideIcon
+	isSubmitting?: boolean
+	isSubmitDisabled?: boolean
+	submitType?: "button" | "submit"
+	className?: string
 }
 
 export function ActionButtons({
-  onCancel,
-  onSubmit,
-  submitText,
-  submitIcon: SubmitIcon,
-  isSubmitting = false,
-  isSubmitDisabled = false,
-  submitType = 'submit',
-  className = '',
+	onCancel,
+	onSubmit,
+	submitText,
+	submitIcon: SubmitIcon,
+	isSubmitting = false,
+	isSubmitDisabled = false,
+	submitType = "submit",
+	className = "",
 }: ActionButtonsProps) {
-  return (
-    <div className={`flex gap-3 order-1 sm:order-2 justify-end ${className}`}>
-      <Button
-        className="hover:bg-foreground/10 border-none flex-1 sm:flex-initial"
-        onClick={onCancel}
-        type="button"
-        variant="ghost"
-      >
-        Cancel
-      </Button>
+	return (
+		<div className={`flex gap-3 order-1 sm:order-2 justify-end ${className}`}>
+			<Button
+				className="hover:bg-foreground/10 border-none flex-1 sm:flex-initial"
+				onClick={onCancel}
+				type="button"
+				variant="ghost"
+			>
+				Cancel
+			</Button>
 
-      <motion.div
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        className="flex-1 sm:flex-initial"
-      >
-        <Button
-          className="bg-foreground hover:bg-foreground/20 border-foreground/20 w-full"
-          disabled={isSubmitting || isSubmitDisabled}
-          onClick={submitType === 'button' ? onSubmit : undefined}
-          type={submitType}
-        >
-          {isSubmitting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              {submitText.includes('Add')
-                ? 'Adding...'
-                : submitText.includes('Upload')
-                  ? 'Uploading...'
-                  : 'Processing...'}
-            </>
-          ) : (
-            <>
-              {SubmitIcon && <SubmitIcon className="h-4 w-4 mr-2" />}
-              {submitText}
-            </>
-          )}
-        </Button>
-      </motion.div>
-    </div>
-  );
+			<motion.div
+				whileHover={{ scale: 1.05 }}
+				whileTap={{ scale: 0.95 }}
+				className="flex-1 sm:flex-initial"
+			>
+				<Button
+					className="w-full"
+					disabled={isSubmitting || isSubmitDisabled}
+					onClick={submitType === "button" ? onSubmit : undefined}
+					type={submitType}
+				>
+					{isSubmitting ? (
+						<>
+							<Loader2 className="h-4 w-4 animate-spin mr-2" />
+							{submitText.includes("Add")
+								? "Adding..."
+								: submitText.includes("Upload")
+									? "Uploading..."
+									: "Processing..."}
+						</>
+					) : (
+						<>
+							{SubmitIcon && <SubmitIcon className="h-4 w-4 mr-2" />}
+							{submitText}
+						</>
+					)}
+				</Button>
+			</motion.div>
+		</div>
+	)
 }
diff --git a/apps/web/components/views/add-memory/index.tsx b/apps/web/components/views/add-memory/index.tsx
index a78e7629..d9c6aef8 100644
--- a/apps/web/components/views/add-memory/index.tsx
+++ b/apps/web/components/views/add-memory/index.tsx
@@ -88,7 +88,10 @@ export function AddMemoryView({
 	const [newProjectName, setNewProjectName] = useState("")
 
 	// Check memory limits
-	const { data: memoriesCheck } = fetchMemoriesFeature(autumn, !autumn.isLoading)
+	const { data: memoriesCheck } = fetchMemoriesFeature(
+		autumn,
+		!autumn.isLoading,
+	)
 
 	const memoriesUsed = memoriesCheck?.usage ?? 0
 	const memoriesLimit = memoriesCheck?.included_usage ?? 0
@@ -757,7 +760,7 @@ export function AddMemoryView({
 												{({ state, handleChange, handleBlur }) => (
 													<>
 														<Input
-															className={`bg-black/5 border-black/10 text-black ${
+															className={`bg-black/5 border-black/10 ${
 																addContentMutation.isPending ? "opacity-50" : ""
 															}`}
 															disabled={addContentMutation.isPending}
diff --git a/packages/ui/button/external-auth.tsx b/packages/ui/button/external-auth.tsx
index e25219a6..04f05af3 100644
--- a/packages/ui/button/external-auth.tsx
+++ b/packages/ui/button/external-auth.tsx
@@ -15,13 +15,13 @@ export function ExternalAuthButton({
 	return (
 		<Button
 			className={cn(
-				"flex flex-grow cursor-pointer max-w-full bg-sm-shark items-center justify-center gap-[0.625rem] rounded-xl border-[1.5px] border-sm-white px-6 py-5 hover:bg-sm-shark-alt",
+				"flex flex-grow cursor-pointer max-w-full bg-background items-center justify-center gap-[0.625rem] rounded-xl border-[1.5px] border-border px-6 py-5 hover:bg-accent",
 				className,
 			)}
 			{...props}
 		>
 			<span className="aspect-square">{authIcon}</span>
-			<span className="text-sm-white text-left text-[0.875rem] tracking-[-0.2px] leading-[1.25rem]">
+			<span className="text-foreground text-left text-[0.875rem] tracking-[-0.2px] leading-[1.25rem]">
 				Continue with {authProvider}
 			</span>
 		</Button>
diff --git a/packages/ui/components/text-separator.tsx b/packages/ui/components/text-separator.tsx
index 87ffb772..6e3e671b 100644
--- a/packages/ui/components/text-separator.tsx
+++ b/packages/ui/components/text-separator.tsx
@@ -14,11 +14,11 @@ export function TextSeparator({
 			className={cn("flex gap-4 items-center justify-center", className)}
 			{...props}
 		>
-			<div className="w-full h-px bg-sm-gray" />
-			<span className="text-sm-gray text-[0.75rem] uppercase tracking-[-0.2px] leading-[0.875rem]">
+			<div className="w-full h-px bg-border" />
+			<span className="text-muted-foreground text-[0.75rem] uppercase tracking-[-0.2px] leading-[0.875rem]">
 				{text}
 			</span>
-			<div className="w-full h-px bg-sm-gray" />
+			<div className="w-full h-px bg-border" />
 		</div>
 	);
 }
diff --git a/packages/ui/input/labeled-input.tsx b/packages/ui/input/labeled-input.tsx
index 8b465f4b..84f205fe 100644
--- a/packages/ui/input/labeled-input.tsx
+++ b/packages/ui/input/labeled-input.tsx
@@ -21,11 +21,11 @@ export function LabeledInput({
 }: LabeledInputProps) {
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<Label1Regular className="text-sm-white">{label}</Label1Regular>
+			<Label1Regular className="text-foreground">{label}</Label1Regular>
 
 			<Input
 				className={cn(
-					"w-full leading-[1.375rem] tracking-[-0.4px] rounded-2xl p-5 placeholder:text-sm-gray text-sm-white border-[1.5px] border-sm-gray disabled:cursor-not-allowed disabled:opacity-50",
+					"w-full leading-[1.375rem] tracking-[-0.4px] rounded-2xl p-5 placeholder:text-muted-foreground text-foreground border-[1.5px] border-border disabled:cursor-not-allowed disabled:opacity-50",
 					inputProps?.className,
 				)}
 				placeholder={inputPlaceholder}
diff --git a/packages/ui/pages/login.tsx b/packages/ui/pages/login.tsx
index 74765da1..2179f177 100644
--- a/packages/ui/pages/login.tsx
+++ b/packages/ui/pages/login.tsx
@@ -188,10 +188,10 @@ export function LoginPage({
 			{submittedEmail ? (
 				<div className="w-full max-w-md lg:max-w-none lg:col-span-5 flex flex-col gap-4 lg:gap-6 min-h-2/3 ">
 					<div className="flex flex-col gap-2 text-center lg:text-left">
-						<Title1Bold className="text-sm-white">Almost there!</Title1Bold>
-						<HeadingH3Medium className="text-sm-gray">
+						<Title1Bold className="text-foreground">Almost there!</Title1Bold>
+						<HeadingH3Medium className="text-muted-foreground">
 							Click the magic link we've sent to{" "}
-							<span className="text-sm-white">{submittedEmail}</span>.
+							<span className="text-foreground">{submittedEmail}</span>.
 						</HeadingH3Medium>
 					</div>
 
@@ -221,11 +221,11 @@ export function LoginPage({
 			) : (
 				<div className="w-full max-w-md lg:max-w-none lg:col-span-5 flex flex-col gap-4 lg:gap-6 min-h-2/3 ">
 					<div className="flex flex-col gap-2 text-center lg:text-left md:mb-12">
-						<Title1Bold className="text-sm-white flex flex-col justify-center md:justify-start md:flex-row items-center gap-3">
+						<Title1Bold className="text-foreground flex flex-col justify-center md:justify-start md:flex-row items-center gap-3">
 							<span className="block md:hidden">Welcome to </span>{" "}
 							<LogoFull className="h-8" />
 						</Title1Bold>
-						<HeadingH1Medium className="text-sm-silver-chalice">
+						<HeadingH1Medium className="text-muted-foreground">
 							{heroText}
 						</HeadingH1Medium>
 					</div>
@@ -348,7 +348,7 @@ export function LoginPage({
 								<ExternalAuthButton
 									authIcon={
 										<svg
-											className="w-4 h-4 sm:w-5 sm:h-5"
+											className="w-4 h-4 sm:w-5 sm:h-5 text-foreground"
 											fill="none"
 											height="25"
 											viewBox="0 0 26 25"
@@ -360,14 +360,14 @@ export function LoginPage({
 												<path
 													clipRule="evenodd"
 													d="M12.9635 0.214844C6.20975 0.214844 0.75 5.71484 0.75 12.5191C0.75 17.9581 4.24825 22.5621 9.10125 24.1916C9.708 24.3141 9.93025 23.9268 9.93025 23.6011C9.93025 23.3158 9.91025 22.3381 9.91025 21.3193C6.51275 22.0528 5.80525 19.8526 5.80525 19.8526C5.25925 18.4266 4.45025 18.0601 4.45025 18.0601C3.33825 17.3063 4.53125 17.3063 4.53125 17.3063C5.76475 17.3878 6.412 18.5693 6.412 18.5693C7.50375 20.4433 9.263 19.9138 9.97075 19.5878C10.0718 18.7933 10.3955 18.2433 10.7393 17.9378C8.0295 17.6526 5.1785 16.5933 5.1785 11.8671C5.1785 10.5226 5.6635 9.42259 6.432 8.56709C6.31075 8.26159 5.886 6.99834 6.5535 5.30759C6.5535 5.30759 7.58475 4.98159 9.91 6.57059C10.9055 6.30126 11.9322 6.16425 12.9635 6.16309C13.9948 6.16309 15.046 6.30584 16.0168 6.57059C18.3423 4.98159 19.3735 5.30759 19.3735 5.30759C20.041 6.99834 19.616 8.26159 19.4948 8.56709C20.2835 9.42259 20.7485 10.5226 20.7485 11.8671C20.7485 16.5933 17.8975 17.6321 15.1675 17.9378C15.6125 18.3248 15.9965 19.0581 15.9965 20.2193C15.9965 21.8693 15.9765 23.1936 15.9765 23.6008C15.9765 23.9268 16.199 24.3141 16.8055 24.1918C21.6585 22.5618 25.1568 17.9581 25.1568 12.5191C25.1768 5.71484 19.697 0.214844 12.9635 0.214844Z"
-													fill="white"
+													fill="currentColor"
 													fillRule="evenodd"
 												/>
 											</g>
 											<defs>
 												<clipPath id="clip0_2579_3356">
 													<rect
-														fill="white"
+														fill="currentColor"
 														height="24"
 														transform="translate(0.75 0.214844)"
 														width="24.5"
@@ -408,18 +408,18 @@ export function LoginPage({
 						) : null}
 					</div>
 
-					<Label1Regular className="text-sm-gray text-center text-xs sm:text-sm">
+					<Label1Regular className="text-muted-foreground text-center text-xs sm:text-sm">
 						By continuing, you agree to our{" "}
 						<span className="inline-block">
 							<a
-								className="text-sm-white hover:underline"
+								className="text-foreground hover:underline"
 								href="https://supermemory.ai/terms-of-service"
 							>
 								Terms
 							</a>{" "}
 							and{" "}
 							<a
-								className="text-sm-white hover:underline"
+								className="text-foreground hover:underline"
 								href="https://supermemory.ai/privacy-policy"
 							>
 								Privacy Policy
diff --git a/packages/ui/text/label/label-2-medium.tsx b/packages/ui/text/label/label-2-medium.tsx
index 28aff2af..89aa2f2d 100644
--- a/packages/ui/text/label/label-2-medium.tsx
+++ b/packages/ui/text/label/label-2-medium.tsx
@@ -10,7 +10,7 @@ export function Label2Medium({
 	return (
 		<Comp
 			className={cn(
-				"text-[0.25rem] sm:text-[0.375rem] md:text-[0.5rem] lg:text-[0.625rem] font-medium leading-[18px] tracking-[-0.4px] text-sm-silver-chalice",
+				"text-[0.25rem] sm:text-[0.375rem] md:text-[0.5rem] lg:text-[0.625rem] font-medium leading-[18px] tracking-[-0.4px] text-muted-foreground",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/text/label/label-2-regular.tsx b/packages/ui/text/label/label-2-regular.tsx
index 0cade081..951dc5bf 100644
--- a/packages/ui/text/label/label-2-regular.tsx
+++ b/packages/ui/text/label/label-2-regular.tsx
@@ -10,7 +10,7 @@ export function Label2Regular({
 	return (
 		<Comp
 			className={cn(
-				"text-[0.25rem] sm:text-[0.375rem] md:text-[0.5rem] lg:text-[0.625rem] font-normal leading-[18px] tracking-[-0.4px] text-sm-silver-chalice",
+				"text-[0.25rem] sm:text-[0.375rem] md:text-[0.5rem] lg:text-[0.625rem] font-normal leading-[18px] tracking-[-0.4px] text-muted-foreground",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/text/label/label-3-medium.tsx b/packages/ui/text/label/label-3-medium.tsx
index 247207d6..5308452e 100644
--- a/packages/ui/text/label/label-3-medium.tsx
+++ b/packages/ui/text/label/label-3-medium.tsx
@@ -10,7 +10,7 @@ export function Label3Medium({
 	return (
 		<Comp
 			className={cn(
-				"text-[0.125rem] sm:text-[0.25rem] md:text-[0.375rem] lg:text-[0.5rem] font-medium leading-[16px] tracking-[-0.2px] text-sm-silver-chalice",
+				"text-[0.125rem] sm:text-[0.25rem] md:text-[0.375rem] lg:text-[0.5rem] font-medium leading-[16px] tracking-[-0.2px] text-muted-foreground",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/text/label/label-3-regular.tsx b/packages/ui/text/label/label-3-regular.tsx
index 8095d6ab..9ca0d65e 100644
--- a/packages/ui/text/label/label-3-regular.tsx
+++ b/packages/ui/text/label/label-3-regular.tsx
@@ -10,7 +10,7 @@ export function Label3Regular({
 	return (
 		<Comp
 			className={cn(
-				"text-[0.125rem] sm:text-[0.25rem] md:text-[0.375rem] lg:text-[0.5rem] font-normal leading-[16px] tracking-[-0.2px] text-sm-silver-chalice",
+				"text-[0.125rem] sm:text-[0.25rem] md:text-[0.375rem] lg:text-[0.5rem] font-normal leading-[16px] tracking-[-0.2px] text-muted-foreground",
 				className,
 			)}
 			{...props}