From 67b1d153847bffe5e0e1364e5fff5f9ab56c273b Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 18 Jan 2023 10:42:22 +0100
Subject: [PATCH 1/2] Use CSS variables for the textLayer `highlight` colors
 (PR 15921 follow-up)

Rather than adding `@media (forced-colors: active) { ... }`-blocks throughout the CSS code, we should utilize CSS variables instead as in our other CSS files.
---
 web/text_layer_builder.css | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index ff115d99c..8e7269e2f 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -13,6 +13,18 @@
  * limitations under the License.
  */
 
+:root {
+  --highlight-bg-color: rgba(180, 0, 170, 1);
+  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+}
+
+@media (forced-colors: active) {
+  :root {
+    --highlight-bg-color: Highlight;
+    --highlight-selected-bg-color: ButtonText;
+  }
+}
+
 .textLayer {
   position: absolute;
   text-align: initial;
@@ -48,7 +60,7 @@
 .textLayer .highlight {
   margin: -1px;
   padding: 1px;
-  background-color: rgba(180, 0, 170, 1);
+  background-color: var(--highlight-bg-color);
   border-radius: 4px;
 }
 
@@ -69,16 +81,7 @@
 }
 
 .textLayer .highlight.selected {
-  background-color: rgba(0, 100, 0, 1);
-}
-
-@media (forced-colors: active) {
-  .textLayer .highlight {
-    background-color: Highlight;
-  }
-  .textLayer .highlight.selected {
-    background-color: ButtonText;
-  }
+  background-color: var(--highlight-selected-bg-color);
 }
 
 .textLayer ::selection {

From 4b5817f8ffe33feccde2b7e068e2838f193b1484 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 18 Jan 2023 10:49:52 +0100
Subject: [PATCH 2/2] Use consistent `forced-colors` media-queries throughout
 the CSS files

Note how e.g. the `viewer.css` and `pdf_viewer.css` files already used this format.
---
 web/annotation_editor_layer_builder.css | 2 +-
 web/annotation_layer_builder.css        | 2 +-
 web/text_layer_builder.css              | 2 +-
 web/xfa_layer_builder.css               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 29c06a403..5248aa900 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -35,7 +35,7 @@
   }
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
   :root {
     --focus-outline: solid 3px ButtonText;
     --hover-outline: dashed 3px ButtonText;
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 3a3ddf556..14bc98db3 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -22,7 +22,7 @@
   --input-hover-border-color: black;
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
   :root {
     --input-focus-border-color: CanvasText;
     --input-unfocused-border-color: ActiveText;
diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index 8e7269e2f..f3291b5ba 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -18,7 +18,7 @@
   --highlight-selected-bg-color: rgba(0, 100, 0, 1);
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
   :root {
     --highlight-bg-color: Highlight;
     --highlight-selected-bg-color: ButtonText;
diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css
index c650adfc1..28a26d0a1 100644
--- a/web/xfa_layer_builder.css
+++ b/web/xfa_layer_builder.css
@@ -18,7 +18,7 @@
   --xfa-focus-outline: auto;
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
   :root {
     --xfa-focus-outline: 2px solid CanvasText;
   }