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

refactor: tailwind tier 1 — border-subtle/text-secondary/focus-ring utilities + Input config extraction

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-16 16:32:41 +03:00
parent aa1379c15b
commit 816d4b89ce
15 changed files with 78 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,7 @@ const stats = $derived([
group relative
w-full h-full
bg-paper dark:bg-dark-card
border border-black/5 dark:border-white/10
border border-subtle
hover:border-brand dark:hover:border-brand
hover:shadow-brand/10
hover:shadow-[5px_5px_0px_0px]
@@ -76,7 +76,7 @@ const stats = $derived([
class="
flex items-center justify-between
px-4 sm:px-5 md:px-6 py-3 sm:py-4
border-b border-black/5 dark:border-white/10
border-b border-subtle
bg-paper dark:bg-dark-card
"
>
@@ -145,7 +145,7 @@ const stats = $derived([
</div>
<!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
<div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-black/5 dark:border-white/10 flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
<div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-subtle flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
{#each stats as stat, i}
<Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider {i === 0 ? 'ml-auto' : ''}">
{stat.label}:{stat.value}

10
src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
View File

@@ -79,7 +79,7 @@ $effect(() => {
'transition-colors duration-150',
'hover:bg-white/50 dark:hover:bg-white/5',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
isOpen && 'bg-paper dark:bg-dark-card border-black/5 dark:border-white/10 shadow-sm',
isOpen && 'bg-paper dark:bg-dark-card border-subtle shadow-sm',
className,
)}
>
@@ -96,7 +96,7 @@ $effect(() => {
class={cn(
'z-50 w-72',
'bg-surface dark:bg-dark-card',
'border border-black/5 dark:border-white/10',
'border border-subtle',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
'rounded-none p-4',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -109,7 +109,7 @@ $effect(() => {
escapeKeydownBehavior="close"
>
<!-- Header -->
<div class="flex items-center justify-between mb-3 pb-3 border-b border-black/5 dark:border-white/10">
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
<div class="flex items-center gap-1.5">
<Settings2Icon size={12} class="text-swiss-red" />
<span
@@ -154,13 +154,13 @@ $effect(() => {
class={cn(
'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
'border border-black/5 dark:border-white/10',
'border border-subtle',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
'rounded-none ring-1 ring-black/5 dark:ring-white/5',
)}
>
<!-- Header: icon + label -->
<div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
<div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-subtle mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
<Settings2Icon
size={14}
class="text-swiss-red"