[Bug] Fix Global Breadcrumb Styling in dark mode (#2085) (#2097)

Issue:
#2072

Issue with dark mode theme not being applied to breadcrumbs.

Signed-off-by: kaddy645 <[email protected]>
(cherry picked from commit 75db369)

Co-authored-by: Kartik Desai <[email protected]>

src/core/public/_variables.scss

@@ -4,3 +4,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 $osdHeaderBreadcrumbBlueBackground: #b9d9eb;
 $osdHeaderBreadcrumbGrayBackground: #d9e1e2;
 $osdHeaderBreadcrumbCollapsedLink: #002a3a;
+$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66;
+$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f;
+$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5;
+$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb;

src/core/public/chrome/ui/header/header.tsx

@@ -112,7 +112,7 @@ export function Header({
   const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const navId = htmlIdGenerator()();
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
-  const { useExpandedHeader = true } = branding;
+  const { useExpandedHeader = true, darkMode } = branding;
 
   return (
     <>
@@ -194,6 +194,7 @@ export function Header({
             <HeaderBreadcrumbs
               appTitle$={observables.appTitle$}
               breadcrumbs$={observables.breadcrumbs$}
+              isDarkMode={darkMode}
             />
 
             <EuiHeaderSectionItem border="none">

src/core/public/chrome/ui/header/header_breadcrumbs.scss

@@ -13,43 +13,95 @@ $breadcrumbPolygon: polygon(
   0% 100%
 );
 
-.osdHeaderBreadcrumbs {
-  /*
-  filter defines a custom filter effect by grouping atomic filter primitives!
-  here we are using Gaussian filter with stdDeviation for applying
-  border-radius on clipped background.
-  */
-
-  filter: url("../../public/assets/round_filter.svg#round");
+/* remove background color on autofocus for euiBreadcrumbs in Popover */
+.euiBreadcrumbs__inPopover {
+  .euiLink.euiLink--text:focus {
+    background: none;
+  }
+}
 
-  .osdBreadcrumbs {
+.osdHeaderBreadcrumbs {
+  /* common for both light & dark theme */
+  .osdBreadcrumbs,
+  &--dark .osdBreadcrumbs {
     clip-path: $breadcrumbPolygon;
-    background-color: $osdHeaderBreadcrumbGrayBackground;
     padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS;
 
     &:first-child {
       clip-path: $firstBreadcrumbPolygon;
     }
+  }
+
+  .osdBreadcrumbs {
+    background-color: $osdHeaderBreadcrumbGrayBackground;
 
     &:last-child {
       background-color: $osdHeaderBreadcrumbBlueBackground;
     }
   }
 
-  .euiBreadcrumbSeparator {
-    display: none;
-  }
-
+  /* only light mode */
   .euiBreadcrumb__collapsedLink {
     color: $osdHeaderBreadcrumbCollapsedLink;
     background: $euiColorEmptyShade;
   }
 
-  .euiPopover__anchor {
-    padding: 0 $euiSizeS;
+  .euiLink.euiLink--subdued:focus {
+    background: $euiColorEmptyShade;
+    outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbBlueBackground;
   }
 
-  .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
-    margin-right: 0;
+  /* common for dark & light mode */
+  &,
+  &--dark {
+    /*
+  filter defines a custom filter effect by grouping atomic filter primitives!
+  here we are using Gaussian filter with stdDeviation for applying
+  border-radius on clipped background.
+  */
+    filter: url("../../public/assets/round_filter.svg#round");
+
+    button {
+      line-height: inherit;
+    }
+
+    .euiBreadcrumbSeparator {
+      display: none;
+    }
+
+    .euiPopover__anchor {
+      padding: 0 $euiSizeS;
+    }
+
+    .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
+      margin-right: 0;
+    }
+  }
+
+  /* only dark mode */
+  &--dark {
+    .osdBreadcrumbs {
+      background-color: $osdHeaderBreadcrumbMidnightSkyMediumBackground;
+      color: $osdHeaderBreadcrumbMidnightSkyMediumLightColor;
+
+      &:hover {
+        color: $osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor;
+      }
+
+      &:last-child {
+        background-color: $osdHeaderBreadcrumbPacificSkyDarkestBackground;
+        color: $euiColorFullShade;
+      }
+    }
+
+    .euiBreadcrumb__collapsedLink {
+      color: $euiColorGhost;
+      background: $euiColorEmptyShade;
+    }
+
+    .euiLink.euiLink--subdued:focus {
+      background: $euiColorEmptyShade;
+      outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbPacificSkyDarkestBackground;
+    }
   }
 }

src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx

@@ -38,7 +38,11 @@ describe('HeaderBreadcrumbs', () => {
   it('renders updates to the breadcrumbs$ observable', () => {
     const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]);
     const wrapper = mount(
-      <HeaderBreadcrumbs appTitle$={new BehaviorSubject('')} breadcrumbs$={breadcrumbs$} />
+      <HeaderBreadcrumbs
+        appTitle$={new BehaviorSubject('')}
+        breadcrumbs$={breadcrumbs$}
+        isDarkMode={false}
+      />
     );
     expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
 

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -40,11 +40,13 @@ import './header_breadcrumbs.scss';
 interface Props {
   appTitle$: Observable<string>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
+  isDarkMode?: boolean;
 }
 
-export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
+export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
   const breadcrumbs = useObservable(breadcrumbs$, []);
+  const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs';
   let crumbs = breadcrumbs;
 
   if (breadcrumbs.length === 0 && appTitle) {
@@ -67,7 +69,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
       breadcrumbs={crumbs}
       max={10}
       data-test-subj="breadcrumbs"
-      className="osdHeaderBreadcrumbs"
+      className={className}
     />
   );
 }