update high contrast mode media queries to use mixin

DEFRA · Jul 25, 2023 · 075398a · 075398a
1 parent 1e73ce2
commit 075398a
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 24 deletions.
diff --git a/server/src/sass/components/_bar-chart.scss b/server/src/sass/components/_bar-chart.scss
@@ -33,7 +33,7 @@
   .axis.y text,
   .axis.x text {
     fill: $govuk-secondary-text-colour;
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       fill: currentColor;
     }
   }
@@ -48,7 +48,7 @@
     stroke: $govuk-border-colour;
     stroke-width: 1;
     shape-rendering: crispEdges;
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       stroke: currentColor;
     }
   }
@@ -61,19 +61,19 @@
   }
   .bar__fill {
     fill: govuk-colour('blue');
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       fill: currentColor;
     }
   }
   .bar--selected .bar__fill {
     fill: govuk-colour('dark-blue');
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       fill: currentColor;
     }
   }
   .bar--incomplete .bar__fill {
     fill: govuk-colour('mid-grey');
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       fill: currentColor;
     }
   }
@@ -92,13 +92,13 @@
     stroke: govuk-colour('dark-grey');
     stroke-dasharray: 3 3;
     shape-rendering: crispEdges;
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       stroke: currentColor;
     }
   }
   .bar--selected .latest-line {
     stroke: govuk-colour('black');
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       stroke: currentColor;
     }
   }
@@ -115,7 +115,7 @@
     &__background--visible {
       visibility: visible;
       fill: $govuk-focus-colour;
-      @media (forced-colors: active) {
+      @include high-contrast-mode-only {
         fill: currentColor;
       }
     }
@@ -141,7 +141,7 @@
       stroke-width: 1;
       stroke: $govuk-secondary-text-colour;
       shape-rendering: geometricPrecision;
-      @media (forced-colors: active) {
+      @include high-contrast-mode-only {
         stroke: currentColor;
       }
   }

diff --git a/server/src/sass/components/_chart-controls.scss b/server/src/sass/components/_chart-controls.scss
@@ -39,7 +39,7 @@
     border-bottom: 4px solid govuk-colour('black');
     background-color: $govuk-focus-colour;
     color: govuk-colour('black');
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
       outline: 3px solid transparent;
       margin-bottom: 1px;
       border: none;

diff --git a/server/src/sass/components/_flood-levels-table.scss b/server/src/sass/components/_flood-levels-table.scss
@@ -179,7 +179,7 @@
       left: 4px;
       top: 4px;
       color: govuk-colour('black');
-      @media (forced-colors: active) {
+      @include high-contrast-mode-only {
         color: currentColor;
       }
       @include mq ($from: tablet) {

diff --git a/server/src/sass/components/_flood-status.scss b/server/src/sass/components/_flood-status.scss
@@ -38,7 +38,7 @@ $amber: #f18700;
     margin-top:0;
     margin-bottom:10px;
 
-    @media (forced-colors: active) {
+    @include high-contrast-mode-only {
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-right-width: 1px;

diff --git a/server/src/sass/components/_line-chart.scss b/server/src/sass/components/_line-chart.scss
@@ -78,7 +78,7 @@
     }
     .observed-area {
         fill: rgba($govuk-link-colour, 0.1);
-        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+        @include high-contrast-mode-only {
             fill: none;
         }
     }
@@ -92,7 +92,7 @@
     }
     .forecast-area {
         fill: rgba($govuk-border-colour, 0.1);
-        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+        @include high-contrast-mode-only {
             fill: none;
         }
     }
@@ -119,7 +119,7 @@
         color: $govuk-secondary-text-colour;
         stroke: currentColor;
     }
-    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    @include high-contrast-mode-only {
         .locator-point {
             fill: window;
         }
@@ -147,7 +147,7 @@
     .tooltip-text__strong {
         @include govuk-font($size: 19, $weight:bold);
     }
-    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    @include high-contrast-mode-only {
         .tooltip-bg {
             fill: window;
         }
@@ -227,7 +227,7 @@
         color: $govuk-text-colour;
         fill: currentColor;
     }
-    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    @include high-contrast-mode-only {
         .threshold__line {
             stroke: currentColor;
         }
@@ -256,7 +256,7 @@
         .threshold__remove line {
             stroke: $govuk-text-colour;
         }
-        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+        @include high-contrast-mode-only {
             .threshold__line {
                 stroke: currentColor;
             }

diff --git a/server/src/sass/components/_navbar.scss b/server/src/sass/components/_navbar.scss
@@ -187,7 +187,7 @@
       color: $govuk-link-hover-colour;
       svg {
         color: $govuk-link-hover-colour;
-        @media (forced-colors: active) {
+        @include high-contrast-mode-only {
           color: currentColor;
         }
       }

diff --git a/server/src/sass/objects/_buttons.scss b/server/src/sass/objects/_buttons.scss
@@ -9,7 +9,7 @@
         margin-left:5px;
         vertical-align: middle;
         top:-1px;
-        @media (forced-colors: active) {
+        @include high-contrast-mode-only {
             color: currentColor;
         }
     }
@@ -54,7 +54,7 @@ button.defra-button-secondary {
             left: 10px;
             top: 50%;
             margin-top: -11px;
-            @media (forced-colors: active) {
+            @include high-contrast-mode-only {
                 color: currentColor;
             }
         }
@@ -110,20 +110,20 @@ button.defra-button-secondary {
             margin-right: 8px;
             top: 4px;
         }
-        @media (forced-colors: active) {
+        @include high-contrast-mode-only {
             color: currentColor;
         }
     }
     &:hover svg {
         color: $govuk-link-hover-colour;
-        @media (forced-colors: active) {
+        @include high-contrast-mode-only {
             color: currentColor;
         }
     }
     &:focus svg,
     &:active svg {
         color: govuk-colour('black');
-        @media (forced-colors: active) {
+        @include high-contrast-mode-only {
             color: currentColor;
         }
     }

diff --git a/server/src/sass/tools/_mixins.scss b/server/src/sass/tools/_mixins.scss
@@ -15,6 +15,15 @@
     white-space: nowrap !important;
 }
 
+@mixin high-contrast-mode-only() {
+    @media
+    screen and (forced-colors: active),
+    screen and (-ms-high-contrast: active)
+    {
+        @content
+    }
+}
+
 
 //
 // Function to create an optimized svg url