update breadcrumb css

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -334,12 +334,32 @@ small {
   color: rgb(var(--lsd-text-secondary));
 }
 
+.breadcrumbs__item {
+  opacity: 0.7;
+}
+
+.breadcrumbs__item--active {
+  opacity: 1;
+}
+
+.breadcrumbs__item:not(:last-child):after {
+  content: '/';
+  opacity: 1;
+}
+
+.breadcrumbs__link {
+  padding: 0;
+}
+
 .navbar {
-  padding-block: 24px;
   padding-inline: 0;
   height: 80px;
 }
 
+.navbar__inner {
+  align-items: center;
+}
+
 .row {
   position: relative;
 }
@@ -359,6 +379,34 @@ small {
   text-decoration-color: #fff !important;
 }
 
+div.w-10 > a {
+  padding-left: 0;
+  padding-right: 16px;
+}
+
+div.w-10 > a:not(:last-child) {
+  &:after {
+    content: '•';
+    margin-left: 16px;
+    text-decoration: none;
+    display: inline-block;
+  }
+}
+
+.menu__link--active {
+  border-left: 1px solid rgb(var(--lsd-border-primary));
+  border-radius: 0;
+}
+
+.menu__list-item-collapsible > a {
+  border: none !important;
+}
+
+.table-of-contents__link--active code {
+  color: rgb(var(--lsd-text-secondary)) !important;
+  opacity: 0.7;
+}
+
 @media (max-width: 576px) {
   :root {
     --ifm-global-spacing: 0.5rem;

packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import {
+  useSidebarBreadcrumbs,
+  useHomePageRoute,
+} from '@docusaurus/theme-common/internal'
+import Link from '@docusaurus/Link'
+import { translate } from '@docusaurus/Translate'
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'
+import styles from './styles.module.css'
+import { Typography } from '@acid-info/lsd-react'
+
+// TODO move to design system folder
+function BreadcrumbsItemLink({ children, href, isLast }) {
+  const className = 'breadcrumbs__link'
+  if (isLast) {
+    return (
+      <Typography
+        variant="body3"
+        component="span"
+        className={className}
+        itemProp="name"
+      >
+        {children}
+      </Typography>
+    )
+  }
+  return href ? (
+    <Link className={className} href={href} itemProp="item">
+      <Typography variant="body3" component="span" itemProp="name">
+        {children}
+      </Typography>
+    </Link>
+  ) : (
+    // TODO Google search console doesn't like breadcrumb items without href.
+    // The schema doesn't seem to require `id` for each `item`, although Google
+    // insist to infer one, even if it's invalid. Removing `itemProp="item
+    // name"` for now, since I don't know how to properly fix it.
+    // See https://github.com/facebook/docusaurus/issues/7241
+    <Typography variant="body3" component="span" className={className}>
+      {children}
+    </Typography>
+  )
+}
+
+// TODO move to design system folder
+function BreadcrumbsItem({ children, active, index, addMicrodata }) {
+  return (
+    <li
+      {...(addMicrodata && {
+        itemScope: true,
+        itemProp: 'itemListElement',
+        itemType: 'https://schema.org/ListItem',
+      })}
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}
+    >
+      {children}
+      <meta itemProp="position" content={String(index + 1)} />
+    </li>
+  )
+}
+
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs()
+  const homePageRoute = useHomePageRoute()
+  if (!breadcrumbs) {
+    return null
+  }
+
+  return (
+    <nav
+      className={clsx(
+        ThemeClassNames.docs.docBreadcrumbs,
+        styles.breadcrumbsContainer,
+      )}
+      aria-label={translate({
+        id: 'theme.docs.breadcrumbs.navAriaLabel',
+        message: 'Breadcrumbs',
+        description: 'The ARIA label for the breadcrumbs',
+      })}
+    >
+      <ul
+        className="breadcrumbs"
+        itemScope
+        itemType="https://schema.org/BreadcrumbList"
+      >
+        {homePageRoute && <HomeBreadcrumbItem />}
+        {breadcrumbs.map((item, idx) => {
+          const isLast = idx === breadcrumbs.length - 1
+          return (
+            <BreadcrumbsItem
+              key={idx}
+              active={isLast}
+              index={idx}
+              addMicrodata={!!item.href}
+            >
+              <BreadcrumbsItemLink href={item.href} isLast={isLast}>
+                {item.label}
+              </BreadcrumbsItemLink>
+            </BreadcrumbsItem>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css

@@ -0,0 +1,4 @@
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css

@@ -17,6 +17,7 @@
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   gap: 16px;
+  padding-left: 12px; /* Temporary offset */
 }
 
 .toc {