Merge pull request #28123 from overleaf/dp-file-outline-hover

Use themed variables to fix hover color in dark mode for file outline header

GitOrigin-RevId: e6045ab74d0afe6429c2e1b3caf04ae0eb0b857b

services/web/frontend/stylesheets/pages/editor/outline.scss

@@ -26,36 +26,30 @@
   --outline-item-carat-color: var(--content-disabled);
 
   .ide-redesign-main {
-    --outline-bg-color: var(--bg-light-primary);
-    --outline-item-hover-bg: var(--bg-light-secondary);
-    --outline-header-hover-bg: var(--bg-light-secondary);
-    --outline-content-color: var(--content-primary);
     --outline-item-highlight-bg: var(--bg-accent-03);
     --outline-item-highlight-color: var(--green-70);
     --outline-item-highlight-font-weight: bold;
-    --outline-item-carat-color: var(--content-primary);
     --outline-line-guide-color: color-mix(
       in srgb,
       var(--border-primary) 24%,
       transparent
     );
-    --outline-container-color-bg: var(--bg-light-primary);
   }
 }
 
 // TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
 .ide-redesign-main {
-  --outline-bg-color: var(--bg-dark-primary);
-  --outline-border-color: var(--border-disabled-dark);
-  --outline-header-hover-bg: var(--bg-dark-primary);
-  --outline-item-hover-bg: var(--bg-dark-secondary);
+  --outline-bg-color: var(--bg-primary-themed);
+  --outline-border-color: var(--border-disabled-themed);
+  --outline-header-hover-bg: var(--bg-secondary-themed);
+  --outline-item-hover-bg: var(--bg-secondary-themed);
   --outline-line-guide-color: var(--border-primary);
-  --outline-container-color-bg: var(--bg-dark-primary);
-  --outline-content-color: var(--content-primary-dark);
+  --outline-container-color-bg: var(--bg-primary-themed);
+  --outline-content-color: var(--content-primary-themed);
   --outline-item-highlight-bg: var(--green-70);
   --outline-item-highlight-color: var(--green-10);
   --outline-item-highlight-font-weight: bold;
-  --outline-item-carat-color: var(--content-disabled);
+  --outline-item-carat-color: var(--content-primary-themed);
 
   .file-outline-panel {
     min-height: 36px;
@@ -73,6 +67,7 @@
   .outline-header-expand-collapse-btn {
     border-radius: var(--border-radius-base);
     padding: var(--spacing-02);
+    box-shadow: none;
   }
 
   .outline-header-name {