FIX: Specificity and other fixes for WCAG colors (#13082)

app/assets/stylesheets/wcag.scss

@@ -7,7 +7,7 @@
   opacity: 1;
 }
 
-.discourse-no-touch {
+html.discourse-no-touch {
   .btn-default,
   .btn-icon {
     &.btn-default {
@@ -37,6 +37,8 @@
   }
 }
 
+html {
+  // html parent adds some additional specificity to override core styles
   .nav-pills > li > a:not(.active):hover {
     background: var(--tertiary-low);
     color: var(--primary);
@@ -73,6 +75,11 @@
     }
   }
 
+  div.menu-links-header button:hover,
+  div.menu-links-header button:focus {
+    background: var(--tertiary-high);
+  }
+
   .menu-panel .panel-body-bottom .btn:hover {
     .d-icon {
       color: var(--primary);
@@ -203,29 +210,18 @@ blockquote {
 
   // Post controls
 
-nav.post-controls {
+  .topic-admin-menu-button-container,
-  // this is a bit tedious
+  .timeline-controls {
-  a,
+    .btn .d-icon {
-  button {
+      // admin wrenches
       color: var(--primary-medium);
-    .d-icon {
-      color: var(--primary-low-mid);
     }
-    .discourse-no-touch & {
+  }
+
+  nav.post-controls {
+    .actions {
+      .double-button {
         &:hover {
-        color: var(--secondary);
-        background: var(--primary-medium);
-        .d-icon {
-          color: var(--secondary);
-        }
-      }
-    }
-    &:focus {
-      background: var(--primary-medium);
-    }
-  }
-  .discourse-no-touch & {
-    .double-button:hover {
           button {
             background: var(--primary-medium);
             color: var(--secondary);
@@ -234,58 +230,101 @@ nav.post-controls {
             }
             &.has-like {
               .d-icon {
-            color: var(--secondary);
+                color: var(--love-low);
               }
             }
           }
         }
-  }
+        button {
-  button.bookmark.bookmarked.d-hover .d-icon {
+          &.like {
-    color: var(--secondary);
+            // Like button with 0 likes
-  }
+            &.d-hover {
-  .double-button button.button-count + .toggle-like.d-hover {
+              background: var(--love-low);
-    background: var(--primary-medium);
               .d-icon {
                 color: var(--love-low);
               }
             }
-  .discourse-no-touch & {
+          }
-    .double-button button.button-count.d-hover {
+          &.has-like {
+            // Like button after I've liked
+            .d-icon {
+              color: var(--love);
+            }
+            &.d-hover {
+              background: var(--primary-medium);
+              .d-icon {
+                color: var(--secondary);
+              }
+            }
+          }
+
+          &.button-count {
+            &.d-hover {
               background: var(--primary-medium);
               color: var(--secondary);
             }
+            + .toggle-like {
+              &.d-hover {
+                background: var(--primary-medium);
+                color: var(--secondary);
+              }
+            }
+          }
+        }
       }
       button.create {
+        color: var(--primary-high-or-secondary-low);
+
         .d-icon {
-      color: var(--primary-low-mid);
+          color: var(--primary-high-or-secondary-low);
+        }
+      }
+      button {
+        &.d-hover,
+        &:focus,
+        &:active {
+          background: var(--primary-medium);
+          color: var(--secondary);
+          .d-icon {
+            color: var(--secondary);
+          }
+        }
+
+        &.delete.d-hover,
+        &.delete:hover,
+        &.delete:focus {
+          background: var(--danger);
+          color: var(--secondary);
+          .d-icon {
+            color: var(--secondary);
+          }
+        }
+        &.bookmark {
+          &.bookmarked {
+            .d-icon {
+              color: var(--tertiary);
             }
             &.d-hover {
+              .d-icon {
+                color: var(--tertiary-medium);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .show-replies {
+      color: var(--primary-medium);
+      &:hover,
+      &:focus {
         color: var(--secondary);
+        background: var(--primary-medium);
         .d-icon {
           color: var(--secondary);
         }
       }
     }
-  .actions a,
-  .actions button {
-    color: var(--primary-medium);
-  }
-}
-
-nav.post-controls
-  .actions
-  .double-button
-  button.button-count
-  + .toggle-like.d-hover {
-  background: var(--primary-medium);
-}
-
-.topic-admin-menu-button-container,
-.timeline-controls {
-  .btn .d-icon {
-    // admin wrenches
-    color: var(--primary-medium);
-  }
   }
 
   // Categories
@@ -305,3 +344,4 @@ nav.post-controls
       color: var(--secondary);
     }
   }
+}