From 442b5538bbb8cf1dce6daf947d58c877ae5b552b Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 25 May 2023 11:21:30 -0400
Subject: [PATCH] UX: more style adjustments for larger sidebar font (#21751)

---
 .../common/base/sidebar-section-link.scss     | 22 +++++++++----------
 .../common/base/sidebar-section.scss          |  7 +-----
 .../stylesheets/common/base/sidebar.scss      |  2 +-
 .../stylesheets/desktop/menu-panel.scss       |  5 ++---
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index db265307ad7..e70816d4c71 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -1,6 +1,6 @@
 :root {
-  --d-sidebar-section-link-prefix-margin-right: 0.5rem;
-  --d-sidebar-section-link-prefix-width: 20px;
+  --d-sidebar-section-link-prefix-margin-right: 0.35rem;
+  --d-sidebar-section-link-prefix-width: 1.35rem;
 }
 
 .sidebar-section-link-wrapper {
@@ -22,12 +22,12 @@
     }
 
     &.active {
-      color: var(--primary);
+      color: var(--primary-800);
       background: var(--d-sidebar-highlight-color);
 
       .sidebar-section-link-prefix {
-        &.icon {
-          color: var(--primary-high);
+        &.icon svg {
+          color: var(--primary-medium);
         }
       }
     }
@@ -38,7 +38,7 @@
       padding-right: 0.1em; // avoids some overflow cropping
       text-align: right;
       color: var(--primary-700);
-      font-size: var(--font-down-1);
+      font-size: var(--font-down-2);
       font-weight: normal;
       margin-left: auto;
     }
@@ -120,17 +120,17 @@
         background: rgba(var(--primary-rgb), 0.1);
         width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
         height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
-        font-size: var(--font-down-1);
+        font-size: var(--font-down-2);
       }
     }
 
     &.icon,
     &.span {
       position: relative;
-      color: var(--primary-medium);
+      color: var(--primary-500);
 
       svg {
-        font-size: var(--font-down-1);
+        font-size: 0.8em;
       }
 
       .prefix-badge {
@@ -147,8 +147,8 @@
       }
     }
     .prefix-span {
-      width: 0.87em;
-      height: 0.87em;
+      width: 0.8em;
+      height: 0.8em;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 5ae08441a64..6177a3c2bde 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -1,7 +1,3 @@
-:root {
-  --d-sidebar-section-header-text-font-size: var(--font-up-1);
-}
-
 .sidebar-section-wrapper {
   .discourse-no-touch & {
     &:hover {
@@ -16,7 +12,6 @@
 
   .sidebar-section-header-wrapper {
     display: flex;
-    font-size: var(--d-sidebar-section-header-text-font-size);
 
     .discourse-no-touch & {
       &:hover {
@@ -141,7 +136,7 @@
   }
 
   .sidebar-section-content {
-    padding-bottom: 1.25em;
+    padding-bottom: 0.875em;
     margin: 0;
     hr {
       margin: 0em 1.5em;
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 6bd10f9df95..df39a9eb167 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -8,7 +8,7 @@
   // 1.25rem gets text left-aligned with the hamburger icon
   --d-sidebar-row-horizontal-padding: 1.25rem;
   // ems so height is variable along with font size
-  --d-sidebar-row-height: 2.15em;
+  --d-sidebar-row-height: 2.1em;
 }
 
 .sidebar-row {
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index 4d96b94bc80..e074aed6115 100644
--- a/app/assets/stylesheets/desktop/menu-panel.scss
+++ b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -11,7 +11,7 @@
 // Sidebar-hamburger hybrid
 
 .hamburger-panel .revamped {
-  --d-sidebar-highlight-color: var(--highlight-medium);
+  --d-sidebar-highlight-color: var(--d-hover);
   --d-sidebar-row-horizontal-padding: 0.5rem;
   --d-sidebar-row-height: 30px;
   // 1.25rem gets text left-aligned with the hamburger icon
@@ -30,8 +30,7 @@
 
     .sidebar-section-link.active {
       font-weight: normal;
-      color: var(--primary-high);
-      background: var(--tertiary-low);
+      background: var(--d-hover);
     }
 
     .sidebar-section-header-wrapper .select-kit .btn:hover {