diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 4519e14..97ea6e0 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/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; diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css index 926594e..fd8a270 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css +++ b/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; diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx index 6f64a34..b789a72 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx +++ b/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 (