Remove bold.

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

Author: bgravenorst

src/scss/theme/_sidebar.scss

@@ -1,6 +1,15 @@
 .menu {
   /* Sidebar "guide line" (vertical tree line) color */
   --doc-sidebar-guide-line-color: var(--ifm-toc-border-color);
+  /* Single source of truth for the tree-line X position (used by lines + selected highlight) */
+  --doc-sidebar-line-x: 1.6rem;
+  /* Selected item background tint (fallback first, then color-mix for nicer tinting) */
+  --doc-sidebar-selected-bg: rgba(186, 242, 74, 0.10);
+  --doc-sidebar-selected-bg: color-mix(in srgb, var(--ifm-color-primary) 14%, transparent);
+
+  @include bp('tablet') {
+    --doc-sidebar-line-x: 2.4rem;
+  }
 
   &.thin-scrollbar {
     padding: 1rem 0 0;
@@ -16,6 +25,11 @@
   }
 
   &__list {
+    /* The tree line is positioned relative to the list's padding box.
+     * We store the current list padding-left so selected-row highlights can
+     * compute a matching x-offset in the row coordinate space. */
+    --doc-sidebar-list-padding-left: 0px;
+
     padding-top: 0;
     padding-bottom: 0;
 
@@ -26,9 +40,11 @@
 
     .theme-doc-sidebar-item-category-level-1 & {
       padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 4);
+      --doc-sidebar-list-padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 4);
 
       @include bp('tablet') {
         padding-left: var(--ifm-menu-link-padding-horizontal);
+        --doc-sidebar-list-padding-left: var(--ifm-menu-link-padding-horizontal);
       }
     }
 
@@ -38,9 +54,11 @@
     .theme-doc-sidebar-item-category-level-5 &,
     .theme-doc-sidebar-item-category-level-6 & {
       padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 4);
+      --doc-sidebar-list-padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 4);
 
       @include bp('tablet') {
         padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 2);
+        --doc-sidebar-list-padding-left: calc(var(--ifm-menu-link-padding-horizontal) / 2);
         padding-top: 0;
         padding-bottom: 0;
       }
@@ -51,6 +69,7 @@
       padding-bottom: 0rem;
       margin-bottom: 0.25rem;
       padding-left: var(--ifm-menu-link-padding-horizontal);
+      --doc-sidebar-list-padding-left: var(--ifm-menu-link-padding-horizontal);
     }
 
     /* Vertical guide lines (tree lines) for expanded category trees (level 1+). */
@@ -67,18 +86,12 @@
         position: absolute;
         top: 0;
         bottom: 0;
-        left: 1.6rem; /* align with default link text start */
+        left: var(--doc-sidebar-line-x);
         width: 1px;
         background: var(--doc-sidebar-guide-line-color);
         pointer-events: none;
         opacity: 0;
       }
-
-      @include bp('tablet') {
-        &::before {
-          left: 2.4rem; /* align with tablet link text start */
-        }
-      }
     }
 
     .menu__list-item.theme-doc-sidebar-item-category-level-1:not(.menu__list-item--collapsed) > .menu__list::before,
@@ -100,6 +113,7 @@
   &__list-item {
     position: relative;
     z-index: 1;
+    width: 100%;
 
     /* Reduce top-level nav emphasis (level 1). */
     &.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link {
@@ -113,13 +127,7 @@
       font-weight: 400;
     }
 
-    /* Active page + active ancestor path: bold for clearer orientation. */
-    &.menu__list-item--active > .menu__list-item-collapsible > .menu__link,
-    &.menu__list-item--active > .menu__link {
-      color: var(--ifm-menu-color-active);
-      /* Parent/ancestor path: keep it emphasized, but less prominent than the active page */
-      font-weight: 600 !important;
-    }
+    /* Only the active page should be bold; keep ancestor path normal weight. */
 
     &-collapsible {
       border-radius: 0;
@@ -185,6 +193,10 @@
     line-height: 124%;
     text-decoration: none;
     font-weight: 500;
+    /* Ensure background fills the full row */
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
     padding: 0.6rem 1.6rem;
     border-radius: 0;
     text-decoration: none !important;
@@ -195,9 +207,10 @@
 
     &--active {
       color: var(--ifm-menu-color-active);
-      font-weight: 700 !important;
-      /* Ensure it still *looks* bold even if the font doesn't ship a true 700 weight */
-      text-shadow: 0 0 0 currentColor;
+      /* Docusaurus applies `menu__link--active` to the active page *and* its ancestor
+       * categories. Keep active color, but don't bold the whole ancestor path. */
+      font-weight: inherit;
+      text-shadow: none;
       /* Selected item: no bar / no filled background */
       background-image: none !important;
       background-color: transparent !important;
@@ -207,9 +220,23 @@
       }
     }
 
+    /* Only the actual selected page link should be bold. */
+    &[aria-current='page'] {
+      /* Selected page: keep the *normal* text color (no green), rely on highlight only */
+      font-weight: inherit;
+      text-shadow: none;
+      color: var(--ifm-menu-color) !important;
+
+      &:hover,
+      &:focus-visible {
+        color: var(--ifm-menu-color) !important;
+        text-shadow: none;
+      }
+    }
+
     /* Hover: slight contrast, no "highlight bar" */
-    &:hover,
-    &:focus-visible {
+    &:hover:not([aria-current='page']),
+    &:focus-visible:not([aria-current='page']) {
       background-image: none !important;
       background-color: transparent !important;
       background: transparent !important; /* override Infima `background:` shorthand */
@@ -219,6 +246,57 @@
     }
   }
 
+  /* Selected item highlight: apply to the *row header only* (not the whole <li>),
+   * otherwise expanded categories would tint their entire subtree. We also avoid
+   * relying on `:has()` by using `data-current-page` (stamped by our swizzled components). */
+
+  /* Link items: the row is the direct <a> child. */
+  .menu__list-item[data-current-page='true'] > a.menu__link {
+    position: relative;
+  }
+  .menu__list-item[data-current-page='true'] > a.menu__link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    /* Convert list-space line position to row-space by subtracting the list padding-left. */
+    left: calc(var(--doc-sidebar-line-x) - var(--doc-sidebar-list-padding-left) + 0.5px);
+    right: 0;
+    background: var(--doc-sidebar-selected-bg);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Top-level link items (level 1): no meaningful tree line on the row, so let the
+   * selected highlight run full-width. */
+  .menu__list-item.theme-doc-sidebar-item-link-level-1[data-current-page='true'] > a.menu__link::before {
+    left: 0;
+  }
+  .menu__list-item[data-current-page='true'] > a.menu__link > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Category items: the row header is the collapsible wrapper. */
+  .menu__list-item[data-current-page='true'] > .menu__list-item-collapsible {
+    position: relative;
+  }
+  .menu__list-item[data-current-page='true'] > .menu__list-item-collapsible::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--doc-sidebar-line-x) - var(--doc-sidebar-list-padding-left) + 0.5px);
+    right: 0;
+    background: var(--doc-sidebar-selected-bg);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .menu__list-item[data-current-page='true'] > .menu__list-item-collapsible > * {
+    position: relative;
+    z-index: 1;
+  }
+
   &__caret {
     padding: 1rem 2rem 1rem 1rem;
     opacity: 0.25;
@@ -247,6 +325,7 @@
 /* Dark mode: make tree lines more subtle */
 [data-theme='dark'] .menu {
   --doc-sidebar-guide-line-color: rgba(255, 255, 255, 0.12);
+  --doc-sidebar-selected-bg: rgba(186, 242, 74, 0.14);
 }
 
 .theme-doc-sidebar-container {

src/theme/DocSidebarItem/Category/index.tsx

@@ -142,7 +142,10 @@ export default function DocSidebarItemCategory({
           'menu__list-item--collapsed': collapsed,
         },
         className
-      )}>
+      )}
+      // Avoid CSS :has() dependency by stamping state on the row element
+      data-current-page={isCurrentPage ? 'true' : undefined}
+    >
       <div
         className={clsx('menu__list-item-collapsible', {
           'menu__list-item-collapsible--active': isCurrentPage,

src/theme/DocSidebarItem/Link/index.tsx

@@ -0,0 +1,62 @@
+import React, { type ReactNode } from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { isActiveSidebarItem } from '@docusaurus/plugin-content-docs/client'
+import Link from '@docusaurus/Link'
+import isInternalUrl from '@docusaurus/isInternalUrl'
+import IconExternalLink from '@theme/Icon/ExternalLink'
+import type { Props } from '@theme/DocSidebarItem/Link'
+
+import styles from './styles.module.css'
+
+function LinkLabel({ label }: { label: string }) {
+  return (
+    <span title={label} className={styles.linkLabel}>
+      {label}
+    </span>
+  )
+}
+
+export default function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}: Props): ReactNode {
+  const { href, label, className, autoAddBaseUrl } = item
+  const isActive = isActiveSidebarItem(item, activePath)
+  const isInternalLink = isInternalUrl(href)
+
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        'menu__list-item',
+        className
+      )}
+      // Avoid CSS :has() dependency by stamping state on the row element
+      data-current-page={isActive ? 'true' : undefined}
+      key={label}
+    >
+      <Link
+        className={clsx('menu__link', !isInternalLink && styles.menuExternalLink, {
+          'menu__link--active': isActive,
+        })}
+        autoAddBaseUrl={autoAddBaseUrl}
+        aria-current={isActive ? 'page' : undefined}
+        to={href}
+        {...(isInternalLink && {
+          onClick: onItemClick ? () => onItemClick(item) : undefined,
+        })}
+        {...props}
+      >
+        <LinkLabel label={label} />
+        {!isInternalLink && <IconExternalLink />}
+      </Link>
+    </li>
+  )
+}
+

src/theme/DocSidebarItem/Link/styles.module.css

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.menuExternalLink {
+  align-items: center;
+}
+
+.linkLabel {
+  overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+