refactor: route zodiac/timeline colors through ProfileColorProperty

Author: veillette

CLAUDE.md

@@ -18,7 +18,7 @@ Shared code keeps the `SolarSystemModels` prefix; per-screen code uses the
 
 | File | Purpose |
 |---|---|
-| `src/SolarSystemModelsColors.ts` | All `ProfileColorProperty` instances (default + projector) |
+| `src/SolarSystemModelsColors.ts` | All `ProfileColorProperty` instances (default + projector profiles); includes timeline/zodiac orbit-area keys and exported `zodiacGhostBarColor()` for speed-based Ptolemaic ghosting bars |
 | `src/SolarSystemModelsConstants.ts` | Named numeric constants (layout px, physics SI units) |
 | `src/SolarSystemModelsNamespace.ts` | Namespace used by `.register()` |
 | `src/common/SolarSystemModelsPanel.ts` | Pre-themed `Panel` wrapper (uses `SolarSystemModelsColors`) |

src/SolarSystemModelsColors.ts

@@ -1,4 +1,4 @@
-import { ProfileColorProperty } from "scenerystack/scenery";
+import { Color, ProfileColorProperty } from "scenerystack/scenery";
 import SolarSystemModelsNamespace from "./SolarSystemModelsNamespace.js";
 
 const SolarSystemModelsColors = {
@@ -88,6 +88,14 @@ const SolarSystemModelsColors = {
     default: "#0a0a18",
     projector: "#edf0f5",
   }),
+  configurationsOrbitAreaBackgroundColorProperty: new ProfileColorProperty(
+    SolarSystemModelsNamespace,
+    "configurationsOrbitAreaBackground",
+    {
+      default: "#060d1a",
+      projector: "#e8ecf2",
+    },
+  ),
 
   // ── Zodiac ring decorations ────────────────────────────────────────────────
 
@@ -107,6 +115,22 @@ const SolarSystemModelsColors = {
     default: "#444455",
     projector: "#9999bb",
   }),
+  configurationsZodiacGlyphColorProperty: new ProfileColorProperty(
+    SolarSystemModelsNamespace,
+    "configurationsZodiacGlyph",
+    {
+      default: "#aaaacc",
+      projector: "#445566",
+    },
+  ),
+  configurationsZodiacDividerColorProperty: new ProfileColorProperty(
+    SolarSystemModelsNamespace,
+    "configurationsZodiacDivider",
+    {
+      default: "#334455",
+      projector: "#99aabb",
+    },
+  ),
 
   // ── Constellation decorations ──────────────────────────────────────────────
 
@@ -136,10 +160,22 @@ const SolarSystemModelsColors = {
     default: "#334466",
     projector: "#aabbcc",
   }),
+  timelineAxisColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineAxis", {
+    default: "#1a2a44",
+    projector: "#ccd8e8",
+  }),
   timelineEventColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineEvent", {
     default: "#446688",
     projector: "#334466",
   }),
+  timelineSelectedHighlightColorProperty: new ProfileColorProperty(
+    SolarSystemModelsNamespace,
+    "timelineSelectedHighlight",
+    {
+      default: "#335577aa",
+      projector: "#8899bb88",
+    },
+  ),
   timelineSelectedColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineSelected", {
     default: "#223355",
     projector: "#ccd8e8",
@@ -148,10 +184,39 @@ const SolarSystemModelsColors = {
     default: "#aabbcc",
     projector: "#334466",
   }),
+  timelineDirectionLabelColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineDirectionLabel", {
+    default: "#5577aa",
+    projector: "#334466",
+  }),
+  timelineEventNameLabelColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineEventNameLabel", {
+    default: "#99aabb",
+    projector: "#445566",
+  }),
+  timelineTickLabelColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineTickLabel", {
+    default: "#556677",
+    projector: "#667788",
+  }),
   timelineLabelColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "timelineLabel", {
     default: "#9999bb",
     projector: "#445566",
   }),
+
+  // ── Ptolemaic path trail ───────────────────────────────────────────────────
+
+  pathTrailLiveSegmentColorProperty: new ProfileColorProperty(SolarSystemModelsNamespace, "pathTrailLiveSegment", {
+    default: "#ff0000",
+    projector: "#cc0000",
+  }),
 };
 
+/** Ghosting bar tint from apparent zodiac-strip angular step (Flash Zodiac Strip.as). */
+export function zodiacGhostBarColor(deltaPx: number): Color {
+  let factor = 1 - deltaPx / 3;
+  if (factor < 0) {
+    factor = 0;
+  }
+  const g = Math.floor(216 - 112 * factor);
+  return new Color(21 + g, g, g);
+}
+
 export default SolarSystemModelsColors;

src/configurations/view/ConfigurationsScreenView.ts

@@ -67,7 +67,7 @@ export class ConfigurationsScreenView extends ScreenView {
 
     // ── Orbit area background ───────────────────────────────────────────────
     const orbitAreaBg = new Rectangle(0, 0, ORBIT_AREA_SIZE, this.layoutBounds.height, {
-      fill: "#060d1a",
+      fill: SolarSystemModelsColors.configurationsOrbitAreaBackgroundColorProperty,
     });
     this.addChild(orbitAreaBg);
 

src/configurations/view/ConfigurationsTimeline.ts

@@ -38,44 +38,54 @@ export class ConfigurationsTimeline extends Node {
 
     const s = StringManager.getInstance().getConfigurationsStrings();
 
-    const bg = new Rectangle(0, 0, W, H, { fill: "#0d1117", stroke: "#334466", lineWidth: 1 });
+    const bg = new Rectangle(0, 0, W, H, {
+      fill: SolarSystemModelsColors.timelineBackgroundColorProperty,
+      stroke: SolarSystemModelsColors.timelineBorderColorProperty,
+      lineWidth: 1,
+    });
     this.addChild(bg);
 
     // Year-axis grid lines
-    const axisLayer = new Path(null, { lineWidth: 1, stroke: "#1a2a44" });
+    const axisLayer = new Path(null, {
+      lineWidth: 1,
+      stroke: SolarSystemModelsColors.timelineAxisColorProperty,
+    });
     this.addChild(axisLayer);
 
     // Event marks
-    const eventLayer = new Path(null, { stroke: "#446688", lineWidth: 1 });
+    const eventLayer = new Path(null, {
+      stroke: SolarSystemModelsColors.timelineEventColorProperty,
+      lineWidth: 1,
+    });
     this.addChild(eventLayer);
 
     // Selected-event highlight bar
     const selectedEventBg = new Rectangle(0, 0, W, 14, {
-      fill: "#335577aa",
+      fill: SolarSystemModelsColors.timelineSelectedHighlightColorProperty,
       visible: false,
       cornerRadius: 2,
     });
     this.addChild(selectedEventBg);
 
     // Cursor line (center = current time)
     const cursorLine = new Path(new Shape().moveTo(0, H / 2).lineTo(W, H / 2), {
-      stroke: "#aabbcc",
+      stroke: SolarSystemModelsColors.timelineCursorColorProperty,
       lineWidth: 1.5,
     });
     this.addChild(cursorLine);
 
     // Past / Future labels
     const pastLabel = new Text(s.timelinePastStringProperty, {
       font: new PhetFont({ size: 9, weight: "bold" }),
-      fill: "#5577aa",
+      fill: SolarSystemModelsColors.timelineDirectionLabelColorProperty,
     });
     pastLabel.right = W - 4;
     pastLabel.bottom = H / 2 - 3;
     this.addChild(pastLabel);
 
     const futureLabel = new Text(s.timelineFutureStringProperty, {
       font: new PhetFont({ size: 9, weight: "bold" }),
-      fill: "#5577aa",
+      fill: SolarSystemModelsColors.timelineDirectionLabelColorProperty,
     });
     futureLabel.right = W - 4;
     futureLabel.top = H / 2 + 3;
@@ -84,7 +94,11 @@ export class ConfigurationsTimeline extends Node {
     // Event-name label pool
     const labelPool: Text[] = [];
     for (let i = 0; i < 20; i++) {
-      const t = new Text("", { font: new PhetFont(9), fill: "#99aabb", maxWidth: W * 0.4 - 4 });
+      const t = new Text("", {
+        font: new PhetFont(9),
+        fill: SolarSystemModelsColors.timelineEventNameLabelColorProperty,
+        maxWidth: W * 0.4 - 4,
+      });
       t.visible = false;
       labelPool.push(t);
       this.addChild(t);
@@ -93,7 +107,10 @@ export class ConfigurationsTimeline extends Node {
     // Year tick-label pool
     const tickPool: Text[] = [];
     for (let i = 0; i < 16; i++) {
-      const t = new Text("", { font: new PhetFont(8), fill: "#556677" });
+      const t = new Text("", {
+        font: new PhetFont(8),
+        fill: SolarSystemModelsColors.timelineTickLabelColorProperty,
+      });
       t.visible = false;
       tickPool.push(t);
       this.addChild(t);
@@ -165,7 +182,7 @@ export class ConfigurationsTimeline extends Node {
         labelIdx++;
       }
       const hs = new Rectangle(0, y - 6, W * 0.4, 12, {
-        fill: "#ffffff01",
+        fill: "rgba(0,0,0,0)",
         cursor: "pointer",
       });
       hs.addInputListener(

src/configurations/view/ConfigurationsZodiacStrip.ts

@@ -23,7 +23,7 @@ export class ConfigurationsZodiacStrip extends Node {
     // Band background
     const band = new Rectangle(0, 0, STRIP_WIDTH, STRIP_HEIGHT, {
       fill: SolarSystemModelsColors.zodiacBandColorProperty,
-      stroke: "#555577",
+      stroke: SolarSystemModelsColors.zodiacBorderColorProperty,
       lineWidth: 1,
     });
     this.addChild(band);
@@ -33,15 +33,17 @@ export class ConfigurationsZodiacStrip extends Node {
     for (let i = 0; i < 12; i++) {
       const label = new Text(ZODIAC_GLYPHS[i] ?? "", {
         font: new PhetFont(14),
-        fill: "#aaaacc",
+        fill: SolarSystemModelsColors.configurationsZodiacGlyphColorProperty,
         maxWidth: segW - 2,
       });
       label.centerX = (i + 0.5) * segW;
       label.centerY = STRIP_HEIGHT * 0.3;
       this.addChild(label);
 
       if (i > 0) {
-        const divider = new Rectangle(i * segW, 0, 1, STRIP_HEIGHT, { fill: "#334455" });
+        const divider = new Rectangle(i * segW, 0, 1, STRIP_HEIGHT, {
+          fill: SolarSystemModelsColors.configurationsZodiacDividerColorProperty,
+        });
         this.addChild(divider);
       }
     }

src/ptolemaic/view/PtolemaicPathTrail.ts

@@ -13,7 +13,6 @@ import type { PtolemaicModel } from "../model/PtolemaicModel.js";
 // planet's current position. This is frame-rate independent.
 const NUM_SEGMENTS = 20;
 const SAMPLING_INTERVAL = 1.5; // days
-const RED_SEGMENT_COLOR = "#ff0000";
 
 export class PtolemaicPathTrail extends Node {
   private readonly mvt: ModelViewTransform2;
@@ -38,7 +37,7 @@ export class PtolemaicPathTrail extends Node {
     }
 
     this.tempSegment = new Path(null, {
-      stroke: RED_SEGMENT_COLOR,
+      stroke: SolarSystemModelsColors.pathTrailLiveSegmentColorProperty,
       lineWidth: 1,
     });
     this.addChild(this.tempSegment);

src/ptolemaic/view/PtolemaicScreenView.ts

@@ -62,7 +62,7 @@ export class PtolemaicScreenView extends ScreenView {
 
     // ── Orbital area background ────────────────────────────────────────────
     const orbitAreaBg = new Rectangle(0, 0, ORBIT_VIEW_CENTER_X * 2 + 20, this.layoutBounds.height, {
-      fill: "#0a0a18",
+      fill: SolarSystemModelsColors.orbitAreaBackgroundColorProperty,
     });
     this.addChild(orbitAreaBg);
 
@@ -76,7 +76,7 @@ export class PtolemaicScreenView extends ScreenView {
     for (let i = 0; i < 12; i++) {
       const angle = (i * Math.PI) / 6; // 0°, 30°, 60°, ... (sign boundaries)
       const tick = new Path(null, {
-        stroke: "#888899",
+        stroke: SolarSystemModelsColors.zodiacTickColorProperty,
         lineWidth: 1,
       });
       const x1 = ORBIT_VIEW_CENTER_X + Math.cos(angle) * tickInnerR;
@@ -95,7 +95,7 @@ export class PtolemaicScreenView extends ScreenView {
       const vy = ORBIT_VIEW_CENTER_Y - Math.sin(angle) * ZODIAC_LABEL_RADIUS;
       const label = new Text(ZODIAC_SIGNS[i] ?? "", {
         font: new PhetFont(10),
-        fill: "#aabbcc",
+        fill: SolarSystemModelsColors.zodiacLabelColorProperty,
         centerX: vx,
         centerY: vy,
         maxWidth: 55,
@@ -139,7 +139,7 @@ export class PtolemaicScreenView extends ScreenView {
     const sunOrbitVr = ORBIT_VIEW_SCALE * PTOLEMAIC_SUN_ORBIT_RADIUS;
     const sunOrbitViewCenter = mvt.modelToViewPosition(Vector2.ZERO);
     const sunOrbitCircle = new Path(Shape.circle(sunOrbitViewCenter.x, sunOrbitViewCenter.y, sunOrbitVr), {
-      stroke: "#333355",
+      stroke: SolarSystemModelsColors.sunOrbitReferenceColorProperty,
       lineWidth: 1,
     });
     this.addChild(sunOrbitCircle);

src/ptolemaic/view/PtolemaicZodiacStrip.ts

@@ -1,7 +1,7 @@
 import { Shape } from "scenerystack/kite";
 import { Circle, Node, Path, Rectangle, Text } from "scenerystack/scenery";
 import { PhetFont } from "scenerystack/scenery-phet";
-import SolarSystemModelsColors from "../../SolarSystemModelsColors.js";
+import SolarSystemModelsColors, { zodiacGhostBarColor } from "../../SolarSystemModelsColors.js";
 import { ZODIAC_STRIP_HEIGHT, ZODIAC_STRIP_WIDTH } from "../../SolarSystemModelsConstants.js";
 import type { PtolemaicModel } from "../model/PtolemaicModel.js";
 
@@ -55,13 +55,8 @@ function addBar(shape: Shape, prevX: number, curX: number, top: number, bottom:
 }
 
 /** Ghosting bar color from the apparent angular step (Flash lines 80–86). */
-function speedColor(deltaPx: number): string {
-  let factor = 1 - deltaPx / 3;
-  if (factor < 0) {
-    factor = 0;
-  }
-  const g = Math.floor(216 - 112 * factor);
-  return `rgb(${21 + g},${g},${g})`;
+function speedColor(deltaPx: number) {
+  return zodiacGhostBarColor(deltaPx);
 }
 
 export class PtolemaicZodiacStrip extends Node {