Merge pull request #24133 from overleaf/mj-ide-selected-colors

[web] Editor redesign: Update selected states

GitOrigin-RevId: a43f4504c14c536850ce97c6259bf5d4d67b5418

services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss

@@ -23,8 +23,8 @@
 
   .ide-redesign-main {
     --file-tree-item-hover-bg: var(--bg-light-secondary);
-    --file-tree-item-selected-bg: var(--bg-dark-primary);
-    --file-tree-item-selected-color: var(--white);
+    --file-tree-item-selected-bg: var(--bg-accent-03);
+    --file-tree-item-selected-color: var(--green-70);
     --file-tree-item-color: var(--content-primary);
     --file-tree-bg: var(--white);
     --file-tree-icon-colour: var(--content-primary);

services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss

@@ -8,6 +8,7 @@
   --outline-content-color: var(--content-primary-dark);
   --outline-item-highlight-bg: var(--neutral-60);
   --outline-item-highlight-color: var(--content-primary-dark);
+  --outline-item-highlight-font-weight: normal;
   --outline-item-carat-color: var(--content-disabled);
 }
 
@@ -21,6 +22,7 @@
   --outline-content-color: var(--content-secondary);
   --outline-item-highlight-bg: var(--bg-light-secondary);
   --outline-item-highlight-color: var(--content-secondary);
+  --outline-item-highlight-font-weight: normal;
   --outline-item-carat-color: var(--content-disabled);
 
   .ide-redesign-main {
@@ -28,8 +30,9 @@
     --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-light-secondary);
-    --outline-item-highlight-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,
@@ -51,6 +54,7 @@
   --outline-content-color: var(--content-primary-dark);
   --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);
 
   .file-outline-panel {
@@ -316,6 +320,7 @@
 .outline-item-link-highlight {
   background-color: var(--outline-item-highlight-bg);
   color: var(--outline-item-highlight-color);
+  font-weight: var(--outline-item-highlight-font-weight);
 }
 
 .outline-caret-icon {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/settings.scss

@@ -37,8 +37,9 @@
   }
 
   &.active {
-    color: #fff;
-    background-color: var(--neutral-90);
+    color: var(--green-70);
+    background-color: var(--bg-accent-03);
+    font-weight: bold;
   }
 }