@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/file-viewer/markdown-split-view.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 { EditorSurface } from "./editor-surface.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/file-viewer/media-preview.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/file-viewer/scroll-sync.js

@@ -1,4 +1,4 @@
-import { useRef } from "https://esm.sh/preact/hooks";
+import { useRef } from "preact/hooks";
 
 export const getScrollRatio = (element) => {
   if (!element) return 0;

package/lib/public/js/components/file-viewer/sqlite-viewer.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 { LoadingSpinner } from "../loading-spinner.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/file-viewer/status-banners.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 { ActionButton } from "../action-button.js";
 import { LockLineIcon } from "../icons.js";
 

package/lib/public/js/components/file-viewer/toolbar.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 { ActionButton } from "../action-button.js";
 import { SegmentedControl } from "../segmented-control.js";
 import { DeleteBinLineIcon, RestartLineIcon, SaveFillIcon } from "../icons.js";

package/lib/public/js/components/file-viewer/use-editor-line-number-sync.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect } from "preact/hooks";
 
 export const useEditorLineNumberSync = ({
   enabled = false,

package/lib/public/js/components/file-viewer/use-editor-selection-restore.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import { readStoredEditorSelection } from "./storage.js";
 import { clampSelectionIndex } from "./utils.js";
 import { getScrollRatio } from "./scroll-sync.js";

package/lib/public/js/components/file-viewer/use-file-diff.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { fetchBrowseFileDiff } from "../../lib/api.js";
 
 export const useFileDiff = ({

package/lib/public/js/components/file-viewer/use-file-loader.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import { fetchBrowseSqliteTable, fetchFileContent } from "../../lib/api.js";
 import {
   clearStoredFileDraft,

package/lib/public/js/components/file-viewer/use-file-viewer-draft-sync.js

@@ -1,4 +1,4 @@
-import { useEffect } from "https://esm.sh/preact/hooks";
+import { useEffect } from "preact/hooks";
 import {
   clearStoredFileDraft,
   updateDraftIndex,

package/lib/public/js/components/file-viewer/use-file-viewer-hotkeys.js

@@ -1,4 +1,4 @@
-import { useEffect } from "https://esm.sh/preact/hooks";
+import { useEffect } from "preact/hooks";
 
 export const useFileViewerHotkeys = ({
   canEditFile,

package/lib/public/js/components/file-viewer/use-file-viewer.js

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import { marked } from "https://esm.sh/marked";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { marked } from "marked";
 import { deleteBrowseFile, restoreBrowseFile, saveFileContent } from "../../lib/api.js";
 import {
   getFileSyntaxKind,

package/lib/public/js/components/gateway.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { fetchOpenclawVersion, updateOpenclaw } from "../lib/api.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
@@ -200,15 +200,15 @@ const VersionRow = ({
   return html`
     <div class="flex items-center justify-between gap-3">
       <div class="min-w-0">
-        <p class="text-xs text-gray-300 truncate">
-          <span class="text-gray-500">${label}</span>${" "}${version
+        <p class="text-xs text-body truncate">
+          <span class="text-fg-muted">${label}</span>${" "}${version
             ? `${version}`
             : "..."}
         </p>
         ${error &&
         effectiveHasUpdate &&
         html`<div
-          class="mt-1 text-xs text-red-300 bg-red-900/30 border border-red-800 rounded-lg px-2 py-1"
+          class="mt-1 text-xs text-status-error bg-status-error-bg border border-status-error-border rounded-lg px-2 py-1"
         >
           ${error}
         </div>`}
@@ -222,7 +222,7 @@ const VersionRow = ({
             target="_blank"
             rel="noreferrer"
             onclick=${() => setHasViewedChangelog(true)}
-            class="hidden md:inline text-xs text-gray-500 hover:text-gray-300 transition-colors"
+            class="hidden md:inline text-xs text-fg-muted hover:text-body transition-colors"
             >View changelog</a
           >
         `}
@@ -264,7 +264,7 @@ const VersionRow = ({
           target="_blank"
           rel="noreferrer"
           onclick=${() => setHasViewedChangelog(true)}
-          class="inline-flex items-center justify-center flex-1 h-9 text-xs rounded-lg border border-border text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-colors"
+          class="inline-flex items-center justify-center flex-1 h-9 text-xs rounded-lg border border-border text-fg-muted hover:text-body hover:border-fg-muted transition-colors"
           >View changelog</a
         >
         <${UpdateActionButton}
@@ -353,14 +353,14 @@ export const Gateway = ({
         <div class="min-w-0 flex items-center gap-2 text-sm">
           <span class=${dotClass}></span>
           <span class="font-semibold">Gateway:</span>
-          <span class="text-gray-400"
+          <span class="text-fg-muted"
             >${restarting ? "restarting..." : status || "checking..."}</span
           >
         </div>
         <div class="flex items-center gap-3 shrink-0">
           ${!restarting && isRunning
             ? html`
-                <span class="text-xs text-gray-500 whitespace-nowrap"
+                <span class="text-xs text-fg-muted whitespace-nowrap"
                   >Uptime: ${formatDuration(liveUptimeMs)}</span
                 >
               `
@@ -389,7 +389,7 @@ export const Gateway = ({
                     : `w-2 h-2 rounded-full ${watchdogDotClass}`}
                 ></span>
                 <span class="font-semibold">Watchdog:</span>
-                <span class="text-gray-400">${watchdogLabel}</span>
+                <span class="text-fg-muted">${watchdogLabel}</span>
               </button>
             `
           : html`
@@ -400,7 +400,7 @@ export const Gateway = ({
                     : `w-2 h-2 rounded-full ${watchdogDotClass}`}
                 ></span>
                 <span class="font-semibold">Watchdog:</span>
-                <span class="text-gray-400">${watchdogLabel}</span>
+                <span class="text-fg-muted">${watchdogLabel}</span>
               </div>
             `}
         ${onRepair

package/lib/public/js/components/general/index.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 { Gateway } from "../gateway.js";
 import { Channels } from "../channels.js";
 import { ChannelOperationsPanel } from "../channel-operations-panel.js";
@@ -97,7 +97,7 @@ export const GeneralTab = ({
           <div class="flex items-center justify-between gap-3">
             <div class="flex items-center gap-2 min-w-0">
               <svg
-                class="w-4 h-4 text-gray-400"
+                class="w-4 h-4 text-fg-muted"
                 viewBox="0 0 16 16"
                 fill="currentColor"
               >
@@ -108,19 +108,19 @@ export const GeneralTab = ({
               <a
                 href="https://github.com/${state.repo}"
                 target="_blank"
-                class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate"
+                class="text-sm text-fg-muted hover:text-body transition-colors truncate"
                 >${state.repo}</a
               >
             </div>
             <div class="flex items-center gap-2 shrink-0">
-              <span class="text-xs text-gray-400">Auto-sync</span>
+              <span class="text-xs text-fg-muted">Auto-sync</span>
               <div class="relative">
                 <select
                   value=${state.syncCronChoice}
                   onchange=${(event) =>
                     actions.handleSyncCronChoiceChange(event.target.value)}
                   disabled=${state.savingSyncCron}
-                  class="appearance-none bg-black/30 border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-gray-300 ${state.savingSyncCron
+                  class="appearance-none bg-field border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-body ${state.savingSyncCron
                     ? "opacity-50 cursor-not-allowed"
                     : ""}"
                   title=${state.syncCron?.installed === false
@@ -133,7 +133,7 @@ export const GeneralTab = ({
                   <option value="0 0 * * *">Daily</option>
                 </select>
                 <${ChevronDownIcon}
-                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500"
+                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-muted"
                 />
               </div>
             </div>

package/lib/public/js/components/general/use-general-tab.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import {
   approveDevice,
   approvePairing,

package/lib/public/js/components/global-restart-banner.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 { UpdateActionButton } from "./update-action-button.js";
 import { CloseIcon } from "./icons.js";
 

package/lib/public/js/components/google/account-row.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 { Badge } from "../badge.js";
 import { ScopePicker } from "../scope-picker.js";
 import { GmailWatchToggle } from "./gmail-watch-toggle.js";
@@ -32,11 +32,11 @@ export const GoogleAccountRow = ({
 }) => {
   const scopesChanged = !scopeListsEqual(scopes, savedScopes);
   return html`
-    <div class="border border-border rounded-lg bg-black/20 overflow-visible">
+    <div class="border border-border rounded-lg bg-field overflow-visible">
       <button
         type="button"
         onclick=${() => onToggleExpanded?.(account.id)}
-        class="w-full text-left px-3 py-2.5 flex items-center justify-between hover:bg-black/20"
+        class="w-full text-left px-3 py-2.5 flex items-center justify-between hover:bg-field"
       >
         <div class="min-w-0">
           <div class="text-sm font-medium truncate">${account.email}</div>
@@ -46,14 +46,14 @@ export const GoogleAccountRow = ({
           <${Badge} tone=${account.authenticated ? "success" : "warning"}>
             ${account.authenticated ? "Connected" : "Awaiting sign-in"}
           </${Badge}>
-          <span class="text-xs text-gray-500">${expanded ? "▾" : "▸"}</span>
+          <span class="text-xs text-fg-muted">${expanded ? "▾" : "▸"}</span>
         </div>
       </button>
       ${expanded
         ? html`
             <div class="px-3 pb-3 space-y-3 border-t border-border">
               <div class="flex justify-between items-center pt-3">
-                <span class="text-sm text-gray-400">Select permissions</span>
+                <span class="text-sm text-fg-muted">Select permissions</span>
                 ${account.authenticated
                   ? html`<button
                       type="button"
@@ -76,7 +76,7 @@ export const GoogleAccountRow = ({
                     <div class="-mx-3 mt-4 mb-2 border-y border-border">
                       <div class="px-3 py-3 space-y-2">
                         <div class="flex justify-between items-center gap-2">
-                          <span class="text-sm text-gray-400">Incoming events</span>
+                          <span class="text-sm text-fg-muted">Incoming events</span>
                           <button
                             type="button"
                             onclick=${() => onOpenGmailSetup?.(account.id)}

package/lib/public/js/components/google/add-account-modal.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 { ActionButton } from "../action-button.js";
 import { ModalShell } from "../modal-shell.js";
 import { PageHeader } from "../page-header.js";
@@ -55,16 +55,16 @@ export const AddGoogleAccountModal = ({
           class="h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
           aria-label="Close modal"
         >
-          <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+          <${CloseIcon} className="w-3.5 h-3.5 text-body" />
         </button>
       `}
     />
     <div class="space-y-3">
       <div>
-        <label class="text-sm text-gray-400 block mb-1"
+        <label class="text-sm text-fg-muted block mb-1"
           >Email (Google account to authorize)</label
         >
-        <p class="text-xs text-gray-500 mb-2">
+        <p class="text-xs text-fg-muted mb-2">
           This adds another account to the same company workspace. Only one company workspace is supported.
         </p>
         <input
@@ -72,10 +72,10 @@ export const AddGoogleAccountModal = ({
           value=${email}
           onInput=${(e) => setEmail(e.target.value)}
           placeholder="you@company.com"
-          class="w-full bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+          class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-fg-muted"
         />
       </div>
-      ${error ? html`<div class="text-red-400 text-xs">${error}</div>` : null}
+      ${error ? html`<div class="text-status-error-muted text-xs">${error}</div>` : null}
     </div>
     <div class="pt-2">
       <${ActionButton}

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -1,11 +1,11 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import { ModalShell } from "../modal-shell.js";
 import { PageHeader } from "../page-header.js";
 import { CloseIcon } from "../icons.js";
@@ -58,9 +58,9 @@ const kTutorialStepTitles = kSetupStepTitles.slice(0, 3);
 const kNoSessionSelectedValue = kNoDestinationSessionValue;
 
 const renderCommandBlock = (command = "", onCopy = () => {}) => html`
-  <div class="rounded-lg border border-border bg-black/30 p-3">
+  <div class="rounded-lg border border-border bg-field p-3">
     <pre
-      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-gray-300"
+      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-body"
     >
 ${command}</pre
     >
@@ -240,9 +240,9 @@ export const GmailSetupWizard = ({
         class="absolute top-6 right-6 h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
         aria-label="Close modal"
       >
-        <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+        <${CloseIcon} className="w-3.5 h-3.5 text-body" />
       </button>
-      <div class="text-xs text-gray-500">Gmail Pub / Sub Setup</div>
+      <div class="text-xs text-fg-muted">Gmail Pub / Sub Setup</div>
       <div class="flex items-center gap-1">
         ${stepTitles.map(
           (title, idx) => html`
@@ -258,19 +258,19 @@ export const GmailSetupWizard = ({
         title=${`Step ${step + 1} of ${totalSteps}: ${stepTitles[step]}`}
         actions=${null}
       />
-      ${localError ? html`<div class="text-xs text-red-400">${localError}</div>` : null}
+      ${localError ? html`<div class="text-xs text-status-error-muted">${localError}</div>` : null}
       ${
         needsProjectId
           ? html`
               <div
-                class="rounded-lg border border-border bg-black/20 p-3 space-y-2"
+                class="rounded-lg border border-border bg-field p-3 space-y-2"
               >
                 <div class="text-sm">
                   ${editingProjectId
                     ? "Change project ID"
                     : "Project ID required"}
                 </div>
-                <div class="text-xs text-gray-500">
+                <div class="text-xs text-fg-muted">
                   Find it in the${" "}
                   <a
                     href="https://console.cloud.google.com/home/dashboard"
@@ -285,7 +285,7 @@ export const GmailSetupWizard = ({
                   type="text"
                   value=${projectIdInput}
                   oninput=${(event) => setProjectIdInput(event.target.value)}
-                  class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none"
+                  class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none"
                   placeholder="my-gcp-project"
                 />
               </div>
@@ -296,10 +296,10 @@ export const GmailSetupWizard = ({
         !needsProjectId && step === 0
           ? html`
               <div class="space-y-1">
-                <div class="text-xs text-gray-500">
+                <div class="text-xs text-fg-muted">
                   Using project <code>${detectedProjectId}</code>.
                 </div>
-                <div class="text-xs text-gray-500">
+                <div class="text-xs text-fg-muted">
                   If <code>gcloud</code> is not installed on your computer,
                   follow the official install guide:${" "}
                   <a
@@ -351,7 +351,7 @@ export const GmailSetupWizard = ({
                 handleCopy(commands?.createSubscription || ""),
               )}
               <div
-                class="rounded-lg border border-border bg-black/20 p-3 space-y-2"
+                class="rounded-lg border border-border bg-field p-3 space-y-2"
               >
                 <${SessionSelectField}
                   label="Deliver to"
@@ -370,10 +370,10 @@ export const GmailSetupWizard = ({
                   helperText=${hasExistingWebhookSetup
                     ? "This Gmail webhook has already been created. To edit delivery routing, ask your agent."
                     : null}
-                  selectClassName="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                  helperClassName="text-xs text-gray-500"
-                  statusClassName="text-[11px] text-gray-500"
-                  errorClassName="text-[11px] text-red-400"
+                  selectClassName="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                  helperClassName="text-xs text-fg-muted"
+                  statusClassName="text-[11px] text-fg-muted"
+                  errorClassName="text-[11px] text-status-error-muted"
                 />
               </div>
             `
@@ -383,16 +383,16 @@ export const GmailSetupWizard = ({
         !hasExistingWebhookSetup && step === 4
           ? html`
               <div
-                class="rounded-lg border border-border bg-black/20 p-3 space-y-3"
+                class="rounded-lg border border-border bg-field p-3 space-y-3"
               >
                 <div class="pt-1 space-y-1">
                   <div class="text-sm">Continue with your agent</div>
-                  <div class="text-xs text-gray-500">
+                  <div class="text-xs text-fg-muted">
                     Tell your OpenClaw agent about what you want to build with
                     incoming email to continue the setup.
                   </div>
                   <div class="pt-2 space-y-2">
-                    <div class="text-[11px] text-gray-500">
+                    <div class="text-[11px] text-fg-muted">
                       Send this to session
                     </div>
                     <div class="flex items-center gap-2">
@@ -409,7 +409,7 @@ export const GmailSetupWizard = ({
                         disabled=${loadingAgentSessions ||
                         sendingToAgent ||
                         agentMessageSent}
-                        class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                        class="flex-1 min-w-0 bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         ${!selectedSessionKey
                           ? html`<option value=${kNoSessionSelectedValue}>
@@ -436,12 +436,12 @@ export const GmailSetupWizard = ({
                       />
                     </div>
                     ${loadingAgentSessions
-                      ? html`<div class="text-[11px] text-gray-500">
+                      ? html`<div class="text-[11px] text-fg-muted">
                           Loading sessions...
                         </div>`
                       : null}
                     ${agentSessionsError
-                      ? html`<div class="text-[11px] text-red-400">
+                      ? html`<div class="text-[11px] text-status-error-muted">
                           ${agentSessionsError}
                         </div>`
                       : null}

package/lib/public/js/components/google/gmail-watch-toggle.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 { Badge } from "../badge.js";
 import { ToggleSwitch } from "../toggle-switch.js";
 import { InfoTooltip } from "../info-tooltip.js";
@@ -32,8 +32,8 @@ export const GmailWatchToggle = ({
       : false;
   if (!hasGmailReadScope) {
     return html`
-      <div class="bg-black/30 rounded-lg px-3 py-2">
-        <div class="text-xs text-gray-500">
+      <div class="bg-field rounded-lg px-3 py-2">
+        <div class="text-xs text-fg-muted">
           Gmail watch requires <code>gmail:read</code>. Add it in permissions
           above, then update permissions.
         </div>
@@ -45,7 +45,7 @@ export const GmailWatchToggle = ({
   const enabled = Boolean(watchStatus?.enabled);
   return html`
     <div
-      class="flex items-center justify-between bg-black/30 border border-transparent rounded-lg px-3 py-2 cursor-pointer hover:bg-black/40 hover:border-white/20 transition-colors"
+      class="flex items-center justify-between bg-field border border-transparent rounded-lg px-3 py-2 cursor-pointer hover:bg-field hover:border-white/20 transition-colors"
       role="button"
       tabindex="0"
       onClick=${() => onOpenWebhook?.()}

package/lib/public/js/components/google/index.js

@@ -1,11 +1,11 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import {
   checkGoogleApis,
   disconnectGoogle,
@@ -415,7 +415,7 @@ export const Google = ({
 
   const renderEmptyState = () => html`
     <div class="text-center space-y-2 pt-3">
-      <div class="rounded-lg border border-border bg-black/20 px-3 py-5">
+      <div class="rounded-lg border border-border bg-field px-3 py-5">
         <div class="flex flex-col items-center justify-center gap-3">
           <img
             src=${kGoogleIconPath}
@@ -424,7 +424,7 @@ export const Google = ({
             loading="lazy"
             decoding="async"
           />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and
             Meet.
           </p>
@@ -489,7 +489,7 @@ export const Google = ({
           : null}
       </div>
       ${loading
-        ? html`<div class="text-gray-500 text-sm text-center py-2">
+        ? html`<div class="text-fg-muted text-sm text-center py-2">
             Loading...
           </div>`
         : accounts.length

package/lib/public/js/components/google/use-gmail-watch.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import {
   fetchGmailConfig,
   renewGmailWatch,

package/lib/public/js/components/google/use-google-accounts.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useMemo, useRef } from "preact/hooks";
 import { fetchGoogleAccounts } from "../../lib/api.js";
 import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 

package/lib/public/js/components/icons.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/info-tooltip.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 { Tooltip } from "./tooltip.js";
 
 const html = htm.bind(h);
@@ -7,7 +7,7 @@ const html = htm.bind(h);
 export const InfoTooltip = ({ text = "", widthClass = "w-64" }) => html`
   <${Tooltip} text=${text} widthClass=${widthClass}>
     <span
-      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default select-none"
+      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-fg-muted text-[10px] text-fg-muted cursor-default select-none"
       aria-label=${text}
       >?</span
     >

package/lib/public/js/components/loading-spinner.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/modal-shell.js

@@ -1,7 +1,7 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect } from "https://esm.sh/preact/hooks";
-import { createPortal } from "https://esm.sh/preact/compat";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import htm from "htm";
 
 const html = htm.bind(h);
 
@@ -29,7 +29,7 @@ export const ModalShell = ({
   return createPortal(
     html`
       <div
-        class="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50"
+        class="fixed inset-0 bg-overlay flex items-center justify-center p-4 z-50"
         onclick=${(event) => {
           if (closeOnOverlayClick && event.target === event.currentTarget) onClose?.();
         }}