refactor(ui): replace hardcoded colors with semantic tokens

- Editor toolbar: bg-white → bg-base-100
- ToolbarLoader dividers: bg-slate-200 → bg-base-300
- DocTitle hover border: slate-400 → base-300
- Avatar container and fallback: bg-slate-100 → bg-base-200
- Auth error page: use semantic tokens for background, card, and text
- EmojiBody: ensure em-emoji host stays theme-consistent

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/TipTap/DocTitle.tsx

@@ -183,7 +183,7 @@ const DocTitle = ({ className }: { className?: string }) => {
         <div
           dangerouslySetInnerHTML={{ __html: title || '' }}
           contentEditable
-          className="truncate rounded-sm border border-transparent px-1 py-0 text-lg font-medium hover:border-slate-400"
+          className="hover:border-base-300 truncate rounded-sm border border-transparent px-1 py-0 text-lg font-medium"
           style={{ flex: 1 }}
           onBlur={saveData}
           onKeyDown={(e) => {

packages/webapp/src/components/chatroom/components/MessageCard/components/MessageContent/components/EmojiBody.tsx

@@ -54,7 +54,7 @@ export const EmojiBody = () => {
       {emojiArray.map((emoji: string, index: number) => (
         <Tooltip key={index} title={emojiTitles[index] || 'emoji'} placement="top">
           <div className="hover:bg-base-200 flex items-center justify-center rounded-xl p-1 transition-colors">
-            {/* @ts-expect-error – em-emoji is a web component from @emoji-mart */}
+            {/* @ts-expect-error – em-emoji is a web component from emoji-mart; host styled theme-aware in globals.scss */}
             <em-emoji native={emoji} set="native" size="4rem" />
           </div>
         </Tooltip>

packages/webapp/src/components/skeleton/ToolbarLoader.tsx

@@ -4,7 +4,7 @@ const ToolbarSkeleton = () => {
       {/* Text formatting dropdown */}
       <div className="skeleton h-6 w-24 rounded" />
 
-      <div className="h-5 w-px bg-slate-200" />
+      <div className="bg-base-300 h-5 w-px" />
 
       {/* Formatting buttons */}
       <div className="flex gap-1">
@@ -13,7 +13,7 @@ const ToolbarSkeleton = () => {
         <div className="skeleton size-7 rounded" />
       </div>
 
-      <div className="h-5 w-px bg-slate-200" />
+      <div className="bg-base-300 h-5 w-px" />
 
       {/* More buttons */}
       <div className="flex gap-1">
@@ -25,7 +25,7 @@ const ToolbarSkeleton = () => {
       {/* Right side actions */}
       <div className="ml-auto flex gap-2">
         <div className="skeleton size-7 rounded" />
-        <div className="h-5 w-px bg-slate-200" />
+        <div className="bg-base-300 h-5 w-px" />
         <div className="skeleton size-7 rounded" />
         <div className="skeleton size-7 rounded" />
       </div>

packages/webapp/src/components/ui/Avatar.tsx

@@ -151,12 +151,12 @@ export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
     const cursorClass = clickable && id ? 'cursor-pointer' : 'cursor-default'
 
     // Container uses daisyUI avatar class with custom styling
-    // Uses subtle gray ring instead of white border for visibility on any background
+    // Theme-aware base so fallback/placeholder works in light and dark
     const containerClass = twMerge(
       'avatar',
       sizeClass,
       'rounded-full',
-      'bg-slate-100',
+      'bg-base-200',
       '!ring-1 ring-base-300',
       '!overflow-visible',
       displayPresence && (online ? 'avatar-online' : 'avatar-offline'),
@@ -170,7 +170,7 @@ export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
       'size-full',
       'rounded-full',
       'object-cover',
-      'bg-slate-100',
+      'bg-base-200',
       'shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--color-base-content)_6%,transparent)]',
       cursorClass,
       imageClassName,

packages/webapp/src/pages/auth/error.tsx

@@ -30,10 +30,10 @@ const AuthErrorPage = () => {
   }
 
   return (
-    <div className="flex min-h-[100dvh] items-center justify-center bg-slate-50 p-4">
+    <div className="bg-base-200 flex min-h-[100dvh] items-center justify-center p-4">
       <div className="w-full max-w-md">
         {/* Error card */}
-        <div className="rounded-2xl bg-white p-6 shadow-xl shadow-slate-200/50 sm:p-8">
+        <div className="rounded-box bg-base-100 p-6 shadow-xl sm:p-8">
           {/* Icon */}
           <div className="mb-6 flex justify-center">
             <div className="bg-error/10 flex size-16 items-center justify-center rounded-full">
@@ -42,33 +42,37 @@ const AuthErrorPage = () => {
           </div>
 
           {/* Title */}
-          <h1 className="mb-2 text-center text-2xl font-bold text-slate-800">
+          <h1 className="text-base-content mb-2 text-center text-2xl font-bold">
             Authentication Error
           </h1>
-          <p className="mb-6 text-center text-sm text-slate-500">
+          <p className="text-base-content/60 mb-6 text-center text-sm">
             Something went wrong during authentication.
           </p>
 
           {/* Error details */}
           <div className="border-error/20 bg-error/5 mb-6 space-y-3 rounded-xl border p-4">
             <div>
-              <p className="text-xs font-medium tracking-wide text-slate-500 uppercase">Error</p>
-              <p className="font-medium text-slate-800">{errorDetails.error}</p>
+              <p className="text-base-content/50 text-xs font-medium tracking-wide uppercase">
+                Error
+              </p>
+              <p className="text-base-content font-medium">{errorDetails.error}</p>
             </div>
 
             {errorDetails.errorCode && (
               <div>
-                <p className="text-xs font-medium tracking-wide text-slate-500 uppercase">Code</p>
-                <p className="font-mono text-sm text-slate-700">{errorDetails.errorCode}</p>
+                <p className="text-base-content/50 text-xs font-medium tracking-wide uppercase">
+                  Code
+                </p>
+                <p className="text-base-content/80 font-mono text-sm">{errorDetails.errorCode}</p>
               </div>
             )}
 
             {errorDetails.errorDescription && (
               <div>
-                <p className="text-xs font-medium tracking-wide text-slate-500 uppercase">
+                <p className="text-base-content/50 text-xs font-medium tracking-wide uppercase">
                   Details
                 </p>
-                <p className="text-sm text-slate-600">{errorDetails.errorDescription}</p>
+                <p className="text-base-content/70 text-sm">{errorDetails.errorDescription}</p>
               </div>
             )}
           </div>
@@ -89,7 +93,7 @@ const AuthErrorPage = () => {
         </div>
 
         {/* Help text */}
-        <p className="mt-6 text-center text-sm text-slate-500">
+        <p className="text-base-content/60 mt-6 text-center text-sm">
           If this problem persists, please{' '}
           <a
             href="https://docs.plus/support"

packages/webapp/src/pages/editor.tsx

@@ -73,7 +73,7 @@ const EditorPage = ({ localPersistence, docName }: EditorPageProps) => {
   return (
     <div className="flex h-screen flex-col overflow-hidden">
       {/* Toolbar */}
-      <div className="toolbars w-full shrink-0 bg-white">
+      <div className="toolbars bg-base-100 w-full shrink-0">
         <EditorToolbar />
         <Controllers editor={editor} />
       </div>