cleaned up terminology around inverted color issues, see #222

phetsims · Mar 5, 2015 · 5bc1397 · 5bc1397
1 parent 83ae146
commit 5bc1397
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 21 deletions.
diff --git a/js/JoistButton.js b/js/JoistButton.js
@@ -20,7 +20,7 @@ define( function( require ) {
 
   /**
    * @param {Node} content - the scenery node to render as the content of the button
-   * @param {Property.<boolean>} useInvertedColorsProperty
+   * @param {LookAndFeel} lookAndFeel
    * @param {Object} [options] Unused in client code.
    * @constructor
    */
@@ -53,12 +53,12 @@ define( function( require ) {
     };
 
     // Highlight against the black background
-    var normalHighlight = createHighlight( true );
+    var brightenHighlight = createHighlight( true );
 
     // Highlight against the white background
-    var invertedHighlight = createHighlight( false );
+    var darkenHighlight = createHighlight( false );
 
-    Node.call( this, { children: [ content, normalHighlight, invertedHighlight ] } );
+    Node.call( this, { children: [ content, brightenHighlight, darkenHighlight ] } );
 
     // Button interactions
     var interactionStateProperty = new PushButtonInteractionStateProperty( this.buttonModel, {
@@ -69,9 +69,9 @@ define( function( require ) {
 
     // Update the highlights based on whether the button is highlighted and whether it is against a light or dark background.
     Property.multilink( [ interactionStateProperty, lookAndFeel.navigationBarFillProperty ], function( interactionState, navigationBarFill ) {
-      var useInvertedColors = navigationBarFill !== 'black';
-      normalHighlight.visible = !useInvertedColors && (interactionState === 'over' || interactionState === 'pressed');
-      invertedHighlight.visible = useInvertedColors && (interactionState === 'over' || interactionState === 'pressed');
+      var useDarkenHighlight = navigationBarFill !== 'black';
+      brightenHighlight.visible = !useDarkenHighlight && (interactionState === 'over' || interactionState === 'pressed');
+      darkenHighlight.visible = useDarkenHighlight && (interactionState === 'over' || interactionState === 'pressed');
     } );
 
     this.addInputListener( new ButtonListener( this.buttonModel ) );

diff --git a/js/NavigationBar.js b/js/NavigationBar.js
@@ -78,7 +78,7 @@ define( function( require ) {
 
       // if the branding specifies to show "adapted from PhET" in the navbar, show it here
       if ( Brand.adaptedFromPhET === true ) {
-        this.adaptedFromText = new AdaptedFromPhETText( sim.useInvertedColorsProperty );
+        this.adaptedFromText = new AdaptedFromPhETText( sim.lookAndFeel );
         this.addChild( this.adaptedFromText );
       }
     }

diff --git a/js/NavigationBarScreenButton.js b/js/NavigationBarScreenButton.js
@@ -62,34 +62,37 @@ define( function( require ) {
     overlay.centerX = box.centerX;
     overlay.y = box.y;
 
-    var normalHighlight = new HighlightNode( overlay.width + 4, overlay.height, {
+    // Make things brighter when against a dark background
+    var brightenHighlight = new HighlightNode( overlay.width + 4, overlay.height, {
       centerX: box.centerX,
       whiteHighlight: true,
       pickable: false
     } );
-    var invertedHighlight = new HighlightNode( overlay.width + 4, overlay.height, {
+
+    // Make things darker when against a light background
+    var darkenHighlight = new HighlightNode( overlay.width + 4, overlay.height, {
       centerX: box.centerX,
       whiteHighlight: false,
       pickable: false
     } );
 
     this.addChild( box );
-    this.addChild( normalHighlight );
-    this.addChild( invertedHighlight );
+    this.addChild( brightenHighlight );
+    this.addChild( darkenHighlight );
     this.addChild( overlay );
 
     this.multilink = new Multilink( [ selected, buttonModel.downProperty, buttonModel.overProperty, sim.lookAndFeel.navigationBarFillProperty ], function update() {
 
-      var useInvertedColors = sim.lookAndFeel.navigationBarFill !== 'black';
+      var useDarkenHighlights = sim.lookAndFeel.navigationBarFill !== 'black';
 
       // Color match yellow with the PhET Logo
-      var selectedTextColor = useInvertedColors ? 'black' : '#f2e916';
-      var unselectedTextColor = useInvertedColors ? 'gray' : 'white';
+      var selectedTextColor = useDarkenHighlights ? 'black' : '#f2e916';
+      var unselectedTextColor = useDarkenHighlights ? 'gray' : 'white';
 
       text.fill = selected.get() ? selectedTextColor : unselectedTextColor;
       box.opacity = selected.get() ? 1.0 : buttonModel.down ? 0.65 : 0.5;
-      normalHighlight.visible = !useInvertedColors && ( buttonModel.over || buttonModel.down );
-      invertedHighlight.visible = useInvertedColors && ( buttonModel.over || buttonModel.down );
+      brightenHighlight.visible = !useDarkenHighlights && ( buttonModel.over || buttonModel.down );
+      darkenHighlight.visible = useDarkenHighlights && ( buttonModel.over || buttonModel.down );
     } );
   }
 

diff --git a/js/PhetButton.js b/js/PhetButton.js
@@ -85,10 +85,9 @@ define( function( require ) {
     JoistButton.call( this, icon, sim.lookAndFeel, options );
 
     Property.multilink( [ sim.lookAndFeel.navigationBarFillProperty, sim.showHomeScreenProperty ], function( navigationBarFillProperty, showHomeScreen ) {
-      var useInvertedColors = navigationBarFillProperty !== 'black';
-      var invert = ( useInvertedColors && !showHomeScreen );
-      optionsButton.fill = invert ? '#222' : 'white';
-      phetLabel.image = invert ? phetLogoDarker : phetLogo;
+      var backgroundIsWhite = navigationBarFillProperty !== 'black' && !showHomeScreen;
+      optionsButton.fill = backgroundIsWhite ? '#222' : 'white';
+      phetLabel.image = backgroundIsWhite ? phetLogoDarker : phetLogo;
     } );
   }