fix(player): a chosen tab's underline and an open or pressed icon read the scope's chosen colour

The underline named `--color-chosen`, which is resolved once on :root, so it stayed the accent under
`media-marks` (seen in the browser: fuchsia on Slate light); it reads `--chosen` where it is used
now. An icon button pressed or with its menu open tinted its glyph with the accent; it takes the
chosen colour — the accent everywhere but the player chrome, where it is the media amber.

frontend/src/components/ui/IconButton.tsx

@@ -20,7 +20,8 @@ export interface IconButtonProps
   children: ReactNode;
   variant?: IconButtonVariant;
   size?: IconButtonSize;
-  /** A toggle: sets aria-pressed and tints the glyph with the accent. */
+  /** A toggle: sets aria-pressed and tints the glyph with the chosen colour (the accent; the media
+   *  amber on the player chrome). */
   pressed?: boolean;
   /** Not accepted: a toggle is `pressed` (JSX lets any undeclared `aria-*` through, so it is `never`). */
   "aria-pressed"?: never;

frontend/src/components/ui/Tabs.dom.test.tsx

@@ -68,6 +68,9 @@ describe("Tabs", () => {
     const on = tab("Alpha").className;
     expect(on).not.toMatch(/\btext-accent\b/);
     expect(on).toMatch(/\btext-white\b/);
-    expect(on).toMatch(/--color-chosen/);
+    // The scope's own `--chosen`, read where it is used: `--color-chosen` is resolved once on :root
+    // and would stay the accent under `media-marks`.
+    expect(on).toMatch(/var\(--chosen,/);
+    expect(on).not.toMatch(/--color-chosen/);
   });
 });

frontend/src/components/ui/buttonStyles.ts

@@ -121,7 +121,7 @@ const ICON_VARIANTS: Record<IconButtonVariant, string> = {
 
 // An icon toggle that is on shows it in the glyph (watched, saved, a selected track), not as a solid
 // fill: a solid accent square in a row of quiet glyphs outshouts the row's primary action.
-const ICON_PRESSED = "aria-pressed:text-accent";
+const ICON_PRESSED = "aria-pressed:text-chosen";
 
 const ICON_SIZES: Record<IconButtonSize, string> = {
   sm: "size-7 [&>svg]:size-4",
@@ -172,7 +172,7 @@ export function iconButtonClass({
   pressed?: boolean;
 }) {
   return clsx(
-    "inline-grid shrink-0 place-items-center transition touch-target aria-expanded:text-accent disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    "inline-grid shrink-0 place-items-center transition touch-target aria-expanded:text-chosen disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
     ICON_VARIANTS[variant],
     round || variant === "media" ? "rounded-full" : "rounded-lg",
     pressed !== undefined && ICON_PRESSED,

frontend/src/components/ui/mediaChrome.ts

@@ -3,4 +3,5 @@
 
 /** A choice chosen on the chrome (a settings tab, a date style): white on a veil, underlined in the
  *  chosen mark — `media-marks` points it at the media amber, as a light theme's accent is dark there. */
-export const MEDIA_CHOSEN = "bg-white/15 text-white shadow-[inset_0_-2px_0_var(--color-chosen)]";
+export const MEDIA_CHOSEN =
+  "bg-white/15 text-white shadow-[inset_0_-2px_0_var(--chosen,var(--accent))]";