glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add color variables and use them acros the project

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-10 23:19:27 +03:00
parent 8aad8942fc
commit d749f86edc
20 changed files with 134 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/shared/ui/Slider/Slider.svelte
View File

@@ -43,11 +43,11 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
{#snippet children(props)}
<span
{...props}
class={cn('relative bg-gray-200 rounded-full', orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px')}
class={cn('relative bg-background-muted rounded-full', orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px')}
>
<!-- Filled range with NO transition -->
<Slider.Range
class={cn('absolute bg-gray-900 rounded-full', orientation === 'horizontal' ? 'h-full' : 'w-full')}
class={cn('absolute bg-foreground rounded-full', orientation === 'horizontal' ? 'h-full' : 'w-full')}
/>
<Slider.Thumb
@@ -56,7 +56,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
'group/thumb relative block',
orientation === 'horizontal' ? '-top-1 w-2 h-2.25' : '-left-1 h-2 w-2.25',
'rounded-sm',
'bg-gray-900',
'bg-foreground',
// Glow shadow
'shadow-[0_0_6px_rgba(0,0,0,0.4)]',
// Smooth transitions only for size/position
@@ -76,7 +76,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
<div
class="
absolute inset-0 rounded-sm
bg-white/20
bg-background-20
opacity-0 group-hover/thumb:opacity-100
transition-opacity duration-200
"
@@ -89,8 +89,8 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
'absolute',
orientation === 'horizontal' ? '-top-8 left-1/2 -translate-x-1/2' : 'left-5 top-1/2 -translate-y-1/2',
'px-1.5 py-0.5 rounded-md',
'bg-gray-900/90 backdrop-blur-sm',
'font-mono text-[0.625rem] font-medium text-white ',
'bg-foreground/90 backdrop-blur-sm',
'font-mono text-[0.625rem] font-medium text-background',
'opacity-0 group-hover/thumb:opacity-100',
'transition-all duration-300',
'pointer-events-none',