From b5ab5ec28545f1799f0e361b2367109d5d9e682c Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Tue, 20 Jan 2026 00:23:01 +1030
Subject: [PATCH] style: x/y toggle

---
 src/lib/client/ui/toggle/Toggle.svelte | 36 +++++++++++++++++---------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/lib/client/ui/toggle/Toggle.svelte b/src/lib/client/ui/toggle/Toggle.svelte
index fdf2127..8f2c431 100644
--- a/src/lib/client/ui/toggle/Toggle.svelte
+++ b/src/lib/client/ui/toggle/Toggle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { Check, X } from 'lucide-svelte';
 
 	export let checked: boolean = false;
 	export let color: 'accent' | 'amber' | 'green' | 'red' = 'accent';
@@ -8,14 +9,14 @@
 
 	const dispatch = createEventDispatcher<{ change: boolean }>();
 
-	const colors = {
-		accent: 'bg-accent-500',
-		amber: 'bg-amber-500',
-		green: 'bg-green-500',
-		red: 'bg-red-500'
+	const activeColors = {
+		accent: 'bg-accent-500 text-white',
+		amber: 'bg-amber-500 text-white',
+		green: 'bg-green-500 text-white',
+		red: 'bg-red-500 text-white'
 	};
 
-	$: colorClass = colors[color];
+	$: activeClass = activeColors[color];
 
 	function handleClick() {
 		if (disabled) return;
@@ -31,12 +32,23 @@
 	aria-label={label}
 	{disabled}
 	on:click={handleClick}
-	class="relative h-5 w-12 flex-shrink-0 cursor-pointer rounded-full p-[3px] transition-colors duration-300 ease-out
-		{checked ? colorClass : 'bg-neutral-300 dark:bg-neutral-600'}
-		{disabled ? 'cursor-not-allowed opacity-50' : ''}"
+	class="flex h-6 overflow-hidden rounded bg-neutral-200 dark:bg-neutral-700 transition-all duration-200
+		{disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
 >
 	<span
-		class="block h-[14px] w-6 rounded-full bg-white shadow-sm transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]
-			{checked ? 'translate-x-[18px]' : 'translate-x-0'}"
-	></span>
+		class="flex w-7 items-center justify-center rounded-l transition-all duration-200
+			{!checked
+				? 'bg-neutral-500 text-white dark:bg-neutral-400 dark:text-neutral-900'
+				: 'text-neutral-400 dark:text-neutral-500'}"
+	>
+		<X size={14} strokeWidth={2.5} />
+	</span>
+	<span
+		class="flex w-7 items-center justify-center rounded-r transition-all duration-200
+			{checked
+				? activeClass
+				: 'text-neutral-400 dark:text-neutral-500'}"
+	>
+		<Check size={14} strokeWidth={2.5} />
+	</span>
 </button>