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

2
src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
View File

@@ -189,7 +189,7 @@ $effect(() => {
rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
select-none touch-none cursor-ew-resize min-h-72 sm:min-h-96 flex flex-col justify-center
backdrop-blur-lg bg-linear-to-br from-gray-100/70 via-white/50 to-gray-100/60
border border-gray-300/40
border border-border-muted
shadow-[inset_0_4px_12px_0_rgba(0,0,0,0.12),inset_0_2px_4px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(255,255,255,0.8)]
before:absolute before:inset-0 before:rounded-xl sm:before:rounded-2xl md:before:rounded-[2.5rem] before:p-px
before:bg-linear-to-br before:from-black/5 before:via-black/2 before:to-transparent

20
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
View File

@@ -63,10 +63,10 @@ function selectFontB(font: UnifiedFont) {
<SelectRoot type="single" disabled={!fontList.length}>
<SelectTrigger
class={cn(
'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-border-muted bg-background-60 backdrop-blur-sm',
'px-2 sm:px-3 rounded-lg transition-all flex items-center justify-between gap-2',
'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-gray-900',
'hover:bg-white/80 hover:border-gray-400/60 hover:shadow-sm',
'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-foreground',
'hover:bg-background-80 hover:border-border-soft hover:shadow-sm',
)}
>
<div class="text-left flex-1 min-w-0">
@@ -77,7 +77,7 @@ function selectFontB(font: UnifiedFont) {
</SelectTrigger>
<SelectContent
class={cn(
'bg-white/95 backdrop-blur-xl border border-gray-300/50 shadow-xl',
'bg-background-95 backdrop-blur-xl border border-border-muted shadow-xl',
'w-44 sm:w-52 max-h-60 sm:max-h-64 overflow-hidden rounded-lg',
)}
side="top"
@@ -91,7 +91,7 @@ function selectFontB(font: UnifiedFont) {
{@const handleClick = () => onSelect(fontListItem)}
<SelectItem
value={fontListItem.id}
class="data-highlighted:bg-gray-100 font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
class="data-highlighted:bg-background-muted font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
onclick={handleClick}
>
<FontApplicator
@@ -117,8 +117,8 @@ function selectFontB(font: UnifiedFont) {
>
<div class="flex items-center gap-2 sm:gap-2.5 px-1">
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
<div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
ch_01
</span>
</div>
@@ -133,11 +133,11 @@ function selectFontB(font: UnifiedFont) {
style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
>
<div class="flex items-center gap-2 sm:gap-2.5 px-1">
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
ch_02
</span>
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
<div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
<div class="w-1.5 h-1.5 rounded-full bg-foreground shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
</div>
{#if fontA && fontAUrl}
{@render fontSelector(fontA, fontList, fontAUrl, selectFontA, 'end')}

2
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
View File

@@ -51,7 +51,7 @@ let { sliderPos, isDragging }: Props = $props();
<div
class={cn(
'relative h-full rounded-sm transition-all duration-300',
'bg-white/3 ',
'bg-background-3 ',
// These are the visible "edges" of the glass
'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',

14
src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
View File

@@ -77,14 +77,14 @@ function toggleFilters() {
<div class="absolute right-4 top-1/2 translate-y-[-50%] z-10">
<div class="flex items-center gap-2">
<div class="w-px h-5 bg-gray-300/60"></div>
<div class="w-px h-5 bg-border-subtle"></div>
<div style:transform="scale({transform.current.scale})">
<IconButton onclick={toggleFilters}>
{#snippet icon({ className })}
<SlidersHorizontalIcon
class={cn(
className,
showFilters ? 'stroke-gray-900 stroke-3' : 'stroke-gray-500',
showFilters ? 'stroke-foreground stroke-3' : 'stroke-text-muted',
)}
/>
{/snippet}
@@ -102,14 +102,14 @@ function toggleFilters() {
<div
class="
p-3 sm:p-4 md:p-5 rounded-xl
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)]
"
>
<div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
<div class="w-1 h-1 rounded-full bg-gray-900 opacity-70"></div>
<div class="w-px h-2.5 bg-gray-300/60"></div>
<div class="w-1 h-1 rounded-full bg-foreground opacity-70"></div>
<div class="w-px h-2.5 bg-border-subtle"></div>
<Footnote>
filter_params
</Footnote>
@@ -119,7 +119,7 @@ function toggleFilters() {
<Filters />
</div>
<div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-gray-300/40">
<div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-border-subtle">
<FilterControls class="m-auto w-fit" />
</div>
</div>