From 8783356633896bdfae3c89c80291a42fe8200b41 Mon Sep 17 00:00:00 2001
From: pedroinciarte <pedro.inciarte13@gmail.com>
Date: Wed, 6 Dec 2023 09:01:20 -0800
Subject: [PATCH 1/2] feat: Add first changes to ColorToken

---
 .../token-types/ColorToken/ColorToken.svelte  | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte b/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
index 9e9eaef..5407562 100644
--- a/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
+++ b/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
@@ -20,7 +20,11 @@
 
 	let hexInput: HTMLInputElement
 
-	$: argb = Hct.from(tokenValue[0], tokenValue[1], tokenValue[2]).argb
+	let hue = tokenValue[0] ? [tokenValue[0]] : [0];
+	let chroma = tokenValue[1] ? [tokenValue[1]] : [0];
+	let tone = tokenValue[2] ? [tokenValue[2]] : [0];
+
+	$: argb = Hct.from(hue[0], chroma[0], tone[0]).argb
 	$: hex = Color(argb).hex()
 
 	const handleHexChange = (e: Event) => {
@@ -41,16 +45,16 @@
 		}
 	}
 
-	$: hueBackground = generateHueBackgroundGradient(tokenValue[1], tokenValue[2])
+	$: hueBackground = generateHueBackgroundGradient(chroma[0], tone[0])
 
 	$: chromaBackground = generateChromaBackgroundGradient(
-		tokenValue[0],
-		tokenValue[2]
+		hue[0],
+		tone[0]
 	)
 
 	$: toneBackground = generateToneBackgroundGradient(
-		tokenValue[0],
-		tokenValue[1]
+		hue[0],
+		chroma[0]
 	)
 </script>
 
@@ -80,7 +84,7 @@
 					type="number"
 					class="w-14 rounded-md bg-transparent px-1 text-xs"
 					{...isAlias ? { disabled: true } : {}}
-					bind:value={tokenValue[0]}
+					bind:value={hue[0]}
 				/>
 			</div>
 			<Range
@@ -90,7 +94,7 @@
 				id={`${tokenId}-hue-range`}
 				background={hueBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={tokenValue[0]}
+				bind:value={hue[0]}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 0,
@@ -106,7 +110,7 @@
 					type="number"
 					class="w-14 rounded-md bg-transparent px-1 text-xs"
 					{...isAlias ? { disabled: true } : {}}
-					bind:value={tokenValue[1]}
+					bind:value={chroma[0]}
 				/>
 			</div>
 			<Range
@@ -116,7 +120,7 @@
 				id={`${tokenId}-chroma-range`}
 				background={chromaBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={tokenValue[1]}
+				bind:value={chroma[0]}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 1,
@@ -132,7 +136,7 @@
 					type="number"
 					class="w-14 rounded-md bg-transparent px-1 text-xs"
 					{...isAlias ? { disabled: true } : {}}
-					bind:value={tokenValue[2]}
+					bind:value={tone[0]}
 				/>
 			</div>
 			<Range
@@ -142,7 +146,7 @@
 				id={`${tokenId}-tone-range`}
 				background={toneBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={tokenValue[2]}
+				bind:value={tone[0]}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 2,

From 8078036043b2a577357416df3144f51cd98dddd6 Mon Sep 17 00:00:00 2001
From: pedroinciarte <pedro.inciarte13@gmail.com>
Date: Wed, 6 Dec 2023 09:19:16 -0800
Subject: [PATCH 2/2] feat: Last changes

---
 src/lib/components/ui/slider/index.ts         |  7 +++++
 src/lib/components/ui/slider/slider.svelte    | 29 +++++++++++++++++++
 .../token-types/ColorToken/ColorToken.svelte  | 27 ++++++++++-------
 3 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/ui/slider/index.ts
 create mode 100644 src/lib/components/ui/slider/slider.svelte

diff --git a/src/lib/components/ui/slider/index.ts b/src/lib/components/ui/slider/index.ts
new file mode 100644
index 0000000..3844186
--- /dev/null
+++ b/src/lib/components/ui/slider/index.ts
@@ -0,0 +1,7 @@
+import Root from "./slider.svelte";
+
+export {
+	Root,
+	//
+	Root as Slider
+};
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
new file mode 100644
index 0000000..573d63b
--- /dev/null
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SliderPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = [0];
+	export { className as class };
+	export let background: string;
+</script>
+
+<SliderPrimitive.Root
+	bind:value
+	class={cn(
+		"relative flex w-full touch-none select-none items-center ",
+		className
+	)}
+	{...$$restProps}
+>
+	<span
+		class="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-500" style={`background: ${background} !important;`}
+	>
+		<SliderPrimitive.Range  class="absolute h-full "	/>
+	</span>
+	<SliderPrimitive.Thumb
+		class="block h-5 w-5 rounded-full border-2 border-slate-500 bg-background ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+	/>
+</SliderPrimitive.Root>
diff --git a/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte b/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
index 5407562..a26092b 100644
--- a/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
+++ b/src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
@@ -10,6 +10,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Input } from '$lib/components/ui/input'
 	import type { ColorTokenValue } from '$lib/features/token-management/color/types/internal-color-value.type'
+	import { Slider } from '$lib/components/ui/slider'
 
 	export let tokenValue: ColorTokenValue
 	export let tokenId: string
@@ -37,7 +38,9 @@
 				const newArgbColor = Color(value).rgbNumber()
 				const hct = Hct.fromInt(newArgbColor)
 
-				tokenValue = [hct.hue, hct.chroma, hct.tone]
+				hue[0] = hct.hue
+				chroma[0] =  hct.chroma
+				tone[0] = hct.tone
 				hex = target.value
 			} catch (error) {
 				hexInput.value = hex
@@ -56,6 +59,10 @@
 		hue[0],
 		chroma[0]
 	)
+
+	$: tokenValue[0] = hue[0]
+	$: tokenValue[1] = chroma[0]
+	$: tokenValue[2] = tone[0]
 </script>
 
 <div class="flex flex-1 flex-row items-center gap-10">
@@ -87,19 +94,19 @@
 					bind:value={hue[0]}
 				/>
 			</div>
-			<Range
-				disabled={viewMode}
+			<Slider
 				min={0}
 				max={360}
-				id={`${tokenId}-hue-range`}
+				id={`${tokenId}-hue[0]-range`}
 				background={hueBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={hue[0]}
+				bind:value={hue}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 0,
 						value: e.detail.diff
 					})}
+				
 			/>
 		</div>
 		<div class="flex w-full max-w-[130px] flex-col gap-1">
@@ -113,14 +120,13 @@
 					bind:value={chroma[0]}
 				/>
 			</div>
-			<Range
-				disabled={viewMode}
+			<Slider
 				min={0}
 				max={100}
 				id={`${tokenId}-chroma-range`}
 				background={chromaBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={chroma[0]}
+				bind:value={chroma}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 1,
@@ -139,14 +145,13 @@
 					bind:value={tone[0]}
 				/>
 			</div>
-			<Range
-				disabled={viewMode}
+			<Slider
 				min={0}
 				max={100}
 				id={`${tokenId}-tone-range`}
 				background={toneBackground}
 				{...isAlias ? { disabled: true } : {}}
-				bind:value={tone[0]}
+				bind:value={tone}
 				on:change={(e) =>
 					dispatch('colorChange', {
 						valueChanged: 2,