Skip to content

Pedro/tok 31 cambiar sliders por los de shadcn #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pedroinciarte wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Pedro/tok 31 cambiar sliders por los de shadcn #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8783356
feat: Add first changes to ColorToken
pedroinciarte Dec 6, 2023
8078036
feat: Last changes
pedroinciarte Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/lib/components/ui/slider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Root from "./slider.svelte";

export {
Root,
//
Root as Slider
};
29 changes: 29 additions & 0 deletions src/lib/components/ui/slider/slider.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
49 changes: 29 additions & 20 deletions src/lib/features/token-ui/ui/token-types/ColorToken/ColorToken.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -20,7 +21,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) => {
Expand All @@ -33,25 +38,31 @@
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
}
}
}

$: 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]
)

$: tokenValue[0] = hue[0]
$: tokenValue[1] = chroma[0]
$: tokenValue[2] = tone[0]
</script>

<div class="flex flex-1 flex-row items-center gap-10">
Expand Down Expand Up @@ -80,22 +91,22 @@
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
disabled={viewMode}
<Slider
min={0}
max={360}
id={`${tokenId}-hue-range`}
id={`${tokenId}-hue[0]-range`}
background={hueBackground}
{...isAlias ? { disabled: true } : {}}
bind:value={tokenValue[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">
Expand All @@ -106,17 +117,16 @@
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
disabled={viewMode}
<Slider
min={0}
max={100}
id={`${tokenId}-chroma-range`}
background={chromaBackground}
{...isAlias ? { disabled: true } : {}}
bind:value={tokenValue[1]}
bind:value={chroma}
on:change={(e) =>
dispatch('colorChange', {
valueChanged: 1,
Expand All @@ -132,17 +142,16 @@
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
disabled={viewMode}
<Slider
min={0}
max={100}
id={`${tokenId}-tone-range`}
background={toneBackground}
{...isAlias ? { disabled: true } : {}}
bind:value={tokenValue[2]}
bind:value={tone}
on:change={(e) =>
dispatch('colorChange', {
valueChanged: 2,
Expand Down