From 4f597a2011903cffe52cb452ccd63b1c278f8272 Mon Sep 17 00:00:00 2001
From: Marla Schulz <marlaa.schulz@gmail.com>
Date: Mon, 27 Jun 2022 15:24:13 -0600
Subject: [PATCH] Add gradient color profiles, see:
 https://github.com/phetsims/mean-share-and-balance/issues/27

---
 js/common/MeanShareAndBalanceColors.ts | 12 ++++++++++++
 js/intro/view/PipeNode.ts              | 13 ++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/js/common/MeanShareAndBalanceColors.ts b/js/common/MeanShareAndBalanceColors.ts
index a7131eec..e528a628 100644
--- a/js/common/MeanShareAndBalanceColors.ts
+++ b/js/common/MeanShareAndBalanceColors.ts
@@ -40,6 +40,18 @@ const meanShareAndBalanceColors = {
   } ),
   waterCup3DGlareFillColorProperty: new ProfileColorProperty( meanShareAndBalance, 'waterCup3DGlareFill', {
     default: new Color( 255, 255, 255, 0.4 )
+  } ),
+  pipeGradientLightColorProperty: new ProfileColorProperty( meanShareAndBalance, 'pipeGradientLight', {
+    default: 'white'
+  } ),
+  pipeGradientDarkColorProperty: new ProfileColorProperty( meanShareAndBalance, 'pipeGradientDark', {
+    default: '#4d4d4d'
+  } ),
+  handleGradientLightColorProperty: new ProfileColorProperty( meanShareAndBalance, 'handleGradientLight', {
+    default: 'red'
+  } ),
+  handleGradientDarkColorProperty: new ProfileColorProperty( meanShareAndBalance, 'handleGradientDark', {
+    default: 'firebrick'
   } )
 };
 
diff --git a/js/intro/view/PipeNode.ts b/js/intro/view/PipeNode.ts
index 94413ae9..bfdac71d 100644
--- a/js/intro/view/PipeNode.ts
+++ b/js/intro/view/PipeNode.ts
@@ -51,7 +51,9 @@ export default class PipeNode extends Node {
 
     // Pipe & valve dimensions
     const pipeCenter = new Vector2( MeanShareAndBalanceConstants.PIPE_LENGTH / 2, PIPE_WIDTH / 2 );
-    const pipeGradient = new LinearGradient( 0, 0, 0, PIPE_WIDTH ).addColorStop( 0, 'white' ).addColorStop( 1, 'dimGray' );
+    const pipeGradient = new LinearGradient( 0, 0, 0, PIPE_WIDTH )
+      .addColorStop( 0, MeanShareAndBalanceColors.pipeGradientLightColorProperty )
+      .addColorStop( 1, MeanShareAndBalanceColors.pipeGradientDarkColorProperty );
     this.pipeRectangle = new Rectangle( 0, 0, MeanShareAndBalanceConstants.PIPE_LENGTH, PIPE_WIDTH,
       { stroke: 'black', fill: pipeGradient } );
 
@@ -78,7 +80,10 @@ export default class PipeNode extends Node {
 
 
     // Valve drawing
-    const valveGradient = new RadialGradient( 0, 0, 0, 0, 0, VALVE_RADIUS + 2 ).addColorStop( 0.5, 'white' ).addColorStop( 1, 'grey' );
+    const valveGradient = new RadialGradient( 0, 0, 0, 0, 0, VALVE_RADIUS + 2 )
+      .addColorStop( 0.5, MeanShareAndBalanceColors.pipeGradientLightColorProperty )
+      .addColorStop( 1, MeanShareAndBalanceColors.pipeGradientDarkColorProperty );
+
     this.innerValve = new Path( createInnerCircle( VALVE_RADIUS, PIPE_WIDTH ),
       { fill: 'black' } );
     this.outerValve = new Path( createOuterCircle( VALVE_RADIUS ), { fill: valveGradient, stroke: 'black' } );
@@ -89,7 +94,9 @@ export default class PipeNode extends Node {
       center: this.innerValve.center
     } );
 
-    const handleGripGradient = new LinearGradient( -2, -2, 8, 0 ).addColorStop( 0, 'red' ).addColorStop( 0.4, 'firebrick' );
+    const handleGripGradient = new LinearGradient( -2, -2, 8, 0 )
+      .addColorStop( 0, MeanShareAndBalanceColors.handleGradientLightColorProperty )
+      .addColorStop( 0.4, MeanShareAndBalanceColors.handleGradientDarkColorProperty );
 
     this.handleBase = new Rectangle( 0, 0, HANDLE_WIDTH, 3, {
       fill: pipeGradient,