@tonyclaw/agent-inspector 3.0.41 → 3.0.43

package/src/components/providers/SettingsDialog.tsx

@@ -316,7 +316,11 @@ function CopyableSetupValue({
           onClick={() => onCopy(id, value)}
           aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
         >
-          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+          {copied ? (
+            <Check className="size-3.5 text-status-success" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
         </Button>
       </div>
     </div>
@@ -425,15 +429,15 @@ function OnboardingSettingsTab(): JSX.Element {
       </div>
       <div className="grid gap-2 rounded-md bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
         <div className="flex items-center gap-2">
-          <Check className="size-3.5 text-emerald-500" />
+          <Check className="size-3.5 text-status-success" />
           <span>Provider test creates a traceable memory probe session.</span>
         </div>
         <div className="flex items-center gap-2">
-          <Check className="size-3.5 text-emerald-500" />
+          <Check className="size-3.5 text-status-success" />
           <span>Captured sessions can produce reviewable memory candidates.</span>
         </div>
         <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-emerald-500" />
+          <Check className="mt-0.5 size-3.5 text-status-success" />
           <span>
             Streamable HTTP clients should use the MCP URL directly. Stdio-only clients should use
             <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
@@ -443,7 +447,7 @@ function OnboardingSettingsTab(): JSX.Element {
           </span>
         </div>
         <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-emerald-500" />
+          <Check className="mt-0.5 size-3.5 text-status-success" />
           <span>
             OpenCode onboarding safely merges{" "}
             <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
@@ -461,7 +465,7 @@ function OnboardingSettingsTab(): JSX.Element {
           </span>
         </div>
         <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-emerald-500" />
+          <Check className="mt-0.5 size-3.5 text-status-success" />
           <span>
             MiMo Code onboarding safely merges{" "}
             <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
@@ -479,7 +483,7 @@ function OnboardingSettingsTab(): JSX.Element {
           </span>
         </div>
         <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-emerald-500" />
+          <Check className="mt-0.5 size-3.5 text-status-success" />
           <span>
             If your AI tool runs in another container or host, replace localhost with an address
             reachable from that tool and verify the network/firewall path.

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -49,7 +49,7 @@ const STATUS_CUE_CLASSES: Record<
   }
 > = {
   success: {
-    frame: "border-cyan-200/15 bg-white/[0.04] text-slate-100",
+    frame: "border-cyan-200/15 bg-white/[0.04] text-text-strong",
   },
   client_error: {
     frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
@@ -580,7 +580,7 @@ export const LogEntryHeader = memo(function ({
           )}
 
           <span
-            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-text-strong"
             aria-hidden="true"
           >
             {expanded ? (

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -331,7 +331,7 @@ export const TurnGroup = memo(function TurnGroup({
               <span className="flex-1 min-w-0" />
 
               <span
-                className="bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
+                className="bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-text-strong"
                 aria-hidden="true"
               >
                 <ChevronRight className="size-4 shrink-0" />

package/src/components/ui/icon-trigger.ts

@@ -1,2 +1,2 @@
 export const INSPECTOR_ICON_TRIGGER_CLASS =
-  "relative size-8 rounded-md border-0 bg-white/[0.035] text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:bg-white/[0.065] hover:text-accent-foreground focus-visible:ring-ring/50";
+  "relative size-9 rounded-md border border-border/70 bg-muted/60 text-muted-foreground transition-colors hover:bg-muted hover:text-accent-foreground focus-visible:ring-ring/50 max-lg:size-11";

package/src/lib/themeMode.ts

@@ -19,11 +19,7 @@ export function normalizeThemeMode(value: string | null): ThemeMode {
 
 export function applyThemeMode(themeMode: ThemeMode): void {
   if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  root.classList.toggle("dark", themeMode === "dark");
-  root.classList.toggle("eye-care", themeMode === "eye-care");
-  root.dataset.theme = themeMode;
-  root.style.colorScheme = themeMode === "dark" ? "dark" : "light";
+  document.documentElement.dataset.theme = themeMode;
 }
 
 export function readStoredThemeMode(): ThemeMode {

package/src/lib/uiScale.ts

@@ -10,6 +10,7 @@ export const UI_SCALE_STORAGE_KEY = "agent-inspector.uiScale";
 export const UI_SCALE_AUTO_MAX_DPR = 1.25;
 export const UI_SCALE_AUTO_MEDIUM_WIDTH = 2200;
 export const UI_SCALE_AUTO_LARGE_WIDTH = 3000;
+export const UI_SCALE_MINIMUM_COMPACT_FONT_SIZE = 12;
 
 function positiveFinite(value: number, fallback: number): number {
   return Number.isFinite(value) && value > 0 ? value : fallback;
@@ -64,6 +65,10 @@ export function formatUiScale(scale: number): string {
   return `${Math.round(scale * 100)}%`;
 }
 
+export function resolveCompactFontSize(baseSize: number, scale: number): number {
+  return Math.max(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE, baseSize * scale);
+}
+
 export function readUiScaleEnvironment(): UiScaleEnvironment {
   if (typeof window === "undefined") {
     return { viewportWidth: 1280, screenWidth: 1280, devicePixelRatio: 1 };
@@ -86,9 +91,9 @@ export function applyUiScalePreference(preference: UiScalePreference): number {
   root.dataset.uiScaleResolved = String(Math.round(scale * 100));
   root.style.setProperty("--inspector-ui-scale", String(scale));
   root.style.setProperty("--inspector-root-font-size", `${String(16 * scale)}px`);
-  root.style.setProperty("--inspector-font-9", `${String(9 * scale)}px`);
-  root.style.setProperty("--inspector-font-10", `${String(10 * scale)}px`);
-  root.style.setProperty("--inspector-font-11", `${String(11 * scale)}px`);
+  root.style.setProperty("--inspector-font-9", `${String(resolveCompactFontSize(9, scale))}px`);
+  root.style.setProperty("--inspector-font-10", `${String(resolveCompactFontSize(10, scale))}px`);
+  root.style.setProperty("--inspector-font-11", `${String(resolveCompactFontSize(11, scale))}px`);
   root.style.setProperty("--inspector-font-13", `${String(13 * scale)}px`);
   return scale;
 }

package/src/routes/__root.tsx

@@ -16,6 +16,7 @@ import {
   UI_SCALE_AUTO_LARGE_WIDTH,
   UI_SCALE_AUTO_MAX_DPR,
   UI_SCALE_AUTO_MEDIUM_WIDTH,
+  UI_SCALE_MINIMUM_COMPACT_FONT_SIZE,
   UI_SCALE_STORAGE_KEY,
 } from "../lib/uiScale";
 
@@ -27,15 +28,9 @@ const themeModeBootstrapScript = `
       ? storedThemeMode
       : "dark";
     var root = document.documentElement;
-    root.classList.toggle("dark", themeMode === "dark");
-    root.classList.toggle("eye-care", themeMode === "eye-care");
     root.dataset.theme = themeMode;
-    root.style.colorScheme = themeMode === "dark" ? "dark" : "light";
   } catch (error) {
-    document.documentElement.classList.add("dark");
-    document.documentElement.classList.remove("eye-care");
     document.documentElement.dataset.theme = "dark";
-    document.documentElement.style.colorScheme = "dark";
   }
 })();
 `;
@@ -76,9 +71,9 @@ const uiScaleBootstrapScript = `
     root.dataset.uiScaleResolved = String(Math.round(resolvedUiScale * 100));
     root.style.setProperty("--inspector-ui-scale", String(resolvedUiScale));
     root.style.setProperty("--inspector-root-font-size", String(16 * resolvedUiScale) + "px");
-    root.style.setProperty("--inspector-font-9", String(9 * resolvedUiScale) + "px");
-    root.style.setProperty("--inspector-font-10", String(10 * resolvedUiScale) + "px");
-    root.style.setProperty("--inspector-font-11", String(11 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-9", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 9 * resolvedUiScale)) + "px");
+    root.style.setProperty("--inspector-font-10", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 10 * resolvedUiScale)) + "px");
+    root.style.setProperty("--inspector-font-11", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 11 * resolvedUiScale)) + "px");
     root.style.setProperty("--inspector-font-13", String(13 * resolvedUiScale) + "px");
   } catch (error) {
     document.documentElement.dataset.uiScale = "auto";
@@ -158,7 +153,7 @@ function RootNotFoundComponent() {
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="en" className="dark" data-theme="dark" suppressHydrationWarning={true}>
+    <html lang="en" data-theme="dark" suppressHydrationWarning={true}>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeModeBootstrapScript }} />
         <script dangerouslySetInnerHTML={{ __html: uiScaleBootstrapScript }} />

package/styles/globals.css

@@ -1,9 +1,10 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./themes.css";
 @plugin "@tailwindcss/typography";
 
-@custom-variant dark (&:is(.dark *));
-@custom-variant eye-care (&:is(.eye-care *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant eye-care (&:where([data-theme="eye-care"], [data-theme="eye-care"] *));
 
 @theme inline {
   --color-background: var(--background);
@@ -32,6 +33,11 @@
   --color-status-watch: var(--inspector-status-watch);
   --color-status-danger: var(--inspector-status-danger);
   --color-status-accent: var(--inspector-status-accent);
+  --color-text-strong: var(--inspector-text-strong);
+  --color-text-default: var(--inspector-text-default);
+  --color-text-muted: var(--inspector-text-muted);
+  --color-text-subtle: var(--inspector-text-subtle);
+  --color-text-link: var(--inspector-text-link);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -58,128 +64,12 @@
   --radius: 0.625rem;
   --inspector-ui-scale: 1;
   --inspector-root-font-size: 16px;
-  --inspector-minimum-font-size: 0.6875rem;
+  --inspector-minimum-font-size: 0.75rem;
   --inspector-font-8: var(--inspector-minimum-font-size);
   --inspector-font-9: var(--inspector-minimum-font-size);
   --inspector-font-10: var(--inspector-minimum-font-size);
   --inspector-font-11: var(--inspector-minimum-font-size);
   --inspector-font-13: 13px;
-  --inspector-surface-low: color-mix(in oklch, var(--foreground) 3.5%, transparent);
-  --inspector-surface-medium: color-mix(in oklch, var(--foreground) 6%, transparent);
-  --inspector-status-cool: oklch(0.42 0.12 225);
-  --inspector-status-info: oklch(0.42 0.15 265);
-  --inspector-status-success: oklch(0.4 0.11 158);
-  --inspector-status-watch: oklch(0.42 0.12 65);
-  --inspector-status-danger: oklch(0.44 0.18 25);
-  --inspector-status-accent: oklch(0.42 0.14 295);
-  --background: oklch(0.976 0.004 250);
-  --foreground: oklch(0.18 0.012 255);
-  --card: oklch(0.995 0.002 250);
-  --card-foreground: oklch(0.18 0.012 255);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.012 255);
-  --primary: oklch(0.27 0.018 255);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.935 0.007 250);
-  --secondary-foreground: oklch(0.24 0.018 255);
-  --muted: oklch(0.925 0.006 250);
-  --muted-foreground: oklch(0.46 0.018 255);
-  --accent: oklch(0.91 0.018 235);
-  --accent-foreground: oklch(0.24 0.035 240);
-  --destructive: oklch(0.5 0.2 27);
-  --warning: oklch(0.43 0.12 70);
-  --border: oklch(0.85 0.01 250);
-  --input: oklch(0.78 0.015 250);
-  --ring: oklch(0.48 0.11 230);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.955 0.006 250);
-  --sidebar-foreground: oklch(0.18 0.012 255);
-  --sidebar-primary: oklch(0.27 0.018 255);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.91 0.018 235);
-  --sidebar-accent-foreground: oklch(0.24 0.035 240);
-  --sidebar-border: oklch(0.85 0.01 250);
-  --sidebar-ring: oklch(0.48 0.11 230);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --warning: oklch(0.76 0.14 78);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-.eye-care {
-  --inspector-status-cool: oklch(0.38 0.08 195);
-  --inspector-status-info: oklch(0.4 0.12 270);
-  --inspector-status-success: oklch(0.36 0.1 155);
-  --inspector-status-watch: oklch(0.39 0.1 65);
-  --inspector-status-danger: oklch(0.41 0.16 25);
-  --inspector-status-accent: oklch(0.4 0.12 295);
-  --background: oklch(0.932 0.018 135);
-  --foreground: oklch(0.22 0.03 150);
-  --card: oklch(0.975 0.012 132);
-  --card-foreground: oklch(0.22 0.03 150);
-  --popover: oklch(0.985 0.01 132);
-  --popover-foreground: oklch(0.22 0.03 150);
-  --primary: oklch(0.36 0.09 154);
-  --primary-foreground: oklch(0.985 0.006 125);
-  --secondary: oklch(0.875 0.028 135);
-  --secondary-foreground: oklch(0.26 0.04 150);
-  --muted: oklch(0.885 0.022 132);
-  --muted-foreground: oklch(0.4 0.04 150);
-  --accent: oklch(0.84 0.045 148);
-  --accent-foreground: oklch(0.25 0.055 151);
-  --destructive: oklch(0.47 0.17 28);
-  --warning: oklch(0.4 0.1 70);
-  --border: oklch(0.76 0.028 132);
-  --input: oklch(0.7 0.034 132);
-  --ring: oklch(0.42 0.1 154);
-  --chart-1: oklch(0.49 0.11 153);
-  --chart-2: oklch(0.55 0.1 226);
-  --chart-3: oklch(0.67 0.13 77);
-  --chart-4: oklch(0.56 0.11 307);
-  --chart-5: oklch(0.58 0.15 25);
-  --sidebar: oklch(0.9 0.024 135);
-  --sidebar-foreground: oklch(0.22 0.03 150);
-  --sidebar-primary: oklch(0.36 0.09 154);
-  --sidebar-primary-foreground: oklch(0.985 0.006 125);
-  --sidebar-accent: oklch(0.84 0.045 148);
-  --sidebar-accent-foreground: oklch(0.25 0.055 151);
-  --sidebar-border: oklch(0.76 0.028 132);
-  --sidebar-ring: oklch(0.42 0.1 154);
 }
 
 @keyframes crab-crawl-down {
@@ -344,19 +234,19 @@
 
 @layer utilities {
   [class~="text-[8px]"] {
-    font-size: var(--inspector-font-8);
+    font-size: var(--inspector-font-8) !important;
   }
 
   [class~="text-[9px]"] {
-    font-size: var(--inspector-font-9);
+    font-size: var(--inspector-font-9) !important;
   }
 
   [class~="text-[10px]"] {
-    font-size: var(--inspector-font-10);
+    font-size: var(--inspector-font-10) !important;
   }
 
   [class~="text-[11px]"] {
-    font-size: var(--inspector-font-11);
+    font-size: var(--inspector-font-11) !important;
   }
 
   [class~="text-[13px]"] {
@@ -411,7 +301,7 @@
 
   /* Legacy surfaces were tuned against a dark canvas. Keep them theme-aware while
      components migrate to semantic color utilities. */
-  :root:not(.dark)
+  :root:not([data-theme="dark"])
     :is(
       [class~="bg-white/[0.008]"],
       [class~="bg-white/[0.025]"],
@@ -424,7 +314,7 @@
     background-color: var(--inspector-surface-low);
   }
 
-  :root:not(.dark)
+  :root:not([data-theme="dark"])
     :is(
       [class~="bg-white/[0.055]"],
       [class~="bg-white/[0.06]"],
@@ -446,7 +336,7 @@
     background-color: var(--inspector-surface-medium);
   }
 
-  :root:not(.dark)
+  :root:not([data-theme="dark"])
     :is(
       [class~="border-white/[0.045]"],
       [class~="border-white/[0.055]"],
@@ -457,7 +347,7 @@
     border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
   }
 
-  :root:not(.dark)
+  :root:not([data-theme="dark"])
     :is(
       [class~="hover:bg-white/[0.03]"],
       [class~="hover:bg-white/[0.035]"],
@@ -472,7 +362,7 @@
     background-color: color-mix(in oklch, var(--foreground) 9%, transparent);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-white/35"],
       [class~="text-white/40"],
@@ -482,10 +372,10 @@
       [class~="text-white/60"],
       [class~="text-slate-300"]
     ) {
-    color: var(--muted-foreground);
+    color: var(--inspector-text-subtle);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-white/75"],
       [class~="text-slate-50"],
@@ -494,24 +384,26 @@
       [class~="text-zinc-50"],
       [class~="text-zinc-100"]
     ) {
-    color: var(--foreground);
+    color: var(--inspector-text-strong);
   }
 
-  :root:not(.dark) [class~="bg-zinc-950"] {
+  :root:not([data-theme="dark"]) [class~="bg-zinc-950"] {
     background-color: var(--popover);
   }
 
-  :root:not(.dark) [class*="shadow-[inset_0_0_0_1px_rgba(255,255,255"] {
+  :root:not([data-theme="dark"])
+    [class*="shadow-[inset_0_0_0_1px_rgba(255,255,255"] {
     box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent) !important;
   }
 
-  :root:not(.dark) [class*="shadow-[inset_0_1px_0_rgba(255,255,255"] {
+  :root:not([data-theme="dark"])
+    [class*="shadow-[inset_0_1px_0_rgba(255,255,255"] {
     box-shadow:
       inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
       0 8px 24px color-mix(in oklch, var(--foreground) 8%, transparent) !important;
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-cyan-100"],
       [class~="text-cyan-100/70"],
@@ -533,7 +425,7 @@
     color: var(--inspector-status-cool);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-blue-300"],
       [class~="text-blue-300/85"],
@@ -543,7 +435,7 @@
     color: var(--inspector-status-info);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-emerald-100"],
       [class~="text-emerald-200"],
@@ -558,7 +450,7 @@
     color: var(--inspector-status-success);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-amber-100"],
       [class~="text-amber-100/90"],
@@ -571,7 +463,7 @@
     color: var(--inspector-status-watch);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-red-100"],
       [class~="text-red-200"],
@@ -586,7 +478,7 @@
     color: var(--inspector-status-danger);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="text-violet-100"],
       [class~="text-violet-200"],
@@ -598,7 +490,7 @@
     color: var(--inspector-status-accent);
   }
 
-  :root:not(.dark)
+  :root
     :is(
       [class~="hover:text-cyan-100"],
       [class~="hover:text-cyan-200"],
@@ -606,10 +498,10 @@
       [class~="hover:text-sky-100"],
       [class~="hover:text-sky-300"]
     ):hover {
-    color: var(--inspector-status-cool);
+    color: var(--inspector-text-link);
   }
 
-  :root:not(.dark)
+  :root:not([data-theme="dark"])
     :is(
       [class~="text-amber-500"]:not(svg),
       [class~="text-emerald-500"]:not(svg),

package/styles/theme-scales.css

@@ -0,0 +1,50 @@
+/* Generated by bun run themes:generate. Do not edit directly. */
+
+:root,
+:root[data-theme="light"] {
+  /* @radix-ui/colors: sand */
+  --inspector-neutral-1: #fdfdfc;
+  --inspector-neutral-2: #f9f9f8;
+  --inspector-neutral-3: #f1f0ef;
+  --inspector-neutral-4: #e9e8e6;
+  --inspector-neutral-5: #e2e1de;
+  --inspector-neutral-6: #dad9d6;
+  --inspector-neutral-7: #cfceca;
+  --inspector-neutral-8: #bcbbb5;
+  --inspector-neutral-9: #8d8d86;
+  --inspector-neutral-10: #82827c;
+  --inspector-neutral-11: #63635e;
+  --inspector-neutral-12: #21201c;
+}
+
+:root[data-theme="dark"] {
+  /* @radix-ui/colors: slateDark */
+  --inspector-neutral-1: #111113;
+  --inspector-neutral-2: #18191b;
+  --inspector-neutral-3: #212225;
+  --inspector-neutral-4: #272a2d;
+  --inspector-neutral-5: #2e3135;
+  --inspector-neutral-6: #363a3f;
+  --inspector-neutral-7: #43484e;
+  --inspector-neutral-8: #5a6169;
+  --inspector-neutral-9: #696e77;
+  --inspector-neutral-10: #777b84;
+  --inspector-neutral-11: #b0b4ba;
+  --inspector-neutral-12: #edeef0;
+}
+
+:root[data-theme="eye-care"] {
+  /* @radix-ui/colors: olive */
+  --inspector-neutral-1: #fcfdfc;
+  --inspector-neutral-2: #f8faf8;
+  --inspector-neutral-3: #eff1ef;
+  --inspector-neutral-4: #e7e9e7;
+  --inspector-neutral-5: #dfe2df;
+  --inspector-neutral-6: #d7dad7;
+  --inspector-neutral-7: #cccfcc;
+  --inspector-neutral-8: #b9bcb8;
+  --inspector-neutral-9: #898e87;
+  --inspector-neutral-10: #7f847d;
+  --inspector-neutral-11: #60655f;
+  --inspector-neutral-12: #1d211c;
+}