Polish typography for GitHub-like font rendering and spacing#46
Polish typography for GitHub-like font rendering and spacing#46
Conversation
Closes #15 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
WalkthroughUpdated the Docusaurus custom stylesheet ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
prototypes/docusaurus/src/css/custom.css (2)
109-113: Consider extracting hardcoded colors to CSS variables for consistency.The active menu background colors use hardcoded
rgba()values (lines 110, 125) and the dark mode text color (line 126) uses#c9d1d9directly. Since other parts of the file use CSS variables like--ifm-color-primaryand--ifm-color-content, extracting these to variables would improve maintainability::root { --site-menu-active-bg: rgba(9, 105, 218, 0.08); } [data-theme='dark'] { --site-menu-active-bg: rgba(47, 129, 247, 0.15); }Also applies to: 124-127
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/css/custom.css` around lines 109 - 113, Extract the hardcoded colors used by .menu__link--active into CSS variables (e.g. --site-menu-active-bg and --site-menu-active-text), add defaults in :root and override them in [data-theme='dark'], and replace the rgba() and the `#c9d1d9` literal in the .menu__link--active and corresponding dark-mode rules with var(--site-menu-active-bg) and var(--site-menu-active-text) respectively so the component uses the variables for both light and dark themes.
120-122: Consider avoiding!importantif possible.The
!importantdeclaration can make future style overrides more difficult. If this is needed to override Docusaurus defaults, it's acceptable, but consider whether selector specificity alone could achieve the same result.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/css/custom.css` around lines 120 - 122, The rule ".menu__list-item-collapsible .menu__caret::before { background: var(--ifm-menu-color) !important; }" uses !important—remove it and instead increase selector specificity or ensure the override loads after the Docusaurus default; for example target the same element with a more specific selector (e.g., add a parent/theme class or attribute) or move this declaration into your final custom CSS file so specificity/order wins without !important, then verify the caret background still applies across themes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@prototypes/docusaurus/src/css/custom.css`:
- Around line 109-113: Extract the hardcoded colors used by .menu__link--active
into CSS variables (e.g. --site-menu-active-bg and --site-menu-active-text), add
defaults in :root and override them in [data-theme='dark'], and replace the
rgba() and the `#c9d1d9` literal in the .menu__link--active and corresponding
dark-mode rules with var(--site-menu-active-bg) and var(--site-menu-active-text)
respectively so the component uses the variables for both light and dark themes.
- Around line 120-122: The rule ".menu__list-item-collapsible
.menu__caret::before { background: var(--ifm-menu-color) !important; }" uses
!important—remove it and instead increase selector specificity or ensure the
override loads after the Docusaurus default; for example target the same element
with a more specific selector (e.g., add a parent/theme class or attribute) or
move this declaration into your final custom CSS file so specificity/order wins
without !important, then verify the caret background still applies across
themes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 18829501-60da-4529-8688-01bf6368a005
📒 Files selected for processing (1)
prototypes/docusaurus/src/css/custom.css
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Hover overrides active sidebar link in light mode
- Increased active-link selector specificity to
.menu__link.menu__link--activeso the active blue background remains on hover in light mode.
- Increased active-link selector specificity to
Or push these changes by commenting:
@cursor push 3b47697305
Preview (3b47697305)
diff --git a/prototypes/docusaurus/src/css/custom.css b/prototypes/docusaurus/src/css/custom.css
--- a/prototypes/docusaurus/src/css/custom.css
+++ b/prototypes/docusaurus/src/css/custom.css
@@ -106,7 +106,7 @@
background: var(--site-soft-surface);
}
-.menu__link--active {
+.menu__link.menu__link--active {
background: rgba(9, 105, 218, 0.08);
color: var(--ifm-color-primary-dark);
font-weight: 600;| } | ||
|
|
||
| .menu__link:hover { | ||
| background: var(--site-soft-surface); |
There was a problem hiding this comment.
Hover overrides active sidebar link in light mode
Medium Severity
The new .menu__link:hover rule has CSS specificity (0,2,0) which is higher than .menu__link--active at (0,1,0). In light mode, hovering over the active sidebar link replaces its distinctive blue background with the generic grey --site-soft-surface hover background, losing the visual active-link indicator. The dark mode variant is unaffected because [data-theme='dark'] .menu__link--active raises specificity to (0,2,0) and wins by source order.
Additional Locations (1)
|
Cloudflare preview deployed.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9fdd56652d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .menu__list-item-collapsible .menu__link { | ||
| font-weight: 600; | ||
| color: var(--ifm-color-content); |
There was a problem hiding this comment.
For any category that has a link in prototypes/docusaurus/sidebars.ts (for example Getting Started, Core Concepts, and Historical Reference), Docusaurus renders the category label as an active .menu__link--active inside .menu__list-item-collapsible. This new selector is both later and more specific than .menu__link--active, so on those category index pages it resets the label color back to var(--ifm-color-content) in light mode. The result is that category landing pages no longer get the active-color treatment that ordinary doc pages still have, which makes the current location in the sidebar much harder to see.
Useful? React with 👍 / 👎.
Revert the font-size and weight reductions from the previous typography commit while keeping the useful structural additions: heading border separators, blockquote styling, table zebra-striping, sidebar hover states, and code padding. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Striped table rows invisible in dark mode
- Added dark-theme overrides so striped markdown table rows and sidebar link hover use
--site-surface, restoring visible contrast against the dark background.
- Added dark-theme overrides so striped markdown table rows and sidebar link hover use
Or push these changes by commenting:
@cursor push 1b85b81585
Preview (1b85b81585)
diff --git a/prototypes/docusaurus/src/css/custom.css b/prototypes/docusaurus/src/css/custom.css
--- a/prototypes/docusaurus/src/css/custom.css
+++ b/prototypes/docusaurus/src/css/custom.css
@@ -102,6 +102,10 @@
background: var(--site-soft-surface);
}
+[data-theme='dark'] .menu__link:hover {
+ background: var(--site-surface);
+}
+
.menu__link--active {
background: rgba(9, 105, 218, 0.1);
color: var(--ifm-color-primary-dark);
@@ -176,6 +180,10 @@
background: var(--site-soft-surface);
}
+[data-theme='dark'] .markdown tr:nth-child(2n) {
+ background: var(--site-surface);
+}
+
/* ── Pagination & misc ────────────────────────────────────── */
.pagination-nav__link {--site-soft-surface was #0d1117 in dark mode, identical to the page background, making table zebra-striping and sidebar hover states invisible. Changed to #161b22 to match GitHub's dark surface color. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The caret rule was overriding `background` (shorthand), which clobbered the SVG arrow image set by Infima. Removed the broken override and added `--ifm-menu-link-sublist-icon-filter: invert(1)` to the dark theme so the arrow is visible on dark backgrounds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
prototypes/docusaurus/src/css/custom.css (1)
124-132: Consider consolidating duplicate rules.Both selectors share identical properties. A single grouped selector reduces repetition.
♻️ Optional consolidation
-.markdown h1 { - padding-bottom: 0.3em; - border-bottom: 1px solid var(--site-border); -} - -.markdown h2 { - padding-bottom: 0.3em; - border-bottom: 1px solid var(--site-border); -} +.markdown h1, +.markdown h2 { + padding-bottom: 0.3em; + border-bottom: 1px solid var(--site-border); +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/css/custom.css` around lines 124 - 132, The CSS defines duplicate rules for the selectors .markdown h1 and .markdown h2 with identical properties; consolidate them into a single grouped rule (e.g., ".markdown h1, .markdown h2") to remove repetition, keep the same properties (padding-bottom and border-bottom using var(--site-border)), and ensure formatting/ordering remains consistent with surrounding rules.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@prototypes/docusaurus/src/css/custom.css`:
- Around line 124-132: The CSS defines duplicate rules for the selectors
.markdown h1 and .markdown h2 with identical properties; consolidate them into a
single grouped rule (e.g., ".markdown h1, .markdown h2") to remove repetition,
keep the same properties (padding-bottom and border-bottom using
var(--site-border)), and ensure formatting/ordering remains consistent with
surrounding rules.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d173ac19-30e4-47df-bdf7-fa7e535ff114
📒 Files selected for processing (1)
prototypes/docusaurus/src/css/custom.css
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Dark mode soft-surface equals surface, losing hover contrast
- Updated dark mode
--site-soft-surfaceto#21262dso it differs from--site-surfaceand restores visible hover feedback.
- Updated dark mode
Or push these changes by commenting:
@cursor push 91bf0a67e6
Preview (91bf0a67e6)
diff --git a/prototypes/docusaurus/src/css/custom.css b/prototypes/docusaurus/src/css/custom.css
--- a/prototypes/docusaurus/src/css/custom.css
+++ b/prototypes/docusaurus/src/css/custom.css
@@ -52,7 +52,7 @@
--docusaurus-highlighted-code-line-bg: rgba(47, 129, 247, 0.2);
--site-border: #30363d;
--site-surface: #161b22;
- --site-soft-surface: #161b22;
+ --site-soft-surface: #21262d;
--site-inline-code-surface: #161b22;
--site-inline-code-text: #c9d1d9;
--ifm-menu-link-sublist-icon-filter: invert(1);| --site-border: #30363d; | ||
| --site-surface: #161b22; | ||
| --site-soft-surface: #0d1117; | ||
| --site-soft-surface: #161b22; |
There was a problem hiding this comment.
Dark mode soft-surface equals surface, losing hover contrast
Medium Severity
In dark mode, --site-soft-surface was changed to #161b22, which is now identical to --site-surface (#161b22). This eliminates visible hover feedback on .button--secondary:hover (which transitions from --site-surface to --site-soft-surface) and the newly added .menu__link:hover (which sets --site-soft-surface against the sidebar's --ifm-background-surface-color, also #161b22). Both hover states become invisible in dark mode.
Additional Locations (1)
1 participant
Summary
Closes #15
🤖 Generated with Claude Code
Note
Low Risk
CSS-only styling tweaks to Docusaurus theme variables and markdown elements; risk is limited to potential visual regressions across light/dark themes and responsive table layout.
Overview
Refines Docusaurus theming to better match GitHub’s look and spacing, including a darker-theme surface tweak (
--site-soft-surface) and an icon filter for sidebar sublist chevrons.Improves navigation chrome and sidebar readability by adding hover states, strengthening collapsible category link emphasis, and keeping navbar/footer borders consistent.
Upgrades markdown presentation with bordered
h1/h2, padded inlinecode, and new styling forblockquoteandtable(scrollable tables, cell borders/padding, and zebra striping).Written by Cursor Bugbot for commit bea8add. This will update automatically on new commits. Configure here.
Summary by CodeRabbit