From 1386ffb48a4be26a395bb02085d2d0d385aba302 Mon Sep 17 00:00:00 2001
From: jbphet <jpblanco@yahoo.com>
Date: Thu, 21 Jul 2022 11:12:00 -0600
Subject: [PATCH] made button appearance options into sub-options for better
 typing, see https://github.com/phetsims/chipper/issues/1253,
 https://github.com/phetsims/sun/issues/754, and
 https://github.com/phetsims/sun/issues/772

---
 js/common/view/LightModeRadioButtonGroup.ts | 14 +++++++------
 js/common/view/PredictionPanel.ts           | 22 ++++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/js/common/view/LightModeRadioButtonGroup.ts b/js/common/view/LightModeRadioButtonGroup.ts
index 8905590b..c5c02f0a 100644
--- a/js/common/view/LightModeRadioButtonGroup.ts
+++ b/js/common/view/LightModeRadioButtonGroup.ts
@@ -39,12 +39,14 @@ export default class LightModeRadioButtonGroup extends RectangularRadioButtonGro
         xMargin: 15,
         yMargin: 6,
         baseColor: MOTHAColors.lightModeRadioButtonFillProperty,
-        selectedLineWidth: 2,
-        deselectedLineWidth: 2,
-        selectedStroke: MOTHAColors.lightModeRadioButtonSelectedStrokeProperty,
-        deselectedStroke: MOTHAColors.lightModeRadioButtonDeselectedStrokeProperty,
-        overFill: MOTHAColors.lightModeRadioButtonFillProperty,
-        overStroke: MOTHAColors.lightModeRadioButtonDeselectedStrokeProperty
+        buttonAppearanceStrategyOptions: {
+          selectedLineWidth: 2,
+          deselectedLineWidth: 2,
+          selectedStroke: MOTHAColors.lightModeRadioButtonSelectedStrokeProperty,
+          deselectedStroke: MOTHAColors.lightModeRadioButtonDeselectedStrokeProperty,
+          overFill: MOTHAColors.lightModeRadioButtonFillProperty,
+          overStroke: MOTHAColors.lightModeRadioButtonDeselectedStrokeProperty
+        }
       }
     }, providedOptions );
 
diff --git a/js/common/view/PredictionPanel.ts b/js/common/view/PredictionPanel.ts
index 32799c96..712b2b85 100644
--- a/js/common/view/PredictionPanel.ts
+++ b/js/common/view/PredictionPanel.ts
@@ -64,18 +64,22 @@ export default class PredictionPanel extends Panel {
       labelAlign: 'left',
       radioButtonOptions: {
         baseColor: options.fill,
-        selectedStroke: MOTHAColors.modelsRadioButtonSelectedStrokeProperty,
-        deselectedStroke: MOTHAColors.modelsRadioButtonFillProperty,
-        selectedLineWidth: 2,
         xMargin: 12,
         yMargin: 10,
         xAlign: 'left',
-        selectedButtonOpacity: 1,
-        deselectedButtonOpacity: 1,
-        selectedContentOpacity: 1,
-        deselectedContentOpacity: 1,
-        overButtonOpacity: 1,
-        overContentOpacity: 1
+        buttonAppearanceStrategyOptions: {
+          selectedStroke: MOTHAColors.modelsRadioButtonSelectedStrokeProperty,
+          deselectedStroke: MOTHAColors.modelsRadioButtonFillProperty,
+          selectedLineWidth: 2,
+          selectedButtonOpacity: 1,
+          deselectedButtonOpacity: 1,
+          overButtonOpacity: 1
+        },
+        contentAppearanceStrategyOptions: {
+          selectedContentOpacity: 1,
+          deselectedContentOpacity: 1,
+          overContentOpacity: 1
+        }
       },
       tandem: options.tandem.createTandem( 'modelRadioButtonGroup' )
     } );