peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(theme): text on glass holds 4.5:1 — light --muted kept at 6:1 on the page, tonal fills opaque

Browse Source 
Pixel-measured over every scheme x mode x backdrop: the item count fell to 3.8:1 (dark too: its 8%
fill let the toolbar glass and the thumbnails under it through), Channels' tabs to 4.1:1 and the
current Files row to 4.4:1. Light --muted moves 15% toward --fg in every scheme; the badges, the item
count and the current rail row paint opaque bg-tint* fills mixed into the surface. The token contract
now asks 6:1 of --muted on the bare page and checks those three sites use the tints.
This commit is contained in:
peter
2026-10-17 20:06:54 +02:00
parent d74f2a9ca1
commit 3ada34073b
6 changed files with 58 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+12 -5
View File
@@ -51,6 +51,13 @@
--color-live-fg: var(--live-fg);
--color-media-chrome: var(--media-chrome);
--color-media-mark: var(--media-mark);
/* A tonal fill under text (a Badge, the item count, the current rail row): its colour mixed into the
surface, OPAQUE — a `bg-fg/8` lets the glass and whatever scrolls under it through, which pixel-measured
the item count down to 3.8:1. theme.contract.test.ts measures each one's text on it. */
--color-tint: color-mix(in srgb, var(--fg) 8%, var(--surface));
--color-tint-accent: color-mix(in srgb, var(--accent) 6%, var(--surface));
--color-tint-warn: color-mix(in srgb, var(--warn) 6%, var(--surface));
--color-tint-current: color-mix(in srgb, var(--accent) 12%, var(--surface));
--font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
@@ -1032,7 +1039,7 @@ html[data-scheme="midnight"][data-theme="light"] {
--card: #ffffff;
--border: #dde3f0;
--fg: #1a2238;
--muted: #5b6685;
--muted: #515c79;
--accent: #3b5bdb;
--accent-fg: #ffffff;
}
@@ -1054,7 +1061,7 @@ html[data-scheme="forest"][data-theme="light"] {
--card: #ffffff;
--border: #d6e7e0;
--fg: #102a22;
--muted: #4d6b60;
--muted: #446157;
--accent: #0e7490;
--accent-fg: #ffffff;
}
@@ -1076,7 +1083,7 @@ html[data-scheme="slate"][data-theme="light"] {
--card: #ffffff;
--border: #e3e6eb;
--fg: #1c1f26;
--muted: #5d636e;
--muted: #535963;
--accent: #a21caf;
--accent-fg: #ffffff;
}
@@ -1100,7 +1107,7 @@ html[data-scheme="matrix"][data-theme="light"] {
--card: #ffffff;
--border: #dfe3d8;
--fg: #161a14;
--muted: #5a6352;
--muted: #505849;
--accent: #556b2f;
--accent-fg: #ffffff;
}
@@ -1126,7 +1133,7 @@ html[data-scheme="fjord"][data-theme="light"] {
--card: #ffffff;
--border: #c9d6e3;
--fg: #152232;
--muted: #4f6278;
--muted: #46586e;
--accent: #256b8f;
--accent-fg: #ffffff;
}