officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

panel chrome stops being black

Browse Source 
Reported against a dark theme: the panel header's title, zoom readout and controls were
hardcoded `text-black`, `text-black/60`, `hover:bg-black/10` and `border-black/10`.
Legible on Duck's pale glass, invisible on every palette theme — which is the whole
class of bug the theme work exists to remove, sitting in the one component I moved
between packages and did not re-read.

Three derived tokens, so no theme has to think about them:

  --panel-header-fg-dim     the header's ink at 60%   (the zoom readout)
  --panel-header-border     the header's ink at 15%   (the rule under it)
  --panel-control-hover     the header's ink at 12%   (control hover)

The swap, drop-target and app-picker chrome used `duck-teal` and `text-white` directly.
Those now use `--panel-accent` and a new `--panel-accent-fg`, so a chip on the accent
stays readable whatever the accent is.

Verified across five themes rather than by reading:

  duck-dark          ink=rgb(248,250,252)
  duck-light         ink=rgb(2,8,23)
  rose-pine          ink=rgb(224,222,244)
  gruvbox            ink=rgb(235,219,178)
  catppuccin-latte   ink=rgb(76,79,105)

Two comments corrected while there: both asserted the chrome "is black throughout",
which was true when written and is now the opposite of true.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-17 01:04:08 +00:00
co-authored by Claude Opus 5
parent fd78495b5a
commit 94a55fe679
3 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/theme/css/base.css
+10
View File
@@ -251,7 +251,17 @@
--panel-blur: 0px;
--panel-header-bg: color-mix(in srgb, var(--muted) 60%, transparent);
--panel-header-fg: var(--foreground);
/*
Panel chrome states. These were literal blacks in the component — `text-black/60` on the zoom
readout, `hover:bg-black/10` on every control, `border-black/10` under the header — which is legible
on Duck's pale glass and invisible on any dark theme. Derived from the header's own ink so they
follow whatever it is.
*/
--panel-header-fg-dim: color-mix(in srgb, var(--panel-header-fg) 60%, transparent);
--panel-header-border: color-mix(in srgb, var(--panel-header-fg) 15%, transparent);
--panel-control-hover: color-mix(in srgb, var(--panel-header-fg) 12%, transparent);
--panel-accent: var(--primary);
--panel-accent-fg: var(--primary-foreground);
--panel-grid-color: color-mix(in srgb, var(--border) 25%, transparent);
/* The header */