Boostlook 2.0: Figma redesign + dark-mode pass#183
Draft
julioest wants to merge 12 commits into
Draft
Conversation
Preview boostlook-v3.css against real Boost docs of every type with CSS hot-reload. Serves the already-built website-v2-docs site and intercepts /_/css/boostlook.css (at any depth) via middleware to inject the working bundle from memory; build/ is never mutated. Watches src/css/** and rebuilds (debounced, non-overlapping) on save. Renders the charconv specimen.adoc standalone for AsciiDoctor coverage. Adds a landing page (full-width grouped sample grid, git-sourced changelog dropdown, light/dark toggle) and docs/dev-server.md.
Make the standalone Asciidoctor TOC behave like the Antora nav-tree: caret toggles, collapsed by default, current path expanded, open sections persisted, and scroll-spy active-link highlighting. - 12-asciidoctor.css: caret/collapse styling reusing Antora's design (right-aligned dotted chevron that flips on expand); pointer cursor on collapsible rows only, the link unaffected. - boostlook-v3.rb: new postprocessor that wraps output in .boostlook and injects the behavior, so docs need no per-document docinfo footer. - dev-server.js: render the specimen via boostlook-v3.rb. - boostlook-v3.css: rebuilt bundle.
build-preview.sh assembles the multi-doc preview folder and optionally deploys it: build CSS -> inject into antora-ui + rebuild UI bundle -> rebuild site guides -> bake 2.0 CSS into reused library docs -> render the charconv specimen -> generate the landing. --draft / --prod deploy to the boostlook-v3 Netlify site via netlify-cli. scripts/gen-landing.js generates the static preview index.html.
- Collapse the "Recent changes" header button to an icon (clock) at <=600px so it no longer collides with the brand; hide the brand subtitle on mobile to free up room. - Changelog entries show the absolute commit date/time (YYYY-MM-DD HH:MM) instead of a relative "N ago". Applied to both the dev server landing (dev-server.js) and the deployed landing (scripts/gen-landing.js) so they stay consistent.
Set h1 to 48px (Figma Title/2XL) and h2 to 24px (Figma Large). Add a higher-specificity rule for .doc > h1.page:first-child so Antora's pinned page title matches the global h1 size across both Antora and AsciiDoctor.
Broaden the body-link underline selector from .boostlook #content .doc ... to .boostlook .paragraph/ulist/olist/ dlist so it covers standalone AsciiDoctor (#content, no .doc) as well as Antora. Nav/TOC links remain unaffected.
Replace the custom counter-reset/::before 32px marker boxes on ordered lists with native list-style decimal / lower-alpha, per the Figma 2.0 spec (no numbered-box in the design). Conum callout numbers are unaffected.
Square up code blocks to 8px radius (from --radius-xxl 1rem) and set the light-mode code surface to #ffffff, per Figma 2.0. Callouts intentionally stay at 16px; dark-mode background is unchanged.
Dark code blocks use #1A1C29 (= primary-850) to match the cards/ tables surface instead of atom-one #282c34. Retarget --border-border-primary to the Figma standard 1px stroke in both themes (rgba(5,8,22,.1) light, rgba(247,247,248,.1) dark), so dark code/card borders are visible and light borders match the spec. (boostorg#116)
Hide aside.toc.sidebar so the article reclaims the full content width on Antora doc pages. The AsciiDoctor #toc and the left nav tree are unaffected.
Point --stroke-weak (callout + dlist-card borders) at the Figma standard 1px stroke in both themes: rgba(5,8,22,.1) light, rgba(247,247,248,.1) dark — matching --border-border-primary. (boostorg#116)
|
An automated preview of the documentation is available at https://183.boostlook.prtest2.cppalliance.org/tools/boostlook/doc/html/index.html If more commits are pushed to the pull request, the docs will rebuild at the same URL. 2026-07-09 17:06:28 UTC |
Member
|
Looking at https://boostlook-v3.netlify.app/specimen/ fails to adjust for my default of dark-mode. |
Inject a theme-init script into <head> in boostlook-v3.rb, mirroring the Antora UI (head-scripts.hbs + 00-theme-toggle.js): set html.dark from a saved 'antora-theme' choice or prefers-color-scheme before first paint, and live-update on OS changes unless the user pinned a theme. Skipped in iframes (host controls the theme).
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.
Summary
Brings
boostlook-v3.cssin line with the Metalab 2.0 Figma redesign and completes a full light + dark-mode pass. Work is driven from the modularsrc/css/sources;boostlook-v3.cssis the generated bundle.Preview: https://boostlook-v3.netlify.app/
What changed
Figma alignment (light)
.doc+ standalone AsciiDoctor#content).aside.toc.sidebar); the article reclaims the width.Dark mode
#1A1C29(unified with tables/callouts).--border-border-primary,--stroke-weak) point at the Figma 1px stroke:rgba(5,8,22,.1)light /rgba(247,247,248,.1)dark — fixes previously-invisible dark borders.