Change light theme floating toolbar active color (#11261)

Co-authored-by: Cassidy <cassidy.pittman@torchbox.com>

CHANGELOG.txt

@@ -20,6 +20,7 @@ Changelog
  * Fix: Use the latest draft when copying an unpublished page for translation (Andrey Nehaychik)
  * Fix: Make Workflow and Aging Pages reports only available to users with page-related permissions (Rohit Sharma)
  * Fix: Make searching on specific fields work correctly on Elasticsearch when boost is in use (Matt Westcott)
+ * Fix: Use a visible border and background color to highlight active formatting in the rich text toolbar (Cassidy Pittman)
  * Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi)
  * Docs: Document all features for the Documents app in one location (Neeraj Yetheendran)
  * Maintenance: Update BeautifulSoup upper bound to 4.12.x (scott-8)

CONTRIBUTORS.md

@@ -768,6 +768,7 @@
 * Meli Imelda
 * Kehinde Bobade
 * Joe Tsoi
+* Cassidy Pittman
 
 ## Translators
 

client/scss/tools/_mixins.general.scss

@@ -112,3 +112,18 @@
     }
   }
 }
+
+/**
+ * Apply styles for the light theme only.
+ */
+@mixin light-theme() {
+  .w-theme-light & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .w-theme-system & {
+      @content;
+    }
+  }
+}

client/src/components/Draftail/Draftail.scss

@@ -115,6 +115,17 @@ $draftail-editor-font-family: $font-sans;
       top: theme('spacing.slim-header');
     }
   }
+
+  .Draftail-ToolbarButton--active {
+    @include light-theme() {
+      background-color: theme('colors.surface-header');
+      border-color: theme('colors.border-furniture');
+
+      @media (forced-colors: active) {
+        background: Highlight;
+      }
+    }
+  }
 }
 
 .Draftail-MetaToolbar {

docs/releases/6.0.md

@@ -33,6 +33,7 @@ depth: 1
  * Use the latest draft when copying an unpublished page for translation (Andrey Nehaychik)
  * Make Workflow and Aging Pages reports only available to users with page-related permissions (Rohit Sharma)
  * Make searching on specific fields work correctly on Elasticsearch when boost is in use (Matt Westcott)
+ * Use a visible border and background color to highlight active formatting in the rich text toolbar (Cassidy Pittman)
 
 ### Documentation