Styling for Windows high contrast

- add media queries for icons & logos
- fix issue with color problems

CHANGELOG.txt

@@ -16,6 +16,7 @@ Changelog
  * Fix: Remove redundant 'clear' button from site root page chooser (Matt Westcott)
  * Fix: Make ModelAdmin IndexView keyboard-navigable (Saptak Sengupta)
  * Fix: Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
+ * Fix: Admin fields and Icon visibility issues in Windows high contrast mode (Dmitrii Faiazov)
 
 
 2.14.1 (12.08.2021)

CONTRIBUTORS.rst

@@ -527,6 +527,7 @@ Contributors
 * Sean Kelly
 * Himesh Samarasekera
 * Jannis Vajen
+* Dmitrii Faiazov
 
 Translators
 ===========

client/scss/components/_icons.scss

@@ -177,3 +177,11 @@ svg.icon-spinner { // TODO: leave only class when iconfont styles are removed
     height: 1.5em;
     color: $color-red;
 }
+
+// Media for Windows High Contrast mode
+
+@media (forced-colors: $media-forced-colours) {
+    .icon {
+        fill: $system-color-link-text;
+    }
+}

client/scss/components/_logo.scss

@@ -119,3 +119,11 @@
         }
     }
 }
+
+// Media for Windows High Contrast mode
+
+@media (forced-colors: $media-forced-colours) {
+    .wagtail-logo-container__desktop {
+        background-color: $system-color-link-text;
+    }
+}

client/scss/settings/_variables.scss

@@ -90,6 +90,11 @@ $color-state-draft: #808080;
 $color-state-absent: #ff8f11;
 $color-state-live-draft: #43b1b0;
 
+// System Colors
+$media-forced-colours: active;
+$system-color-link-text: LinkText;
+$system-color-button-text: ButtonText;
+
 // Fonts
 $font-sans: Open Sans, Arial, sans-serif;
 $font-serif: Roboto Slab, Georgia, serif;

docs/releases/2.15.rst

@@ -32,6 +32,7 @@ Bug fixes
  * Remove redundant 'clear' button from site root page chooser (Matt Westcott)
  * Make ModelAdmin IndexView keyboard-navigable (Saptak Sengupta)
  * Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
+ * Admin fields and Icon visibility issues in Windows high contrast mode (Dmitrii Faiazov)
 
 Upgrade considerations
 ======================

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -305,8 +305,13 @@ $positions: (
     }
 }
 
+//Media for Windows High Contrast
 
-
+@media (forced-colors: $media-forced-colours) {
+    .#{$namespace}-userbar-icon {
+        fill: $system-color-link-text;
+    }
+}
 
 // =============================================================================
 // Userbar positional classes (tl, tr, bl, br)

wagtail/admin/templates/wagtailadmin/icons/comment.svg

@@ -1,4 +1,4 @@
 <symbol id="icon-comment" viewBox="0 0 30 30">
     <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
-    <path d="M15 8c-4.438 0-8 2.938-8 6.5 0 1.563.656 2.969 1.781 4.094-.406 1.593-1.719 2.968-1.719 3a.3.3 0 00-.062.281c.063.094.125.125.25.125 2.063 0 3.625-.969 4.375-1.594A9.81 9.81 0 0015 21c4.406 0 8-2.906 8-6.5 0-3.563-3.594-6.5-8-6.5zm-4 7.5c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1z" fill="currentColor"></path>
+    <path d="M15 8c-4.438 0-8 2.938-8 6.5 0 1.563.656 2.969 1.781 4.094-.406 1.593-1.719 2.968-1.719 3a.3.3 0 00-.062.281c.063.094.125.125.25.125 2.063 0 3.625-.969 4.375-1.594A9.81 9.81 0 0015 21c4.406 0 8-2.906 8-6.5 0-3.563-3.594-6.5-8-6.5zm-4 7.5c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.563 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1z"></path>
 </symbol>