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

feat(ComparisonSlider): change color for selected font in font list

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-18 17:01:57 +03:00
parent 55b27973a2
commit 201280093f
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
View File

@@ -132,7 +132,11 @@ function isFontB(font: UnifiedFont): boolean {
</svg> </svg>
{/snippet} {/snippet}
{#snippet brackets(renderLeft?: boolean, renderRight?: boolean, className?: string)} {#snippet brackets(
renderLeft?: boolean,
renderRight?: boolean,
className?: string,
)}
{#if renderLeft} {#if renderLeft}
{@render leftBrackets(className)} {@render leftBrackets(className)}
{/if} {/if}
@@ -156,7 +160,7 @@ function isFontB(font: UnifiedFont): boolean {
{@const handleSelectFontA = () => selectFontA(font)} {@const handleSelectFontA = () => selectFontA(font)}
{@const handleSelectFontB = () => selectFontB(font)} {@const handleSelectFontB = () => selectFontB(font)}
<div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden mr-4 lg:mr-6"> <div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden sm:mr-4 lg:mr-6">
<div <div
class={cn( class={cn(
'absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-all duration-500 cubic-bezier-out', 'absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-all duration-500 cubic-bezier-out',
@@ -168,13 +172,14 @@ function isFontB(font: UnifiedFont): boolean {
<div class="relative flex items-center px-6"> <div class="relative flex items-center px-6">
<span <span
class={cn( class={cn(
'font-mono text-[10px] sm:text-[11px] uppercase tracking-tighter select-none transition-all duration-300', 'text-[0.625rem] sm:text-[0.75rem] tracking-tighter select-none transition-all duration-300',
isEither isEither
? 'opacity-100 font-bold' ? 'opacity-100 font-bold'
: 'opacity-30 group-hover:opacity-100', : 'opacity-30 group-hover:opacity-100',
isSelectedB && 'text-indigo-500', isSelectedB && 'text-indigo-500',
isSelectedA && 'text-normal-950', isSelectedA && 'text-normal-950',
isBoth && 'text-indigo-600', isBoth
&& 'bg-[linear-gradient(to_right,theme(colors.indigo.500)_50%,theme(colors.neutral.950)_50%)] bg-clip-text text-transparent',
)} )}
> >
--- {font.name} --- --- {font.name} ---
@@ -186,14 +191,22 @@ function isFontB(font: UnifiedFont): boolean {
onclick={handleSelectFontB} onclick={handleSelectFontB}
class="flex-1 relative flex items-center justify-between transition-all duration-200 cursor-pointer hover:bg-indigo-500/[0.03]" class="flex-1 relative flex items-center justify-between transition-all duration-200 cursor-pointer hover:bg-indigo-500/[0.03]"
> >
{@render brackets(isSelectedB, isSelectedB && !isBoth, 'stroke-1 size-7 stroke-indigo-600')} {@render brackets(
isSelectedB,
isSelectedB && !isBoth,
'stroke-1 size-7 stroke-indigo-600',
)}
</button> </button>
<button <button
onclick={handleSelectFontA} onclick={handleSelectFontA}
class="flex-1 relative flex items-center justify-end transition-all duration-200 cursor-pointer hover:bg-black/[0.02]" class="flex-1 relative flex items-center justify-end transition-all duration-200 cursor-pointer hover:bg-black/[0.02]"
> >
{@render brackets(isSelectedA && !isBoth, isSelectedA, 'stroke-1 size-7 stroke-normal-950')} {@render brackets(
isSelectedA && !isBoth,
isSelectedA,
'stroke-1 size-7 stroke-normal-950',
)}
</button> </button>
</div> </div>
{/snippet} {/snippet}