From d473c737714e921d693606d391740ce00cf3b396 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 28 Oct 2025 20:18:36 +0000
Subject: [PATCH] refactor: restyle chips via tokens

---
 src/components/agent-selector.tsx        |  8 +--
 src/components/attachment-chip.tsx       |  4 +-
 src/components/empty-state.tsx           |  5 +-
 src/components/folder-selection-view.tsx |  6 +-
 src/components/instance-info.tsx         | 42 +++++--------
 src/components/prompt-input.tsx          |  3 +-
 src/components/session-picker.tsx        | 12 ++--
 src/styles/components.css                | 79 ++++++++++++++++++++++++
 8 files changed, 111 insertions(+), 48 deletions(-)

diff --git a/src/components/agent-selector.tsx b/src/components/agent-selector.tsx
index 6e99aed3..398451d2 100644
--- a/src/components/agent-selector.tsx
+++ b/src/components/agent-selector.tsx
@@ -70,7 +70,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
               <Select.ItemLabel class="font-medium text-sm text-gray-900 dark:text-gray-100 flex items-center gap-2">
                 <span>{itemProps.item.rawValue.name}</span>
                 <Show when={itemProps.item.rawValue.mode === "subagent"}>
-                  <span class="text-xs font-normal text-blue-600 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded">
+                  <span class="neutral-badge">
                     subagent
                   </span>
                 </Show>
@@ -88,7 +88,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
       >
         <Select.Trigger
           data-agent-selector
-          class="inline-flex items-center justify-between gap-2 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 outline-none focus:ring-2 focus:ring-blue-500 text-xs min-w-[100px] transition-colors"
+          class="selector-trigger"
         >
           <Select.Value<Agent>>
             {(state) => (
@@ -101,8 +101,8 @@ export default function AgentSelector(props: AgentSelectorProps) {
         </Select.Trigger>
 
         <Select.Portal>
-          <Select.Content class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-80 overflow-auto p-1 z-50">
-            <Select.Listbox class="bg-white dark:bg-gray-800" />
+          <Select.Content class="selector-popover max-h-80 overflow-auto p-1 z-50">
+            <Select.Listbox class="selector-listbox" />
           </Select.Content>
         </Select.Portal>
       </Select>
diff --git a/src/components/attachment-chip.tsx b/src/components/attachment-chip.tsx
index 52c77c86..49d75817 100644
--- a/src/components/attachment-chip.tsx
+++ b/src/components/attachment-chip.tsx
@@ -9,13 +9,13 @@ interface AttachmentChipProps {
 const AttachmentChip: Component<AttachmentChipProps> = (props) => {
   return (
     <div
-      class="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+      class="attachment-chip"
       title={props.attachment.source.type === "file" ? props.attachment.source.path : undefined}
     >
       <span class="font-mono">{props.attachment.display}</span>
       <button
         onClick={props.onRemove}
-        class="flex h-4 w-4 items-center justify-center rounded hover:bg-blue-200 dark:hover:bg-blue-800"
+        class="attachment-remove"
         aria-label="Remove attachment"
       >
         ×
diff --git a/src/components/empty-state.tsx b/src/components/empty-state.tsx
index d01fcad8..1bf1ccf3 100644
--- a/src/components/empty-state.tsx
+++ b/src/components/empty-state.tsx
@@ -8,7 +8,7 @@ interface EmptyStateProps {
 
 const EmptyState: Component<EmptyStateProps> = (props) => {
   return (
-    <div class="flex h-full w-full items-center justify-center bg-gray-50 dark:bg-gray-900">
+    <div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary);">
       <div class="max-w-[500px] px-8 py-12 text-center">
         <div class="mb-8 flex justify-center">
           <Folder class="h-16 w-16 text-gray-400 dark:text-gray-600" />
@@ -21,7 +21,8 @@ const EmptyState: Component<EmptyStateProps> = (props) => {
         <button
           onClick={props.onSelectFolder}
           disabled={props.isLoading}
-          class="mb-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          class="mb-4 inline-flex items-center gap-2 rounded-lg px-6 py-3 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:opacity-90"
+          style="background-color: var(--accent-primary); color: var(--text-inverted); ring-color: var(--accent-primary); ring-offset-color: var(--surface-base);"
         >
           {props.isLoading ? (
             <>
diff --git a/src/components/folder-selection-view.tsx b/src/components/folder-selection-view.tsx
index 0fc9715c..5e907458 100644
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -248,11 +248,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <button
                 onClick={handleBrowse}
                 disabled={props.isLoading}
-                class="w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed"
-                classList={{
-                  "bg-blue-600 text-white hover:bg-blue-700": !props.isLoading,
-                  "bg-gray-300 dark:bg-gray-600 text-gray-500 cursor-not-allowed": props.isLoading
-                }}
+                class={`w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed ${props.isLoading ? "selector-button-secondary disabled" : "selector-button-primary"}`}
                 onMouseEnter={() => setFocusMode("new")}
               >
                 <div class="flex items-center gap-2 flex-1 justify-center">
diff --git a/src/components/instance-info.tsx b/src/components/instance-info.tsx
index d6d44ac5..25de750c 100644
--- a/src/components/instance-info.tsx
+++ b/src/components/instance-info.tsx
@@ -75,14 +75,14 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
   })
 
   return (
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-      <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Instance Information</h2>
+    <div class="panel">
+      <div class="panel-header">
+        <h2 class="panel-title">Instance Information</h2>
       </div>
-      <div class="p-4 space-y-3">
+      <div class="panel-body space-y-3">
         <div>
           <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Folder</div>
-          <div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
+          <div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
             {props.instance.folder}
           </div>
         </div>
@@ -94,7 +94,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                 <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
                   Project
                 </div>
-                <div class="text-xs text-gray-900 dark:text-gray-100 font-mono bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700 truncate">
+                <div class="text-xs font-mono px-2 py-1.5 rounded border truncate" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
                   {project().id}
                 </div>
               </div>
@@ -125,7 +125,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
               OpenCode Version
             </div>
-            <div class="text-xs text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
+            <div class="text-xs px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
               v{metadata()?.version}
             </div>
           </div>
@@ -136,7 +136,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
               Binary Path
             </div>
-            <div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
+            <div class="text-xs font-mono break-all px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
               {props.instance.binaryPath}
             </div>
           </div>
@@ -150,11 +150,11 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="space-y-1">
               <For each={Object.entries(props.instance.environmentVariables!)}>
                 {([key, value]) => (
-                  <div class="flex items-center gap-2 px-2 py-1.5 bg-gray-50 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
-                    <span class="text-xs text-gray-900 dark:text-gray-100 font-mono font-medium flex-1" title={key}>
+                  <div class="flex items-center gap-2 px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base);">
+                    <span class="text-xs font-mono font-medium flex-1" title={key} style="color: var(--text-primary);">
                       {key}
                     </span>
-                    <span class="text-xs text-gray-600 dark:text-gray-400 font-mono flex-1" title={value}>
+                    <span class="text-xs font-mono flex-1" title={value} style="color: var(--text-secondary);">
                       {value}
                     </span>
                   </div>
@@ -172,7 +172,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="space-y-1.5">
               <For each={mcpServers()}>
                 {(server) => (
-                  <div class="flex items-center justify-between px-2 py-1.5 bg-gray-50 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
+                  <div class="flex items-center justify-between px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base);">
                     <span class="text-xs text-gray-900 dark:text-gray-100 font-medium truncate">{server.name}</span>
                     <div class="flex items-center gap-1.5 flex-shrink-0">
                       <Show
@@ -226,24 +226,10 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="flex justify-between items-center">
               <span class="text-gray-600 dark:text-gray-400">Status:</span>
               <span
-                class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium"
-                classList={{
-                  "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400":
-                    props.instance.status === "ready",
-                  "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400":
-                    props.instance.status === "starting",
-                  "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400": props.instance.status === "error",
-                  "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300": props.instance.status === "stopped",
-                }}
+                class={`status-badge ${props.instance.status}`}
               >
                 <div
-                  class="w-1 h-1 rounded-full"
-                  classList={{
-                    "bg-green-600 animate-pulse": props.instance.status === "ready",
-                    "bg-yellow-600 animate-pulse": props.instance.status === "starting",
-                    "bg-red-600": props.instance.status === "error",
-                    "bg-gray-600": props.instance.status === "stopped",
-                  }}
+                  class={`status-dot ${props.instance.status} ${props.instance.status === "ready" || props.instance.status === "starting" ? "animate-pulse" : ""}`}
                 />
                 {props.instance.status}
               </span>
diff --git a/src/components/prompt-input.tsx b/src/components/prompt-input.tsx
index e68ce934..239e4b3b 100644
--- a/src/components/prompt-input.tsx
+++ b/src/components/prompt-input.tsx
@@ -618,7 +618,8 @@ export default function PromptInput(props: PromptInputProps) {
     <div class="prompt-input-container">
       <div
         ref={containerRef}
-        class={`prompt-input-wrapper relative ${isDragging() ? "border-2 border-blue-500 bg-blue-50 dark:bg-blue-900/10" : ""}`}
+        class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
+        style={isDragging() ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);" : ""}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
diff --git a/src/components/session-picker.tsx b/src/components/session-picker.tsx
index d44f52c5..1f3f1641 100644
--- a/src/components/session-picker.tsx
+++ b/src/components/session-picker.tsx
@@ -66,8 +66,8 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
       <Dialog.Portal>
         <Dialog.Overlay class="fixed inset-0 bg-black/50 z-50" />
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <Dialog.Content class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full max-w-lg p-6">
-            <Dialog.Title class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          <Dialog.Content class="modal-surface w-full max-w-lg p-6">
+            <Dialog.Title class="text-xl font-semibold mb-4" style="color: var(--text-primary);">
               OpenCode • {instance()?.folder.split("/").pop()}
             </Dialog.Title>
 
@@ -109,19 +109,19 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                   <div class="w-full border-t border-gray-300 dark:border-gray-700" />
                 </div>
                 <div class="relative flex justify-center text-sm">
-                  <span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400">or</span>
+                  <span class="px-2" style="background-color: var(--surface-base); color: var(--text-muted);">or</span>
                 </div>
               </div>
 
               <div>
-                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start new session:</h3>
+                <h3 class="text-sm font-medium mb-2" style="color: var(--text-secondary);">Start new session:</h3>
                 <div class="space-y-3">
                   <Show
                     when={agentList().length > 0}
                     fallback={<div class="text-sm text-gray-500 dark:text-gray-400">Loading agents...</div>}
                   >
                     <select
-                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
+                      class="selector-input"
                       value={selectedAgent()}
                       onChange={(e) => setSelectedAgent(e.currentTarget.value)}
                     >
@@ -130,7 +130,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                   </Show>
 
                   <button
-                    class="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-500 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+                    class="selector-button-primary w-full"
                     onClick={handleNewSession}
                     disabled={isCreating() || agentList().length === 0}
                   >
diff --git a/src/styles/components.css b/src/styles/components.css
index db3ddc6e..7c0eb345 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -154,6 +154,85 @@
   background-color: rgba(0, 128, 255, 0.2);
 }
 
+/* Neutral badge utilities */
+.neutral-badge {
+  @apply inline-flex items-center rounded px-1.5 py-0.5 text-xs font-normal;
+  --badge-bg: rgba(0, 102, 255, 0.05);
+  --badge-text: #0066ff;
+  background-color: var(--badge-bg);
+  color: var(--badge-text);
+}
+
+[data-theme="dark"] .neutral-badge {
+  --badge-bg: rgba(0, 128, 255, 0.15);
+  --badge-text: #0080ff;
+}
+
+/* Status badge utilities */
+.status-badge {
+  @apply inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium;
+}
+
+.status-badge.ready {
+  background-color: rgba(34, 197, 94, 0.1);
+  color: #16a34a;
+}
+
+[data-theme="dark"] .status-badge.ready {
+  background-color: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+}
+
+.status-badge.starting {
+  background-color: rgba(250, 204, 21, 0.1);
+  color: #ca8a04;
+}
+
+[data-theme="dark"] .status-badge.starting {
+  background-color: rgba(250, 204, 21, 0.2);
+  color: #facc15;
+}
+
+.status-badge.error {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+}
+
+[data-theme="dark"] .status-badge.error {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+
+.status-badge.stopped {
+  background-color: rgba(107, 114, 128, 0.1);
+  color: #6b7280;
+}
+
+[data-theme="dark"] .status-badge.stopped {
+  background-color: rgba(107, 114, 128, 0.2);
+  color: #9ca3af;
+}
+
+.status-dot {
+  @apply w-1 h-1 rounded-full;
+}
+
+.status-dot.ready {
+  background-color: #16a34a;
+}
+
+.status-dot.starting {
+  background-color: #ca8a04;
+}
+
+.status-dot.error {
+  background-color: #dc2626;
+}
+
+.status-dot.stopped {
+  background-color: #6b7280;
+}
+
 /* Tab component utilities */
 .tab-bar {
   @apply border-b;