From 8919d05cb35b7afb58e435c82aa2a2fc7a3c3323 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 9 Oct 2026 21:09:53 +0800
Subject: [PATCH] fix(ui): use the action color for the apps page visibility
 switches

The neutral switch tone drew the checked track in dark gray next to a
medium-gray unchecked track, so on and off were nearly indistinguishable
in light mode. Drop the neutral tone (its only caller was the apps page
"Show" column) and let those switches use the same action color as every
other switch.

Closes #8010
---
 src/components/apps/AppsPage.tsx |  1 -
 src/components/ui/switch.tsx     | 18 +++---------------
 tests/components/Switch.test.tsx | 11 ++++-------
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/components/apps/AppsPage.tsx b/src/components/apps/AppsPage.tsx
index 34e16261e..b67405c1a 100644
--- a/src/components/apps/AppsPage.tsx
+++ b/src/components/apps/AppsPage.tsx
@@ -147,7 +147,6 @@ export function AppsPage() {
   const visibilitySwitch = (app: AppId) => (
     <Switch
       size="sm"
-      tone="neutral"
       checked={visibleApps[app]}
       disabled={!settings || (visibleApps[app] && visibleCount <= 1)}
       onCheckedChange={(checked) => setVisible(app, checked)}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 8d67ea297..36d0a9dba 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -6,42 +6,30 @@ export interface SwitchProps
   extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
   /** default：30×18；sm：26×16，给表格里成排的开关用 */
   size?: "default" | "sm";
-  /**
-   * action（默认）：开 = 操作色；neutral：开 = 中性深灰（--text-2），
-   * 用在一列成排、不该比旁边按钮还抢眼的开关上（例如应用页的「显示」列）。
-   */
-  tone?: "action" | "neutral";
 }
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
->(({ className, size = "default", tone = "action", ...props }, ref) => (
+>(({ className, size = "default", ...props }, ref) => (
   <SwitchPrimitives.Root
     ref={ref}
     data-size={size}
-    data-tone={tone}
     className={cn(
       // v7：轨道 30×18，开 = 操作色、圆点反色；关 = --control-off、白圆点。
       // 用 before 把点击区域扩到 38×28。
-      "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150 before:absolute before:-inset-x-1.5 before:-inset-y-1.5 before:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45 data-[state=unchecked]:bg-control-off",
+      "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150 before:absolute before:-inset-x-1.5 before:-inset-y-1.5 before:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45 data-[state=checked]:bg-action data-[state=unchecked]:bg-control-off",
       size === "sm" ? "h-4 w-[26px]" : "h-[18px] w-[30px]",
-      tone === "neutral"
-        ? "data-[state=checked]:bg-fg-2"
-        : "data-[state=checked]:bg-action",
       className,
     )}
     {...props}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block rounded-full shadow-v7-sm ring-0 transition-[transform,background-color] duration-150 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-white",
+        "pointer-events-none block rounded-full shadow-v7-sm ring-0 transition-[transform,background-color] duration-150 data-[state=checked]:bg-action-fg data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-white",
         size === "sm"
           ? "h-3 w-3 data-[state=checked]:translate-x-2.5"
           : "h-3.5 w-3.5 data-[state=checked]:translate-x-3",
-        tone === "neutral"
-          ? "data-[state=checked]:bg-surface"
-          : "data-[state=checked]:bg-action-fg",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/tests/components/Switch.test.tsx b/tests/components/Switch.test.tsx
index ffb482a27..d063501f5 100644
--- a/tests/components/Switch.test.tsx
+++ b/tests/components/Switch.test.tsx
@@ -3,22 +3,19 @@ import { describe, expect, it } from "vitest";
 import { Switch } from "@/components/ui/switch";
 
 describe("Switch", () => {
-  it("keeps the default size and action tone", () => {
+  it("keeps the default size and action color", () => {
     render(<Switch aria-label="default" defaultChecked />);
     const element = screen.getByRole("switch", { name: "default" });
     expect(element).toHaveAttribute("data-size", "default");
-    expect(element).toHaveAttribute("data-tone", "action");
     expect(element.className).toContain("w-[30px]");
     expect(element.className).toContain("data-[state=checked]:bg-action");
   });
 
-  it("supports a small neutral variant", () => {
-    render(<Switch aria-label="small" size="sm" tone="neutral" />);
+  it("uses the action color for the small variant too", () => {
+    render(<Switch aria-label="small" size="sm" />);
     const element = screen.getByRole("switch", { name: "small" });
     expect(element).toHaveAttribute("data-size", "sm");
-    expect(element).toHaveAttribute("data-tone", "neutral");
     expect(element.className).toContain("w-[26px]");
-    expect(element.className).toContain("data-[state=checked]:bg-fg-2");
-    expect(element.className).not.toContain("data-[state=checked]:bg-action");
+    expect(element.className).toContain("data-[state=checked]:bg-action");
   });
 });