diff --git a/js/JoistButton.js b/js/JoistButton.js index 9a626eac..70770cd4 100644 --- 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.} 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 index 2269426e..aa161119 100644 --- 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 index dc3b3c5b..b4ae16f4 100644 --- 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 index fc9c595f..c2a1d53c 100644 --- 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; } ); }