From 7e4f83607202d2477463c52f32a39716b7426134 Mon Sep 17 00:00:00 2001
From: Harry Twyford <htwyford@mozilla.com>
Date: Thu, 6 May 2021 14:57:23 -0400
Subject: [PATCH] 2044 - Use color-mix for confirmation page background on
 Firefox 89+.

---
 src/css/confirm-page.css | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/css/confirm-page.css b/src/css/confirm-page.css
index b954443..c21ac02 100644
--- a/src/css/confirm-page.css
+++ b/src/css/confirm-page.css
@@ -45,8 +45,27 @@ html {
   word-break: break-all;
 }
 
+/* Fallbacks for Firefox < 89. In Firefox 89+, content pages like the
+   confirmation page follow the Firefox theme instead of the system theme.
+   That requires the -moz-toolbar-prefers-color-scheme media query. Instead
+   of supporting that query as well, we use color-mix for the background-color,
+   which is also supported in Firefox 89+. */
+/* stylelint-disable media-feature-name-no-unknown */
+@media (prefers-color-scheme: dark) {
+  #redirect-url {
+    background-color: #38383d; /* Grey 70 */
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  #redirect-url {
+    background-color: #efedf0;
+  }
+}
+/* stylelint-enable */
+
 #redirect-url {
-  background: #efedf0; /* Grey 20 */
+  background-color: color-mix(in sRGB, currentColor 10%, transparent);
   border-radius: 2px;
   line-height: 1.5;
   padding-block-end: 0.5rem;
@@ -55,15 +74,6 @@ html {
   padding-inline-start: 0.5rem;
 }
 
-/* stylelint-disable media-feature-name-no-unknown */
-@media (prefers-color-scheme: dark) {
-  #redirect-url {
-    background: #38383d; /* Grey 70 */
-    color: #eee; /* White 20 */
-  }
-}
-/* stylelint-enable */
-
 #redirect-url img {
   block-size: 16px;
   inline-size: 16px;