feat: theme shared status icons

Author: pallyoung

packages/web/src/components/ui/confirm-dialog/index.module.css

@@ -7,9 +7,10 @@
 }
 
 .titleDanger {
-  color: var(--color-warning);
+  color: var(--icon-warning);
 }
 
 .iconDanger {
   flex: none;
+  color: var(--icon-warning);
 }

packages/web/src/components/ui/toast/index.module.css

@@ -64,24 +64,35 @@
 }
 
 .success .icon {
-  color: var(--color-success);
+  color: var(--icon-success);
+  background: var(--icon-surface-success);
 }
 
 .error .icon {
-  color: var(--color-error);
+  color: var(--icon-error);
+  background: var(--icon-surface-error);
 }
 
 .warning .icon {
-  color: var(--color-warning);
+  color: var(--icon-warning);
+  background: var(--icon-surface-warning);
 }
 
 .info .icon {
-  color: var(--color-info);
+  color: var(--icon-info);
+  background: var(--icon-surface-info);
 }
 
 .icon {
   margin-top: 1px;
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--icon-surface-subtle);
 }
 
 .content {

packages/web/src/features/settings/components/config-editor.tsx

@@ -246,7 +246,9 @@ export function ConfigEditor({
         {saveStatus === "saving" ? (
           <Spinner label={config.text} size="sm" />
         ) : (
-          <config.icon size={14} />
+          <span className="config-status__icon" aria-hidden="true">
+            <config.icon size={14} />
+          </span>
         )}
         <span>{config.text}</span>
       </div>

packages/web/src/styles/components.css

@@ -7131,16 +7131,16 @@ textarea.input {
 }
 
 .toast--success .toast__icon {
-  color: var(--color-success);
+  color: var(--icon-success);
 }
 .toast--error .toast__icon {
-  color: var(--color-error);
+  color: var(--icon-error);
 }
 .toast--warning .toast__icon {
-  color: var(--color-warning);
+  color: var(--icon-warning);
 }
 .toast--info .toast__icon {
-  color: var(--color-info);
+  color: var(--icon-info);
 }
 
 .toast__icon {
@@ -7513,20 +7513,25 @@ textarea.input {
   white-space: nowrap;
 }
 
+.config-status__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
 .config-status--success {
-  color: var(--color-success);
+  color: var(--icon-success);
 }
 
 .config-status--warning {
-  color: var(--color-warning, #f59e0b);
+  color: var(--icon-warning);
 }
 
 .config-status--info {
-  color: var(--color-info, #3b82f6);
+  color: var(--icon-info);
 }
 
 .config-status--error {
-  color: var(--color-error);
+  color: var(--icon-error);
 }
 
 /* Body */

packages/web/src/styles/components.theme.test.ts

@@ -20,6 +20,14 @@ const noticeStylesheet = readFileSync(
   `${process.cwd()}/src/components/ui/notice/index.module.css`,
   "utf8"
 );
+const toastStyles = readFileSync(
+  `${process.cwd()}/src/components/ui/toast/index.module.css`,
+  "utf8"
+);
+const confirmDialogStyles = readFileSync(
+  `${process.cwd()}/src/components/ui/confirm-dialog/index.module.css`,
+  "utf8"
+);
 
 function getLastGroupedRuleBlockFrom(source: string, pattern: RegExp) {
   const matches = Array.from(source.matchAll(pattern));
@@ -103,6 +111,42 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(getLastRuleBlock(".mobile-dock__icon")).toContain("color: currentColor");
   });
 
+  it("keeps toast icons on icon semantic tokens instead of raw status colors", () => {
+    expect(getLastRuleBlock(".toast--success .toast__icon")).toContain("var(--icon-success)");
+    expect(getLastRuleBlock(".toast--error .toast__icon")).toContain("var(--icon-error)");
+    expect(getLastRuleBlock(".toast--warning .toast__icon")).toContain("var(--icon-warning)");
+    expect(getLastRuleBlock(".toast--info .toast__icon")).toContain("var(--icon-info)");
+    expect(getLastRuleBlockFrom(toastStyles, ".success .icon")).toContain(
+      "background: var(--icon-surface-success)"
+    );
+    expect(getLastRuleBlockFrom(toastStyles, ".error .icon")).toContain(
+      "background: var(--icon-surface-error)"
+    );
+    expect(getLastRuleBlockFrom(toastStyles, ".warning .icon")).toContain(
+      "background: var(--icon-surface-warning)"
+    );
+    expect(getLastRuleBlockFrom(toastStyles, ".info .icon")).toContain(
+      "background: var(--icon-surface-info)"
+    );
+    expect(getLastRuleBlockFrom(toastStyles, ".success .icon")).toContain("var(--icon-success)");
+  });
+
+  it("keeps confirm dialog danger icons on icon tokens", () => {
+    expect(getLastRuleBlockFrom(confirmDialogStyles, ".titleDanger")).toContain(
+      "var(--icon-warning)"
+    );
+    expect(getLastRuleBlockFrom(confirmDialogStyles, ".iconDanger")).toContain(
+      "color: var(--icon-warning)"
+    );
+  });
+
+  it("keeps config status colors on icon tokens", () => {
+    expect(getLastRuleBlock(".config-status--success")).toContain("var(--icon-success)");
+    expect(getLastRuleBlock(".config-status--warning")).toContain("var(--icon-warning)");
+    expect(getLastRuleBlock(".config-status--info")).toContain("var(--icon-info)");
+    expect(getLastRuleBlock(".config-status--error")).toContain("var(--icon-error)");
+  });
+
   it("exposes global mobile safe-area tokens so standalone mobile views keep their padding", () => {
     expect(tokensStylesheet).toContain("--mobile-safe-top: env(safe-area-inset-top, 0px);");
     expect(tokensStylesheet).toContain("--mobile-safe-right: env(safe-area-inset-right, 0px);");