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

18
src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
View File

@@ -53,20 +53,20 @@ const letterSpacing = $derived(controlManager.spacing);
class="
w-full h-full rounded-xl sm:rounded-2xl
flex flex-col
backdrop-blur-md bg-white/80
border border-gray-300/50
backdrop-blur-md bg-background-80
border border-border-muted
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
relative overflow-hidden
"
style:font-weight={fontWeight}
>
<div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
<div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-border-subtle flex items-center justify-between">
<div class="flex items-center gap-2 sm:gap-2.5">
<Footnote>
typeface_{String(index).padStart(3, '0')}
</Footnote>
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
<Footnote class="tracking-[0.15em] font-bold text-gray-900">
<div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
<Footnote class="tracking-[0.15em] font-bold text-foreground">
{font.name}
</Footnote>
</div>
@@ -95,19 +95,19 @@ const letterSpacing = $derived(controlManager.spacing);
</FontApplicator>
</div>
<div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
<div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-border-subtle w-full flex flex-row gap-2 sm:gap-4 bg-background mt-auto">
<Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
SZ:{fontSize}PX
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
<Footnote class="text-[7px] sm:text-[8px] tracking-wider">
WGT:{fontWeight}
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
<Footnote class="text-[7px] sm:text-[8px] tracking-wider">
LH:{lineHeight?.toFixed(2)}
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
<Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
LTR:{letterSpacing}
</Footnote>