feat: add color variables and use them acros the project

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
@@ -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>