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

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

diff --git a/app/assets/stylesheets/wcag.scss b/app/assets/stylesheets/wcag.scss
index ade65af..aac73ba 100644
--- a/app/assets/stylesheets/wcag.scss
+++ b/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,271 +37,311 @@
   }
 }
 
-.nav-pills > li > a:not(.active):hover {
-  background: var(--tertiary-low);
-  color: var(--primary);
-}
-
-// Composer
+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);
+  }
 
-#reply-control .reply-to .reply-details .d-icon {
-  opacity: 1;
-  color: var(--primary-low-mid);
-}
+  // Composer
 
-.d-editor-button-bar {
-  .btn-icon.btn-default .d-icon {
+  #reply-control .reply-to .reply-details .d-icon {
+    opacity: 1;
     color: var(--primary-low-mid);
-    .discourse-no-touch & {
-      &:hover {
-        color: var(--secondary);
+  }
+
+  .d-editor-button-bar {
+    .btn-icon.btn-default .d-icon {
+      color: var(--primary-low-mid);
+      .discourse-no-touch & {
+        &:hover {
+          color: var(--secondary);
+        }
       }
     }
   }
-}
 
-// Site header
+  // Site header
 
-.menu-panel li a.widget-link:hover,
-.menu-panel li a.widget-link:focus,
-.menu-panel li.heading a.widget-link:hover,
-.menu-panel li.heading a.widget-link:focus {
-  color: var(--primary);
-  background-color: var(--highlight-medium);
-  .d-icon {
+  .menu-panel li a.widget-link:hover,
+  .menu-panel li a.widget-link:focus,
+  .menu-panel li.heading a.widget-link:hover,
+  .menu-panel li.heading a.widget-link:focus {
     color: var(--primary);
+    background-color: var(--highlight-medium);
+    .d-icon {
+      color: var(--primary);
+    }
   }
-}
 
-.menu-panel .panel-body-bottom .btn:hover {
-  .d-icon {
-    color: var(--primary);
+  div.menu-links-header button:hover,
+  div.menu-links-header button:focus {
+    background: var(--tertiary-high);
   }
-}
 
-.d-header-icons .d-icon {
-  color: var(--primary-low-mid);
-}
+  .menu-panel .panel-body-bottom .btn:hover {
+    .d-icon {
+      color: var(--primary);
+    }
+  }
 
-.d-header-icons .icon:hover .d-icon,
-.d-header-icons .icon:focus .d-icon {
-  color: var(--primary-high);
-}
+  .d-header-icons .d-icon {
+    color: var(--primary-low-mid);
+  }
 
-.d-header-icons .unread-notifications {
-  background: var(--tertiary);
-}
+  .d-header-icons .icon:hover .d-icon,
+  .d-header-icons .icon:focus .d-icon {
+    color: var(--primary-high);
+  }
 
-// Topic list
+  .d-header-icons .unread-notifications {
+    background: var(--tertiary);
+  }
 
-table th {
-  color: var(--primary-medium);
-}
+  // Topic list
 
-.coldmap {
-  &-high {
-    color: #6c77cc !important;
+  table th {
+    color: var(--primary-medium);
   }
 
-  &-med {
-    color: #548eaa !important;
+  .coldmap {
+    &-high {
+      color: #6c77cc !important;
+    }
+
+    &-med {
+      color: #548eaa !important;
+    }
+
+    &-low {
+      color: #32a1a5 !important;
+    }
   }
 
-  &-low {
-    color: #32a1a5 !important;
+  .heatmap-high,
+  .heatmap-high a {
+    color: #dc3249 !important;
+  }
+  .heatmap-med,
+  .heatmap-med a {
+    color: #ae5b54 !important;
+  }
+  .heatmap-low,
+  .heatmap-low a {
+    color: #8f6d5b !important;
   }
-}
 
-.heatmap-high,
-.heatmap-high a {
-  color: #dc3249 !important;
-}
-.heatmap-med,
-.heatmap-med a {
-  color: #ae5b54 !important;
-}
-.heatmap-low,
-.heatmap-low a {
-  color: #8f6d5b !important;
-}
+  .badge-notification {
+    background: var(--primary-medium);
+  }
 
-.badge-notification {
-  background: var(--primary-medium);
-}
+  .badge-notification.new-posts,
+  .badge-notification.unread-posts {
+    background: var(--tertiary);
+  }
+  .select-kit.dropdown-select-box.period-chooser
+    .period-chooser-header
+    h2.selected-name
+    .top-date-string,
+  .select-kit.dropdown-select-box.period-chooser
+    .period-chooser-row
+    .top-date-string {
+    color: var(--primary-high);
+  }
 
-.badge-notification.new-posts,
-.badge-notification.unread-posts {
-  background: var(--tertiary);
-}
-.select-kit.dropdown-select-box.period-chooser
-  .period-chooser-header
-  h2.selected-name
-  .top-date-string,
-.select-kit.dropdown-select-box.period-chooser
-  .period-chooser-row
-  .top-date-string {
-  color: var(--primary-high);
-}
+  // Posts
 
-// Posts
+  .discourse-no-touch .topic-body .actions .fade-out {
+    opacity: 1;
+  }
 
-.discourse-no-touch .topic-body .actions .fade-out {
-  opacity: 1;
-}
+  .topic-body .reply-to-tab {
+    color: var(--primary-medium);
+    .d-icon {
+      color: var(--primary-low-mid);
+    }
+  }
 
-.topic-body .reply-to-tab {
-  color: var(--primary-medium);
-  .d-icon {
-    color: var(--primary-low-mid);
+  .timeline-container .topic-timeline {
+    .timeline-scrollarea {
+      border-color: var(--primary-low-mid);
+    }
+    .timeline-handle {
+      background: var(--primary-low-mid);
+    }
   }
-}
 
-.timeline-container .topic-timeline {
-  .timeline-scrollarea {
-    border-color: var(--primary-low-mid);
+  .topic-map h4 {
+    color: var(--primary);
   }
-  .timeline-handle {
-    background: var(--primary-low-mid);
+
+  .quote-controls,
+  .quote-controls .d-icon {
+    color: var(--primary-medium);
   }
-}
 
-.topic-map h4 {
-  color: var(--primary);
-}
+  blockquote {
+    a,
+    a:visited {
+      color: var(--tertiary);
+    }
+  }
+  .meta .d-icon + .filename,
+  .meta .informations {
+    color: var(--secondary);
+  }
 
-.quote-controls,
-.quote-controls .d-icon {
-  color: var(--primary-medium);
-}
+  #topic-footer-buttons .bookmark.bookmarked:hover .d-icon-bookmark {
+    color: var(--secondary);
+  }
+
+  .gap {
+    color: var(--primary-medium);
+  }
 
-blockquote {
-  a,
-  a:visited {
-    color: var(--tertiary);
+  .badge-notification.clicks {
+    color: var(--primary-high);
   }
-}
-.meta .d-icon + .filename,
-.meta .informations {
-  color: var(--secondary);
-}
 
-#topic-footer-buttons .bookmark.bookmarked:hover .d-icon-bookmark {
-  color: var(--secondary);
-}
+  .topic-map {
+    background: transparent;
+  }
 
-.gap {
-  color: var(--primary-medium);
-}
+  // Post controls
 
-.badge-notification.clicks {
-  color: var(--primary-high);
-}
+  .topic-admin-menu-button-container,
+  .timeline-controls {
+    .btn .d-icon {
+      // admin wrenches
+      color: var(--primary-medium);
+    }
+  }
 
-.topic-map {
-  background: transparent;
-}
+  nav.post-controls {
+    .actions {
+      .double-button {
+        &:hover {
+          button {
+            background: var(--primary-medium);
+            color: var(--secondary);
+            .d-icon {
+              color: var(--secondary);
+            }
+            &.has-like {
+              .d-icon {
+                color: var(--love-low);
+              }
+            }
+          }
+        }
+        button {
+          &.like {
+            // Like button with 0 likes
+            &.d-hover {
+              background: var(--love-low);
+              .d-icon {
+                color: var(--love-low);
+              }
+            }
+          }
+          &.has-like {
+            // Like button after I've liked
+            .d-icon {
+              color: var(--love);
+            }
+            &.d-hover {
+              background: var(--primary-medium);
+              .d-icon {
+                color: var(--secondary);
+              }
+            }
+          }
 
-// Post controls
+          &.button-count {
+            &.d-hover {
+              background: var(--primary-medium);
+              color: var(--secondary);
+            }
+            + .toggle-like {
+              &.d-hover {
+                background: var(--primary-medium);
+                color: var(--secondary);
+              }
+            }
+          }
+        }
+      }

[... diff too long, it was truncated ...]

GitHub sha: f1b14a7f

This commit appears in #13082 which was approved by CvX. It was merged by SamSaffron.