UX: remove default use of quaternary color, update nav pill styles (#27502)

plugins/chat/assets/stylesheets/common/chat-browse.scss

@@ -60,7 +60,6 @@
 
   &__filter {
     display: inline;
-    margin-right: 1em;
 
     &:last-of-type {
       margin-right: 0;
@@ -74,7 +73,7 @@
   &__filter-link,
   &__filter-link:visited {
     color: var(--primary);
-    font-size: var(--font-up-2);
+    font-size: var(--font-up-1);
     padding: 0 0.25rem;
 
     @include breakpoint(tablet) {

plugins/chat/assets/stylesheets/common/chat-footer.scss

@@ -27,37 +27,45 @@
     padding-block: 0.75rem;
     height: 100%;
     position: relative;
+    color: var(--primary-medium);
+    background: var(
+      --d-nav-bg-color
+    ) !important; // todo: remove need for !important
 
-    &.--active {
-      .d-icon,
-      .d-button-label {
-        color: var(--quaternary);
+    .d-icon {
+      margin-right: 0;
+      font-size: var(--font-up-2);
+      margin-bottom: 0.15em;
+      color: inherit;
+
+      &.d-icon-discourse-threads {
+        font-size: var(--font-up-2); // visual correction
       }
     }
+
     &:hover,
     &:focus {
-      .discourse-no-touch &,
-      .discourse-touch & {
-        .d-icon,
-        .d-button-label {
-          color: var(--quaternary);
+      .discourse-no-touch & {
+        background: var(
+          --d-nav-bg-color--hover
+        ) !important; // todo: remove need for !important
+        color: var(--d-nav-color--hover);
+        .d-icon {
+          color: var(--d-nav-color--hover);
         }
       }
     }
 
-    .d-icon {
-      margin-right: 0;
-      font-size: var(--font-up-4);
-      color: var(--primary-medium);
-
-      &.d-icon-discourse-threads {
-        font-size: var(--font-up-3); //visual correction
-      }
+    &.--active,
+    &.--active:hover {
+      @include nav-active();
+      background: var(
+        --d-nav-bg-color--active
+      ) !important; // todo: remove need for !important
     }
 
     .d-button-label {
       font-size: var(--font-down-1-rem);
-      color: var(--primary-medium);
     }
 
     .c-unread-indicator {

plugins/chat/assets/stylesheets/common/chat-index.scss

@@ -21,8 +21,8 @@
 
   &:focus {
     @include default-focus;
-    border-color: var(--quaternary);
-    outline-color: var(--quaternary);
+    border-color: var(--d-nav-color--active);
+    outline-color: var(--d-nav-color--active);
   }
 }
 
@@ -83,10 +83,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: bold;
   font-family: var(--heading-font-family);
-  font-size: var(--font-down-1);
-  color: var(--quaternary);
+  color: var(--primary);
 
   .channel-title {
     line-height: var(--line-height-medium);

plugins/chat/assets/stylesheets/mobile/chat-footer.scss

@@ -17,15 +17,6 @@
     .c-unread-indicator.-urgent {
       margin-left: 1rem;
     }
-
-    &.--active {
-      .full-page-chat & {
-        .d-icon,
-        .d-button-label {
-          color: var(--quaternary);
-        }
-      }
-    }
   }
 }