Merge pull request #24233 from overleaf/dp-dark-breadcrumbs

Add dark mode for breadcrumbs

GitOrigin-RevId: f1425a1da514f74854fd7afe176e27e2b62dae9c

services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts

@@ -1,5 +1,5 @@
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
-import { showPanel } from '@codemirror/view'
+import { EditorView, showPanel } from '@codemirror/view'
 
 export function createBreadcrumbsPanel() {
   const dom = document.createElement('div')
@@ -7,6 +7,36 @@ export function createBreadcrumbsPanel() {
   return { dom, top: true }
 }
 
+const breadcrumbsTheme = EditorView.baseTheme({
+  '.ol-cm-breadcrumbs': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--spacing-01)',
+    fontSize: 'var(--font-size-01)',
+    padding: 'var(--spacing-02)',
+    overflow: 'auto',
+    scrollbarWidth: 'thin',
+    '& > *': {
+      flexShrink: '0',
+    },
+  },
+  '&light .ol-cm-breadcrumbs': {
+    color: 'var(--content-secondary)',
+    backgroundColor: 'var(--bg-light-primary)',
+    borderBottom: '1px solid #ddd',
+  },
+  '&light .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-30)',
+  },
+  '&dark .ol-cm-breadcrumbs': {
+    color: 'var(--content-secondary-dark)',
+    backgroundColor: 'var(--bg-dark-primary)',
+  },
+  '&dark .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-50)',
+  },
+})
+
 /**
  * A panel which contains the editor breadcrumbs
  */
@@ -15,5 +45,5 @@ export const breadcrumbPanel = () => {
     return []
   }
 
-  return [showPanel.of(createBreadcrumbsPanel)]
+  return [showPanel.of(createBreadcrumbsPanel), breadcrumbsTheme]
 }

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -44,4 +44,3 @@
 @import 'upgrade-prompt';
 @import 'integrations-panel';
 @import 'group-members';
-@import 'breadcrumbs';

services/web/frontend/stylesheets/bootstrap-5/components/breadcrumbs.scss

@@ -1,25 +0,0 @@
-:root {
-  --breadcrumb-bg-color: var(--white);
-  --breadcrumb-color: var(--content-secondary);
-  --breadcrumb-chevron-color: var(--neutral-30);
-}
-
-.ol-cm-breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-01);
-  color: var(--breadcrumb-color);
-  background-color: var(--breadcrumb-bg-color);
-  font-size: var(--font-size-01);
-  padding: var(--spacing-02);
-  overflow: auto;
-  scrollbar-width: thin;
-
-  & > * {
-    flex-shrink: 0;
-  }
-}
-
-.ol-cm-breadcrumb-chevron {
-  color: var(--breadcrumb-chevron-color);
-}

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

@@ -32,7 +32,7 @@
   --editor-toolbar-bg: var(--bg-dark-primary);
   --toolbar-filetree-bg-color: var(--neutral-80);
 
-  .toolbar {
+  .cm-panels-top {
     border-bottom: none;
   }
 }
@@ -64,10 +64,6 @@
     --toolbar-btn-hover-color: var(--white);
     --editor-toolbar-bg: var(--white);
     --toolbar-filetree-bg-color: var(--white);
-  }
-
-  .cm-panels-top {
-    border-bottom: none;
 
     .ol-cm-toolbar-portal {
       border-bottom: 1px solid #ddd;