Further HCM fixes and update style lint packages to cope with system colours (sort of)

package.json

@@ -87,8 +87,8 @@
     "prettier": "^2.5.1",
     "sass": "^1.45.0",
     "sass-loader": "^12.4.0",
-    "stylelint": "^13.0.0",
-    "stylelint-config-torchbox": "^1.0.0",
+    "stylelint": "^13.13.0",
+    "stylelint-config-torchbox": "^1.1.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1"

tbx/static_src/sass/abstracts/_mixins.scss

@@ -193,6 +193,17 @@
     }
 }
 
+@mixin hcm-underline() {
+    text-decoration: underline;
+    text-decoration-color: var(--color--underline);
+    text-underline-offset: 2px;
+    text-decoration-thickness: 2px;
+}
+
+@mixin hcm-underline-hover() {
+    text-decoration-thickness: 4px;
+}
+
 /* ============================================
     Impact Report link styles
 */

tbx/static_src/sass/components/_badge.scss

@@ -45,6 +45,11 @@
         }
     }
 
+    @include hcm() {
+        border: 1px solid var(--color--dark-indigo);
+        padding: 2px;
+    }
+
     &--desktop {
         right: -20px;
         top: -20px;

tbx/static_src/sass/components/_nav-item.scss

@@ -99,6 +99,16 @@
                 //This only displays for windows high contrast mode
                 outline: 3px solid var(--color--header-links) transparent;
             }
+
+            @include hcm() {
+                @include hcm-underline();
+
+                &:hover,
+                &:focus,
+                &--active {
+                    @include hcm-underline-hover();
+                }
+            }
         }
 
         &__badge-link {
@@ -162,6 +172,16 @@
             &:hover {
                 color: var(--color--white);
             }
+
+            @include hcm() {
+                @include hcm-underline();
+
+                &:hover,
+                &:focus,
+                &--active {
+                    @include hcm-underline-hover();
+                }
+            }
         }
 
         &__badge-link {
@@ -202,6 +222,19 @@
         &:hover {
             cursor: pointer;
         }
+
+        @include hcm() {
+            /* stylelint-disable value-keyword-case  */
+            color: ButtonText;
+            border: 1px solid ButtonBorder;
+
+            &:hover,
+            &:focus {
+                color: ActiveText;
+                border-color: ActiveText;
+            }
+            /* stylelint-enable value-keyword-case  */
+        }
     }
 
     &__dots {
@@ -238,7 +271,28 @@
         }
 
         @include hcm() {
-            filter: invert(1);
+            /* stylelint-disable value-keyword-case  */
+            background-color: ButtonText;
+            color: ButtonText;
+
+            &::after,
+            &::before {
+                background-color: ButtonText;
+                color: ButtonText;
+
+                #{$root}__button:hover &,
+                #{$root}__button:focus & {
+                    color: ActiveText;
+                    background-color: ActiveText;
+                }
+            }
+
+            #{$root}__button:hover &,
+            #{$root}__button:focus & {
+                color: ActiveText;
+                background-color: ActiveText;
+            }
+            /* stylelint-enable value-keyword-case  */
         }
     }
 

tbx/static_src/sass/components/_streamfield.scss

@@ -78,6 +78,27 @@
 
     &__paragraph {
         @include streamblock-padding();
+
+        // This rule overrides the generic `streamfield a` rule below, but then applies the hcm rule just
+        // for streamfield__paragraph. Really the `streamfield a` styles should only apply
+        // for paragraphs, and they've caused headaches in having to be overridden in multiple
+        // places for other streamfield blocks - in future it would be good to refactor that
+        // but it would require a lot of testing work.
+        /* stylelint-disable max-nesting-depth  */
+        .streamfield & {
+            a {
+                @include hcm() {
+                    text-decoration: underline;
+                    border-bottom: 0;
+
+                    &:hover,
+                    &:focus {
+                        text-decoration-thickness: 4px;
+                    }
+                }
+            }
+        }
+        /* stylelint-enable max-nesting-depth  */
     }
 
     &__raw {

tbx/static_src/sass/components/_subnav.scss

@@ -43,6 +43,25 @@
             @include link-underscore(2);
             color: var(--color--dark-indigo);
         }
+
+        @include hcm() {
+            @include hcm-underline();
+            overflow: visible;
+
+            &::after {
+                display: none;
+            }
+
+            &:hover,
+            &:focus,
+            &--active {
+                &::after {
+                    display: none;
+                }
+
+                @include hcm-underline-hover();
+            }
+        }
     }
 
     &__badge-link {