Styles for whcm

wagtail · Feb 25, 2024 · e8d4514 · e8d4514
1 parent 7241fbd
commit e8d4514
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/wagtailio/static/sass/components/_burger.scss b/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;

diff --git a/wagtailio/static/sass/components/_buttons.scss b/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;
     }
-
-
 }
diff --git a/wagtailio/static/sass/components/_code-snippet.scss b/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;

diff --git a/wagtailio/static/sass/components/_modal.scss b/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;
+                }
             }
         }
     }