feat(ui): map canvas follows light/dark theme; fix invisible gear control
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:
@@ -226,12 +226,6 @@ const ORIGIN_COPY_INDEX = 4; // (0, 0) entry of TORUS_OFFSETS
|
||||
// debug surface stays allocation-free.
|
||||
const EMPTY_HIDDEN_IDS: ReadonlySet<PrimitiveID> = new Set();
|
||||
|
||||
// FOG_COLOR is the Phase 29 visibility-fog colour. Two shades
|
||||
// lighter than the dark theme background (`0x0a0e1a`) so it reads
|
||||
// as a faint fog without contrasting against the rest of the map.
|
||||
// The colour is tunable in Phase 35 polish.
|
||||
export const FOG_COLOR = 0x12162a;
|
||||
|
||||
/**
|
||||
* FogPaintOp is one item in the ordered draw sequence produced by
|
||||
* `fogPaintOps`. The renderer dispatches each op directly onto a
|
||||
@@ -657,7 +651,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
|
||||
g.clear();
|
||||
g.circle(spec.anchor.x, spec.anchor.y, spec.anchor.radius);
|
||||
g.stroke({
|
||||
color: PICK_OVERLAY_STYLE.anchor.color,
|
||||
color: theme.pickHighlight,
|
||||
alpha: PICK_OVERLAY_STYLE.anchor.alpha,
|
||||
width: PICK_OVERLAY_STYLE.anchor.width,
|
||||
});
|
||||
@@ -665,7 +659,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
|
||||
g.moveTo(spec.line.x1, spec.line.y1);
|
||||
g.lineTo(spec.line.x2, spec.line.y2);
|
||||
g.stroke({
|
||||
color: PICK_OVERLAY_STYLE.line.color,
|
||||
color: theme.pickHighlight,
|
||||
alpha: PICK_OVERLAY_STYLE.line.alpha,
|
||||
width: PICK_OVERLAY_STYLE.line.width,
|
||||
});
|
||||
@@ -677,7 +671,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
|
||||
spec.hoverOutline.radius,
|
||||
);
|
||||
g.stroke({
|
||||
color: PICK_OVERLAY_STYLE.hover.color,
|
||||
color: theme.pickHighlight,
|
||||
alpha: PICK_OVERLAY_STYLE.hover.alpha,
|
||||
width: PICK_OVERLAY_STYLE.hover.width,
|
||||
});
|
||||
@@ -720,7 +714,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
|
||||
dimmedAlphaBackup.set(g, g.alpha);
|
||||
dimmedTintBackup.set(g, g.tint as number);
|
||||
g.alpha = PICK_OVERLAY_STYLE.dimAlpha;
|
||||
g.tint = PICK_OVERLAY_STYLE.dimTint;
|
||||
g.tint = theme.pickDimTint;
|
||||
}
|
||||
}
|
||||
// Overlay graphic. Lives in the origin copy so the central
|
||||
@@ -891,7 +885,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
|
||||
const ops = fogPaintOps(
|
||||
opts.world,
|
||||
circles,
|
||||
FOG_COLOR,
|
||||
theme.fog,
|
||||
theme.background,
|
||||
mode,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user