🤖 Consolidate theme variables to Tailwind native colors

src/App.tsx

@@ -617,7 +617,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="bg-bg-dark flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-neutral-900 [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           onSelectWorkspace={handleWorkspaceSwitch}
           onAddProject={handleAddProjectCallback}
@@ -654,7 +654,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6]"
+                className="mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6] [&_p]:text-neutral-400"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",

src/components/AIView.tsx

@@ -240,7 +240,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -279,7 +279,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -295,7 +295,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -313,7 +313,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}

src/components/ChatInput.tsx

@@ -723,7 +723,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="bg-separator border-border-light relative flex flex-col gap-1 border-t px-[15px] pt-[5px] pb-[15px]"
+      className="relative flex flex-col gap-1 border-t border-neutral-800 bg-neutral-800 px-[15px] pt-[5px] pb-[15px]"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
@@ -810,7 +810,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
-                "flex gap-0 bg-toggle-bg rounded",
+                "flex gap-0 bg-neutral-800 rounded",
                 "[&>button:first-of-type]:rounded-l [&>button:last-of-type]:rounded-r",
                 mode === "exec" &&
                   "[&>button:first-of-type]:bg-exec-mode [&>button:first-of-type]:text-white [&>button:first-of-type]:hover:bg-exec-mode-hover",

src/components/ChatInputToast.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 
 const toastTypeStyles: Record<"success" | "error", string> = {
-  success: "bg-toast-success-bg border border-accent-dark text-toast-success-text",
+  success: "bg-toast-success-bg border border-sky-700 text-toast-success-text",
   error: "bg-toast-error-bg border border-toast-error-border text-toast-error-text",
 };
 
@@ -22,7 +22,7 @@ interface ChatInputToastProps {
 }
 
 export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="text-muted-light mb-1 text-[10px] uppercase">{children}</div>
+  <div className="text-neutral-400-light mb-1 text-[10px] uppercase">{children}</div>
 );
 
 export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -71,9 +71,9 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
             <span className="text-sm leading-none">⚠</span>
             <div className="flex-1">
               {toast.title && <div className="mb-1.5 font-semibold">{toast.title}</div>}
-              <div className="text-light mt-1.5 leading-[1.4]">{toast.message}</div>
+              <div className="mt-1.5 leading-[1.4] text-neutral-300">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-dark font-monospace text-code-type mt-2 rounded px-2 py-1.5 text-[11px]">
+                <div className="font-monospace text-code-type mt-2 rounded bg-neutral-900 px-2 py-1.5 text-[11px]">
                   {toast.solution}
                 </div>
               )}

src/components/ChatMetaSidebar.tsx

@@ -59,7 +59,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
   return (
     <div
       className={cn(
-        "bg-separator border-l border-border-light flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
+        "bg-neutral-800 border-l border-neutral-800 flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
         showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-80"
       )}
       role="complementary"

src/components/CommandPalette.stories.tsx

@@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
     <>
       <button
         onClick={() => open()}
-        className="bg-accent-dark font-primary hover:bg-accent-hover active:bg-accent-dark cursor-pointer self-start rounded border-none px-4 py-2 text-[13px] text-white"
+        className="bg-sky-600-dark font-primary hover:bg-sky-600-hover active:bg-sky-600-dark cursor-pointer self-start rounded border-none px-4 py-2 text-[13px] text-white"
       >
         Open Command Palette (⌘⇧P)
       </button>
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="bg-dark flex min-h-[600px] flex-col gap-5 p-5">
-      <div className="bg-separator border-border-light text-bright font-primary [&_kbd]:bg-dark [&_kbd]:border-border-light [&_kbd]:font-monospace rounded border p-4 text-[13px] leading-[1.6] [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
+    <div className="flex min-h-[600px] flex-col gap-5 bg-neutral-900 p-5">
+      <div className="font-primary [&_kbd]:font-monospace rounded border border-neutral-800 bg-neutral-900 p-4 text-[13px] leading-[1.6] text-neutral-300 [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:border-neutral-800 [&_kbd]:bg-neutral-900 [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
         <strong>Command Palette</strong>
         <br />
         <br />

src/components/CommandPalette.tsx

@@ -362,12 +362,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="bg-separator border-border text-lighter font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
+        className="font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900 text-neutral-100 shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="bg-darker text-lighter border-hover w-full border-b border-none px-3.5 py-3 text-sm outline-none"
+          className="w-full border-b border-none border-neutral-900 bg-neutral-900 px-3.5 py-3 text-sm text-neutral-100 outline-none"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
@@ -403,12 +403,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             <Command.Group
               key={group.name}
               heading={group.name}
-              className="[&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
+              className="[&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:text-neutral-400 [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
             >
               {group.items.map((item) => (
                 <Command.Item
                   key={item.id}
-                  className="hover:bg-hover aria-selected:bg-hover mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px]"
+                  className="mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px] hover:bg-neutral-900 aria-selected:bg-neutral-900"
                   onSelect={() => {
                     if ("prompt" in item && item.prompt) {
                       addRecent(item.id);
@@ -433,12 +433,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
                     {"subtitle" in item && item.subtitle && (
                       <>
                         <br />
-                        <span className="text-subdued text-xs">{item.subtitle}</span>
+                        <span className="text-xs text-neutral-400">{item.subtitle}</span>
                       </>
                     )}
                   </div>
                   {"shortcutHint" in item && item.shortcutHint && (
-                    <span className="text-subdued font-monospace text-[11px]">
+                    <span className="font-monospace text-[11px] text-neutral-400">
                       {item.shortcutHint}
                     </span>
                   )}

src/components/CommandSuggestions.tsx

@@ -93,7 +93,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
         activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
       }
       data-command-suggestions
-      className="bg-separator border-border-light absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
+      className="absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border border-neutral-800 bg-neutral-900 shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -104,17 +104,17 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           role="option"
           aria-selected={index === selectedIndex}
           className={cn(
-            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-accent-darker",
-            index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
+            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-sky-600-darker",
+            index === selectedIndex ? "bg-sky-600-darker" : "bg-transparent"
           )}
         >
-          <div className="text-accent font-monospace shrink-0 text-xs">{suggestion.display}</div>
-          <div className="text-medium truncate text-right text-[11px]">
+          <div className="font-monospace shrink-0 text-xs text-sky-600">{suggestion.display}</div>
+          <div className="truncate text-right text-[11px] text-neutral-400">
             {suggestion.description}
           </div>
         </div>
       ))}
-      <div className="border-border-light bg-dark text-placeholder [&_span]:text-medium shrink-0 border-t px-2.5 py-1 text-center text-[10px] [&_span]:font-medium">
+      <div className="shrink-0 border-t border-neutral-800 bg-neutral-900 px-2.5 py-1 text-center text-[10px] text-neutral-400 [&_span]:font-medium [&_span]:text-neutral-400">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>

src/components/Context1MCheckbox.tsx

@@ -22,7 +22,9 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>
+        <span className="flex cursor-help items-center text-[10px] leading-none text-neutral-400">
+          ?
+        </span>
         <Tooltip className="tooltip" align="center" width="auto">
           Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
         </Tooltip>

src/components/DirectorySelectModal.tsx

@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted mb-5 w-full rounded border px-3 py-2 font-mono text-sm text-white focus:outline-none"
+        className="mb-5 w-full rounded border border-neutral-700 bg-neutral-900 px-3 py-2 font-mono text-sm text-white placeholder:text-neutral-400 focus:border-sky-600 focus:outline-none"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>

src/components/ErrorBoundary.tsx

@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="bg-error-bg-dark border-danger-soft text-danger-soft m-5 rounded border p-5">
+        <div className="bg-error-bg-neutral-900 m-5 rounded border border-red-600 p-5 text-red-400">
           <h3 className="m-0 mb-2.5 text-base">
             Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
           </h3>
@@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
           )}
           <button
             onClick={this.handleReset}
-            className="bg-danger-soft hover:bg-info-light cursor-pointer rounded-sm border-none px-4 py-2 text-sm text-white"
+            className="cursor-pointer rounded-sm border-none bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-500"
           >
             Reset
           </button>