From 201280093f0aea4b87cc279e0a55c9aa52f19bad Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:01:57 +0300
Subject: [PATCH] feat(ComparisonSlider): change color for selected font in
 font list

---
 .../components/FontList.svelte                | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
index fcbff07..db053b3 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
@@ -132,7 +132,11 @@ function isFontB(font: UnifiedFont): boolean {
     </svg>
 {/snippet}
 
-{#snippet brackets(renderLeft?: boolean, renderRight?: boolean, className?: string)}
+{#snippet brackets(
+    renderLeft?: boolean,
+    renderRight?: boolean,
+    className?: string,
+)}
     {#if renderLeft}
         {@render leftBrackets(className)}
     {/if}
@@ -156,7 +160,7 @@ function isFontB(font: UnifiedFont): boolean {
                 {@const handleSelectFontA = () => selectFontA(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
                         class={cn(
                             '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">
                             <span
                                 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
                                         ? 'opacity-100 font-bold'
                                         : 'opacity-30 group-hover:opacity-100',
                                     isSelectedB && 'text-indigo-500',
                                     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} ---
@@ -186,14 +191,22 @@ function isFontB(font: UnifiedFont): boolean {
                         onclick={handleSelectFontB}
                         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
                         onclick={handleSelectFontA}
                         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>
                 </div>
             {/snippet}