From 5437c4041f70557dfe09603f6babc7f330d87d0e Mon Sep 17 00:00:00 2001
From: Marla Schulz <marla.schulz@colorado.edu>
Date: Fri, 13 Sep 2024 12:35:11 -0700
Subject: [PATCH] Add color highlights to text,
 https://github.com/phetsims/number-pairs/issues/4

---
 js/common/view/NumberSentenceAccordionBox.ts | 54 +++++++++++++++++++-
 number-pairs-strings_en.json                 |  2 +-
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/js/common/view/NumberSentenceAccordionBox.ts b/js/common/view/NumberSentenceAccordionBox.ts
index b2bca5a..a2fbe8d 100644
--- a/js/common/view/NumberSentenceAccordionBox.ts
+++ b/js/common/view/NumberSentenceAccordionBox.ts
@@ -9,7 +9,7 @@
 import numberPairs from '../../numberPairs.js';
 import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 import NumberPairsStrings from '../../NumberPairsStrings.js';
-import { RichText, Text } from '../../../../scenery/js/imports.js';
+import { RichText, Text, Node, Rectangle } from '../../../../scenery/js/imports.js';
 import NumberPairsConstants from '../NumberPairsConstants.js';
 import SumRepresentationAccordionBox, { SumRepresentationAccordionBoxOptions } from './SumRepresentationAccordionBox.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
@@ -84,8 +84,58 @@ export default class NumberSentenceAccordionBox extends SumRepresentationAccordi
         rightAddend: value => LOWERCASE_NUMBER_TO_WORD_MAP.get( value ).value
       }
     } );
+
+    let sumHighlight: Rectangle;
+    let leftAddendHighlight: Rectangle;
+    let rightAddendHighlight: Rectangle;
     const richText = new RichText( numberSentencePatternStringProperty, {
-      lineWrap: 250
+      lineWrap: 250,
+      leading: 10,
+      tags: {
+        sum: node => {
+          sumHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.sumColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              sumHighlight,
+              node
+            ]
+          } );
+        },
+        left: node => {
+          leftAddendHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.leftAddendColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              leftAddendHighlight,
+              node
+            ]
+          } );
+        },
+        right: node => {
+          rightAddendHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.rightAddendColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              rightAddendHighlight,
+              node
+            ]
+          } );
+        }
+      }
+    } );
+
+    model.sumColorProperty.link( color => {
+      sumHighlight.fill = color;
+    } );
+    model.leftAddendColorProperty.link( color => {
+      leftAddendHighlight.fill = color;
+    } );
+    model.rightAddendColorProperty.link( color => {
+      rightAddendHighlight.fill = color;
     } );
 
     const titleNode = new Text( NumberPairsStrings.numberSentenceStringProperty, {
diff --git a/number-pairs-strings_en.json b/number-pairs-strings_en.json
index e17019e..db92714 100644
--- a/number-pairs-strings_en.json
+++ b/number-pairs-strings_en.json
@@ -27,7 +27,7 @@
     "value": "Equation"
   },
   "numberSentencePattern": {
-    "value": "{{sum}} can be decomposed into {{leftAddend}} and {{rightAddend}}."
+    "value": "<sum>{{sum}}</sum> can be decomposed into <left>{{leftAddend}}</left> and <right>{{rightAddend}}</right>."
   },
   "zero": {
     "value": "zero"