[BROKEN] add color choosing

Author: Hex-4

src/app.css

@@ -7,11 +7,19 @@
     --inactive-color: #1e1e2e;
     --active-color: #fab387;
     --text-color: #cdd6f4;
+    --red-color: #f38ba8;
+    --yellow-color: #f9e2af;
+    --green-color: #a6e3a1;
+    --blue-color: #89b4fa;
 }
 
 @theme {
     --color-bg: var(--bg-color);
     --color-inactive: var(--inactive-color);
     --color-primary: var(--active-color);
     --color-text: var(--text-color);
+    --color-red: var(--red-color);
+    --color-yellow: var(--yellow-color);
+    --color-green: var(--green-color);
+    --color-blue: var(--blue-color);
 }

src/components/dot.svelte

@@ -9,27 +9,36 @@
 		console.log(popover);
 		popover.showPopover();
 	}
+
+	let color = $state()
+
+	if (dotNum < nowDots) {
+		color = "bg-text"
+	} else if (dotNum == nowDots) {
+		color = "bg-primary"
+	} else {
+		color = "bg-inactive"
+	}
+
 </script>
 
 {#snippet picker()}
-	<div popover class="bg-inactive border-text rounded-xl border-1 p-4" bind:this={popover}>
-		<ColorPicker components={ChromeVariant} sliderDirection="horizontal" isDialog={false} />
+	<div popover class="bg-bg border-text rounded-xl border-1 p-4" bind:this={popover}>
+		<div class="flex flex-row gap-1">
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-red" onclick={() => { color = "bg-red"}}></div>
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-yellow" onclick={() => { color = "bg-yellow"}}></div>
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-green" onclick={() => { color = "bg-green"}}></div>
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-blue" onclick={() => { color = "bg-blue"}}></div>
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-primary" onclick={() => { color = "bg-primary"}}></div>
+			<div class="w-3 h-6 rounded-full hover:w-6 transition-all bg-inactive" onclick={() => { color = "bg-inactive"}}></div>
+		</div>
 	</div>
 {/snippet}
 
-{#if dotNum < nowDots}
-	<button onclick={openPopover} aria-label="Open Dot Dialog">
-		<div class="bg-text dot size-6 rounded-full"></div>
-	</button>
-	{@render picker()}
-{:else if dotNum == nowDots}
-	<button onclick={openPopover} aria-label="Open Dot Dialog">
-		<div class="bg-primary dot size-6 rounded-full"></div>
-	</button>
-	{@render picker()}
-{:else}
-	<button onclick={openPopover} aria-label="Open Dot Dialog">
-		<div class="bg-inactive dot size-6 rounded-full"></div>
-	</button>
-	{@render picker()}
-{/if}
+	<div id = "test">
+		<button onclick={openPopover} aria-label="Open Dot Dialog">
+			<div class={["dot size-6 rounded-full", color]}></div>
+			{@render picker()}
+		</button>
+		{@render picker()}
+	</div>