From 0cfd6ad4acb017b38ab7744e3f65e1c545d834ab Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 16:41:16 +0000 Subject: [PATCH] Flatten all button appearances; confirm default-profile contrast is sound Add src/common/ExtrasolarPlanetsButtonOptions.ts with ButtonNode.FlatAppearanceStrategy bundles (push buttons, ResetAllButton, TimeControlNode play/pause/step, NumberControl arrow buttons) and wire them into both screens' Reset All / TimeControlNode and into createNumberControl's arrow buttons, matching the flat-button pattern already used in RotatingSky. Audited every ComboBox, NumberDisplay, and readout for the near-white-text- on-white-background contrast bug seen in sibling repos; confirmed no fix is needed here since ExtrasolarPlanetsColors.textColorProperty is dark in both default and projector profiles, which reads fine against the unstyled white ComboBox/NumberDisplay chrome. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_018svZaRUmD44JWTQJLUYdmx --- src/common/ExtrasolarPlanetsButtonOptions.ts | 43 +++++++++++++++++++ src/common/view/createNumberControl.ts | 2 + .../view/RadialVelocityScreenView.ts | 8 ++++ src/transit/view/TransitScreenView.ts | 8 ++++ 4 files changed, 61 insertions(+) create mode 100644 src/common/ExtrasolarPlanetsButtonOptions.ts diff --git a/src/common/ExtrasolarPlanetsButtonOptions.ts b/src/common/ExtrasolarPlanetsButtonOptions.ts new file mode 100644 index 0000000..5e27c45 --- /dev/null +++ b/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; + +/** 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; diff --git a/src/common/view/createNumberControl.ts b/src/common/view/createNumberControl.ts index a8f71a0..66061ce 100644 --- a/src/common/view/createNumberControl.ts +++ b/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, }); } diff --git a/src/radial-velocity/view/RadialVelocityScreenView.ts b/src/radial-velocity/view/RadialVelocityScreenView.ts index e169bb8..90b462a 100644 --- a/src/radial-velocity/view/RadialVelocityScreenView.ts +++ b/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); diff --git a/src/transit/view/TransitScreenView.ts b/src/transit/view/TransitScreenView.ts index 8d26e02..9060e59 100644 --- a/src/transit/view/TransitScreenView.ts +++ b/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);