Story: Add support for boostlook v3 and vendor the file#2411
Open
jlchilders11 wants to merge 8 commits into
Open
Story: Add support for boostlook v3 and vendor the file#2411jlchilders11 wants to merge 8 commits into
jlchilders11 wants to merge 8 commits into
Conversation
julioest
approved these changes
May 12, 2026
julhoang
approved these changes
May 14, 2026
julhoang
left a comment
julhoang
left a comment
Collaborator
There was a problem hiding this comment.
Looks good to me!
--
Just one thought from looking at base.html: I understand loading boostlook-v3.css here follows the existing pattern, but at some point it might be worth scoping it to just the /doc template(s) where the boostlook styles are actually used. That would prevent unintentional style leakage and avoid exposing CSS variables and classes we don't want available on V3 pages.
Collaborator
|
Also, would you mind rebasing on |
|
Important Review skippedReview was skipped as selected files did not have any reviewable changes. 💤 Files selected but had no reviewable changes (1)
⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds the Boost Look v3 stylesheet with scoped design tokens, themes, typography, documentation components, responsive layouts, and template navigation styling. Updates feature-flagged stylesheet loading and applies the shared v3 styles to modal and post content. ChangesBoost Look v3
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related issues
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/css/v3/boostlook-v3.css`:
- Around line 3531-3552: Replace the legacy-container selector
`.boostlook:has(:not(.doc))` with `.boostlook:not(:has(.doc))` throughout the
affected scrollbar, table, and footnote rules, including the ranges around the
shown selectors and the additional referenced ranges. Preserve the existing
declarations and media-query behavior while ensuring these rules apply only to
containers without any `.doc` descendant.
- Around line 4023-4039: Restore visible keyboard focus for the TOC toggle
controls by adding a consistent :focus-visible style to .boostlook `#toc`
.nav-item-toggle and the corresponding toggle variants at the other affected
selectors. Keep the existing outline reset for unfocused controls, but provide a
clear focus indicator when keyboard focus is visible.
- Around line 4807-4809: Update the .boostlook .search-result-item:hover and the
additionally referenced highlighted search-result styles to use theme-aware
search-result color variables instead of fixed light primitives. Ensure hover
and highlight backgrounds maintain readable contrast with the existing dark-mode
text variables.
- Around line 2601-2625: Correct the misspelled `div.blurp` selector in the
legacy admonition selector list to `div.blurb`, while preserving the existing
table-cell and paragraph typography rules.
- Around line 1631-1653: Remove the final display: none declaration from the
.boostlook code-block title rule so its earlier display: flex declaration
remains effective and filename titles render.
- Around line 1778-1814: Update the `.copy-button` styles so keyboard and touch
users can access it: remove the hover-only visibility behavior, ensure keyboard
focus reveals or preserves the control via an appropriate focus selector, and
replace the `@media (hover: none)` rule that hides it with an accessible
presentation that keeps the button available. Preserve the existing desktop
hover styling and button appearance.
- Around line 3595-3599: Correct the WebKit scrollbar thumb selector in the
table rule within the grouped hover selectors by using the proper pseudo-element
syntax, while preserving the existing hover behavior and fallback color.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 706a68c4-2ade-4148-afe3-232740eaeabe
📒 Files selected for processing (2)
static/css/v3/boostlook-v3.csstemplates/base.html
Comment on lines
+1631
to
+1653
| .boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)), | ||
| .boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) { | ||
| position: absolute; | ||
| top: 1px; | ||
| height: 2rem; | ||
| max-width: calc(100% - 5rem); | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| padding: 0; | ||
| padding-left: var(--spacing-size-sm); | ||
| display: flex; | ||
| align-items: center; | ||
| gap: var(--spacing-size-2xs, 0.5rem); | ||
| color: var(--text-main-text-body-tetriary, #62676b); | ||
| font-family: "Mona Sans"; | ||
| font-size: var(--typography-font-size-2xs, 0.75rem); | ||
| font-style: normal; | ||
| line-height: var(--typography-line-height-sm, 1rem); | ||
| letter-spacing: var(--spacing-size-size-0, 0rem); | ||
| z-index: 1; | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Remove the final display: none.
It overrides display: flex, so code-block filename titles selected by this rule never render.
Proposed fix
z-index: 1;
- display: none;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)), | |
| .boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) { | |
| position: absolute; | |
| top: 1px; | |
| height: 2rem; | |
| max-width: calc(100% - 5rem); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| padding: 0; | |
| padding-left: var(--spacing-size-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-size-2xs, 0.5rem); | |
| color: var(--text-main-text-body-tetriary, #62676b); | |
| font-family: "Mona Sans"; | |
| font-size: var(--typography-font-size-2xs, 0.75rem); | |
| font-style: normal; | |
| line-height: var(--typography-line-height-sm, 1rem); | |
| letter-spacing: var(--spacing-size-size-0, 0rem); | |
| z-index: 1; | |
| display: none; | |
| } | |
| .boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)), | |
| .boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) { | |
| position: absolute; | |
| top: 1px; | |
| height: 2rem; | |
| max-width: calc(100% - 5rem); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| padding: 0; | |
| padding-left: var(--spacing-size-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-size-2xs, 0.5rem); | |
| color: var(--text-main-text-body-tetriary, `#62676b`); | |
| font-family: "Mona Sans"; | |
| font-size: var(--typography-font-size-2xs, 0.75rem); | |
| font-style: normal; | |
| line-height: var(--typography-line-height-sm, 1rem); | |
| letter-spacing: var(--spacing-size-size-0, 0rem); | |
| z-index: 1; | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 1642-1642: Duplicate property "display" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 1631 - 1653, Remove the final
display: none declaration from the .boostlook code-block title rule so its
earlier display: flex declaration remains effective and filename titles render.
Comment on lines
+1778
to
+1814
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { | ||
| position: absolute; | ||
| top: 2.25rem; | ||
| right: 0.25rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| color: inherit; | ||
| outline: none; | ||
| font-size: inherit; | ||
| line-height: inherit; | ||
| width: 2rem; | ||
| height: 2rem; | ||
| padding: var(--spacing-size-3xs, 0.25rem); | ||
| border-radius: var(--spacing-size-2xs, 0.5rem); | ||
| border: 1px solid var(--border-border-primary, #e4e7ea); | ||
| background: var(--surface-background-main-surface-primary, #f5f6f8); | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover { | ||
| border: 1px solid var(--border-border-blue, #92cbe9); | ||
| } | ||
|
|
||
| .boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| /* Mobile: hide copy button (clipboard API requires HTTPS) */ | ||
| @media (hover: none) { | ||
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { | ||
| display: none !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
Keep the copy button keyboard- and touch-accessible.
visibility: hidden prevents tab focus, reveal is hover-only, and hover: none removes the control entirely. Users without a mouse cannot invoke copy.
Proposed fix
- visibility: hidden;
+ visibility: visible;
-.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button {
+.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button,
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:focus-visible {
opacity: 1;
visibility: visible;
+ outline: 2px solid var(--border-border-blue);
+ outline-offset: 2px;
}
-@media (hover: none) {
- .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
- display: none !important;
- }
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { | |
| position: absolute; | |
| top: 2.25rem; | |
| right: 0.25rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| color: inherit; | |
| outline: none; | |
| font-size: inherit; | |
| line-height: inherit; | |
| width: 2rem; | |
| height: 2rem; | |
| padding: var(--spacing-size-3xs, 0.25rem); | |
| border-radius: var(--spacing-size-2xs, 0.5rem); | |
| border: 1px solid var(--border-border-primary, #e4e7ea); | |
| background: var(--surface-background-main-surface-primary, #f5f6f8); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s ease; | |
| } | |
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover { | |
| border: 1px solid var(--border-border-blue, #92cbe9); | |
| } | |
| .boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Mobile: hide copy button (clipboard API requires HTTPS) */ | |
| @media (hover: none) { | |
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { | |
| display: none !important; | |
| } | |
| } | |
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { | |
| position: absolute; | |
| top: 2.25rem; | |
| right: 0.25rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| color: inherit; | |
| outline: none; | |
| font-size: inherit; | |
| line-height: inherit; | |
| width: 2rem; | |
| height: 2rem; | |
| padding: var(--spacing-size-3xs, 0.25rem); | |
| border-radius: var(--spacing-size-2xs, 0.5rem); | |
| border: 1px solid var(--border-border-primary, `#e4e7ea`); | |
| background: var(--surface-background-main-surface-primary, `#f5f6f8`); | |
| opacity: 0; | |
| visibility: visible; | |
| transition: all 0.2s ease; | |
| } | |
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover { | |
| border: 1px solid var(--border-border-blue, `#92cbe9`); | |
| } | |
| .boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button, | |
| .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:focus-visible { | |
| opacity: 1; | |
| visibility: visible; | |
| outline: 2px solid var(--border-border-blue); | |
| outline-offset: 2px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 1778 - 1814, Update the
`.copy-button` styles so keyboard and touch users can access it: remove the
hover-only visibility behavior, ensure keyboard focus reveals or preserves the
control via an appropriate focus selector, and replace the `@media (hover:
none)` rule that hides it with an accessible presentation that keeps the button
available. Preserve the existing desktop hover styling and button appearance.
Comment on lines
+2601
to
+2625
| .boostlook #content .admonitionblock > table tr td.content, | ||
| /* Leagcy Doc */ | ||
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p, | ||
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td, | ||
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p, | ||
| /* Antora Template Correction*/ | ||
| .boostlook #content .admonitionblock > table tr td.content p, | ||
| .boostlook:not(:has(.doc)) .notices .message p { | ||
| color: var(--text-main-text-body-tetriary, #717378); | ||
| font-size: var(--typography-font-size-2xs, 0.75rem); | ||
| font-variation-settings: "wght" 400, "wdth" 87.5; | ||
| line-height: 135%; | ||
| letter-spacing: -0.12px; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Correct the blurb selector typo.
div.blurp never matches legacy div.blurb admonitions, leaving their content typography inconsistent.
Proposed fix
-.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td,
-.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td p,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .boostlook #content .admonitionblock > table tr td.content, | |
| /* Leagcy Doc */ | |
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p, | |
| /* Antora Template Correction*/ | |
| .boostlook #content .admonitionblock > table tr td.content p, | |
| .boostlook:not(:has(.doc)) .notices .message p { | |
| color: var(--text-main-text-body-tetriary, #717378); | |
| font-size: var(--typography-font-size-2xs, 0.75rem); | |
| font-variation-settings: "wght" 400, "wdth" 87.5; | |
| line-height: 135%; | |
| letter-spacing: -0.12px; | |
| } | |
| .boostlook `#content` .admonitionblock > table tr td.content, | |
| /* Leagcy Doc */ | |
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td p, | |
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td, | |
| .boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p, | |
| /* Antora Template Correction*/ | |
| .boostlook `#content` .admonitionblock > table tr td.content p, | |
| .boostlook:not(:has(.doc)) .notices .message p { | |
| color: var(--text-main-text-body-tetriary, `#717378`); | |
| font-size: var(--typography-font-size-2xs, 0.75rem); | |
| font-variation-settings: "wght" 400, "wdth" 87.5; | |
| line-height: 135%; | |
| letter-spacing: -0.12px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 2601 - 2625, Correct the
misspelled `div.blurp` selector in the legacy admonition selector list to
`div.blurb`, while preserving the existing table-cell and paragraph typography
rules.
Comment on lines
+3531
to
+3552
| .boostlook, | ||
| .boostlook *, | ||
| .boostlook pre, | ||
| .boostlook code, | ||
| .boostlook:has(:not(.doc)) div.table .table-contents { | ||
| scrollbar-width: thin; | ||
| scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent; | ||
| } | ||
|
|
||
| @media screen and (min-width: 768px) { | ||
| .boostlook pre, | ||
| .boostlook code, | ||
| .boostlook:has(:not(.doc)) div.table .table-contents { | ||
| scrollbar-width: thin; | ||
| scrollbar-color: transparent transparent; | ||
| } | ||
|
|
||
| .boostlook pre:hover, | ||
| .boostlook code:hover, | ||
| .boostlook:has(:not(.doc)) div.table .table-contents:hover { | ||
| scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use :not(:has(.doc)) for legacy-only rules.
:has(:not(.doc)) matches nearly every container having any non-.doc descendant, so these Quickbook-specific table, scrollbar, and footnote rules also leak into Antora.
Proposed fix
-.boostlook:has(:not(.doc))
+.boostlook:not(:has(.doc))Apply this replacement throughout the selected ranges.
Also applies to: 3568-3593, 5256-5343
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 3531 - 3552, Replace the
legacy-container selector `.boostlook:has(:not(.doc))` with
`.boostlook:not(:has(.doc))` throughout the affected scrollbar, table, and
footnote rules, including the ranges around the shown selectors and the
additional referenced ranges. Preserve the existing declarations and media-query
behavior while ensuring these rules apply only to containers without any `.doc`
descendant.
Comment on lines
+3595
to
+3599
| .boostlook pre:hover::-webkit-scrollbar-thumb, | ||
| .boostlook code:hover::-webkit-scrollbar-thumb, | ||
| .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb { | ||
| background-color: var(--border-border-tetriary, #afb3b6); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Fix the WebKit scrollbar pseudo-element selector.
The single colon prevents the table scrollbar thumb from receiving its hover color.
Proposed fix
- .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb {
+ .boostlook:not(:has(.doc)) div.table .table-contents:hover::-webkit-scrollbar-thumb {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .boostlook pre:hover::-webkit-scrollbar-thumb, | |
| .boostlook code:hover::-webkit-scrollbar-thumb, | |
| .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb { | |
| background-color: var(--border-border-tetriary, #afb3b6); | |
| } | |
| .boostlook pre:hover::-webkit-scrollbar-thumb, | |
| .boostlook code:hover::-webkit-scrollbar-thumb, | |
| .boostlook:not(:has(.doc)) div.table .table-contents:hover::-webkit-scrollbar-thumb { | |
| background-color: var(--border-border-tetriary, `#afb3b6`); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 3595 - 3599, Correct the WebKit
scrollbar thumb selector in the table rule within the grouped hover selectors by
using the proper pseudo-element syntax, while preserving the existing hover
behavior and fallback color.
Comment on lines
+4023
to
+4039
| .boostlook #toc .nav-item-toggle { | ||
| background: none; | ||
| border: none; | ||
| outline: none; | ||
| width: 1.25rem; | ||
| height: 1.25rem; | ||
| padding: 0; | ||
| position: static; | ||
| margin-left: 0; | ||
| margin-top: 0; | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| order: 1; | ||
| transform: none; | ||
| } |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
Restore visible keyboard focus for TOC toggles.
All toggle variants remove the browser outline without providing a :focus-visible replacement.
Proposed fix
+.boostlook `#toc` .nav-item-toggle:focus-visible {
+ outline: 2px solid var(--border-border-blue);
+ outline-offset: 2px;
+}Also applies to: 4178-4190, 4305-4321
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 4023 - 4039, Restore visible
keyboard focus for the TOC toggle controls by adding a consistent :focus-visible
style to .boostlook `#toc` .nav-item-toggle and the corresponding toggle variants
at the other affected selectors. Keep the existing outline reset for unfocused
controls, but provide a clear focus indicator when keyboard focus is visible.
Comment on lines
+4807
to
+4809
| .boostlook .search-result-item:hover { | ||
| background: var(--colors-primary-50); | ||
| } |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
Use theme-aware search-result colors.
In dark mode, these light primitives remain pale while the text variables become light, making hovered and highlighted results difficult to read.
Proposed fix
.boostlook .search-result-item:hover {
- background: var(--colors-primary-50);
+ background: var(--surface-background-main-surface-primary);
}
.boostlook .search-result-document-hit .search-result-highlight {
- background: var(--colors-secondary-50);
- color: var(--text-main-text-link-blue);
+ background: var(--surface-background-main-surface-blue-secondary);
+ color: var(--text-main-text-link-blue-secondary);
}Also applies to: 4852-4858
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@static/css/v3/boostlook-v3.css` around lines 4807 - 4809, Update the
.boostlook .search-result-item:hover and the additionally referenced highlighted
search-result styles to use theme-aware search-result color variables instead of
fixed light primitives. Ensure hover and highlight backgrounds maintain readable
contrast with the existing dark-mode text variables.
Refreshes the vendored stylesheet to pull in the latest boostlook v3 build. Color tokens are reorganized (neutral becomes primary, blue becomes secondary), and a few new palettes show up alongside the new Metalab 2.0 heading and spacing primitives. Also includes the library README pass: proper h1 sizing on mobile and desktop, a dark-mode background, horizontally scrollable tables on small screens, and tighter literal-block indentation.
Syncs the vendored copy up to the finalized boostlook-2.0 branch so the site serves the current design: callout and definition-list borders, code surface and border tokens, 8px code-block corners, native ordered-list numbering, underlined body links, h1/h2 heading sizes, and the collapsible AsciiDoctor TOC, all scoped under .boostlook. Keeping the vendored file honest per the PR's own note that upstream changes have to be downstreamed by hand.
julioest
force-pushed
the
jc/integrate-boostlook-v3
branch
from
16fc812 to
1774a6c
Compare
Vendors the rebuilt boostlook-v3.css: bare-markdown styling, the page-leak fix, and the content-modal component rules.
Scopes the testimonials content modal prose under .boostlook so its rich-text styling comes from boostlook-v3 instead of a component-level override. Removes the self-contained prose block from content-modal.css; the modal-specific refinements now live in boostlook (src/css/17-site-components.css).
Markdown card and user-profile bio now carry the boostlook class and pull styling from the vendored boostlook-v3.css. Overrides in markdown-card.css removed, left as a pointer. Depends on the matching boostlook commit landing first.
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/css/v3/boostlook-v3.css`:
- Around line 5696-5699: Update the markdown code-block styles under
.boostlook.markdown-content pre and the corresponding additional rule so fenced
pre elements explicitly remain display: block, while preserving the existing
wrapping and overflow behavior.
- Around line 1598-1605: Restore the missing comma between the .boostlook .doc
.literalblock pre and .boostlook .literalblock pre selectors in the shared pre
styling rule so both literal-block variants receive the intended code-block
styles independently.
- Around line 5663-5674: Update the .boostlook.markdown-content list styles so
ordered lists retain visible sequence numbering while unordered lists continue
using their existing replacement bullet behavior. Scope the change to the
ordered-list selector and preserve the current spacing and marker reset for
unordered lists.
In `@static/css/v3/content-modal.css`:
- Around line 122-127: Remove the outline: none declaration from
.content-modal__body so the keyboard-focusable scrollable body retains the
browser’s visible focus indicator. Keep the existing flex, overflow, and padding
styles unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9238f389-46d5-48d9-9bb0-e78672c87482
📒 Files selected for processing (5)
static/css/v3/boostlook-v3.cssstatic/css/v3/content-modal.cssstatic/css/v3/markdown-card.csstemplates/base.htmltemplates/v3/includes/_content_modal.html
🚧 Files skipped from review as they are similar to previous changes (1)
- templates/base.html
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/css/v3/boostlook-v3.css`:
- Around line 5696-5699: Update the markdown code-block styles under
.boostlook.markdown-content pre and the corresponding additional rule so fenced
pre elements explicitly remain display: block, while preserving the existing
wrapping and overflow behavior.
- Around line 1598-1605: Restore the missing comma between the .boostlook .doc
.literalblock pre and .boostlook .literalblock pre selectors in the shared pre
styling rule so both literal-block variants receive the intended code-block
styles independently.
- Around line 5663-5674: Update the .boostlook.markdown-content list styles so
ordered lists retain visible sequence numbering while unordered lists continue
using their existing replacement bullet behavior. Scope the change to the
ordered-list selector and preserve the current spacing and marker reset for
unordered lists.
In `@static/css/v3/content-modal.css`:
- Around line 122-127: Remove the outline: none declaration from
.content-modal__body so the keyboard-focusable scrollable body retains the
browser’s visible focus indicator. Keep the existing flex, overflow, and padding
styles unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9238f389-46d5-48d9-9bb0-e78672c87482
📒 Files selected for processing (5)
static/css/v3/boostlook-v3.cssstatic/css/v3/content-modal.cssstatic/css/v3/markdown-card.csstemplates/base.htmltemplates/v3/includes/_content_modal.html
🚧 Files skipped from review as they are similar to previous changes (1)
- templates/base.html
🛑 Comments failed to post (4)
static/css/v3/boostlook-v3.css (3)
1598-1605: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Restore the missing selector comma.
Lines 1603-1604 form one unintended descendant selector, so the two literal-block variants miss the shared code-block styling.
Proposed fix
-.boostlook .doc .literalblock pre +.boostlook .doc .literalblock pre, .boostlook .literalblock pre,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements..boostlook pre, .boostlook pre.rouge, .boostlook .doc .content pre, .boostlook .doc pre.highlight, .boostlook .doc .listingblock pre:not(.highlight), .boostlook .doc .literalblock pre, .boostlook .literalblock pre, .boostlook .listingblock > .content > pre,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/css/v3/boostlook-v3.css` around lines 1598 - 1605, Restore the missing comma between the .boostlook .doc .literalblock pre and .boostlook .literalblock pre selectors in the shared pre styling rule so both literal-block variants receive the intended code-block styles independently.
5663-5674: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve numbering for ordered lists.
The shared reset removes markers from both list types, but only unordered lists receive a replacement bullet. Every markdown
<ol>therefore renders without sequence numbers.Proposed fix
.boostlook.markdown-content ul, .boostlook.markdown-content ol { - list-style: none; padding: 0; margin: 0; } +.boostlook.markdown-content ul { + list-style: none; +} + +.boostlook.markdown-content ol { + list-style: decimal; + padding-left: var(--space-xlarge); +} + +.boostlook.markdown-content ol > li { + padding-left: 0; +}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements..boostlook.markdown-content ul, .boostlook.markdown-content ol { padding: 0; margin: 0; } .boostlook.markdown-content ul { list-style: none; } .boostlook.markdown-content ol { list-style: decimal; padding-left: var(--space-xlarge); } .boostlook.markdown-content li { position: relative; padding-left: var(--space-xlarge); margin-top: var(--space-medium); } .boostlook.markdown-content ol > li { padding-left: 0; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/css/v3/boostlook-v3.css` around lines 5663 - 5674, Update the .boostlook.markdown-content list styles so ordered lists retain visible sequence numbering while unordered lists continue using their existing replacement bullet behavior. Scope the change to the ordered-list selector and preserve the current spacing and marker reset for unordered lists.
5696-5699: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep fenced code blocks block-level.
The final rule sets every
pretodisplay: inline, causing markdown code blocks to flow into surrounding text instead of occupying their own block.Proposed fix
.boostlook.markdown-content pre { + display: block; white-space: pre-wrap; overflow-wrap: anywhere; } -.boostlook.markdown-content :is(code, tt, pre) { +.boostlook.markdown-content :is(code, tt) {Also applies to: 5737-5747
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/css/v3/boostlook-v3.css` around lines 5696 - 5699, Update the markdown code-block styles under .boostlook.markdown-content pre and the corresponding additional rule so fenced pre elements explicitly remain display: block, while preserving the existing wrapping and overflow behavior.static/css/v3/content-modal.css (1)
122-127: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Retain a visible focus indicator on the scrollable body.
templates/v3/includes/_content_modal.htmlLine 40 makes this region keyboard-focusable, butoutline: nonehides its focus state.Proposed fix
.content-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-s) var(--space-large); - outline: none; }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements..content-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-s) var(--space-large); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/css/v3/content-modal.css` around lines 122 - 127, Remove the outline: none declaration from .content-modal__body so the keyboard-focusable scrollable body retains the browser’s visible focus indicator. Keep the existing flex, overflow, and padding styles unchanged.
post-detail__body carries the boostlook class and pulls rich-text styling from the vendored boostlook-v3.css. post-detail.css keeps only layout and chrome, rich-text rules left as a pointer. Depends on the matching boostlook commit.
julioest
force-pushed
the
jc/integrate-boostlook-v3
branch
from
a476aa4 to
a00d791
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issues: #2399
Summary & Context
Implements
boostlook-v3.cssin the site, hidden behind a feature flag.Changes
Since we are vendoring this file, if any changes are made upstream we will need to make sure to downstream any changes made. Additionally, this file and flag should be removed during full prod deployment for cleanliness.
Self-review Checklist
Summary by CodeRabbit
New Features
Improvements