DEV: fix and improve sidebar CSS variables (#30673)

app/assets/stylesheets/common/base/sidebar-footer.scss

@@ -24,8 +24,8 @@
       pointer-events: none;
       background: linear-gradient(
         to bottom,
-        rgba(var(--secondary-rgb), 0),
+        transparent,
-        rgba(var(--secondary-rgb), 1)
+        var(--d-sidebar-footer-fade)
       );
     }
   }

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -2,7 +2,7 @@
   background-color: var(--d-sidebar-background);
   transition: background-color 0.25s;
   box-shadow: var(--shadow-card);
-  border: 1px solid var(--primary-low);
+  border: 1px solid var(--d-sidebar-border-color);
   margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
 
   .sidebar-row {
@@ -16,7 +16,7 @@
 }
 
 .sidebar-more-section-links-details-content-footer {
-  border-top: 2px solid var(--primary-low);
+  border-top: 2px solid var(--d-sidebar-border-color);
   display: flex;
   width: 100%;
 

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -34,24 +34,33 @@
     &:focus,
     &:hover {
       background: var(--d-sidebar-highlight-background);
+      color: var(--d-sidebar-highlight-color);
       outline: none;
       .prefix-text {
         background: var(--d-sidebar-highlight-prefix-background);
       }
+      .sidebar-section-link-suffix.icon.unread svg {
+        color: var(--d-sidebar-highlight-suffix-color);
+      }
     }
 
     &--active,
     &.active {
-      background: var(--d-selected);
+      background: var(--d-sidebar-active-background);
+      color: var(--d-sidebar-active-color);
       font-weight: bold;
 
       .sidebar-section-link-prefix {
         &.icon {
-          color: var(--d-sidebar-highlight-color);
+          color: var(--d-sidebar-active-color);
         }
       }
+      .sidebar-section-link-content-badge,
+      .sidebar-section-link-suffix.icon.unread svg {
+        color: var(--d-sidebar-active-suffix-color);
+      }
       .sidebar-section-link-hover:hover .sidebar-section-hover-button {
-        background-color: var(--d-selected);
+        background-color: var(--d-sidebar-active-background);
       }
     }
 
@@ -87,7 +96,7 @@
         }
 
         &.unread svg {
-          color: var(--tertiary-med-or-tertiary);
+          color: var(--d-sidebar-suffix-color);
         }
       }
     }
@@ -196,6 +205,7 @@
     justify-content: center;
     border-radius: 100%;
     background: var(--d-sidebar-prefix-background);
+    color: var(--d-sidebar-prefix-color);
     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);
@@ -206,7 +216,7 @@
 
     .sidebar-section-hover-button {
       display: none;
-      color: var(--d-sidebar-link-icon-color);
+      color: var(--d-sidebar-highlight-color);
       border: none;
       background: transparent;
       padding: 0 0 0 0.5em;

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -66,7 +66,7 @@
     min-width: 0;
     padding: 0;
     font-size: var(--font-down-2-rem);
-    color: var(--primary-medium);
+    color: var(--d-sidebar-header-color);
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -75,7 +75,10 @@
       justify-content: flex-start;
 
       &:hover {
-        color: var(--primary-medium);
+        color: var(--d-sidebar-header-color);
+        .d-icon {
+          color: var(--d-sidebar-header-icon-color);
+        }
       }
 
       &:focus {

app/assets/stylesheets/common/base/sidebar.scss

@@ -3,35 +3,54 @@
   @include breakpoint(large) {
     --d-sidebar-width: #{$d-sidebar-narrow-width};
   }
-  --d-sidebar-animation-time: 0.25s;
-  --d-sidebar-animation-ease: ease-in-out;
-  // 1.25rem gets text left-aligned with the hamburger icon
   --d-sidebar-row-horizontal-padding: 1rem;
   // ems so height is variable along with font size
   --d-sidebar-row-height: 2.2em;
 
+  --d-sidebar-animation-time: 0.25s;
+  --d-sidebar-animation-ease: ease-in-out;
+
   --d-sidebar-background: var(--secondary);
   --d-sidebar-admin-background: var(--primary-very-low);
-  --d-sidebar-prefix-background: var(
-    --primary-low
-  ); // example: chat participant count
 
-  --d-sidebar-header-color: var(--primary);
+  // must be rgba for gradient
+  --d-sidebar-footer-fade: rgba(var(--secondary-rgb), 1);
+
+  --d-sidebar-header-color: var(--primary-medium);
   --d-sidebar-header-icon-color: var(--primary-medium);
 
+  --d-sidebar-border-color: var(--primary-low);
+
   --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
 
+  // example: chat participant count
+  --d-sidebar-prefix-background: var(--primary-low);
+  --d-sidebar-prefix-color: var(--d-sidebar-link-color);
+
+  // example: unread dot
+  --d-sidebar-suffix-color: var(--tertiary-med-or-tertiary);
+
+  // highlight applies to both hover and focus states
   --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-prefix-color: var(--d-sidebar-highlight-color);
+  --d-sidebar-highlight-suffix-color: var(--tertiary-med-or-tertiary);
+
   --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
+
+  --d-sidebar-active-background: var(--d-selected);
+  --d-sidebar-active-color: var(--d-sidebar-link-color);
+  --d-sidebar-active-icon-color: var(--d-sidebar-link-color);
+  --d-sidebar-active-prefix-background: var(--primary-300);
+  --d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
 }
 
 .sidebar-row {

app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss

@@ -1,6 +1,6 @@
 .sidebar-section-wrapper {
   padding-block: 0.35rem;
-  border-bottom: 1px solid var(--secondary-very-high);
+  border-bottom: 1px solid var(--d-sidebar-border-color);
   &:first-child {
     padding-top: 0;
   }