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/ui/components/ToolbarCustomizeDialog/index.css

@@ -424,26 +424,6 @@
   cursor: pointer;
 }
 
-.toolbar-customize-switch .ui-switch {
-  width: 32px;
-  height: 18px;
-  background: #d8dde5;
-}
-
-.toolbar-customize-switch .ui-switch[data-state="checked"] {
-  background: #303030;
-}
-
-.toolbar-customize-switch .ui-switch-thumb {
-  width: 14px;
-  height: 14px;
-  transform: translateX(2px);
-}
-
-.toolbar-customize-switch .ui-switch[data-state="checked"] .ui-switch-thumb {
-  transform: translateX(16px);
-}
-
 .toolbar-customize-footer-actions {
   display: inline-flex;
   align-items: center;

frontend/src/ui/components/ToolbarCustomizeDialog/index.tsx

@@ -254,7 +254,7 @@ export function ToolbarCustomizeDialog<TId extends string>({
 
         <footer className="toolbar-customize-footer">
           <label className="toolbar-customize-switch">
-            <Switch checked={draftShowToolNames} onCheckedChange={setDraftShowToolNames} />
+            <Switch size="sm" checked={draftShowToolNames} onCheckedChange={setDraftShowToolNames} />
             <span>{t("showToolNames")}</span>
           </label>
           <div className="toolbar-customize-footer-actions">