refactor(ui): add size variants to Switch and consolidate styles

Introduce sm/md/lg sizes on the Switch component driven by CSS custom
properties, move switch styling into a dedicated switch.css, and remove
the duplicated overrides from styles.css and ToolbarCustomizeDialog.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/ui/switch.css

@@ -0,0 +1,64 @@
+.ui-switch {
+  --ui-switch-width: 46px;
+  --ui-switch-height: 26px;
+  --ui-switch-thumb-size: 18px;
+  --ui-switch-inset: 4px;
+  position: relative;
+  width: var(--ui-switch-width);
+  min-width: var(--ui-switch-width);
+  height: var(--ui-switch-height);
+  display: inline-flex;
+  flex: 0 0 var(--ui-switch-width);
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  outline: none;
+  appearance: none;
+  color: inherit;
+  background: #d8dde5;
+  vertical-align: middle;
+  transition: background-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.ui-switch[data-size="sm"] {
+  --ui-switch-width: 32px;
+  --ui-switch-height: 18px;
+  --ui-switch-thumb-size: 14px;
+  --ui-switch-inset: 2px;
+}
+
+.ui-switch[data-size="md"] {
+  --ui-switch-width: 36px;
+  --ui-switch-height: 20px;
+  --ui-switch-thumb-size: 14px;
+  --ui-switch-inset: 3px;
+}
+
+.ui-switch[data-state="checked"] {
+  background: #30343a;
+}
+
+.ui-switch:focus-visible {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b95a5;
+}
+
+.ui-switch-thumb {
+  width: var(--ui-switch-thumb-size);
+  height: var(--ui-switch-thumb-size);
+  display: block;
+  flex: 0 0 var(--ui-switch-thumb-size);
+  margin: 0;
+  transform: translateX(var(--ui-switch-inset));
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2);
+  pointer-events: none;
+  transition: transform 0.18s ease;
+}
+
+.ui-switch[data-state="checked"] .ui-switch-thumb {
+  transform: translateX(calc(var(--ui-switch-width) - var(--ui-switch-thumb-size) - var(--ui-switch-inset)));
+}

frontend/src/components/ui/switch.tsx

@@ -2,10 +2,17 @@
 
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type { ComponentProps } from "react";
+import "./switch.css";
 
-export function Switch({ className = "", ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+export type SwitchSize = "sm" | "md" | "lg";
+
+type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: SwitchSize;
+};
+
+export function Switch({ className = "", size = "lg", ...props }: SwitchProps) {
   return (
-    <SwitchPrimitive.Root className={["ui-switch", className].filter(Boolean).join(" ")} {...props}>
+    <SwitchPrimitive.Root className={["ui-switch", className].filter(Boolean).join(" ")} data-size={size} {...props}>
       <SwitchPrimitive.Thumb className="ui-switch-thumb" />
     </SwitchPrimitive.Root>
   );