Use CSS variables for comment highlight colours

client/scss/elements/_root.scss

@@ -2,6 +2,8 @@
     @include define-color('color-primary', #007d7e);
     @include define-color('color-primary-darker', css-darken(css-adjust-hue(get-color('color-primary'), 1), 4%));
     @include define-color('color-primary-dark', css-darken(css-adjust-hue(get-color('color-primary'), 1), 7%));
+    @include define-color('color-primary-lighter', css-lighten(css-adjust-hue(get-color('color-primary'), 1), 10%));
+    @include define-color('color-primary-light', css-lighten(css-adjust-hue(get-color('color-primary'), 1), 15%));
 
     @include define-color('color-input-focus', css-lighten(css-desaturate(get-color('color-primary'), 40%), 72%));
     @include define-color('color-input-focus-border', css-lighten(css-saturate(get-color('color-primary'), 12%), 10%));

client/scss/settings/_variables.scss

@@ -28,6 +28,8 @@ $breakpoints: (
 );
 
 // colours
+$color-teal-light: var(--color-primary-light);
+$color-teal-lighter: var(--color-primary-lighter);
 $color-teal: var(--color-primary);
 $color-teal-darker: var(--color-primary-darker);
 $color-teal-dark: var(--color-primary-dark);

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -321,6 +321,12 @@ interface InlineStyle {
   style?: Record<string, string | number | ReactText | undefined >
 }
 
+interface ColorConfigProp {
+  standardHighlight: string,
+  overlappingHighlight: string,
+  focusedHighlight: string
+}
+
 interface CommentableEditorProps {
   commentApp: CommentApp,
   fieldNode: Element,
@@ -329,6 +335,7 @@ interface CommentableEditorProps {
   onSave: (rawContent: RawDraftContentState) => void,
   inlineStyles: Array<InlineStyle>,
   editorRef: MutableRefObject<HTMLInputElement>
+  colorConfig: ColorConfigProp
 }
 
 function CommentableEditor({
@@ -339,6 +346,7 @@ function CommentableEditor({
   onSave,
   inlineStyles,
   editorRef,
+  colorConfig: { standardHighlight, overlappingHighlight, focusedHighlight },
   ...options
 }: CommentableEditorProps) {
   const [editorState, setEditorState] = useState(() =>
@@ -481,14 +489,14 @@ function CommentableEditor({
             const commentIds = localCommentStyles.map(
               style => getIdForCommentStyle(style as string)
             ) as unknown as Immutable.OrderedSet<number>;
-            let background = '#01afb0';
+            let background = standardHighlight;
             if (commentIds.has(focusedId)) {
               // Use the focused colour if one of the comments is focused
-              background = '#007d7e';
+              background = focusedHighlight;
             } else if (numStyles > 1) {
               // Otherwise if we're in a region with overlapping comments, use a slightly darker colour than usual
               // to indicate that
-              background = '#01999a';
+              background = overlappingHighlight;
             }
             return {
               'background-color': background

client/src/components/Draftail/index.js

@@ -118,6 +118,13 @@ const initEditor = (selector, options, currentScript) => {
 
   const contentPath = comments.getContentPath(field);
 
+  const styles = getComputedStyle(document.documentElement);
+  const colors = {
+    standardHighlight: styles.getPropertyValue('--color-primary-light'),
+    overlappingHighlight: styles.getPropertyValue('--color-primary-lighter'),
+    focusedHighlight: styles.getPropertyValue('--color-primary')
+  };
+
   // If the field has a valid contentpath - ie is not an InlinePanel or under a ListBlock -
   // and the comments system is initialized then use CommentableEditor, otherwise plain DraftailEditor
   const editor = (window.commentApp && contentPath !== '') ?
@@ -127,6 +134,7 @@ const initEditor = (selector, options, currentScript) => {
         commentApp={window.commentApp}
         fieldNode={field.parentNode}
         contentPath={contentPath}
+        colorConfig={colors}
         {...sharedProps}
       />
     </Provider>

docs/advanced_topics/customisation/admin_templates.rst

@@ -110,7 +110,7 @@ To customize the primary color used in the admin user interface, inject a CSS fi
         --color-primary-hue: 25;
     }
 
-``color-primary`` is an `hsl color <https://en.wikipedia.org/wiki/HSL_and_HSV>`_ composed of 3 CSS variables - ``--color-primary-hue`` (0-360 with no unit), ``--color-primary-saturation`` (a percentage), and ``--color-primary-lightness`` (also a percentage). Separating the color into 3 allows us to calculate variations on the color to use alongside the primary color. If needed, you can also control those variations manually by setting ``hue``, ``saturation``, and ``lightness`` variables for the following colors: ``color-primary-darker``, ``color-primary-dark``, ``color-input-focus``, and ``color-input-focus-border``:
+``color-primary`` is an `hsl color <https://en.wikipedia.org/wiki/HSL_and_HSV>`_ composed of 3 CSS variables - ``--color-primary-hue`` (0-360 with no unit), ``--color-primary-saturation`` (a percentage), and ``--color-primary-lightness`` (also a percentage). Separating the color into 3 allows us to calculate variations on the color to use alongside the primary color. If needed, you can also control those variations manually by setting ``hue``, ``saturation``, and ``lightness`` variables for the following colors: ``color-primary-darker``, ``color-primary-dark``, ``color-primary-lighter``, ``color-primary-light``, ``color-input-focus``, and ``color-input-focus-border``:
 
 .. code-block:: text
 
@@ -134,6 +134,8 @@ If instead you intend to set all available colors, you can use any valid css col
         --color-primary: mediumaquamarine;
         --color-primary-darker: rebeccapurple;
         --color-primary-dark: hsl(330, 100%, 70%);
+        --color-primary-lighter: azure;
+        --color-primary-light: aliceblue;
         --color-input-focus: rgb(204, 0, 102);
         --color-input-focus-border: #4d0026;
     }