adjust light theme

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

@@ -11,16 +11,23 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 
-[data-theme='dark'] {
+:root {
   background-color: transparent !important;
 
+  --ifm-menu-color-background-active: transparent;
   --content-padding: 32px;
-
-  --ifm-color-scheme: dark;
   --ifm-navbar-link-color: rgb(var(--lsd-text-primary));
   --ifm-navbar-background-color: rgb(var(--lsd-surface-primary));
   --ifm-dropdown-link-color: rgb(var(--lsd-text-primary));
   --ifm-dropdown-hover-background-color: rgb(var(--lsd-surface-secondary));
+  --ifm-background-color: rgb(var(--lsd-surface-primary));
+
+  --ifm-color-white: #fff;
+  --ifm-color-black: #000;
+
+  --ifm-color-primary: rgb(var(--lsd-theme-primary));
+  --ifm-color-secondary: rgb(var(--lsd-theme-secondary));
+  --prism-background-color: rgb(var(--lsd-theme-primary));
 
   /* Colors. */
   /*--ifm-dark-value: 10%;*/
@@ -30,14 +37,6 @@
   /*--ifm-lighter-value: -30%;*/
   /*--ifm-lightest-value: -50%;*/
 
-  --ifm-background-color: rgb(var(--lsd-surface-primary));
-
-  --ifm-color-white: #fff;
-  --ifm-color-black: #000;
-
-  --ifm-color-primary: rgb(var(--lsd-theme-primary));
-  --ifm-color-secondary: rgb(var(--lsd-theme-secondary));
-
   --ifm-color-gray-0: rgb(var(--lsd-surface-primary));
   --ifm-color-gray-100: #f8f8fa;
   --ifm-color-gray-200: #f7f7f8;
@@ -227,6 +226,26 @@
 
   --ifm-hero-background-color: #f8f8fa;
   --ifm-hero-text-color: var(--ifm-color-black);
+
+  .navbar {
+    box-shadow: none;
+  }
+
+  .dropdown__link--active {
+    background-color: transparent;
+  }
+}
+
+[data-theme='dark'] {
+  --ifm-color-scheme: dark;
+
+  .navbar__logo img {
+    filter: invert(1);
+  }
+}
+
+[data-theme='light'] {
+  --ifm-color-scheme: light;
 }
 
 @include utils.responsive('lg', 'down') {
@@ -362,11 +381,12 @@ small {
 
 .breadcrumbs__link {
   padding: 0;
+  background: transparent !important;
 }
 
 .navbar {
   padding-inline: 0;
-  height: 80px;
+  height: 64px;
 }
 
 .navbar__inner {
@@ -379,11 +399,6 @@ small {
   margin: 0;
 }
 
-// TODO temporary style fix for the logo
-.navbar__logo img {
-  filter: invert(1);
-}
-
 .theme-doc-version-banner * {
   color: #fff;
   text-decoration-color: #fff !important;
@@ -394,7 +409,7 @@ small {
   text-decoration-color: #fff !important;
 }
 
-.navbar__left-items > a:not(:last-child)[aria-current='page'] {
+.navbar__left-items > a:not(:last-child)[href^='/'] {
   &:after {
     content: '•';
     margin-left: 16px;
@@ -524,7 +539,7 @@ small {
     justify-content: center;
     margin: 0;
     border: 1px solid rgb(var(--lsd-border-primary));
-    border-left: none;
+    // border-left: none;
     width: 32px;
     height: 32px;
     box-sizing: border-box;

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

@@ -13,7 +13,7 @@
 }
 
 .codeBlock {
-  --ifm-pre-background: var(--prism-background-color);
+  --ifm-pre-background: transparent;
   margin: 0;
   padding: 0;
 }
@@ -58,7 +58,7 @@
 .buttonGroup button {
   display: flex;
   align-items: center;
-  background: var(--prism-background-color);
+  background: transparent;
   color: var(--prism-color);
   border: 1px solid rgb(var(--lsd-border-primary));
   line-height: 0;

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

@@ -9,6 +9,7 @@ import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
 import styles from './styles.module.css'
 import { Typography } from '@acid-info/lsd-react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 
 // TODO move to design system folder
 function BreadcrumbsItemLink({ children, href, isLast }) {
@@ -65,10 +66,15 @@ function BreadcrumbsItem({ children, active, index, addMicrodata }) {
 export default function DocBreadcrumbs() {
   const breadcrumbs = useSidebarBreadcrumbs()
   const homePageRoute = useHomePageRoute()
+  const { siteConfig } = useDocusaurusContext()
+
   if (!breadcrumbs) {
     return null
   }
 
+  //@ts-ignore
+  const routeBasePath = siteConfig.presets[0][1].docs.routeBasePath
+
   return (
     <nav
       className={clsx(
@@ -91,7 +97,7 @@ export default function DocBreadcrumbs() {
             className={clsx('breadcrumbs__item')}
             variant="body3"
             component="a"
-            href="/"
+            href={routeBasePath}
           >
             Home
           </Typography>

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx

@@ -9,7 +9,7 @@ import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal'
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'
 import NavbarItem from '@theme/NavbarItem'
 import { ArrowDownIcon } from '@acid-info/lsd-react'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 function isItemActive(item, localPathname) {
   if (isSamePath(item.to, localPathname)) {

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/styles.module.scss

@@ -1,6 +1,14 @@
+@use '../../../css/utils';
+
 .dropdownNavbarItem {
   border: 1px solid rgb(var(--lsd-border-primary));
   padding: 6px 14px;
   box-sizing: border-box;
   height: 32px;
 }
+
+@include utils.responsive('lg', 'down') {
+  .dropdownNavbarItem {
+    display: none;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx

@@ -3,7 +3,7 @@ import Link from '@docusaurus/Link'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import isInternalUrl from '@docusaurus/isInternalUrl'
 import { isRegexpStringMatch } from '@docusaurus/theme-common'
-import { PickIcon } from '@acid-info/lsd-react'
+import { PickIcon, Typography } from '@acid-info/lsd-react'
 import styles from './styles.module.css'
 
 export default function NavbarNavLink({
@@ -29,10 +29,14 @@ export default function NavbarNavLink({
     ? { dangerouslySetInnerHTML: { __html: html } }
     : {
         children: (
-          <div className={styles.linkContent}>
+          <Typography
+            component="div"
+            variant="body2"
+            className={styles.linkContent}
+          >
             {label}
             {isExternalLink && <PickIcon color="primary" />}
-          </div>
+          </Typography>
         ),
       }
 

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

@@ -2,4 +2,5 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  text-decoration: underline;
 }