Public: anyone can read this; the crew can change it.
small: The palette's recent pages have their looks, light and dark, and pass design-lint #11041
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/11028-small-the-palette-s-recent-pages-have-th → main 3 commits fork 2 threads · 2 unresolved
2 files
changed +21
−2
src/web/style/components.ts +7 −2
| @@ -804,10 +804,13 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } | ||
| 804 | 804 | padding: 6px; scrollbar-width: thin; |
| 805 | 805 | } |
| 806 | 806 | .palette-group + .palette-group { margin-top: 4px; } |
| 807 | /* Headings and details are text people read (a recent page's detail says | |
| 808 | where it was), so they take --muted-fg: --faint is 2.3:1 on the selected | |
| 809 | row in light. The icon alone stays faint. */ | |
| 807 | 810 | .palette-heading { |
| 808 | 811 | padding: 8px 10px 4px; |
| 809 | 812 | font-size: var(--fs-min); font-weight: 600; letter-spacing: .08em; |
| 810 | text-transform: uppercase; color: var(--faint); | |
| 813 | text-transform: uppercase; color: var(--muted-fg); | |
| 811 | 814 | } |
| 812 | 815 | .palette-item { |
| 813 | 816 | display: flex; align-items: center; gap: 10px; width: 100%; |
| @@ -821,11 +824,13 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } | ||
| 821 | 824 | .palette-item .cat { |
| 822 | 825 | flex: none; max-width: 45%; margin-left: auto; |
| 823 | 826 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
| 824 | font-size: 12.5px; color: var(--faint); | |
| 827 | font-size: 12.5px; color: var(--muted-fg); | |
| 825 | 828 | } |
| 826 | 829 | /* One highlight. The pointer moves it (the script listens) rather than |
| 827 | 830 | painting a second one under the cursor; the finder keeps plain hover. */ |
| 828 | 831 | .palette-item[aria-selected="true"], .finder .palette-item:hover { background: var(--muted); } |
| 832 | /* --muted-fg is 4.40:1 on that highlight in light; the detail takes --fg there. */ | |
| 833 | .palette-item[aria-selected="true"] .cat { color: var(--fg); } | |
| 829 | 834 | .palette-foot { |
| 830 | 835 | display: flex; align-items: center; gap: 10px; padding: 8px 14px; |
| 831 | 836 | border-top: 1px solid var(--border); font-size: 12.5px; color: var(--faint); |
test/palette.test.ts +14
| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | import { describe, expect, test } from "bun:test"; |
| 2 | 2 | import { shellJs } from "../src/web/client.ts"; |
| 3 | import { components } from "../src/web/style/components.ts"; | |
| 3 | 4 | import { |
| 4 | 5 | frecencyOrder, |
| 5 | 6 | fuzzyScore, |
| @@ -379,3 +380,16 @@ describe("recent visits in the running shell", () => { | ||
| 379 | 380 | expect(reads).toBe(opened); |
| 380 | 381 | }); |
| 381 | 382 | }); |
| 383 | ||
| 384 | describe("the palette's text is readable (#11028)", () => { | |
| 385 | const rule = (sel: string) => components.match(new RegExp(`${sel.replace(/[.\[\]"=]/g, "\\$&")}\\s*\\{[^}]*\\}`))?.[0] ?? ""; | |
| 386 | test("headings and row details use --muted-fg, not --faint (2.3:1 on the selected row in light)", () => { | |
| 387 | for (const sel of [".palette-heading", ".palette-item .cat"]) { | |
| 388 | expect(rule(sel)).toContain("color: var(--muted-fg)"); | |
| 389 | expect(rule(sel)).not.toContain("--faint"); | |
| 390 | } | |
| 391 | }); | |
| 392 | test("the selected row's detail reads in --fg: --muted-fg is 4.40:1 on its highlight", () => { | |
| 393 | expect(rule('.palette-item[aria-selected="true"] .cat')).toContain("color: var(--fg)"); | |
| 394 | }); | |
| 395 | }); |
--muted-fg on the selected row is 4.40:1 in light by your own figure, below 4.5:1 at 12.5px. Give the selected row's .cat a stronger colour (--fg) so the fix actually passes, and test it.