Adding colors to color profile, see #49

js/coins/view/ClassicalCoinNode.ts

@@ -10,39 +10,40 @@
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Color, Text } from '../../../../scenery/js/imports.js';
+import { Text } from '../../../../scenery/js/imports.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import { ClassicalCoinStates } from '../model/ClassicalCoinStates.js';
 import CoinNode, { CoinFaceParameters } from './CoinNode.js';
 
-const HEADS_FILL = new Color( '#EFE4B0' );
-const HEADS_STROKE_AND_LETTER_COLOR = Color.BLACK;
-const TAILS_FILL = new Color( '#EFE4B0' );
-const TAILS_STROKE_AND_LETTER_COLOR = Color.MAGENTA;
+const HEADS_FILL_COLOR_PROPERTY = QuantumMeasurementColors.headsFillColorProperty;
+const HEADS_STROKE_AND_LETTER_COLOR_PROPERTY = QuantumMeasurementColors.headsColorProperty;
+const TAILS_FILL_COLOR_PROPERTY = QuantumMeasurementColors.tailsFillColorProperty;
+const TAILS_STROKE_AND_LETTER_COLOR_PROPERTY = QuantumMeasurementColors.tailsColorProperty;
 const LETTER_LABEL_FONT = new PhetFont( { size: 40, weight: 'bold' } );
 
 export default class ClassicalCoinNode extends CoinNode {
 
   public constructor( coinStateProperty: TReadOnlyProperty<ClassicalCoinStates>, radius: number, tandem: Tandem ) {
 
     const headsOptions: CoinFaceParameters = {
-      fill: HEADS_FILL,
-      stroke: HEADS_STROKE_AND_LETTER_COLOR,
+      fill: HEADS_FILL_COLOR_PROPERTY,
+      stroke: HEADS_STROKE_AND_LETTER_COLOR_PROPERTY,
       content: new Text( QuantumMeasurementConstants.CLASSICAL_UP_SYMBOL, {
         font: LETTER_LABEL_FONT,
-        fill: HEADS_STROKE_AND_LETTER_COLOR,
+        fill: HEADS_STROKE_AND_LETTER_COLOR_PROPERTY,
         boundsMethod: 'accurate'
       } )
     };
 
     const tailsOptions: CoinFaceParameters = {
-      fill: TAILS_FILL,
-      stroke: TAILS_STROKE_AND_LETTER_COLOR,
+      fill: TAILS_FILL_COLOR_PROPERTY,
+      stroke: TAILS_STROKE_AND_LETTER_COLOR_PROPERTY,
       content: new Text( QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL, {
         font: LETTER_LABEL_FONT,
-        fill: TAILS_STROKE_AND_LETTER_COLOR,
+        fill: TAILS_STROKE_AND_LETTER_COLOR_PROPERTY,
         boundsMethod: 'accurate'
       } ),
       minYMarginFactor: 0.3

js/coins/view/CoinExperimentMeasurementArea.ts

@@ -13,9 +13,10 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import TProperty from '../../../../axon/js/TProperty.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Circle, Color, HBox, Node, Text, VBox } from '../../../../scenery/js/imports.js';
+import { Circle, HBox, Node, Text, VBox } from '../../../../scenery/js/imports.js';
 import VerticalAquaRadioButtonGroup from '../../../../sun/js/VerticalAquaRadioButtonGroup.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
@@ -43,7 +44,8 @@ export default class CoinExperimentMeasurementArea extends VBox {
 
   public constructor( sceneModel: CoinsExperimentSceneModel, tandem: Tandem ) {
 
-    const textColor = sceneModel.systemType === 'quantum' ? Color.BLUE : Color.BLACK;
+    const textColorProperty = sceneModel.systemType === 'quantum' ?
+                      QuantumMeasurementColors.quantumSceneTextColorProperty : QuantumMeasurementColors.classicalSceneTextColorProperty;
     const singleCoinInTestBoxProperty = new BooleanProperty( false );
     const coinSetInTestBoxProperty = new BooleanProperty( false );
 
@@ -57,7 +59,7 @@ export default class CoinExperimentMeasurementArea extends VBox {
     const singleCoinSectionHeader = new SceneSectionHeader(
       QuantumMeasurementStrings.singleCoinMeasurementsStringProperty,
       measurementAreaHeaderLineWidthProperty,
-      { textColor: textColor }
+      { textColor: textColorProperty }
     );
 
     // Create the box where the single coin will be placed while it is experimented with.
@@ -86,7 +88,7 @@ export default class CoinExperimentMeasurementArea extends VBox {
     const multiCoinSectionHeader = new SceneSectionHeader(
       QuantumMeasurementStrings.multipleCoinMeasurementsStringProperty,
       measurementAreaHeaderLineWidthProperty,
-      { textColor: textColor }
+      { textColor: textColorProperty }
     );
 
     // Add the area where the multiple coins will be hidden and revealed.
@@ -215,8 +217,8 @@ export default class CoinExperimentMeasurementArea extends VBox {
     // Create the node that will be used to cover (aka "mask") the coin so that its state can't be seen.
     const maskRadius = InitialCoinStateSelectorNode.INDICATOR_COIN_NODE_RADIUS * 1.02;
     const coinMask = new Circle( maskRadius, {
-      fill: new Color( '#cccccc' ),
-      stroke: new Color( '#888888' ),
+      fill: QuantumMeasurementColors.maskedFillColorProperty,
+      stroke: QuantumMeasurementColors.coinStrokeColorProperty,
       lineWidth: 7,
       visibleProperty: new DerivedProperty(
         [ sceneModel.preparingExperimentProperty, sceneModel.singleCoin.measurementStateProperty ],

js/coins/view/CoinExperimentPreparationArea.ts

@@ -12,8 +12,9 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
-import { Color, VBox } from '../../../../scenery/js/imports.js';
+import { VBox } from '../../../../scenery/js/imports.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
 import CoinsExperimentSceneModel from '../model/CoinsExperimentSceneModel.js';
@@ -28,7 +29,8 @@ export default class CoinExperimentPreparationArea extends VBox {
 
   public constructor( sceneModel: CoinsExperimentSceneModel, tandem: Tandem ) {
 
-    const textColor = sceneModel.systemType === 'quantum' ? Color.BLUE : Color.BLACK;
+    const textColorProperty = sceneModel.systemType === 'quantum' ?
+                      QuantumMeasurementColors.quantumSceneTextColorProperty : QuantumMeasurementColors.classicalSceneTextColorProperty;
 
     // Create the header. It is somewhat different depending on whether this is for a classical or quantum system.
     const prepAreaHeadingTextProperty: TReadOnlyProperty<string> = new DerivedProperty(
@@ -62,7 +64,7 @@ export default class CoinExperimentPreparationArea extends VBox {
     const preparationAreaHeader = new SceneSectionHeader(
       prepAreaHeadingTextProperty,
       prepAreaHeaderLineWidthProperty,
-      { textColor: textColor }
+      { textColor: textColorProperty }
     );
 
     // Create the UI element that will allow the user to specify the initial state of the coin.

js/coins/view/CoinMeasurementHistogram.ts

@@ -11,9 +11,10 @@
 import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Color, NodeOptions, RichText } from '../../../../scenery/js/imports.js';
+import { NodeOptions, RichText } from '../../../../scenery/js/imports.js';
 import { SystemType } from '../../common/model/SystemType.js';
 import TwoStateSystemSet from '../../common/model/TwoStateSystemSet.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import QuantumMeasurementHistogram from '../../common/view/QuantumMeasurementHistogram.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
@@ -38,7 +39,8 @@ export default class CoinMeasurementHistogram extends QuantumMeasurementHistogra
         QuantumMeasurementConstants.CLASSICAL_UP_SYMBOL :
         QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER,
         {
-          font: LABEL_FONT
+          font: LABEL_FONT,
+          fill: systemType === 'classical' ? QuantumMeasurementColors.headsColorProperty : QuantumMeasurementColors.upColorProperty
         }
       ),
       new RichText(
@@ -47,7 +49,7 @@ export default class CoinMeasurementHistogram extends QuantumMeasurementHistogra
         QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER,
         {
           font: LABEL_FONT,
-          fill: Color.MAGENTA
+          fill: systemType === 'classical' ? QuantumMeasurementColors.tailsColorProperty : QuantumMeasurementColors.downColorProperty
         }
       )
     ];

js/coins/view/CoinsExperimentSceneView.ts

@@ -24,6 +24,7 @@ import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushBut
 import TextPushButton from '../../../../sun/js/buttons/TextPushButton.js';
 import Animation from '../../../../twixt/js/Animation.js';
 import Easing from '../../../../twixt/js/Easing.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
@@ -103,7 +104,7 @@ export default class CoinsExperimentSceneView extends Node {
 
     // Add the button for switching from preparation mode to measurement mode.
     const startMeasurementButton = new RectangularPushButton( {
-      baseColor: Color.GREEN,
+      baseColor: QuantumMeasurementColors.startMeasurementButtonColorProperty,
       content: new ArrowNode( 0, 0, 60, 0, {
         headWidth: 20,
         headHeight: 15
@@ -164,7 +165,7 @@ export default class CoinsExperimentSceneView extends Node {
     // Create and add the button for starting a new experiment by preparing a new coin.
     this.newCoinButton = new TextPushButton( QuantumMeasurementStrings.newCoinStringProperty, {
       visibleProperty: DerivedProperty.not( sceneModel.preparingExperimentProperty ),
-      baseColor: Color.GREEN,
+      baseColor: QuantumMeasurementColors.newCoinButtonColorProperty,
       font: new PhetFont( 14 ),
       listener: () => {
         sceneModel.preparingExperimentProperty.value = true;

js/coins/view/CoinsScreenView.ts

@@ -10,7 +10,7 @@ import CoinsModel from 'model/CoinsModel.js';
 import LocalizedStringProperty from '../../../../chipper/js/LocalizedStringProperty.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Color, Text } from '../../../../scenery/js/imports.js';
+import { Text } from '../../../../scenery/js/imports.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import { SystemType, SystemTypeValues } from '../../common/model/SystemType.js';
@@ -53,7 +53,9 @@ export default class CoinsScreenView extends QuantumMeasurementScreenView {
           SYSTEM_TYPE_TO_STRING_MAP.get( systemType )!,
           {
             font: new PhetFont( { size: 28, weight: 'bold' } ),
-            fill: systemType === 'quantum' ? Color.BLUE : Color.BLACK,
+            fill: systemType === 'quantum' ?
+                  QuantumMeasurementColors.quantumSceneTextColorProperty :
+                  QuantumMeasurementColors.classicalSceneTextColorProperty,
             maxWidth: 300
           }
         );

js/coins/view/InitialCoinStateSelectorNode.ts

@@ -18,6 +18,7 @@ import RectangularRadioButton, { RectangularRadioButtonOptions } from '../../../
 import Panel from '../../../../sun/js/Panel.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import { SystemType } from '../../common/model/SystemType.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
 import { ClassicalCoinStates, ClassicalCoinStateValues } from '../model/ClassicalCoinStates.js';
@@ -107,8 +108,8 @@ export default class InitialCoinStateSelectorNode extends VBox {
     } );
 
     const selectorPanel = new Panel( selectorPanelContent, {
-      fill: new Color( '#eeeeee' ),
-      stroke: null,
+      fill: QuantumMeasurementColors.basisStatesPanelFillColorProperty,
+      stroke: QuantumMeasurementColors.basisStatesPanelStrokeColorProperty,
       yMargin: 10,
       minWidth: 270,
       visibleProperty: new GatedVisibleProperty( preparingExperimentProperty, radioButtonGroupTandem ),

js/coins/view/MultiCoinTestBox.ts

@@ -27,7 +27,7 @@ import SmallCoinNode, { SmallCoinDisplayMode } from './SmallCoinNode.js';
 type SelfOptions = EmptySelfOptions;
 export type MultiCoinTestBoxOptions = SelfOptions & WithRequired<HBoxOptions, 'tandem'>;
 
-// constants
+// constants TODO: Colors https://github.com/phetsims/quantum-measurement/issues/49
 const BOX_SIZE = new Dimension2( 200, 200 );
 const TEST_BOX_CONTENTS_HIDDEN_FILL = new LinearGradient( 0, 0, BOX_SIZE.width, 0 )
   .addColorStop( 0, new Color( '#eeeeee' ) )

js/coins/view/OutcomeProbabilityControl.ts

@@ -27,6 +27,8 @@ import ProbabilityValueControl from './ProbabilityValueControl.js';
 type SelfOptions = EmptySelfOptions;
 type OutcomeProbabilityControlOptions = SelfOptions & PickRequired<VBox, 'tandem' | 'visibleProperty'>;
 
+// TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49
+
 // constants
 const MAGENTA_SPAN = ( text: string ) => `<span style="color: magenta;">${text}</span>`;
 const TITLE_AND_LABEL_FONT = new PhetFont( 16 );

js/coins/view/ProbabilityEquationsNode.ts

@@ -22,6 +22,8 @@ export default class ProbabilityEquationsNode extends RichText {
   public constructor( biasProperty: TReadOnlyProperty<number>, systemType: SystemType ) {
     const equationsStringProperty = new DerivedProperty( [ biasProperty ], bias => {
 
+      // TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49
+
       const upperFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_UP_SYMBOL : QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER;
       const lowerFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL : QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER;
       const upperEquation = `P(<b>${upperFunctionParameter}</b>) = ${Utils.toFixed( bias, 2 )}`;

js/coins/view/QuantumCoinNode.ts

@@ -11,17 +11,14 @@ import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Color, Text } from '../../../../scenery/js/imports.js';
+import { Text } from '../../../../scenery/js/imports.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import { QuantumCoinStates } from '../model/QuantumCoinStates.js';
 import CoinNode, { CoinFaceParameters } from './CoinNode.js';
 
-const UP_FILL = new Color( '#00FFFF' );
-const UP_STROKE_AND_ARROW_COLOR = Color.BLACK;
-const DOWN_FILL = new Color( '#FFFF00' );
-const DOWN_STROKE_AND_ARROW_COLOR = Color.MAGENTA;
 const FONT = new PhetFont( { size: 40, weight: 'bold' } );
 
 export default class QuantumCoinNode extends CoinNode {
@@ -34,20 +31,20 @@ export default class QuantumCoinNode extends CoinNode {
                       tandem: Tandem ) {
 
     const upFaceOptions: CoinFaceParameters = {
-      fill: UP_FILL,
-      stroke: UP_STROKE_AND_ARROW_COLOR,
+      fill: QuantumMeasurementColors.upFillColorProperty,
+      stroke: QuantumMeasurementColors.upColorProperty,
       content: new Text( QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER, {
         font: FONT,
-        fill: UP_STROKE_AND_ARROW_COLOR
+        fill: QuantumMeasurementColors.upColorProperty
       } )
     };
 
     const downFaceOptions: CoinFaceParameters = {
-      fill: DOWN_FILL,
-      stroke: DOWN_STROKE_AND_ARROW_COLOR,
+      fill: QuantumMeasurementColors.downFillColorProperty,
+      stroke: QuantumMeasurementColors.downColorProperty,
       content: new Text( QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER, {
         font: FONT,
-        fill: DOWN_STROKE_AND_ARROW_COLOR
+        fill: QuantumMeasurementColors.downColorProperty
       } )
     };
 

js/coins/view/SceneSectionHeader.ts

@@ -14,6 +14,7 @@ import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import { Color, Line, Text, TPaint, VBox } from '../../../../scenery/js/imports.js';
+import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 
 type SceneSectionHeaderOptions = {
@@ -27,7 +28,7 @@ export default class SceneSectionHeader extends VBox {
                       providedOptions?: SceneSectionHeaderOptions ) {
 
     const options = optionize<SceneSectionHeaderOptions>()( {
-      textColor: Color.BLACK
+      textColor: QuantumMeasurementColors.classicalSceneTextColorProperty
     }, providedOptions );
 
     const heading = new Text( textProperty, {