Fix invalid Tailwind classes caught by Codex

- Replace text-gray-200-dim with text-gray-400
- Replace text-gray-500-dark with text-gray-600
- Replace all bg-accent* with bg-sky-*
- Replace bg-muted-dark with bg-gray-600
- Replace border-dark with border-gray-950

Author: kylecarbs

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>

src/components/CommandSuggestions.tsx

@@ -104,8 +104,8 @@ 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="font-monospace shrink-0 text-xs text-sky-600">{suggestion.display}</div>

src/components/Context1MCheckbox.tsx

@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="checked:bg-accent relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-gray-800 bg-gray-950 checked:border-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
+          className="checked:bg-sky-600 relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-gray-800 bg-gray-950 checked:border-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
         />
         1M Context
       </label>

src/components/DirectorySelectModal.tsx

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

src/components/LeftSidebar.tsx

@@ -49,7 +49,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
             "w-10 h-10 bg-gray-900 border border-gray-800 rounded-md cursor-pointer",
             "items-center justify-center text-gray-200 text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-gray-900 hover:border-bg-light",
+            "hover:bg-gray-900 hover:border-gray-800",
             "active:scale-95"
           )}
         >
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-gray-900 border-r border-dark flex flex-col shrink-0",
+          "h-screen bg-gray-900 border-r border-gray-950 flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
           collapsed ? "w-8" : "w-72",
           "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-72 max-md:z-[1000]",

src/components/Messages/ChatBarrier/StreamingBarrier.tsx

@@ -24,7 +24,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
           <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
             ~{tokenCount.toLocaleString()} tokens
             {tps !== undefined && tps > 0 && (
-              <span className="text-gray-200-dim ml-1">@ {tps} t/s</span>
+              <span className="text-gray-400 ml-1">@ {tps} t/s</span>
             )}
           </span>
         )}

src/components/Modal.tsx

@@ -57,7 +57,7 @@ export const ModalInfo: React.FC<{
   <div
     id={id}
     className={cn(
-      "bg-gray-900 border border-gray-800-medium rounded p-3 mb-5 text-[13px]",
+      "bg-gray-900 border border-gray-700 rounded p-3 mb-5 text-[13px]",
       "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-gray-500 [&_p:last-child]:mb-0",
       "[&_code]:text-sky-600 [&_code]:font-mono",
       className
@@ -144,7 +144,7 @@ export const Button: React.FC<ButtonProps> = ({ children, className, ...props })
 export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
     className={cn(
-      "bg-border-gray-700 text-gray-200 hover:bg-border-darker disabled:hover:bg-border-gray-700",
+      "bg-gray-700 text-gray-200 hover:bg-gray-800 disabled:hover:bg-gray-700",
       className
     )}
     {...props}
@@ -155,7 +155,7 @@ export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...pr
 
 export const PrimaryButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
-    className={cn("bg-accent text-white hover:bg-accent-dark disabled:hover:bg-accent", className)}
+    className={cn("bg-sky-600 text-white hover:bg-sky-700 disabled:hover:bg-sky-600", className)}
     {...props}
   >
     {children}

src/components/NewWorkspaceModal.tsx

@@ -100,7 +100,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
       describedById={infoId}
     >
       <form onSubmit={(event) => void handleSubmit(event)}>
-        <div className="[&_input]:border-gray-800-medium [&_select]:border-gray-800-medium mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
+        <div className="[&_input]:border-gray-700 [&_select]:border-gray-700 mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="branchName">
             <TooltipWrapper inline>
               <span className="cursor-help underline decoration-[#666] decoration-dotted underline-offset-2">
@@ -137,7 +137,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
           {error && <div className="text-danger-light mt-1.5 text-[13px]">{error}</div>}
         </div>
 
-        <div className="[&_input]:border-gray-800-medium [&_select]:border-gray-800-medium mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
+        <div className="[&_input]:border-gray-700 [&_select]:border-gray-700 mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="trunkBranch">Trunk Branch:</label>
           {hasBranches ? (
             <select

src/components/ProjectSidebar.tsx

@@ -80,7 +80,7 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
       className={cn(
         "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-gray-900",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
-        isOver && "bg-accent/[0.08]",
+        isOver && "bg-sky-600/[0.08]",
         selected && "bg-gray-900 border-l-accent",
         "hover:bg-gray-900 hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}
@@ -137,13 +137,13 @@ const ProjectDragLayer: React.FC = () => {
     <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
         <div className="border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] bg-gray-900/95 px-3 py-1.5 text-gray-200 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
-          <span className="text-gray-200-dim mr-1.5 text-xs">⠿</span>
+          <span className="text-gray-400 mr-1.5 text-xs">⠿</span>
           <span className="mr-2 text-[10px] text-gray-500">▶</span>
           <div className="min-w-0 flex-1">
             <div className="truncate text-sm font-medium tracking-[0.2px] text-gray-200">
               {name}
             </div>
-            <div className="text-gray-500-dark font-monospace mt-0.5 truncate text-[11px]">
+            <div className="text-gray-600 font-monospace mt-0.5 truncate text-[11px]">
               {abbrevPath}
             </div>
           </div>
@@ -422,7 +422,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="border-dark flex items-center justify-between border-b bg-gray-900 p-4">
+              <div className="border-gray-950 flex items-center justify-between border-b bg-gray-900 p-4">
                 <h2 className="m-0 text-[13px] font-semibold tracking-[0.8px] text-gray-200 uppercase">
                   Projects
                 </h2>
@@ -445,7 +445,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     <p className="mb-4 text-[13px] text-gray-500">No projects</p>
                     <button
                       onClick={onAddProject}
-                      className="bg-accent hover:bg-accent-dark cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white transition-colors duration-200"
+                      className="bg-sky-600 hover:bg-sky-600-dark cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white transition-colors duration-200"
                     >
                       Add Project
                     </button>
@@ -482,7 +482,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-gray-200-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
+                            className="text-gray-400 mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
                           >
                             ⠿
                           </span>
@@ -499,7 +499,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
-                              <div className="text-gray-500-dark font-monospace mt-px truncate text-[11px]">
+                              <div className="text-gray-600 font-monospace mt-px truncate text-[11px]">
                                 {abbreviatePath(projectPath)}
                               </div>
                               <Tooltip className="tooltip" align="left">
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-gray-500-dark hover:bg-accent/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:text-sky-600"
+                              className="text-gray-600 hover:bg-sky-600/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:text-sky-600"
                             >
                               🔑
                             </button>
@@ -532,7 +532,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-gray-500-dark hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
+                              className="text-gray-600 hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
                             >
                               ×
                             </button>
@@ -549,7 +549,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="border-gray-800-medium hover:border-gray-800-darker w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
+                                className="border-gray-700 hover:border-gray-800-darker w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -596,12 +596,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
-                                          <span className="text-gray-200-dim font-normal">
+                                          <span className="text-gray-400 font-normal">
                                             ({old.length})
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-gray-200-dim text-[11px] transition-transform duration-200 ease-in-out"
+                                          className="arrow text-gray-400 text-[11px] transition-transform duration-200 ease-in-out"
                                           style={{
                                             transform: showOldWorkspaces
                                               ? "rotate(90deg)"
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              className="border-dark mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
+              className="border-gray-950 mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
             >
               {collapsed ? "»" : "«"}
             </button>

src/components/RightSidebar.tsx

@@ -211,8 +211,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
           <div
             className={cn(
               "w-1 flex-shrink-0 z-10 transition-[background] duration-150",
-              "bg-border-gray-800 cursor-col-resize hover:bg-accent",
-              isResizing && "bg-accent"
+              "bg-border-gray-800 cursor-col-resize hover:bg-sky-600",
+              isResizing && "bg-sky-600"
             )}
             onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
           />