@chrysb/alphaclaw 0.8.1-beta.8 → 0.8.2

package/lib/public/js/components/onboarding/welcome-form-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import htm from "htm";
 import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
@@ -92,7 +92,7 @@ export const WelcomeFormStep = ({
 
   const renderStandardField = (field) => html`
     <div class="space-y-1" key=${field.key}>
-      <label class="text-xs font-medium text-gray-400">${field.label}</label>
+      <label class="text-xs font-medium text-fg-muted">${field.label}</label>
       <${SecretInput}
         key=${field.key}
         value=${vals[field.key] || ""}
@@ -101,9 +101,9 @@ export const WelcomeFormStep = ({
           ? githubTokenPlaceholder
           : field.placeholder || ""}
         isSecret=${!field.isText}
-        inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+        inputClass="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted font-mono"
       />
-      <p class="text-xs text-gray-600">
+      <p class="text-xs text-fg-dim">
         ${activeGroup.id === "github" &&
         field.key === "GITHUB_WORKSPACE_REPO"
           ? githubFlow === kGithubFlowImport
@@ -117,25 +117,25 @@ export const WelcomeFormStep = ({
               ? githubFlow === kGithubFlowImport
                 ? freshRepoMode === kGithubTargetRepoModeCreate
                   ? html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope to create the target repo. Fine-grained
                       works if the target already exists and can access both
                       repos.`
                   : html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope, or a fine-grained token with Contents +
                       Metadata access to both the source repo and target
                       repo`
                 : freshRepoMode === kGithubTargetRepoModeExistingEmpty
                   ? html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope, or a fine-grained token with Contents +
                       Metadata access to this repo`
                   : html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope to create a new private repository`
               : field.hint}
@@ -165,11 +165,11 @@ export const WelcomeFormStep = ({
           String(vals[fieldKey] || "").trim(),
         );
         return html`
-          <div class="bg-black/20 border border-border rounded-lg overflow-hidden">
+          <div class="bg-field border border-border rounded-lg overflow-hidden">
             <button
               type="button"
               onclick=${() => toggleChannelSection(section.id)}
-              class="w-full flex items-center justify-between gap-2 px-3 py-2 text-left hover:bg-white/5"
+              class="w-full flex items-center justify-between gap-2 px-3 py-2 text-left hover:bg-surface"
             >
               <span class="inline-flex items-center gap-2 min-w-0">
                 ${channelMeta.iconSrc
@@ -180,7 +180,7 @@ export const WelcomeFormStep = ({
                       aria-hidden="true"
                     />`
                   : null}
-                <span class="text-sm text-gray-200">${section.title}</span>
+                <span class="text-sm text-body">${section.title}</span>
                 ${hasValue
                   ? html`<${Badge} tone="success">Configured</${Badge}>`
                   : null}
@@ -206,17 +206,17 @@ export const WelcomeFormStep = ({
   return html`
     <div class="flex items-center justify-between">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">${activeGroup.title}</h2>
-        <p class="text-xs text-gray-500">${activeGroup.description}</p>
+        <h2 class="text-sm font-medium text-body">${activeGroup.title}</h2>
+        <p class="text-xs text-fg-muted">${activeGroup.description}</p>
       </div>
       ${activeGroup.validate(vals, { hasAi })
         ? html`<span
-            class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-900/50 text-green-400"
+            class="text-xs font-medium px-2 py-0.5 rounded-full bg-status-success-bg text-status-success"
             >✓</span
           >`
         : activeGroup.id !== "tools"
           ? html`<span
-              class="text-xs font-medium px-2 py-0.5 rounded-full bg-yellow-900/50 text-yellow-400"
+              class="text-xs font-medium px-2 py-0.5 rounded-full bg-status-warning-bg text-status-warning-muted"
               >Required</span
             >`
           : null}
@@ -225,11 +225,11 @@ export const WelcomeFormStep = ({
     ${activeGroup.id === "ai" &&
     html`
       <div class="space-y-1">
-        <label class="text-xs font-medium text-gray-400">Model</label>
+        <label class="text-xs font-medium text-fg-muted">Model</label>
         <select
           value=${vals.MODEL_KEY || ""}
           onInput=${(e) => setValue("MODEL_KEY", e.target.value)}
-          class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
+          class="w-full bg-field border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-body outline-none focus:border-fg-muted"
         >
           <option value="">Select a model</option>
           ${modelOptions.map(
@@ -238,7 +238,7 @@ export const WelcomeFormStep = ({
             `,
           )}
         </select>
-        <p class="text-xs text-gray-600">
+        <p class="text-xs text-fg-dim">
           ${modelsLoading
             ? "Loading model catalog..."
             : modelsError
@@ -250,7 +250,7 @@ export const WelcomeFormStep = ({
           <button
             type="button"
             onclick=${() => setShowAllModels((prev) => !prev)}
-            class="text-xs text-gray-500 hover:text-gray-300"
+            class="text-xs text-fg-muted hover:text-body"
           >
             ${showAllModels
               ? "Show recommended models"
@@ -262,11 +262,11 @@ export const WelcomeFormStep = ({
     ${activeGroup.id === "ai" &&
     selectedProvider === "openai-codex" &&
     html`
-      <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
+      <div class="bg-field border border-border rounded-lg p-3 space-y-2">
         <div class="flex items-center justify-between">
-          <span class="text-xs text-gray-400">Codex OAuth</span>
+          <span class="text-xs text-fg-muted">Codex OAuth</span>
           ${codexLoading
-            ? html`<span class="text-xs text-gray-500">Checking...</span>`
+            ? html`<span class="text-xs text-fg-muted">Checking...</span>`
             : codexStatus.connected
               ? html`<${Badge} tone="success">Connected</${Badge}>`
               : html`<${Badge} tone="warning">Not connected</${Badge}>`}
@@ -298,11 +298,11 @@ export const WelcomeFormStep = ({
         codexAuthStarted &&
         html`
           <div class="space-y-1 pt-1">
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-fg-muted">
               ${codexAuthWaiting
                 ? "Complete login in the popup, then paste the full redirect URL from the address bar (starts with "
                 : "Paste the full redirect URL from the address bar (starts with "}
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >http://localhost:1455/auth/callback</code
               >) ${codexAuthWaiting ? " to finish setup." : " to finish setup."}
             </p>
@@ -311,7 +311,7 @@ export const WelcomeFormStep = ({
               value=${codexManualInput}
               onInput=${(e) => setCodexManualInput(e.target.value)}
               placeholder="http://localhost:1455/auth/callback?code=...&state=..."
-              class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
+              class="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body outline-none focus:border-fg-muted"
             />
             <${ActionButton}
               onClick=${completeCodexAuth}
@@ -370,7 +370,7 @@ export const WelcomeFormStep = ({
         ).map((field) => renderStandardField(field))}
     ${error
       ? html`<div
-          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+          class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
         >
           ${error}
         </div>`
@@ -379,7 +379,7 @@ export const WelcomeFormStep = ({
       ? html`
           ${showOptionalOpenai
             ? html`<div class="space-y-1">
-                <label class="text-xs font-medium text-gray-400"
+                <label class="text-xs font-medium text-fg-muted"
                   >OpenAI API Key</label
                 >
                 <${SecretInput}
@@ -387,9 +387,9 @@ export const WelcomeFormStep = ({
                   onInput=${(e) => setValue("OPENAI_API_KEY", e.target.value)}
                   placeholder="sk-..."
                   isSecret=${true}
-                  inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+                  inputClass="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted font-mono"
                 />
-                <p class="text-xs text-gray-600">
+                <p class="text-xs text-fg-dim">
                   Used for memory embeddings -${" "}
                   <a
                     href="https://platform.openai.com"
@@ -403,7 +403,7 @@ export const WelcomeFormStep = ({
             : null}
           ${showOptionalGemini
             ? html`<div class="space-y-1">
-                <label class="text-xs font-medium text-gray-400"
+                <label class="text-xs font-medium text-fg-muted"
                   >Gemini API Key</label
                 >
                 <${SecretInput}
@@ -411,9 +411,9 @@ export const WelcomeFormStep = ({
                   onInput=${(e) => setValue("GEMINI_API_KEY", e.target.value)}
                   placeholder="AI..."
                   isSecret=${true}
-                  inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+                  inputClass="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted font-mono"
                 />
-                <p class="text-xs text-gray-600">
+                <p class="text-xs text-fg-dim">
                   Used for memory embeddings and Nano Banana -${" "}
                   <a
                     href="https://aistudio.google.com"

package/lib/public/js/components/onboarding/welcome-header.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/onboarding/welcome-import-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
@@ -100,11 +100,11 @@ const CategoryCard = ({ category, data }) => {
       >
         <div class="flex items-center gap-2">
           <span class="text-sm">${category.icon}</span>
-          <span class="text-xs font-medium text-gray-200"
+          <span class="text-xs font-medium text-body"
             >${category.label}</span
           >
           <span
-            class="text-xs px-1.5 py-0.5 rounded-full bg-cyan-900/40 text-cyan-300"
+            class="text-xs px-1.5 py-0.5 rounded-full bg-status-info-bg text-status-info"
             >${count}</span
           >
         </div>
@@ -112,13 +112,13 @@ const CategoryCard = ({ category, data }) => {
           ${warningCount > 0
             ? html`
                 <span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/30 text-yellow-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-warning-bg text-status-warning"
                 >
                   ⚠ ${warningCount}
                 </span>
               `
             : null}
-          <span class="text-xs text-gray-500">${expanded ? "▲" : "▼"}</span>
+          <span class="text-xs text-fg-muted">${expanded ? "▲" : "▼"}</span>
         </div>
       </button>
       ${expanded &&
@@ -128,7 +128,7 @@ const CategoryCard = ({ category, data }) => {
           ${items.map(
             (item) => html`
               <div
-                class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-gray-500"
+                class="text-xs font-mono bg-field rounded px-2 py-1 text-fg-muted"
               >
                 ${item}
               </div>
@@ -138,7 +138,7 @@ const CategoryCard = ({ category, data }) => {
             ? warningItems.map(
                 (warning) => html`
                   <div
-                    class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-yellow-300"
+                    class="text-xs font-mono bg-field rounded px-2 py-1 text-status-warning"
                   >
                     ${warning.actualPath}
                   </div>
@@ -163,7 +163,7 @@ export const WelcomeImportStep = ({
     return html`
       <div class="flex flex-col items-center justify-center py-8 gap-3">
         <${LoadingSpinner} />
-        <p class="text-sm text-gray-400">Scanning repository...</p>
+        <p class="text-sm text-fg-muted">Scanning repository...</p>
       </div>
     `;
   }
@@ -172,7 +172,7 @@ export const WelcomeImportStep = ({
     return html`
       <div class="space-y-3">
         <div
-          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+          class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
         >
           ${error}
         </div>
@@ -194,8 +194,8 @@ export const WelcomeImportStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Import Summary</h2>
-        <p class="text-xs text-gray-500">
+        <h2 class="text-sm font-medium text-body">Import Summary</h2>
+        <p class="text-xs text-fg-muted">
           ${scanResult.hasOpenclawSetup
             ? "Found an existing OpenClaw setup"
             : "No OpenClaw config detected — we'll set up fresh after import"}
@@ -217,7 +217,7 @@ export const WelcomeImportStep = ({
       ${scanResult.credentials?.found &&
       html`
         <div
-          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+          class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
         >
           Deployment-specific files found (credentials, device identity) — these
           will not be imported.
@@ -226,7 +226,7 @@ export const WelcomeImportStep = ({
       ${hasConflicts &&
       html`
         <div
-          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+          class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
         >
           AlphaClaw-managed files detected
           (${(scanResult.managedConflicts.files || []).join(", ")}). These will
@@ -236,7 +236,7 @@ export const WelcomeImportStep = ({
       ${scanResult.managedEnvConflicts?.found
         ? html`
             <div
-              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+              class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
             >
               AlphaClaw controls deployment tokens and env vars
               (${(scanResult.managedEnvConflicts.vars || []).join(", ")}).
@@ -248,14 +248,14 @@ export const WelcomeImportStep = ({
       ${scanResult.webhooks?.warningCount > 0
         ? html`
             <div
-              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+              class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
             >
               AlphaClaw expects hook transforms at
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >hooks/transforms/name/name-transform.mjs</code
               >. We found some that do not match and will try to patch them
               during import. The originals will be backed up under
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >hooks/transforms/_backup</code
               >.
             </div>
@@ -264,13 +264,13 @@ export const WelcomeImportStep = ({
       ${secretCount > 0 &&
       html`
         <div
-          class="bg-cyan-900/20 border border-cyan-800/50 rounded-lg p-3 flex items-center justify-between"
+          class="bg-status-info-bg border border-status-info-border rounded-lg p-3 flex items-center justify-between"
         >
           <div>
-            <span class="text-xs text-cyan-300 font-medium">
+            <span class="text-xs text-status-info font-medium">
               ${`${secretCount} possible secret${secretCount === 1 ? "" : "s"} detected`}
             </span>
-            <p class="text-xs text-gray-500 mt-0.5">
+            <p class="text-xs text-fg-muted mt-0.5">
               Review and extract to environment variables
             </p>
           </div>

package/lib/public/js/components/onboarding/welcome-pairing-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import htm from "htm";
 import { Badge } from "../badge.js";
 
 const html = htm.bind(h);
@@ -38,18 +38,18 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
   };
 
   return html`
-    <div class="bg-black/30 rounded-lg p-3 mb-2">
+    <div class="bg-field rounded-lg p-3 mb-2">
       <div class="flex items-center justify-between gap-2 mb-2">
         <div class="font-medium text-sm">
           ${pairing.code || pairing.id || "Pending request"}
         </div>
         <span
-          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400"
+          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-fg-muted"
         >
           Request
         </span>
       </div>
-      <p class="text-xs text-gray-500 mb-3">
+      <p class="text-xs text-fg-muted mb-3">
         Approve to connect this account and finish setup.
       </p>
       <div class="flex gap-2">
@@ -99,7 +99,7 @@ export const WelcomePairingStep = ({
   if (!channel) {
     return html`
       <div
-        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
       >
         Missing channel configuration. Go back and add a Telegram or Discord bot
         token.
@@ -112,14 +112,14 @@ export const WelcomePairingStep = ({
       <div class="min-h-[300px] pb-6 px-6 flex flex-col">
         <div class="flex-1 flex items-center justify-center text-center">
           <div class="space-y-3 max-w-xl mx-auto">
-            <p class="text-sm font-medium text-green-300 mb-12">
+            <p class="text-sm font-medium text-status-success mb-12">
               🎉 Setup complete
             </p>
-            <p class="text-xs text-gray-300">
-              Your ${channelMeta.label} channel is connected. You can switch to
-              ${channelMeta.label} and start using your agent now.
+            <p class="text-xs text-body">
+              Your ${channelMeta.label} channel is connected. You can switch
+              to ${channelMeta.label} and start using your agent now.
             </p>
-            <p class="text-xs text-gray-500 font-normal opacity-85">
+            <p class="text-xs text-fg-muted font-normal opacity-85">
               Continue to the dashboard to explore extras like Google Workspace
               and additional integrations.
             </p>
@@ -175,10 +175,10 @@ export const WelcomePairingStep = ({
                       class="w-8 h-8 mx-auto rounded-md"
                     />`
                   : null}
-                <p class="text-gray-300 text-sm">
+                <p class="text-body text-sm">
                   Send a message to your ${channelMeta.label} bot
                 </p>
-                <p class="text-gray-600 text-xs">
+                <p class="text-fg-dim text-xs">
                   The pairing request will appear here in 5-10 seconds
                 </p>
               </div>
@@ -188,7 +188,7 @@ export const WelcomePairingStep = ({
       ${
         error
           ? html`<div
-              class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+              class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
             >
               ${error}
             </div>`

package/lib/public/js/components/onboarding/welcome-placeholder-review-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useMemo } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { SecretInput } from "../secret-input.js";
 
@@ -18,7 +18,7 @@ const PlaceholderRow = ({ item, value, onInput }) => {
         <div class="min-w-0">
           <div class="flex items-center gap-2 flex-wrap">
             <code
-              class="text-xs text-gray-200 bg-black/30 px-1.5 py-0.5 rounded"
+              class="text-xs text-body bg-field px-1.5 py-0.5 rounded"
               >${item.key}</code
             >
           </div>
@@ -28,7 +28,7 @@ const PlaceholderRow = ({ item, value, onInput }) => {
         value=${value}
         onInput=${(event) => onInput(event.target.value)}
         placeholder="Enter value"
-        inputClass="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+        inputClass="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body outline-none focus:border-fg-muted font-mono"
       />
     </div>
   `;
@@ -57,7 +57,7 @@ export const WelcomePlaceholderReviewStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Add Missing Env Vars</h2>
+        <h2 class="text-sm font-medium text-body">Add Missing Env Vars</h2>
       </div>
 
       <div class="space-y-2 max-h-80 overflow-y-auto">
@@ -76,7 +76,7 @@ export const WelcomePlaceholderReviewStep = ({
       </div>
 
       <div
-        class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+        class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
       >
         ${unresolvedCount > 0
           ? `${unresolvedCount} detected env var${unresolvedCount === 1 ? "" : "s"} need values. You can continue without them, but the gateway might fail to start.`

package/lib/public/js/components/onboarding/welcome-pre-step.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { kGithubFlowFresh, kGithubFlowImport } from "./welcome-config.js";
 
 const html = htm.bind(h);
@@ -13,7 +13,7 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         class="w-full flex items-center gap-4 text-left p-4 rounded-xl ac-path-card"
       >
         <div
-          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/30 rounded-lg border border-border text-gray-300"
+          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-field rounded-lg border border-border text-body"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +28,12 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         </div>
         <div>
           <div
-            class="ac-path-title text-sm font-medium text-gray-200 mb-0.5 transition-colors duration-150"
+            class="ac-path-title text-sm font-medium text-body mb-0.5 transition-colors duration-150"
           >
             Start fresh
           </div>
           <div
-            class="ac-path-desc text-xs text-gray-500 transition-colors duration-150"
+            class="ac-path-desc text-xs text-fg-muted transition-colors duration-150"
           >
             Create a new repository and set up your agent from scratch.
           </div>
@@ -46,7 +46,7 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         class="w-full flex items-center gap-4 text-left p-4 rounded-xl ac-path-card"
       >
         <div
-          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/30 rounded-lg border border-border text-gray-300"
+          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-field rounded-lg border border-border text-body"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -66,16 +66,16 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-2 mb-0.5">
             <div
-              class="ac-path-title text-sm font-medium text-gray-200 transition-colors duration-150"
+              class="ac-path-title text-sm font-medium text-body transition-colors duration-150"
             >
               Import existing setup
             </div>
-            <span class="shrink-0 ml-1 text-[11px] text-yellow-300">
+            <span class="shrink-0 ml-1 text-[11px] text-status-warning">
               Experimental
             </span>
           </div>
           <div
-            class="ac-path-desc text-xs text-gray-500 transition-colors duration-150"
+            class="ac-path-desc text-xs text-fg-muted transition-colors duration-150"
           >
             Connect an existing repository that already has an OpenClaw setup.
           </div>