From e5c0cfcd27d6844669fcdbcb88d6c4e289d537aa Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 24 Jun 2024 09:54:34 -0400
Subject: [PATCH] UX: remove default use of quaternary color, update nav pill
 styles (#27502)

---
 .../addon/components/admin-theme-editor.js    |  2 +-
 .../admin/addon/templates/dashboard.hbs       |  2 +-
 .../fields/styling-preview/-preview-base.js   |  2 +-
 .../wizard/components/wizard-canvas.gjs       |  4 +-
 .../stylesheets/common/admin/admin_base.scss  | 14 ++---
 .../stylesheets/common/admin/customize.scss   | 47 ++++++++--------
 .../stylesheets/common/admin/dashboard.scss   | 44 ++-------------
 .../stylesheets/common/base/discourse.scss    |  8 +++
 .../stylesheets/common/base/new-user.scss     | 37 +++----------
 .../components/horizontal-overflow-nav.scss   |  2 +-
 .../common/components/keyboard_shortcuts.scss |  4 +-
 .../stylesheets/common/components/navs.scss   | 27 +++++-----
 .../stylesheets/common/foundation/mixins.scss | 17 ++++++
 .../common/select-kit/category-drop.scss      |  9 ++--
 .../common/select-kit/tag-drop.scss           |  8 ++-
 .../stylesheets/desktop/topic-list.scss       |  4 +-
 app/assets/stylesheets/mobile/topic-list.scss |  9 ++--
 app/views/common/_discourse_splash.html.erb   | 13 +----
 config/locales/client.en.yml                  |  2 +-
 .../stylesheets/common/chat-browse.scss       |  3 +-
 .../stylesheets/common/chat-footer.scss       | 44 ++++++++-------
 .../assets/stylesheets/common/chat-index.scss |  8 ++-
 .../stylesheets/mobile/chat-footer.scss       |  9 ----
 .../components/modal/poll-ui-builder.hbs      | 54 ++++++++++---------
 .../stylesheets/common/poll-ui-builder.scss   | 16 ++----
 25 files changed, 169 insertions(+), 220 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
index 4330acf9549..0ffdd46a55c 100644
--- a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
+++ b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
@@ -52,7 +52,7 @@ export default class AdminThemeEditor extends Component {
     if (fieldName && fieldName === "color_definitions") {
       const example =
         ":root {\n" +
-        "  --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};\n" +
+        "  --mytheme-tertiary-or-highlight: #{dark-light-choose($tertiary, $highlight)};\n" +
         "}";
 
       return I18n.t("admin.customize.theme.color_definitions.placeholder", {
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard.hbs b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
index fabca7301b5..a8e9c1c0edd 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
@@ -19,7 +19,7 @@
   @refreshProblems={{action "refreshProblems"}}
 />
 
-<ul class="navigation">
+<ul class="nav nav-pills">
   <li class="navigation-item general">
     <LinkTo @route="admin.dashboard.general" class="navigation-link">
       {{i18n "admin.dashboard.general_tab"}}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
index 2e3447e47c3..8a6c83ec8bf 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
@@ -362,7 +362,7 @@ export default Component.extend({
 
     const activeWidth = categoriesSize * (opts.categories ? 0.8 : 0.55);
     ctx.beginPath();
-    ctx.fillStyle = colors.quaternary;
+    ctx.fillStyle = colors.tertiary;
     ctx.rect(
       headerMargin * 2 + categoriesSize,
       headerHeight + headerMargin,
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
index f9c46d33fce..d715be3c215 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
@@ -9,9 +9,9 @@ const SIZE = 144;
 
 const COLORS = [
   "--tertiary",
-  "--quaternary",
+  "--tertiary-high",
   "--tertiary-medium",
-  "--quaternary-low",
+  "--tertiary-low",
 ];
 
 class Particle {
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 08b0dcfbf15..8be8be7242d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -497,8 +497,8 @@ $mobile-breakpoint: 700px;
 
 .admin-controls {
   display: flex;
-  background-color: var(--primary-low);
   align-items: center;
+  background: var(--primary-low);
 
   .admin-actions {
     margin-left: auto;
@@ -551,9 +551,9 @@ $mobile-breakpoint: 700px;
   }
 
   .nav-pills {
-    width: calc(100% - 10px);
+    width: 100%;
     display: inline-flex;
-    padding: 10px;
+    padding: 0.5em;
     margin: 0;
     white-space: nowrap;
     overflow-x: auto;
@@ -566,12 +566,6 @@ $mobile-breakpoint: 700px;
     &:before {
       display: none;
     }
-    > li {
-      margin: 0;
-      a.active {
-        background: var(--primary-medium);
-      }
-    }
   }
   h1 {
     font-size: var(--font-up-3);
@@ -700,7 +694,7 @@ $mobile-breakpoint: 700px;
       color: var(--primary);
       background-color: initial;
       font-weight: 700;
-      border-right: 4px solid var(--quaternary);
+      border-right: 4px solid var(--d-nav-color--active);
 
       &::after {
         display: none; // Hides the arrow
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index ffe99244aed..bedb64baf12 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -232,30 +232,43 @@
   .themes-list-header {
     width: 100%;
     display: flex;
-
+    border: 1px solid var(--primary-low);
     .tab {
       border: none;
       padding: 1em;
       width: 50%;
       box-sizing: border-box;
       text-align: center;
+      background: var(--d-nav-bg-color);
       &.themes-tab {
-        border-top-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-bottom-right-radius: 0px;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
       }
       &.components-tab {
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-bottom-right-radius: 0px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      .discourse-no-touch & {
+        &:focus,
+        &:hover {
+          color: var(--d-nav-color--hover);
+          background: var(--d-nav-bg-color--hover);
+          &.active {
+            color: var(--d-nav-color--active);
+            background: var(--d-nav-bg-color--active);
+          }
+          .d-icon {
+            color: inherit;
+          }
+        }
       }
 
       &.active {
-        background-color: var(--quaternary);
-        color: var(--secondary);
-        .d-icon {
-          color: currentColor;
-        }
+        position: relative;
+        @include nav-active();
       }
     }
 
@@ -556,11 +569,6 @@
       margin: 0;
     }
 
-    .edit-main-nav .nav-pills > li a.active {
-      background-color: var(--quaternary);
-      color: var(--secondary);
-    }
-
     .edit-main-nav ul {
       padding-bottom: 0;
     }
@@ -587,11 +595,6 @@
           margin-bottom: 0;
         }
 
-        a.active {
-          background: var(--primary-medium);
-          color: var(--secondary);
-        }
-
         a.blank:not(.active) {
           color: var(--primary-medium);
         }
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 0b6df1bf63e..604a1250b42 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -6,55 +6,19 @@
 }
 
 .dashboard-next {
-  .navigation {
+  .nav {
     display: flex;
-    margin: 0 0 1em 0;
-    border-bottom: 1px solid var(--primary-low-mid);
-
-    .navigation-item {
-      display: inline;
-      &:hover {
-        background: var(--primary-very-low);
-      }
-    }
+    margin: 0 0 2em 0;
+    border-bottom: 1px solid var(--primary-low);
+    font-size: var(--font-up-1);
 
     .navigation-link {
-      display: block;
-      font-weight: bold;
-      padding: 0.6em 1em 0.5em 1em;
-
       .emoji {
         margin-right: 0.5em;
       }
     }
   }
 
-  @mixin active-navigation-item {
-    .navigation-link {
-      border-bottom: 0.4em solid var(--tertiary);
-    }
-  }
-
-  &.dashboard-moderation .navigation-item.moderation {
-    @include active-navigation-item;
-  }
-
-  &.dashboard-security .navigation-item.security {
-    @include active-navigation-item;
-  }
-
-  &.dashboard-reports .navigation-item.reports {
-    @include active-navigation-item;
-  }
-
-  &.dashboard-new-features .navigation-item.new-features {
-    @include active-navigation-item;
-  }
-
-  &.general .navigation-item.general {
-    @include active-navigation-item;
-  }
-
   .sections {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index addc134419e..0507344392d 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -10,6 +10,14 @@
   --d-input-bg-color--disabled: var(--primary-low);
   --d-input-text-color--disabled: var(--primary);
   --d-input-border--disabled: 1px solid var(--primary-low);
+  --d-nav-color: var(--primary);
+  --d-nav-bg-color: transparent;
+  --d-nav-color--hover: var(--primary);
+  --d-nav-bg-color--hover: var(--d-hover);
+  --d-nav-color--active: var(--tertiary);
+  --d-nav-bg-color--active: transparent;
+  --d-nav-border-color--active: var(--d-nav-color--active);
+  --d-nav-underline-height: 0.125em;
   --safe-area-inset-bottom: env(safe-area-inset-bottom);
 }
 
diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss
index bae2aaa0b49..17b025d7c27 100644
--- a/app/assets/stylesheets/common/base/new-user.scss
+++ b/app/assets/stylesheets/common/base/new-user.scss
@@ -11,8 +11,6 @@
       justify-content: center;
       align-items: center;
       position: relative;
-      border-bottom: var(--user-navigation__border-width) solid transparent;
-      padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em 0.75em;
 
       @include breakpoint(extra-large) {
         font-size: var(--font-0);
@@ -22,21 +20,6 @@
         line-height: normal;
         @include ellipsis;
       }
-
-      &:hover,
-      &:focus {
-        background: transparent;
-        color: var(--quaternary);
-        border-bottom: var(--user-navigation__border-width) solid
-          var(--quaternary-low);
-      }
-
-      &.active {
-        color: var(--quaternary);
-        background: transparent;
-        border-bottom: var(--user-navigation__border-width) solid
-          var(--quaternary);
-      }
     }
   }
 }
@@ -92,20 +75,22 @@
   }
 
   .user-navigation-secondary {
-    --user-navigation__border-width: 2px;
-    --navigation-secondary-padding-top: 0.5em;
     position: relative;
     display: flex;
     min-width: 0;
-    margin: 0;
+
     gap: 0 0.5em;
-    border-bottom: 1px solid var(--primary-low);
+    font-size: var(--font-down-1);
 
     .select-kit .select-kit-header {
       height: 100%;
       padding: 0.5em 1em;
     }
 
+    .select-kit-collection {
+      font-size: var(--font-up-1);
+    }
+
     .user-nav-messages-dropdown {
       // manage long group names
       max-width: 20vw;
@@ -144,27 +129,19 @@
 
     .nav-pills {
       flex: 1 1 auto;
-      font-size: var(--font-down-1);
       justify-content: flex-start;
-      padding-top: var(--navigation-secondary-padding-top);
+      height: 100%;
 
       li {
         flex: 1 0 auto;
 
         a {
-          padding: 0.5em 0.5em
-            calc(0.5em + var(--user-navigation__border-width));
-
           span {
             text-overflow: unset;
           }
         }
       }
     }
-
-    [class*="horizontal-overflow-nav__scroll"] {
-      padding-top: var(--navigation-secondary-padding-top);
-    }
   }
 
   .empty-state {
diff --git a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
index e50c91dfdfc..beb664c51ae 100644
--- a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
+++ b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
@@ -39,7 +39,7 @@
   .d-icon {
     pointer-events: none;
     margin-bottom: 0.2em;
-    color: var(--quaternary);
+    color: var(--d-nav-color--active);
   }
   &.disabled {
     // hiding with opacity so we can transition visibility
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index c4cc797a227..c226d3deeab 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -7,12 +7,12 @@
 .topic-list-item.selected td:first-of-type,
 .latest-topic-list-item.selected,
 .search-results .fps-result.selected {
-  box-shadow: inset 3px 0 0 var(--quaternary);
+  box-shadow: inset 3px 0 0 var(--d-nav-color--active);
 }
 
 .featured-topic.selected,
 .topic-post.selected {
-  box-shadow: -3px 0 0 var(--quaternary);
+  box-shadow: -3px 0 0 var(--d-nav-color--active);
 }
 
 .topic-list tr.selected,
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index eb4efd3a7b1..c5d4ce9fc22 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -23,44 +23,43 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  gap: 0.5em;
 
   > li {
     display: flex;
-    margin-right: 0.5em;
 
     > a,
     button {
-      border: none;
+      position: relative;
       border-radius: var(--d-nav-pill-border-radius);
-      padding: 6px 12px;
+      padding: 0.65em 0.75em;
       color: var(--primary);
-      font-size: var(--font-up-1);
       line-height: var(--line-height-small);
       box-sizing: border-box;
       min-height: 30px;
       display: flex;
       align-items: center;
+      background-color: var(--d-nav-bg-color);
       transition: var(--d-button-transition);
 
       .d-icon {
         margin-right: 5px;
-        opacity: 0.65;
+        color: var(--primary-high);
+        transition: color 0.2s;
       }
 
       &:hover {
-        color: var(--quaternary);
-        background-color: var(--quaternary-low);
+        color: var(--d-nav-color--hover);
+        background: var(--d-nav-bg-color--hover);
+        .d-icon {
+          color: var(--d-nav-color--hover);
+        }
       }
     }
 
     a.active,
     button.active {
-      color: var(--secondary);
-      background-color: var(--quaternary);
-
-      .d-icon {
-        opacity: 1;
-      }
+      @include nav-active();
     }
   }
 }
@@ -94,8 +93,6 @@
     @include ellipsis;
 
     &.active {
-      color: var(--secondary);
-      background-color: var(--quaternary);
       position: relative;
 
       --arrow-thickness: 8px;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 7b4a676c1c7..aed5ce8dc2b 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -263,3 +263,20 @@ $hpad: 0.65em;
   text-decoration: none;
   text-wrap: nowrap;
 }
+
+@mixin nav-active() {
+  color: var(--d-nav-color--active);
+  background: var(--d-nav-bg-color--active);
+  .d-icon {
+    color: var(--d-nav-color--active);
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: var(--d-nav-underline-height);
+    background: var(--d-nav-color--active);
+  }
+}
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 23ad61d75d0..2638a7efc9b 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -19,12 +19,13 @@
         }
       }
 
+      .caret-icon {
+        color: var(--primary-high);
+      }
+
       &.has-selection {
         .category-drop-header {
-          border-color: var(--quaternary);
-          .caret-icon {
-            color: var(--quaternary);
-          }
+          border-color: var(--d-nav-border-color--active);
         }
       }
 
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 115dd416148..685993835ea 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -16,10 +16,14 @@
         }
       }
 
+      .caret-icon {
+        color: var(--primary-high);
+      }
+
       &.has-selection {
         .tag-drop-header {
-          color: var(--quaternary);
-          border-color: var(--quaternary);
+          color: var(--d-nav-border-color--active);
+          border-color: var(--d-nav-border-color--active);
         }
       }
     }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 7f55a03e462..2a538e54d24 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -62,9 +62,9 @@
     line-height: var(--line-height-large);
     padding-left: 0.5em;
     padding-right: 0.5em;
+    position: relative;
     &.active {
-      background: var(--quaternary);
-      color: var(--secondary);
+      @include nav-active();
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 02f8cf739f5..5385a86b64c 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -566,11 +566,14 @@ td .main-link {
     background: none;
     border: none;
     padding: 0.75em;
-    box-shadow: 0 3px 0 var(--primary-low);
+    position: relative;
 
     &.active {
-      color: var(--quaternary);
-      box-shadow: 0 3px 0 var(--quaternary);
+      @include nav-active;
+      &:after {
+        height: 0.15em;
+        bottom: -0.15em;
+      }
     }
   }
 }
diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 44013c98244..e5e378ded98 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -17,7 +17,6 @@
           --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
           --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
           --tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
-          --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
           --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
           --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
         }
@@ -30,7 +29,6 @@
             --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
             --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
             --tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
-            --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
             --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
             --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
           }
@@ -42,7 +40,6 @@
             --primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
             --secondary: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
             --tertiary: #<%= ColorScheme.hex_for_name("tertiary", dark_scheme_id) %>;
-            --quaternary: #<%= ColorScheme.hex_for_name("quaternary", dark_scheme_id) %>;
             --highlight: #<%= ColorScheme.hex_for_name("highlight", dark_scheme_id) %>;
             --success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>;
           }
@@ -63,29 +60,22 @@
           r: max(1vw, 11px);
           cy: 50%;
           filter: saturate(2) opacity(0.85);
-        }
-
-        .dots:first-child {
-          fill: var(--quaternary);
+          fill: var(--tertiary);
         }
 
         .dots:nth-child(2) {
-          fill: var(--quaternary);
           animation-delay: 0.15s;
         }
 
         .dots:nth-child(3) {
-          fill: var(--highlight);
           animation-delay: 0.3s;
         }
 
         .dots:nth-child(4) {
-          fill: var(--tertiary);
           animation-delay: 0.45s;
         }
 
         .dots:nth-child(5) {
-          fill: var(--tertiary);
           animation-delay: 0.6s;
         }
 
@@ -177,6 +167,7 @@
     }
 
     #d-splash .preloader-text-wrapper {
+      font-family: sans-serif;
       position: absolute;
       opacity: 0;
       animation: fade-in 0.5s ease-in-out;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 978528e4a05..8eeab0f02bd 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5874,7 +5874,7 @@ en:
             description: "Links, some buttons, notifications, and accent color."
           quaternary:
             name: "quaternary"
-            description: "Navigation links."
+            description: "For optional use in themes."
           header_background:
             name: "header background"
             description: "Background color of the site's header."
diff --git a/plugins/chat/assets/stylesheets/common/chat-browse.scss b/plugins/chat/assets/stylesheets/common/chat-browse.scss
index a48ffa96d27..a598ce921da 100644
--- a/plugins/chat/assets/stylesheets/common/chat-browse.scss
+++ b/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) {
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
index 017c4b70fb9..57a1f0e6a27 100644
--- a/plugins/chat/assets/stylesheets/common/chat-footer.scss
+++ b/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 {
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index f357ae66712..0ad92d5a5cd 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/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);
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index 9b05d79dceb..f97637a059a 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/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);
-        }
-      }
-    }
   }
 }
 
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
index 6fe2a959506..3768ad21668 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
@@ -5,36 +5,40 @@
   class="poll-ui-builder"
 >
   <:body>
-    <div class="input-group poll-type">
-      <a
-        href
-        {{on "click" (fn this.updatePollType "regular")}}
-        class="poll-type-value poll-type-value-regular
-          {{if this.isRegular 'active'}}"
-      >
-        {{i18n "poll.ui_builder.poll_type.regular"}}
-      </a>
-
-      <a
-        href
-        {{on "click" (fn this.updatePollType "multiple")}}
-        class="poll-type-value poll-type-value-multiple
-          {{if this.isMultiple 'active'}}"
-      >
-        {{i18n "poll.ui_builder.poll_type.multiple"}}
-      </a>
-
-      {{#if this.showNumber}}
+    <ul class="nav nav-pills poll-type">
+      <li>
         <a
           href
-          {{on "click" (fn this.updatePollType "number")}}
-          class="poll-type-value poll-type-value-number
-            {{if this.isNumber 'active'}}"
+          {{on "click" (fn this.updatePollType "regular")}}
+          class="poll-type-value poll-type-value-regular
+            {{if this.isRegular 'active'}}"
         >
-          {{i18n "poll.ui_builder.poll_type.number"}}
+          {{i18n "poll.ui_builder.poll_type.regular"}}
         </a>
+      </li>
+      <li>
+        <a
+          href
+          {{on "click" (fn this.updatePollType "multiple")}}
+          class="poll-type-value poll-type-value-multiple
+            {{if this.isMultiple 'active'}}"
+        >
+          {{i18n "poll.ui_builder.poll_type.multiple"}}
+        </a>
+      </li>
+      {{#if this.showNumber}}
+        <li>
+          <a
+            href
+            {{on "click" (fn this.updatePollType "number")}}
+            class="poll-type-value poll-type-value-number
+              {{if this.isNumber 'active'}}"
+          >
+            {{i18n "poll.ui_builder.poll_type.number"}}
+          </a>
+        </li>
       {{/if}}
-    </div>
+    </ul>
 
     {{#if this.showAdvanced}}
       <div class="input-group poll-title">
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index 3c8f71e6389..074b2dfb886 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -50,19 +50,9 @@
   }
 
   .poll-type {
-    display: block;
-
-    .poll-type-value {
-      border: none;
-      color: var(--primary);
-      display: inline-block;
-      padding: 6px 12px 3px;
-
-      &.active {
-        background-color: var(--quaternary);
-        color: var(--secondary);
-      }
-    }
+    padding: 0;
+    margin-top: 0;
+    border: none;
   }
 
   .poll-options {