fix(web): align themed icon groups across themes

Author: pallyoung

packages/web/src/theme/icon-theme.test.ts

@@ -79,6 +79,48 @@ describe("theme icon resolver", () => {
     }
   });
 
+  it("keeps mobile dock icons aligned within each built-in theme", () => {
+    for (const themeId of [
+      "mint-dark",
+      "mint-light",
+      "graphite-dark",
+      "graphite-light",
+      "nord-dark",
+      "nord-light",
+      "hc-dark",
+      "hc-light",
+    ] as const) {
+      const agentTone = getIconPresentation(themeId, "mobile.dock.agent").tone;
+      const filesTone = getIconPresentation(themeId, "mobile.dock.files").tone;
+      const terminalTone = getIconPresentation(themeId, "mobile.dock.terminal").tone;
+
+      expect(agentTone).toBe(filesTone);
+      expect(filesTone).toBe(terminalTone);
+    }
+  });
+
+  it("keeps settings navigation icons aligned within each built-in theme", () => {
+    for (const themeId of [
+      "mint-dark",
+      "mint-light",
+      "graphite-dark",
+      "graphite-light",
+      "nord-dark",
+      "nord-light",
+      "hc-dark",
+      "hc-light",
+    ] as const) {
+      const tones = new Set([
+        getIconPresentation(themeId, "nav.settings.general").tone,
+        getIconPresentation(themeId, "nav.settings.providers").tone,
+        getIconPresentation(themeId, "nav.settings.appearance").tone,
+        getIconPresentation(themeId, "nav.settings.shortcuts").tone,
+      ]);
+
+      expect(tones.size).toBe(1);
+    }
+  });
+
   it("applies richer common icon tones for mint themes", () => {
     for (const themeId of ["mint-dark", "mint-light"] as const) {
       expect(getIconPresentation(themeId, "nav.agent")).toEqual(
@@ -88,7 +130,7 @@ describe("theme icon resolver", () => {
         expect.objectContaining({ tone: "accent" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.agent")).toEqual(
-        expect.objectContaining({ tone: "accent" })
+        expect.objectContaining({ tone: "info" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.files")).toEqual(
         expect.objectContaining({ tone: "info" })
@@ -138,7 +180,7 @@ describe("theme icon resolver", () => {
         expect.objectContaining({ tone: "accent" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.agent")).toEqual(
-        expect.objectContaining({ tone: "accent" })
+        expect.objectContaining({ tone: "secondary" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.files")).toEqual(
         expect.objectContaining({ tone: "secondary" })
@@ -188,7 +230,7 @@ describe("theme icon resolver", () => {
         expect.objectContaining({ tone: "accent" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.agent")).toEqual(
-        expect.objectContaining({ tone: "accent" })
+        expect.objectContaining({ tone: "info" })
       );
       expect(getIconPresentation(themeId, "mobile.dock.files")).toEqual(
         expect.objectContaining({ tone: "info" })
@@ -227,7 +269,7 @@ describe("theme icon resolver", () => {
         expect.objectContaining({ tone: "secondary" })
       );
       expect(getIconPresentation(themeId, "nav.settings.providers")).toEqual(
-        expect.objectContaining({ tone: "info" })
+        expect.objectContaining({ tone: "secondary" })
       );
     }
   });

packages/web/src/theme/registry.ts

@@ -133,7 +133,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "info",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -213,7 +213,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "info",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -308,7 +308,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "secondary",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -395,7 +395,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "secondary",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -482,7 +482,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "info",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -520,10 +520,6 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
         ...BASE_ICON_THEME.icons["git.commit"],
         tone: "accent",
       },
-      "nav.settings.providers": {
-        ...BASE_ICON_THEME.icons["nav.settings.providers"],
-        tone: "info",
-      },
       "state.warning": {
         ...BASE_ICON_THEME.icons["state.warning"],
       },
@@ -589,7 +585,7 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
       },
       "mobile.dock.agent": {
         ...BASE_ICON_THEME.icons["mobile.dock.agent"],
-        tone: "accent",
+        tone: "info",
       },
       "mobile.dock.files": {
         ...BASE_ICON_THEME.icons["mobile.dock.files"],
@@ -627,10 +623,6 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
         ...BASE_ICON_THEME.icons["git.commit"],
         tone: "accent",
       },
-      "nav.settings.providers": {
-        ...BASE_ICON_THEME.icons["nav.settings.providers"],
-        tone: "info",
-      },
       "state.warning": {
         ...BASE_ICON_THEME.icons["state.warning"],
       },