improvement(switch): dark styling

Author: emir-karabeg

apps/sim/components/emcn/components/switch/switch.tsx

@@ -5,9 +5,8 @@ import * as SwitchPrimitives from '@radix-ui/react-switch'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
- * Custom switch component with thin track design.
- * Track: 28px width, 6px height, 20px border-radius
- * Thumb: 14px diameter circle that overlaps the track
+ * Switch component styled to match Sim's design system.
+ * Uses brand color for checked state, neutral border for unchecked.
  */
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -16,21 +15,13 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     disabled={disabled}
     className={cn(
-      'peer inline-flex h-[17px] w-[30px] shrink-0 cursor-pointer items-center rounded-[20px] transition-colors focus-visible:outline-none',
-      'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-      'bg-[var(--border-1)] data-[state=checked]:bg-[var(--text-primary)]',
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors focus-visible:outline-none data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--brand-tertiary-2)] data-[disabled]:opacity-50',
       className
     )}
     {...props}
     ref={ref}
   >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-[14px] w-[14px] rounded-full shadow-sm ring-0 transition-transform',
-        'bg-[var(--white)]',
-        'data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-[2px]'
-      )}
-    />
+    <SwitchPrimitives.Thumb className='pointer-events-none block h-4 w-4 rounded-full bg-[var(--white)] shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5' />
   </SwitchPrimitives.Root>
 ))