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

20
src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
View File

@@ -17,8 +17,8 @@ import { scrollBreadcrumbsStore } from '../../model';
transition:slide={{ duration: 200 }}
class="
fixed top-0 left-0 right-0 z-100
backdrop-blur-lg bg-white/20
border-b border-gray-300/50
backdrop-blur-lg bg-background-20
border-b border-border-muted
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
h-10 sm:h-12
"
@@ -28,7 +28,7 @@ import { scrollBreadcrumbsStore } from '../../model';
GLYPHDIFF
</h1>
<div class="h-3.5 sm:h-4 w-px bg-gray-300/60 hidden sm:block"></div>
<div class="h-3.5 sm:h-4 w-px bg-border-subtle hidden sm:block"></div>
<nav class="flex items-center gap-2 sm:gap-3 overflow-x-auto scrollbar-hide flex-1">
{#each scrollBreadcrumbsStore.items as item, idx (item.index)}
@@ -37,19 +37,19 @@ import { scrollBreadcrumbsStore } from '../../model';
out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
class="flex items-center gap-2 sm:gap-3 whitespace-nowrap shrink-0"
>
<span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
<span class="font-mono text-[8px] sm:text-[9px] text-text-muted tracking-wider">
{String(item.index).padStart(2, '0')}
</span>
<a href={`#${item.id}`} use:smoothScroll>
{@render item.title({
className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-foreground',
})}</a>
{#if idx < scrollBreadcrumbsStore.items.length - 1}
<div class="flex items-center gap-0.5 opacity-40">
<div class="w-1 h-px bg-gray-400"></div>
<div class="w-1 h-px bg-gray-400"></div>
<div class="w-1 h-px bg-gray-400"></div>
<div class="w-1 h-px bg-text-muted"></div>
<div class="w-1 h-px bg-text-muted"></div>
<div class="w-1 h-px bg-text-muted"></div>
</div>
{/if}
</div>
@@ -57,8 +57,8 @@ import { scrollBreadcrumbsStore } from '../../model';
</nav>
<div class="flex items-center gap-1.5 sm:gap-2 opacity-50 ml-auto">
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60 hidden sm:block"></div>
<span class="font-mono text-[7px] sm:text-[8px] text-gray-400 tracking-wider">
<div class="w-px h-2 sm:h-2.5 bg-border-subtle hidden sm:block"></div>
<span class="font-mono text-[7px] sm:text-[8px] text-text-muted tracking-wider">
[{scrollBreadcrumbsStore.items.length}]
</span>
</div>