Flatten all button appearances; confirm default-profile contrast is sound

src/common/ExtrasolarPlanetsButtonOptions.ts

@@ -0,0 +1,43 @@
+/**
+ * ExtrasolarPlanetsButtonOptions.ts
+ *
+ * Shared flat button appearance for the sim. Rectangular and round push buttons
+ * (including ResetAllButton, TimeControlNode's play/pause/step buttons, and
+ * NumberControl's arrow buttons) default to SceneryStack's 3-D beveled
+ * appearance; spread these options (or the nested bundles) into a button's
+ * options for a flat look everywhere.
+ */
+
+import type {
+  NumberControlOptions,
+  PlayPauseStepButtonGroupOptions,
+  TimeControlNodeOptions,
+} from "scenerystack/scenery-phet";
+import { ButtonNode } from "scenerystack/sun";
+
+export const FLAT_BUTTON_APPEARANCE_OPTIONS = {
+  buttonAppearanceStrategy: ButtonNode.FlatAppearanceStrategy,
+} as const;
+
+/** Options for RectangularPushButton, RoundPushButton, and other plain push buttons. */
+export const FLAT_PUSH_BUTTON_OPTIONS = FLAT_BUTTON_APPEARANCE_OPTIONS;
+
+/** Options for ResetAllButton (extends RoundPushButton via ResetButton). */
+export const FLAT_RESET_ALL_BUTTON_OPTIONS = FLAT_BUTTON_APPEARANCE_OPTIONS;
+
+/** Options for NumberControl's increment/decrement arrow buttons (ArrowButton extends RectangularPushButton). */
+export const FLAT_ARROW_BUTTON_OPTIONS = {
+  arrowButtonOptions: FLAT_BUTTON_APPEARANCE_OPTIONS,
+} satisfies Pick<NumberControlOptions, "arrowButtonOptions">;
+
+/** Nested options for TimeControlNode's play / pause / step round buttons. */
+export const FLAT_PLAY_PAUSE_STEP_BUTTON_OPTIONS = {
+  playPauseButtonOptions: FLAT_BUTTON_APPEARANCE_OPTIONS,
+  stepForwardButtonOptions: FLAT_BUTTON_APPEARANCE_OPTIONS,
+  stepBackwardButtonOptions: FLAT_BUTTON_APPEARANCE_OPTIONS,
+} satisfies PlayPauseStepButtonGroupOptions;
+
+/** Options for TimeControlNode: flattens its nested play/pause/step buttons. */
+export const FLAT_TIME_CONTROL_NODE_OPTIONS = {
+  playPauseStepButtonOptions: FLAT_PLAY_PAUSE_STEP_BUTTON_OPTIONS,
+} satisfies Pick<TimeControlNodeOptions, "playPauseStepButtonOptions">;

src/common/view/createNumberControl.ts

@@ -17,6 +17,7 @@ import { DerivedProperty, type TReadOnlyProperty } from "scenerystack/axon";
 import type { Range } from "scenerystack/dot";
 import { NumberControl, type NumberControlOptions } from "scenerystack/scenery-phet";
 import ExtrasolarPlanetsColors from "../../ExtrasolarPlanetsColors.js";
+import { FLAT_ARROW_BUTTON_OPTIONS } from "../ExtrasolarPlanetsButtonOptions.js";
 
 export type CreateNumberControlOptions = {
   /** Localized unit suffix appended after the value (e.g. "AU", "m/s"). */
@@ -61,6 +62,7 @@ export function createNumberControl(
       },
       ...(valuePattern ? { valuePattern } : {}),
     },
+    ...FLAT_ARROW_BUTTON_OPTIONS,
     ...options.numberControlOptions,
   });
 }

src/radial-velocity/view/RadialVelocityScreenView.ts

@@ -21,6 +21,10 @@ import { Node, Rectangle } from "scenerystack/scenery";
 import { ResetAllButton, TimeControlNode } from "scenerystack/scenery-phet";
 import type { ScreenViewOptions } from "scenerystack/sim";
 import { ScreenView } from "scenerystack/sim";
+import {
+  FLAT_RESET_ALL_BUTTON_OPTIONS,
+  FLAT_TIME_CONTROL_NODE_OPTIONS,
+} from "../../common/ExtrasolarPlanetsButtonOptions.js";
 import ExtrasolarPlanetsColors from "../../ExtrasolarPlanetsColors.js";
 import { SCREEN_VIEW_MARGIN } from "../../ExtrasolarPlanetsConstants.js";
 import type { RadialVelocityModel } from "../model/RadialVelocityModel.js";
@@ -85,8 +89,11 @@ export class RadialVelocityScreenView extends ScreenView {
     // ── Time control (play/pause/step) — beneath the visualization ──────────────
     const timeControlNode = new TimeControlNode(model.timer.isPlayingProperty, {
       tandem: this.tandem.createTandem("timeControlNode"),
+      ...FLAT_TIME_CONTROL_NODE_OPTIONS,
       playPauseStepButtonOptions: {
+        ...FLAT_TIME_CONTROL_NODE_OPTIONS.playPauseStepButtonOptions,
         stepForwardButtonOptions: {
+          ...FLAT_TIME_CONTROL_NODE_OPTIONS.playPauseStepButtonOptions.stepForwardButtonOptions,
           listener: () => model.step(1 / 60),
         },
       },
@@ -103,6 +110,7 @@ export class RadialVelocityScreenView extends ScreenView {
       },
       right: this.layoutBounds.maxX - SCREEN_VIEW_MARGIN,
       bottom: this.layoutBounds.maxY - SCREEN_VIEW_MARGIN,
+      ...FLAT_RESET_ALL_BUTTON_OPTIONS,
     });
     this.addChild(resetAllButton);
 

src/transit/view/TransitScreenView.ts

@@ -20,6 +20,10 @@ import { Node, Rectangle } from "scenerystack/scenery";
 import { ResetAllButton, TimeControlNode } from "scenerystack/scenery-phet";
 import type { ScreenViewOptions } from "scenerystack/sim";
 import { ScreenView } from "scenerystack/sim";
+import {
+  FLAT_RESET_ALL_BUTTON_OPTIONS,
+  FLAT_TIME_CONTROL_NODE_OPTIONS,
+} from "../../common/ExtrasolarPlanetsButtonOptions.js";
 import ExtrasolarPlanetsColors from "../../ExtrasolarPlanetsColors.js";
 import { SCREEN_VIEW_MARGIN } from "../../ExtrasolarPlanetsConstants.js";
 import type { TransitModel } from "../model/TransitModel.js";
@@ -83,8 +87,11 @@ export class TransitScreenView extends ScreenView {
     // ── Time control (play/pause/step) — beneath the visualization ──────────────
     const timeControlNode = new TimeControlNode(model.timer.isPlayingProperty, {
       tandem: this.tandem.createTandem("timeControlNode"),
+      ...FLAT_TIME_CONTROL_NODE_OPTIONS,
       playPauseStepButtonOptions: {
+        ...FLAT_TIME_CONTROL_NODE_OPTIONS.playPauseStepButtonOptions,
         stepForwardButtonOptions: {
+          ...FLAT_TIME_CONTROL_NODE_OPTIONS.playPauseStepButtonOptions.stepForwardButtonOptions,
           listener: () => model.step(1 / 60),
         },
       },
@@ -101,6 +108,7 @@ export class TransitScreenView extends ScreenView {
       },
       right: this.layoutBounds.maxX - SCREEN_VIEW_MARGIN,
       bottom: this.layoutBounds.maxY - SCREEN_VIEW_MARGIN,
+      ...FLAT_RESET_ALL_BUTTON_OPTIONS,
     });
     this.addChild(resetAllButton);