From 10dce46886f19dbaf57c931c3131d5a1afc39d02 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 6 Jun 2023 09:24:56 -0400
Subject: [PATCH] UX: remove sidebar background color (#21775)

---
 .../common/base/sidebar-custom-section.scss   | 14 ------
 .../common/base/sidebar-footer.scss           | 20 +++-----
 .../base/sidebar-more-section-links.scss      | 12 ++---
 .../common/base/sidebar-section-link.scss     | 48 ++++++++++---------
 .../common/base/sidebar-section.scss          | 20 ++++----
 .../stylesheets/common/base/sidebar.scss      | 30 ++++++++++--
 .../stylesheets/desktop/menu-panel.scss       |  2 +-
 app/assets/stylesheets/mobile/menu-panel.scss |  2 +-
 8 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/app/assets/stylesheets/common/base/sidebar-custom-section.scss b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
index d574e47f47f..e7df295a0f2 100644
--- a/app/assets/stylesheets/common/base/sidebar-custom-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
@@ -31,20 +31,6 @@
     a {
       pointer-events: none;
     }
-    .sidebar-section-link-wrapper {
-      .sidebar-section-link-prefix.icon,
-      .sidebar-section-link {
-        background: none;
-        color: var(--primary-low-mid);
-      }
-      .sidebar-section-link.drag {
-        font-weight: bold;
-        color: var(--primary-high);
-        .sidebar-section-link-prefix.icon {
-          color: var(--primary-high);
-        }
-      }
-    }
   }
 }
 .discourse-touch {
diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss
index c19598fa6bd..37c1c937e8a 100644
--- a/app/assets/stylesheets/common/base/sidebar-footer.scss
+++ b/app/assets/stylesheets/common/base/sidebar-footer.scss
@@ -8,8 +8,6 @@
     display: flex;
     align-items: stretch;
     position: relative;
-    border-top: 1.5px solid var(--primary-low);
-    background: var(--primary-very-low);
     padding: 0.5em 0.8em;
     padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
     &:before {
@@ -18,15 +16,15 @@
       content: "";
       display: block;
       height: 1.5em;
-      top: calc(-1.5em - 1px);
+      top: -1.5em;
       left: -0.5em;
       right: -0.5em;
       width: calc(100% + 0.5em);
       pointer-events: none;
       background: linear-gradient(
         to bottom,
-        rgba(var(--primary-very-low-rgb), 0),
-        rgba(var(--primary-very-low-rgb), 1)
+        rgba(var(--secondary-rgb), 0),
+        rgba(var(--secondary-rgb), 1)
       );
     }
   }
@@ -36,18 +34,14 @@
     align-items: center;
     height: 100%;
     font-size: var(--font-down-1);
-    color: var(--primary-high);
+    color: var(--d-sidebar-link-color);
     padding: 0 0.5em;
     &:hover,
     &:focus {
-      background: var(--d-sidebar-highlight-color);
+      background: var(--d-sidebar-highlight-background);
     }
   }
 
-  .sidebar-footer-links-separator {
-    color: var(--primary-low-mid);
-  }
-
   .sidebar-footer-actions {
     margin-left: auto;
   }
@@ -59,11 +53,11 @@
 
     .d-icon {
       font-size: var(--font-down-1);
-      color: var(--primary-medium);
+      color: var(--d-sidebar-link-icon-color);
     }
     &:focus,
     &:hover {
-      background: var(--d-sidebar-highlight-color);
+      background: var(--d-sidebar-highlight-background);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index 8b75c6cda04..22781f327cc 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
@@ -2,13 +2,13 @@
   &:focus-within,
   &:active,
   &:hover {
-    background: var(--d-sidebar-highlight-color);
+    background: var(--d-sidebar-highlight-background);
     svg.d-icon {
-      color: var(--primary-medium);
+      color: var(--d-sidebar-highlight-color);
     }
   }
   height: var(--d-sidebar-row-height);
-  color: var(--primary-high);
+  color: var(--d-sidebar-link-color);
   display: flex;
   list-style: none;
   box-sizing: border-box;
@@ -16,15 +16,15 @@
   padding: 0 var(--d-sidebar-row-horizontal-padding);
   justify-content: left;
 
-  svg.d-icon {
+  .d-icon {
     width: var(--d-sidebar-section-link-prefix-width);
     margin-right: var(--d-sidebar-section-link-prefix-margin-right);
-    color: var(--primary-medium);
+    color: var(--d-sidebar-link-icon-color);
     font-size: var(--font-down-1);
   }
 }
 .sidebar-more-section-links-details-content {
-  background-color: var(--secondary);
+  background-color: var(--d-sidebar-background);
   transition: background-color 0.25s;
   box-shadow: shadow("dropdown");
   margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index 2cc8cca2bcb..c1cf421d7e5 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -12,22 +12,25 @@
     display: inline-flex;
     width: 100%;
     align-items: center;
-    color: var(--primary-high);
+    color: var(--d-sidebar-link-color);
     transition: background-color 0.25s;
 
     &:focus,
     &:hover {
-      background: var(--d-sidebar-highlight-color);
+      background: var(--d-sidebar-highlight-background);
       outline: none;
+      .prefix-text {
+        background: var(--d-sidebar-highlight-prefix-background);
+      }
     }
 
     &.active {
-      color: var(--primary-800);
-      background: var(--d-sidebar-highlight-color);
+      color: var(--d-sidebar-highlight-color);
+      background: var(--d-sidebar-highlight-background);
 
       .sidebar-section-link-prefix {
         &.icon {
-          color: var(--primary-medium);
+          color: var(--d-sidebar-highlight-color);
         }
       }
     }
@@ -37,7 +40,7 @@
       padding-left: 0.5em;
       padding-right: 0.1em; // avoids some overflow cropping
       text-align: right;
-      color: var(--primary-700);
+      color: var(--d-sidebar-link-badge-color);
       font-size: var(--font-down-2);
       font-weight: normal;
       margin-left: auto;
@@ -46,7 +49,6 @@
     .sidebar-section-link-suffix {
       margin-left: 1em;
       font-size: var(--font-down-4);
-      color: var(--tertiary-medium);
     }
 
     .sidebar-section-link-content-text {
@@ -111,23 +113,12 @@
 
     &.text {
       text-align: center;
-
-      .prefix-text {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 100%;
-        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-2);
-      }
     }
 
     &.icon,
     &.span {
       position: relative;
-      color: var(--primary-500);
+      color: var(--d-sidebar-link-icon-color);
 
       svg {
         font-size: 0.8em;
@@ -138,7 +129,7 @@
         background-color: transparent;
         border-radius: 50%;
         padding: 2px 2px 3px;
-        color: var(--primary-high);
+        color: var(--d-sidebar-link-color);
         height: 0.5rem;
         width: 0.5rem;
         top: -0.2em;
@@ -152,12 +143,23 @@
     }
   }
 
+  .prefix-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    background: var(--d-sidebar-prefix-background);
+    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-2);
+  }
+
   .sidebar-section-link-hover {
     margin-left: auto;
 
     .sidebar-section-hover-button {
       display: none;
-      color: var(--primary-medium);
+      color: var(--d-sidebar-link-icon-color);
       border: none;
       background: transparent;
       padding: 0 0 0 0.5em;
@@ -167,7 +169,7 @@
       &:focus,
       .discourse-no-touch & {
         &:hover {
-          color: var(--primary);
+          color: var(--d-sidebar-highlight-color);
         }
       }
 
@@ -178,7 +180,7 @@
 
     &:hover {
       .sidebar-section-hover-button {
-        background: var(--primary-low);
+        background: var(--d-sidebar-highlight-background);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 6177a3c2bde..e941a31aa29 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -15,15 +15,15 @@
 
     .discourse-no-touch & {
       &:hover {
-        background: var(--d-sidebar-highlight-color);
+        background: var(--d-sidebar-highlight-background);
         .d-icon-globe {
-          color: var(--primary-medium);
+          color: var(--d-sidebar-highlight-color);
         }
       }
     }
 
     &:focus-within {
-      background: var(--d-sidebar-highlight-color);
+      background: var(--d-sidebar-highlight-background);
     }
 
     .sidebar-section-header-button {
@@ -49,23 +49,23 @@
 
       .d-icon {
         font-size: var(--font-down-1);
-        color: var(--primary-medium);
+        color: var(--d-sidebar-header-icon-color);
         margin: 0;
       }
 
       &:focus {
         outline: none;
-        background: var(--primary-medium);
+        background: var(--d-sidebar-highlight-hover-background);
         .d-icon {
-          color: var(--primary-very-low);
+          color: var(--d-sidebar-highlight-hover-icon);
         }
       }
 
       .discourse-no-touch & {
         &:hover {
-          background: var(--primary-medium);
+          background: var(--d-sidebar-highlight-hover-background);
           .d-icon {
-            color: var(--primary-very-low);
+            color: var(--d-sidebar-highlight-hover-icon);
           }
         }
       }
@@ -74,7 +74,7 @@
 
   .sidebar-section-header {
     flex: 1 1 auto;
-    color: var(--primary);
+    color: var(--d-sidebar-header-color);
     align-items: center;
     min-width: 0;
     padding: 0;
@@ -106,7 +106,7 @@
 
     svg {
       font-size: var(--font-down-1);
-      color: var(--primary-medium);
+      color: var(--d-sidebar-header-icon-color);
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 794ebfb62a7..8df62e1ea2f 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -9,6 +9,28 @@
   --d-sidebar-row-horizontal-padding: 1.25rem;
   // ems so height is variable along with font size
   --d-sidebar-row-height: 2.1em;
+
+  --d-sidebar-background: var(--secondary);
+  --d-sidebar-prefix-background: var(
+    --primary-low
+  ); // example: chat participant count
+
+  --d-sidebar-header-color: var(--primary);
+  --d-sidebar-header-icon-color: var(--primary-medium);
+
+  --d-sidebar-link-color: var(--primary-high);
+  --d-sidebar-link-icon-color: var(--primary-500);
+  --d-sidebar-link-badge-color: var(--primary-700); // example: new count
+
+  --d-sidebar-highlight-background: var(--primary-low);
+  --d-sidebar-highlight-color: var(--primary-high);
+  --d-sidebar-highlight-prefix-background: var(--primary-300);
+  --d-sidebar-highlight-hover-background: var(
+    --primary-medium
+  ); // example: hovering a button within a highlighted section
+  --d-sidebar-highlight-hover-icon: var(
+    --primary-very-low
+  ); // example: hovering a button within a highlighted section
 }
 
 .sidebar-row {
@@ -20,11 +42,10 @@
 
 .sidebar-wrapper {
   display: flex;
-  --d-sidebar-highlight-color: var(--primary-low);
-  background-color: var(--primary-very-low);
   grid-area: sidebar;
   position: sticky;
   top: var(--header-offset);
+  background: var(--d-sidebar-background);
 
   @include unselectable;
 
@@ -48,6 +69,7 @@
     height: 100%;
     width: 100%;
     padding: 0;
+    border-right: 1px solid var(--primary-low);
     overflow-x: hidden;
     // allows sidebar to scroll to the bottom when the composer is open
     height: calc(100% - var(--composer-height, 0px));
@@ -98,9 +120,9 @@
     .btn-flat.add-section {
       padding: 0.25em 0.4em;
       &:hover {
-        background: var(--d-sidebar-highlight-color);
+        background: var(--d-sidebar-highlight-background);
         svg {
-          color: var(--primary-medium);
+          color: var(--d-sidebar-link-icon-color);
         }
       }
     }
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index e074aed6115..007dd1a1497 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(--d-hover);
+  --d-sidebar-highlight-background: 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
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 93154974f92..247ab540a82 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -15,7 +15,7 @@
 
 .hamburger-panel .revamped {
   --d-sidebar-row-horizontal-padding: 1rem;
-  --d-sidebar-highlight-color: var(--primary-low);
+  --d-sidebar-highlight-backgrond: var(--primary-low);
   box-sizing: border-box;
   padding: 0;