feat(ui): map canvas follows light/dark theme; fix invisible gear control
Tests · UI / test (push) Waiting to run
Tests · UI / test (pull_request) Successful in 2m45s

The map view now selects a DARK_THEME or LIGHT_THEME palette from the
resolved app theme and threads it through every primitive builder, so
the canvas, planets, ship groups, cargo routes, battle/bombing markers,
fog, reach + selection rings, pending-Send tracks, and the pick overlay
all switch with the rest of the chrome. A theme flip remounts the
renderer preserving the camera — Pixi bakes the background at init and
every primitive bakes its colour at build, so a live re-tint is not
possible on the same instance.

This also fixes the reported bug: the gear-popover trigger and the
loading overlay hardcoded a dark navy background, so in light theme the
gear was invisible (dark icon on dark chip) until hover flipped it to a
white chip. Both now use the --color-surface-overlay token and read
correctly in both themes.

The light palette mirrors the dark one role-for-role, darkened /
saturated for contrast on a light background while keeping the incoming,
battle, and bombing accents vivid. The values are a first pass meant to
be refined during the F8 manual-QA loop.

Removes the now-dead "Phase 35" references from the code and lifts the
map-recoloring prohibition from the design-system / renderer docs; the
battle scene stays a fixed-palette data-viz surface.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-24 08:49:37 +02:00
parent d44ad9b6eb
commit f6e4a4f6bd
27 changed files with 631 additions and 230 deletions
+14 -15
View File
@@ -148,23 +148,22 @@ export function computePickOverlay(
}
/**
* PICK_OVERLAY_STYLE captures the colours / widths the renderer
* applies to each spec channel. Exported so tests and future themes
* can read the same values.
* PICK_OVERLAY_STYLE captures the per-channel alphas and widths the
* renderer applies to the pick overlay, plus the dim alpha for
* non-reachable primitives. The colours themselves — the highlight
* colour shared by the anchor / line / hover channels and the dim
* multiply tint — come from the active `Theme` (`pickHighlight`,
* `pickDimTint`) so the overlay tracks the light / dark palette.
*
* `dimAlpha` and `dimTint` are applied together to non-reachable
* primitives during a pick session: the alpha drops their
* brightness, and the tint multiplies their fill colour toward dark
* gray so the colour identity (planet kind) collapses into a
* single muted shade. The combination has to read as "obviously
* disabled" against the dark theme — bright planets such as
* `STYLE_LOCAL` (`0x6dd2ff`) survive a 0.3 alpha alone too
* comfortably, so the tint pulls them down too.
* `dimAlpha` and `Theme.pickDimTint` are applied together to
* non-reachable primitives during a pick session: the alpha drops
* their brightness while the tint collapses the colour identity
* (planet kind) into a single muted shade, so the disabled set reads
* as obviously inert against the map background.
*/
export const PICK_OVERLAY_STYLE = {
anchor: { color: 0xffe082, alpha: 0.9, width: 2 },
line: { color: 0xffe082, alpha: 0.5, width: 1 },
hover: { color: 0xffe082, alpha: 1, width: 2 },
anchor: { alpha: 0.9, width: 2 },
line: { alpha: 0.5, width: 1 },
hover: { alpha: 1, width: 2 },
dimAlpha: 0.35,
dimTint: 0x303841,
} as const;