Bugfix: selection-fg switches + dropdown description readable

Two reports from the same tester: (1) selected file names in the file list have low contrast against the pane bg, especially with the cursor over them and on tinted panes; (2) the secondary description text in the "File size format" dropdown is unreadable when an option is highlighted.

- `--color-selection-fg` split into `--color-selection-fg-primary` + `--color-selection-fg-fallback` (= `--color-text-primary`). New CSS rule swaps to fallback in the dark + tinted pane + focused cursor-active corner where no recognizable gold can clear AA on top of the composite bg.
- `--color-accent-fg` already auto-picks black/white per accent (earlier work). The dropdown description now inherits that pick via a `[data-highlighted]` rule in `SettingSelect.svelte` — secondary identity is lost in this state, but on a saturated accent bg there's no opacity-mixed gray that stays both secondary and AA for Apple Purple.
- `data-pane-tint` attribute added to `.file-pane` (sourced from `volume-tint.svelte.ts:getPaneTintName`) so the selection-fg fallback rule can scope to tinted panes only.

`scripts/check-a11y-contrast` now passes 0/1070 violations and surfaces every accent variant + tint + cursor state combination as a side effect.

Author: vdavid

apps/desktop/src/app.css

@@ -132,8 +132,18 @@
   --pane-tint-bg-pct: 90%;
   --pane-tint-fg-pct: 10%;
 
-  /* === Selection === */
-  --color-selection-fg: #c9a227;
+  /* === Selection ===
+   * Selected-row text reads `--color-selection-fg`. The primary value carries
+   * the gold "this row is selected" identity. The fallback drops back to
+   * `--color-text-primary` for the few cases where the row bg is hostile
+   * enough that no recognizable gold can clear AA on top — specifically
+   * dark mode + a pane tint + cursor-active (yellow accent over a tinted
+   * dark surface). The CSS rule that switches between them lives further
+   * down in this file (search for "selection-fg fallback"). The contrast
+   * checker's `row_state_matrix.go` synthesizer mirrors that rule. */
+  --color-selection-fg-primary: #5a4000;
+  --color-selection-fg-fallback: var(--color-text-primary);
+  --color-selection-fg: var(--color-selection-fg-primary);
 
   /* === Git portal ===
      * Distinct from `--color-accent` to keep the "you're in history-land" feel
@@ -318,6 +328,20 @@
   --color-age-old: var(--color-text-secondary);
 }
 
+/* selection-fg fallback: dark mode + pane tint + focused cursor on a selected
+   row. In this state the row bg becomes the translucent yellow accent
+   composited over a tinted dark surface — Y around 0.09. Even the brightest
+   gold we'd be willing to call "selection identity" can't reach 4.5:1 there.
+   Drop to `--color-text-primary` so the row stays readable; the gold
+   identity is sacrificed only in this one corner. The size tiers
+   (`--color-size-*-selected`) derive from `--color-selection-fg`, so they
+   switch in lockstep. Mirrored in `row_state_matrix.go`'s synthesizer. */
+@media (prefers-color-scheme: dark) {
+  .file-pane[data-pane-tint] .full-list-container.is-focused .file-entry.is-selected.is-under-cursor {
+    --color-selection-fg: var(--color-selection-fg-fallback);
+  }
+}
+
 /* Old-WebKit fallback (light mode).
  *
  * `color-mix()` arrived in Safari 16.2 (Dec 2022) and `color-mix(in oklch, …)`
@@ -473,8 +497,9 @@
     /* === Focus ring shadow === */
     --shadow-focus-contrast: 0 0 0 4px color-mix(in srgb, white, transparent 92%);
 
-    /* === Selection === */
-    --color-selection-fg: #d4a82a;
+    /* === Selection (dark) === see light mode for primary/fallback rationale */
+    --color-selection-fg-primary: #d4a82a;
+    --color-selection-fg-fallback: var(--color-text-primary);
 
     /* Git portal: brighter teal in dark mode for readability against
        the dark background. */

apps/desktop/src/lib/file-explorer/pane/FilePane.svelte

@@ -89,7 +89,7 @@
 
     const log = getAppLogger('fileExplorer')
     import { isMtpVolumeId, getMtpDisplayPath } from '$lib/mtp'
-    import { getPaneTintBg } from './volume-tint.svelte'
+    import { getPaneTintBg, getPaneTintName } from './volume-tint.svelte'
     import * as benchmark from '$lib/benchmark'
     import { handleNavigationShortcut } from '../navigation/keyboard-shortcuts'
     import { resolveValidPath } from '../navigation/path-resolution'
@@ -360,6 +360,13 @@
      * `null` when the user picked "no tint" for this volume's kind (the common case).
      */
     const paneTintBg = $derived(getPaneTintBg(volumeId, currentVolumeInfo?.fsType, currentVolumeInfo?.category))
+    /**
+     * Active tint name (or null) for `data-pane-tint` on `.file-pane`. The
+     * selection-fg fallback rule in `app.css` keys off this attribute to
+     * switch text color when the tinted bg + cursor-active would otherwise
+     * push selection-fg below AA. Always tracks `paneTintBg`.
+     */
+    const paneTintName = $derived(getPaneTintName(volumeId, currentVolumeInfo?.fsType, currentVolumeInfo?.category))
     /**
      * Reactive: the per-volume reconnect cycle state, or `null` if no cycle is
      * running. The manager is the single source of truth for the view. By the
@@ -2254,6 +2261,7 @@
     role="region"
     aria-label="{paneId === 'left' ? 'Left' : 'Right'} file pane"
     style={paneTintBg ? `background-color: ${paneTintBg}` : undefined}
+    data-pane-tint={paneTintName ?? undefined}
 >
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="header" oncontextmenu={handleBreadcrumbContextMenu}>

apps/desktop/src/lib/file-explorer/pane/volume-tint.svelte.ts

@@ -174,3 +174,24 @@ export function getPaneTintBg(
   void mediaTick
   return computeTintHex(tint)
 }
+
+/**
+ * Reactive: returns the active tint name for a pane (`"red"`, `"amber"`, …)
+ * or `null` when no tint is set. Mirrors `getPaneTintBg` but exposes the
+ * name rather than the CSS value, so callers can wire `data-pane-tint` on
+ * `.file-pane` for selectors that need to react to "tinted vs. not."
+ * The selection-fg fallback rule in `app.css` uses this attribute.
+ */
+export function getPaneTintName(
+  volumeId: string,
+  fsType: string | undefined,
+  category: LocationCategory | undefined,
+): VolumeTintColor | null {
+  const kind = volumeKindFor(volumeId, fsType, category)
+  const tint = tintForKind(kind)
+  if (tint === 'none') return null
+  // Touch the reactive trigger for the old-WebKit path so callers stay
+  // reactive to media flips (same rationale as `getPaneTintBg`).
+  if (!hasColorMix) void mediaTick
+  return tint
+}

apps/desktop/src/lib/settings/components/SettingSelect.svelte

@@ -372,4 +372,26 @@
         color: var(--color-text-tertiary);
         font-size: var(--font-size-sm);
     }
+
+    /* When the parent option is highlighted (cursor over, or checked), the bg
+       flips to `--color-accent`. The description's resting `--color-text-tertiary`
+       (#666 / #a0a0a0) drops to ~1–2.4:1 contrast on every system accent. Switch
+       it to `--color-accent-fg` (auto-picked black/white via `readableFgOn`) so
+       it matches the label's color and stays readable. The secondary visual
+       weight is lost in this state — but on a saturated bg there's no opacity
+       that stays both secondary and AA-compliant for Apple Purple (the worst
+       dark-fg case). The contrast checker's `dropdown_states.go` matrix
+       validates this against every accent variant. */
+    :global(.select-item[data-highlighted]) .option-description,
+    :global(.select-item[data-state='checked']) .option-description {
+        color: var(--color-accent-fg);
+    }
+
+    /* Exception: when `Custom...` is highlighted, the other checked items lose
+       their accent bg (see the `.custom-highlighted .select-item...` rule
+       above). Revert the description color so it stays readable on the
+       now-transparent bg. */
+    :global(.custom-highlighted .select-item[data-state='checked']:not([data-highlighted])) .option-description {
+        color: var(--color-text-tertiary);
+    }
 </style>