Merge pull request #34453 from overleaf/mj-outline-style-cleanup

[web] Clean up outline styles post-editor redesign

GitOrigin-RevId: 43ac3aae6be79fe0844add32cb01d465db82b29e

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

@@ -1,129 +1,28 @@
 :root {
-  --outline-bg-color: var(--bg-dark-secondary);
-  --outline-border-color: var(--border-disabled-dark);
-  --outline-header-hover-bg: var(--bg-dark-primary);
-  --outline-item-hover-bg: var(--bg-dark-secondary);
   --outline-line-guide-color: var(--border-primary);
-  --outline-container-color-bg: var(--bg-dark-tertiary);
-  --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);
+  --outline-item-highlight-bg: var(--green-70);
+  --outline-item-highlight-color: var(--green-10);
 }
 
 @include theme('light') {
-  --outline-bg-color: var(--bg-light-primary);
-  --outline-border-color: var(--border-disabled);
-  --outline-item-hover-bg: var(--bg-light-tertiary);
-  --outline-header-hover-bg: var(--bg-light-tertiary);
-  --outline-line-guide-color: var(--border-disabled);
-  --outline-container-color-bg: var(--bg-light-primary);
-  --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 {
-    --outline-item-highlight-bg: var(--bg-accent-03);
-    --outline-item-highlight-color: var(--green-70);
-    --outline-item-highlight-font-weight: bold;
-    --outline-line-guide-color: color-mix(
-      in srgb,
-      var(--border-primary) 24%,
-      transparent
-    );
-  }
+  --outline-item-highlight-bg: var(--bg-accent-03);
+  --outline-item-highlight-color: var(--green-70);
+  --outline-line-guide-color: color-mix(
+    in srgb,
+    var(--border-primary) 24%,
+    transparent
+  );
+}
+
+.file-outline-panel {
+  min-height: 36px;
 }
 
-// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
-.ide-redesign-main {
-  --outline-bg-color: var(--bg-primary-themed);
-  --outline-border-color: var(--border-disabled-themed);
-  --outline-header-hover-bg: var(--bg-secondary-themed);
+.outline-container {
   --outline-item-hover-bg: var(--bg-secondary-themed);
-  --outline-line-guide-color: var(--border-primary);
   --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-primary-themed);
-
-  .file-outline-panel {
-    min-height: 36px;
-  }
-
-  .outline-pane {
-    padding: 4px;
-  }
-
-  .outline-header {
-    border: none;
-    height: unset;
-  }
-
-  .outline-header-expand-collapse-btn {
-    border-radius: var(--border-radius-base);
-    padding: var(--spacing-02);
-    box-shadow: none;
-  }
-
-  .outline-header-name {
-    font-weight: bold;
-    font-size: var(--font-size-02);
-    line-height: var(--line-height-02);
-  }
-
-  .outline-carat-icon {
-    font-size: unset;
-  }
-
-  .outline-body {
-    padding-right: 0;
-  }
-
-  .outline-body-no-elements {
-    margin-right: 0;
-  }
-
-  .outline-item-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-02);
-    margin-top: var(--spacing-02);
-
-    &::before {
-      left: var(--spacing-06);
-    }
-  }
-
-  .outline-item-list-root {
-    &::before {
-      content: none;
-    }
-  }
-
-  .outline-item-expand-collapse-btn {
-    display: flex;
-    align-items: center;
-    padding: var(--spacing-02);
-  }
-
-  .outline-item-no-children {
-    padding-left: 26px;
-  }
-
-  .outline-item-link {
-    flex-grow: 1;
-    padding: var(--spacing-02);
-    font-size: var(--font-size-02);
-    line-height: var(--line-height-02);
-  }
-}
 
-.outline-container {
   width: 100%;
   height: 100%;
   background-color: var(--outline-container-color-bg);
@@ -136,43 +35,18 @@
   flex-flow: column;
   height: 100%;
   color: var(--content-primary-dark);
+  padding: 4px;
 }
 
 .outline-pane-disabled {
   opacity: 0.5;
 }
 
-.documentation-btn-container {
-  @include toolbar-sm-height;
-
-  background-color: var(--outline-bg-color);
-  display: flex;
-  align-items: center;
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
-
-  & *,
-  & :hover {
-    color: var(--content-primary-dark);
-    text-decoration: none;
-  }
-
-  &:hover {
-    background-color: var(--bg-dark-primary);
-  }
-}
-
-.documentation-close {
-  padding: 0;
-}
-
 .outline-header {
-  @include toolbar-sm-height;
-
-  background-color: var(--outline-bg-color);
+  background-color: var(--bg-primary-themed);
   display: flex;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--outline-border-color);
-  border-top: 1px solid var(--outline-border-color);
+  border: none;
 }
 
 .outline-header-expand-collapse-btn {
@@ -181,13 +55,14 @@
   align-items: center;
   background-color: transparent;
   border: 0;
-  padding: 0 var(--spacing-03) 0 0;
+  padding: var(--spacing-02);
   font-size: inherit;
   vertical-align: inherit;
   flex: 1 0 100%;
   text-align: left;
   white-space: nowrap;
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
+  box-shadow: none;
+  border-radius: var(--border-radius-base);
 
   &:hover,
   &:focus {
@@ -195,7 +70,7 @@
   }
 
   &:hover {
-    background-color: var(--outline-header-hover-bg);
+    background-color: var(--bg-secondary-themed);
   }
 
   &:hover[disabled] {
@@ -219,7 +94,7 @@
 .outline-body {
   background-color: var(--outline-container-color-bg);
   overflow-y: auto;
-  padding-right: var(--spacing-03);
+  padding-right: 0;
 }
 
 .outline-body-no-elements {
@@ -227,7 +102,6 @@
   text-align: center;
   padding: var(--spacing-08) var(--spacing-08) var(--spacing-11)
     var(--spacing-08);
-  margin-right: calc(var(--spacing-03) * -1);
 }
 
 .outline-body-link {
@@ -246,6 +120,10 @@
   position: relative;
   list-style: none;
   padding-left: var(--spacing-08);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-02);
+  margin-top: var(--spacing-02);
 
   &::before {
     content: '';
@@ -253,7 +131,7 @@
     top: var(--spacing-03);
     bottom: var(--spacing-03);
     width: 1px;
-    left: var(--spacing-10);
+    left: var(--spacing-06);
     position: absolute;
   }
 
@@ -261,13 +139,13 @@
     padding-left: 0;
 
     &::before {
-      left: var(--spacing-05);
+      content: none;
     }
   }
 }
 
 .outline-item-no-children {
-  padding-left: var(--spacing-07);
+  padding-left: 26px;
 }
 
 .outline-item-row {
@@ -278,13 +156,14 @@
 
 .outline-item-expand-collapse-btn {
   background-color: var(--outline-container-color-bg);
-  display: inline;
+  display: flex;
+  align-items: center;
   border: 0;
-  padding: 0;
+  padding: var(--spacing-02);
   font-size: inherit;
   vertical-align: inherit;
   position: relative;
-  color: var(--outline-item-carat-color);
+  color: var(--content-primary-themed);
   margin-right: calc(var(--spacing-03) * -1);
   border-radius: var(--border-radius-base);
 
@@ -306,10 +185,12 @@
   background-color: transparent;
   border: 0;
   position: relative;
-  padding: 0 var(--spacing-03);
-  line-height: var(--spacing-08);
+  padding: var(--spacing-02);
+  line-height: var(--line-height-02);
+  font-size: var(--font-size-02);
   border-radius: var(--border-radius-base);
   text-align: left;
+  flex-grow: 1;
 
   &:hover,
   &:focus {
@@ -321,7 +202,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);
+  font-weight: bold;
 }
 
 .outline-caret-icon {