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

fix(player): what is chosen on the player chrome is marked amber, not written in the accent

Browse Source 
A light theme's accent as text on the always-dark chrome was 2.84:1 (Slate). `--chosen` is the
accent unless a scope names its own; `media-marks` (was media-focus) points it, with the focus
ring, at the media amber. A chosen track stays white with an amber tick (MenuCheck reads
`text-chosen`); a chosen settings tab or toggle is white with an amber underline (MEDIA_CHOSEN).
The theme contract test holds the token, the tick and the player components free of accent text.
This commit is contained in:
peter
2026-10-10 21:56:47 +02:00
parent e1d325b942
commit 8312c6d592
13 changed files with 85 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+13 -7
View File
@@ -33,6 +33,9 @@
--color-accent: var(--accent);
/* A focus ring's colour: the accent, unless a scope over another ground names its own. */
--color-focus: var(--focus, var(--accent));
/* What marks a choice standing on its ground (a chosen row's tick, a chosen tab's underline): the
accent, unless a scope over another ground names its own. */
--color-chosen: var(--chosen, var(--accent));
--color-accent-fg: var(--accent-fg);
--color-info: var(--info);
--color-info-fg: var(--info-fg);
@@ -145,18 +148,20 @@
border-color: var(--edge-strong);
}
/* The focus ring on the always-dark player chrome (a player, its menus and panels): the media amber,
as a light theme's accent is dark (under 3:1 on the chrome). Every class string that paints
bg-media-chrome names it or media-scope (theme.contract.test.ts). */
@utility media-focus {
/* The marks on the always-dark player chrome (a player, its menus and panels) — the focus ring and
what is chosen — are the media amber, as a light theme's accent is dark there (Slate 2.84:1).
Every class string that paints bg-media-chrome names it or media-scope (theme.contract.test.ts). */
@utility media-marks {
--focus: var(--media-mark);
--chosen: var(--media-mark);
}
/* A form on the always-dark player chrome (the clip panel's fields): the neutral tokens the field
primitives read are re-pointed to white-on-chrome for this subtree, so a light theme's dark text
never lands on the dark bar. The accent stays the theme's for what is chosen; what must be seen
there is not left to it: a focus ring is the media amber and an error the media red, as a light
theme's accent and danger are dark (under 3:1 on the chrome). */
never lands on the dark bar. The accent stays the theme's for a choice FILLED with it (its own
text on it holds); a mark standing on the chrome itself is not left to it: a focus ring and a
chosen mark are the media amber and an error the media red, as a light theme's accent and danger
are dark (under 3:1 on the chrome). */
@utility media-scope {
--fg: #ffffff;
--muted: rgb(255 255 255 / 0.62);
@@ -168,6 +173,7 @@
--card: rgb(255 255 255 / 0.08);
--danger: var(--media-danger);
--focus: var(--media-mark);
--chosen: var(--media-mark);
color: var(--fg);
}