From 0737db69a958c506df0b7bca2c0cc58729f831d7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 17 Apr 2026 09:41:14 +0300
Subject: [PATCH] refactor: replace px text sizes in Button, Loader, Footnote
 with named tokens

---
 src/shared/ui/Button/Button.svelte     | 10 +++++-----
 src/shared/ui/Footnote/Footnote.svelte |  4 ++--
 src/shared/ui/Loader/Loader.svelte     |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
index c866689..cc5ee6f 100644
--- a/src/shared/ui/Button/Button.svelte
+++ b/src/shared/ui/Button/Button.svelte
@@ -150,11 +150,11 @@ const variantStyles: Record<ButtonVariant, string> = {
 };
 
 const sizeStyles: Record<ButtonSize, string> = {
-    xs: 'h-6  px-2 text-[9px]  gap-1',
-    sm: 'h-8  px-3 text-[10px] gap-1.5',
-    md: 'h-10 px-4 text-[11px] gap-2',
-    lg: 'h-12 px-6 text-[12px] gap-2',
-    xl: 'h-14 px-8 text-[13px] gap-2.5',
+    xs: 'h-6  px-2 text-3xs gap-1',
+    sm: 'h-8  px-3 text-2xs gap-1.5',
+    md: 'h-10 px-4 text-xs  gap-2',
+    lg: 'h-12 px-6 text-xs  gap-2',
+    xl: 'h-14 px-8 text-sm  gap-2.5',
 };
 
 // Square padding for icon-only mode
diff --git a/src/shared/ui/Footnote/Footnote.svelte b/src/shared/ui/Footnote/Footnote.svelte
index 2b72ce9..aa48360 100644
--- a/src/shared/ui/Footnote/Footnote.svelte
+++ b/src/shared/ui/Footnote/Footnote.svelte
@@ -27,14 +27,14 @@ const { children, class: className, render }: Props = $props();
 {#if render}
     {@render render({
     class: cn(
-        'font-mono text-[0.5625rem] sm:text-[0.625rem] lowercase tracking-[0.2em] text-text-soft',
+        'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
         className,
     ),
 })}
 {:else if children}
     <span
         class={cn(
-            'font-mono text-[0.5625rem] sm:text-[0.625rem] lowercase tracking-[0.2em] text-text-soft',
+            'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
             className,
         )}
     >
diff --git a/src/shared/ui/Loader/Loader.svelte b/src/shared/ui/Loader/Loader.svelte
index fe304e3..86b8840 100644
--- a/src/shared/ui/Loader/Loader.svelte
+++ b/src/shared/ui/Loader/Loader.svelte
@@ -71,7 +71,7 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
     <div class="w-px h-3 bg-text-muted/50"></div>
 
     <!-- Message -->
-    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-text-subtle font-medium">
+    <span class="font-mono text-2xs uppercase tracking-wider-mono text-text-subtle font-medium">
         {message}
     </span>
 </div>