From 76a1a805efd8a3b77b2b4622c7dbe1ef68c1d1b7 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Mon, 4 Apr 2022 10:16:00 -0700
Subject: [PATCH] Basic support for forced colors/high contrast mode

---
 stylesheets/_mixins.scss                      | 24 ++++++-------
 stylesheets/_modules.scss                     |  1 +
 stylesheets/components/Avatar.scss            |  4 +++
 stylesheets/components/LeftPaneDialog.scss    | 34 +++++++++++++++++++
 .../components/ReactionPickerPicker.scss      |  7 ++++
 5 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 6f0e249b725b..16af16888988 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -173,20 +173,8 @@
     -webkit-mask-origin: $mask-origin;
   }
   background-color: $color;
-}
-
-@mixin header-icon-white($svg) {
-  @include color-svg($svg, $color-white-alpha-80);
-  &:focus,
-  &:hover {
-    @include color-svg($svg, $color-white);
-  }
-}
-@mixin header-icon-black($svg) {
-  @include color-svg($svg, $color-black-alpha-40);
-  &:focus,
-  &:hover {
-    @include color-svg($svg, black);
+  @media (forced-colors: active) {
+    background-color: WindowText;
   }
 }
 
@@ -220,6 +208,10 @@
 
 @mixin popper-shadow() {
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.05);
+
+  @media (forced-colors: active) {
+    border: 1px solid WindowText;
+  }
 }
 
 @mixin button-reset {
@@ -232,6 +224,10 @@
   cursor: pointer;
   outline: inherit;
   text-align: inherit;
+
+  @media (forced-colors: active) {
+    border: 1px solid WindowText;
+  }
 }
 
 @mixin staged-attachment-close-button {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 6f0a0e2ecd67..6b0df62088d7 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2294,6 +2294,7 @@ button.ConversationDetails__action-button {
     }
 
     @include keyboard-mode {
+      border: none;
       &:focus {
         border-color: $color-ultramarine;
         outline: none;
diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss
index f8923630e440..ca0483144c8d 100644
--- a/stylesheets/components/Avatar.scss
+++ b/stylesheets/components/Avatar.scss
@@ -88,6 +88,10 @@
     -webkit-mask-size: 62%;
     background-color: var(--fg);
 
+    @media (forced-colors: active) {
+      background-color: WindowText;
+    }
+
     &--direct {
       -webkit-mask-image: url('../images/icons/v2/profile-outline-20.svg');
       -webkit-mask-size: 60%;
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index 08e80c2a08cf..3022b0d56cb5 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -82,6 +82,10 @@
     background-color: $color-white;
     -webkit-mask-size: contain;
 
+    @media (forced-colors: active) {
+      background-color: WindowText;
+    }
+
     &--relink {
       -webkit-mask: url('../images/icons/v2/link-broken-16.svg') no-repeat
         center;
@@ -121,6 +125,13 @@
       display: block;
       width: 100%;
       height: 100%;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+        @include dark-theme {
+          background-color: WindowText;
+        }
+      }
     }
 
     &:hover,
@@ -130,6 +141,21 @@
     &:active {
       background-color: $color-white-alpha-20;
     }
+
+    @media (forced-colors: active) {
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: none;
+      }
+      @include dark-theme {
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: none;
+        }
+      }
+    }
   }
 
   &__message {
@@ -173,10 +199,18 @@
 
     .LeftPaneDialog__icon {
       background-color: $color-black;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+      }
     }
 
     .LeftPaneDialog__close-button::before {
       background-color: $color-black;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+      }
     }
   }
 
diff --git a/stylesheets/components/ReactionPickerPicker.scss b/stylesheets/components/ReactionPickerPicker.scss
index e7713aa4a494..619766e9416b 100644
--- a/stylesheets/components/ReactionPickerPicker.scss
+++ b/stylesheets/components/ReactionPickerPicker.scss
@@ -123,6 +123,13 @@
         @include dark-theme {
           background: $color-gray-15;
         }
+
+        @media (forced-colors: active) {
+          background-color: WindowText;
+          @include dark-theme {
+            background: WindowText;
+          }
+        }
       }
     }
   }