From 5e512f0bdd34f6329b54f111f81950acbebb2569 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Tue, 25 Aug 2026 14:44:31 +0500 Subject: [PATCH] fix: some small css fixes --- web/src/app.d.ts | 5 +++++ web/src/lib/components/DropOverlay.svelte | 2 +- web/src/lib/components/DropZone.svelte | 2 +- web/src/lib/components/chain/ChainToolBlock.svelte | 4 ++-- web/src/lib/components/search/ToolCard.svelte | 2 +- web/src/lib/components/search/ToolSearch.svelte | 2 +- web/src/lib/components/tool/ResultCard.svelte | 2 +- web/src/lib/components/tool/TextResult.svelte | 4 ++-- web/src/lib/components/ui/Button.svelte | 4 ++-- web/src/lib/components/ui/ColorField.svelte | 8 ++++---- web/src/lib/components/ui/SliderField.svelte | 6 +++--- web/src/lib/palette.test.ts | 10 +++++++--- web/src/routes/+layout.svelte | 8 ++++---- web/src/routes/+page.svelte | 2 +- 14 files changed, 35 insertions(+), 26 deletions(-) diff --git a/web/src/app.d.ts b/web/src/app.d.ts index da08e6d..a5fcf12 100644 --- a/web/src/app.d.ts +++ b/web/src/app.d.ts @@ -10,4 +10,9 @@ declare global { } } +declare module '*.css?raw' { + const content: string; + export default content; +} + export {}; diff --git a/web/src/lib/components/DropOverlay.svelte b/web/src/lib/components/DropOverlay.svelte index cda76b1..eea239c 100644 --- a/web/src/lib/components/DropOverlay.svelte +++ b/web/src/lib/components/DropOverlay.svelte @@ -89,7 +89,7 @@ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 2px dashed var(--accent); border-radius: var(--radius-m); - color: var(--accent); + color: var(--link); font-weight: 600; text-align: center; pointer-events: none; diff --git a/web/src/lib/components/DropZone.svelte b/web/src/lib/components/DropZone.svelte index 1fcd029..99fed46 100644 --- a/web/src/lib/components/DropZone.svelte +++ b/web/src/lib/components/DropZone.svelte @@ -105,7 +105,7 @@ .dropzone:hover, .dropzone:focus-visible, .dragging { - border-color: var(--accent); + border-color: var(--link); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } diff --git a/web/src/lib/components/chain/ChainToolBlock.svelte b/web/src/lib/components/chain/ChainToolBlock.svelte index 60ad4fc..3735e55 100644 --- a/web/src/lib/components/chain/ChainToolBlock.svelte +++ b/web/src/lib/components/chain/ChainToolBlock.svelte @@ -133,7 +133,7 @@ height: 1.4rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); - color: var(--accent); + color: var(--link); } .remove { @@ -173,7 +173,7 @@ padding: 2px var(--space-2); border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); - color: var(--accent); + color: var(--link); font-size: var(--text-xs); } diff --git a/web/src/lib/components/search/ToolCard.svelte b/web/src/lib/components/search/ToolCard.svelte index dc8254d..78a7355 100644 --- a/web/src/lib/components/search/ToolCard.svelte +++ b/web/src/lib/components/search/ToolCard.svelte @@ -89,7 +89,7 @@ justify-content: center; border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); - color: var(--accent); + color: var(--link); } .text { diff --git a/web/src/lib/components/search/ToolSearch.svelte b/web/src/lib/components/search/ToolSearch.svelte index 1aeb812..d9f78f7 100644 --- a/web/src/lib/components/search/ToolSearch.svelte +++ b/web/src/lib/components/search/ToolSearch.svelte @@ -130,7 +130,7 @@ } input:focus { - border-color: var(--accent); + border-color: var(--link); outline: none; } diff --git a/web/src/lib/components/tool/ResultCard.svelte b/web/src/lib/components/tool/ResultCard.svelte index 4718346..d1fc3e1 100644 --- a/web/src/lib/components/tool/ResultCard.svelte +++ b/web/src/lib/components/tool/ResultCard.svelte @@ -117,7 +117,7 @@ padding: 2px var(--space-2); border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); - color: var(--accent); + color: var(--link); font-size: var(--text-xs); } diff --git a/web/src/lib/components/tool/TextResult.svelte b/web/src/lib/components/tool/TextResult.svelte index c241898..edf155c 100644 --- a/web/src/lib/components/tool/TextResult.svelte +++ b/web/src/lib/components/tool/TextResult.svelte @@ -89,7 +89,7 @@ } .actions .secondary:hover { - border-color: var(--accent); - color: var(--accent); + border-color: var(--link); + color: var(--link); } diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte index 9e55a9a..5e868f0 100644 --- a/web/src/lib/components/ui/Button.svelte +++ b/web/src/lib/components/ui/Button.svelte @@ -68,8 +68,8 @@ } button.secondary:hover:not(:disabled) { - border-color: var(--accent); - color: var(--accent); + border-color: var(--link); + color: var(--link); } button:disabled { diff --git a/web/src/lib/components/ui/ColorField.svelte b/web/src/lib/components/ui/ColorField.svelte index 39057d4..5f41c73 100644 --- a/web/src/lib/components/ui/ColorField.svelte +++ b/web/src/lib/components/ui/ColorField.svelte @@ -69,13 +69,13 @@ } .pipette:hover { - border-color: var(--accent); - color: var(--accent); + border-color: var(--link); + color: var(--link); } .pipette[aria-pressed='true'] { - border-color: var(--accent); - color: var(--accent); + border-color: var(--link); + color: var(--link); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } diff --git a/web/src/lib/components/ui/SliderField.svelte b/web/src/lib/components/ui/SliderField.svelte index d4a123d..16c5305 100644 --- a/web/src/lib/components/ui/SliderField.svelte +++ b/web/src/lib/components/ui/SliderField.svelte @@ -71,7 +71,7 @@ input[type='range'] { flex: 1; min-width: 3rem; - accent-color: var(--accent); + accent-color: var(--link); margin: 0; } @@ -96,8 +96,8 @@ } .step:hover:not(:disabled) { - border-color: var(--accent); - color: var(--accent); + border-color: var(--link); + color: var(--link); } .step:disabled { diff --git a/web/src/lib/palette.test.ts b/web/src/lib/palette.test.ts index 4b60cfd..3cd358e 100644 --- a/web/src/lib/palette.test.ts +++ b/web/src/lib/palette.test.ts @@ -1,6 +1,10 @@ -import { readFileSync } from 'node:fs'; -import { join } from 'node:path'; import { describe, expect, it } from 'vitest'; +// @ts-expect-error node types are not wired into svelte-check; vitest resolves fine +import { readFileSync } from 'node:fs'; + +declare const process: { cwd(): string }; + +const css = readFileSync('src/app.css', 'utf8'); type Tokens = Record; @@ -48,7 +52,7 @@ function mix(fgHex: string, alpha: number, bgHex: string): string { return `#${out.map((v) => v.toString(16).padStart(2, '0')).join('')}`; } -const css = readFileSync(join(__dirname, '..', 'app.css'), 'utf8'); +const cssText = css; const light = parseBlock(css, ':root'); const darkRaw = parseBlock(css, "[data-theme='dark']"); const dark: Tokens = { ...light, ...darkRaw }; diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index e803327..5bfd46d 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -103,7 +103,7 @@ .brand:hover { text-decoration: none; - color: var(--accent); + color: var(--link); } nav { @@ -120,7 +120,7 @@ } .nav-link:hover { - color: var(--accent); + color: var(--link); background: var(--bg); text-decoration: none; } @@ -148,7 +148,7 @@ } .lang-btn:hover { - color: var(--accent); + color: var(--link); } .lang-btn.active { @@ -158,7 +158,7 @@ .workspace-link { font-weight: 600; - color: var(--accent); + color: var(--link); } main { diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index 214ea36..ea34d71 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -102,6 +102,6 @@ } .back:hover { - color: var(--accent); + color: var(--link); }