Print stylesheets and WHCM improvements

wagtailio/static/sass/base/_print.scss

@@ -0,0 +1,87 @@
+// Print styles
+// stylelint-disable declaration-no-important
+
+@media print {
+    * {
+        background: transparent !important;
+        color: $color--black !important;
+        border-color: $color--black !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    .header, .hero {
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href^='http']::after {
+        content: ' (' attr(href) ')'; // Display link URL
+    }
+
+    abbr[title]::after {
+        content: " (" attr(title) ")";
+    }
+
+    a[href^="#"]::after,
+    a[href^="javascript:"]::after {
+        content: "";
+    }
+
+    p a {
+        word-wrap: break-word;
+    }
+
+    pre {
+        white-space: pre-wrap !important;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        width: 50%;  // Prevent images from spanning the entire page
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    // Hide integrated videos and remove whitespace
+    iframe, video {
+        display: none;
+        width: 0 !important;
+        height: 0 !important;
+        overflow: hidden !important;
+        line-height: 0pt !important;
+        white-space: nowrap;
+    }
+
+    .embed, .home-embed {
+        position: absolute;
+        height: 0;
+        overflow: hidden;
+    }
+
+    // Hide interactive elements
+    header .header__actions, footer,
+    .cookie .cookie__container,
+    .related-content.grid,
+    .sign-up-form, .hero__icon, .headline__icon{
+        display: none;
+    }
+}

wagtailio/static/sass/components/_burger.scss

@@ -12,6 +12,10 @@
     &:focus {
         #{$root}__line {
             background-color: var(--color--interaction);
+
+            @media (forced-colors: active) {
+                background-color: ButtonText;
+            }
         }
     }
 
@@ -27,6 +31,10 @@
         transform: translateX(-50%) rotate(0deg);
         transition: top $transition, width $transition, opacity $transition, transform $transition, background-color $transition, left $transition;
 
+        @media (forced-colors: active) {
+            background-color: ButtonText;
+        }
+
         .is-open & {
             width: 27px;
             height: 4px;

wagtailio/static/sass/components/_buttons.scss

@@ -18,6 +18,10 @@
         transition: transform 0.3s;
         margin: 0 0 0 15px;
         fill: $color--teal;
+
+        @media (forced-colors: active) {
+            fill: currentColor;
+        }
     }
 
     &:hover {
@@ -27,6 +31,10 @@
         > svg {
             transform: translateX(6px) scale(1.05);
             fill: $color--teal-100;
+
+            @media (forced-colors: active) {
+                fill: currentColor;
+            }
         }
     }
 
@@ -38,6 +46,10 @@
 
         > svg {
             fill: $color--teal-100;
+
+            @media (forced-colors: active) {
+                fill: currentColor;
+            }
         }
 
         &:hover,
@@ -48,6 +60,11 @@
 
             > svg {
                 fill: $color--teal;
+
+                // stylelint-disable-next-line max-nesting-depth
+                @media (forced-colors: active) {
+                    fill: currentColor;
+                }
             }
         }
     }
@@ -103,6 +120,4 @@
         font-weight: $weight--bold;
         line-height: 1.25rem;
     }
-
-
 }

wagtailio/static/sass/components/_code-snippet.scss

@@ -36,24 +36,26 @@
         width: 20px;
         height: 20px;
         transition: color 0.3s;
-    }
 
-    &__button {
-        padding: 0;
-
-        &:focus {
-            outline-color: var(--color--heading);
+        @media (forced-colors: active) {
+            fill: currentColor;
         }
 
         &:hover,
         &:active,
         &:focus {
-            #{$root}__icon {
                 fill: $color--white;
-            }
+
+                @media (forced-colors: active) {
+                    fill: currentColor;
+                }
         }
     }
 
+    &__button {
+        padding: 0;
+    }
+
     &__confirmation {
         background-color: var(--color--highlight);
         position: absolute;

wagtailio/static/sass/components/_modal.scss

@@ -42,11 +42,15 @@
             width: 30px;
             height: 30px;
             border: 3px solid $color--white;
+        }
+
+        #{$root}__close-icon {
+            fill: $color--white;
+            width: 12px;
+            height: 22px;
 
-            svg {
-                fill: $color--white;
-                width: 12px;
-                height: 22px;
+            @media (forced-colors: active) {
+                fill: currentColor;
             }
         }
     }
@@ -113,10 +117,12 @@
             }
         }
 
-        &:hover,
-        &:focus {
-            #{$root}__close-icon {
-                fill: var(--color--interaction);
+        .theme-dark & {
+            &:hover,
+            &:focus {
+                #{$root}__close-icon {
+                    fill: $color--teal-100;
+                }
             }
         }
     }

wagtailio/static/sass/components/_theme-toggle.scss

@@ -117,8 +117,4 @@
     .no-js & {
         display: none;
     }
-
-    @media print {
-        display: none;
-     }
 }

wagtailio/static/sass/main.scss

@@ -11,6 +11,7 @@
 @import 'base/base';
 @import 'base/container';
 @import 'base/typography';
+@import 'base/print';
 
 // Components
 @import 'components/app';