refactor: centralize action/icon button styles across all tools

Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/color/ColorManipulation.tsx

@@ -10,7 +10,7 @@ import { ExportMenu } from '@/components/color/ExportMenu';
 import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/color/api/queries';
 import { Loader2, Share2, Plus, X, Palette, Layers } from 'lucide-react';
 import { toast } from 'sonner';
-import { cn } from '@/lib/utils';
+import { cn, actionBtn } from '@/lib/utils';
 import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type HarmonyType = 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
@@ -32,8 +32,6 @@ const RIGHT_TABS: { value: RightTab; label: string }[] = [
   { value: 'gradient', label: 'Gradient' },
 ];
 
-const actionBtn =
-  'flex items-center gap-1 px-2.5 py-1 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
 
 function ColorManipulationContent() {
   const searchParams = useSearchParams();

components/color/ExportMenu.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/lib/color/utils/export';
 import { colorAPI } from '@/lib/color/api/client';
 import { CodeSnippet } from '@/components/ui/code-snippet';
-import { cn } from '@/lib/utils/cn';
+import { cn, actionBtn } from '@/lib/utils';
 
 interface ExportMenuProps {
   colors: string[];
@@ -27,8 +27,6 @@ type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';
 const selectCls =
   'flex-1 bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer';
 
-const actionBtn =
-  'flex items-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
 
 export function ExportMenu({ colors, className }: ExportMenuProps) {
   const [format, setFormat] = useState<ExportFormat>('css');

components/color/ManipulationPanel.tsx

@@ -12,15 +12,13 @@ import {
 } from '@/lib/color/api/queries';
 import { toast } from 'sonner';
 import { Sun, Moon, Droplets, Droplet, RotateCcw, ArrowLeftRight } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
+import { cn, actionBtn } from '@/lib/utils';
 
 interface ManipulationPanelProps {
   color: string;
   onColorChange: (color: string) => void;
 }
 
-const actionBtn =
-  'shrink-0 px-3 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
 
 export function ManipulationPanel({ color, onColorChange }: ManipulationPanelProps) {
   const [lightenAmount, setLightenAmount] = useState(0.2);
@@ -118,7 +116,7 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
               onValueChange={(vals) => row.setValue(vals[0])}
               className="flex-1"
             />
-            <button onClick={row.onApply} disabled={isLoading} className={actionBtn}>
+            <button onClick={row.onApply} disabled={isLoading} className={cn(actionBtn, 'shrink-0')}>
               Apply
             </button>
           </div>
@@ -137,7 +135,7 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
             } catch { toast.error('Failed'); }
           }}
           disabled={isLoading}
-          className={cn(actionBtn, 'w-full justify-center flex items-center gap-1.5 py-2')}
+          className={cn(actionBtn, 'w-full justify-center py-2')}
         >
           <ArrowLeftRight className="w-3 h-3" />
           Complementary Color