Comic design refresh - #1261
Draft
julioest wants to merge 9 commits into
Draft
Conversation
Introduce a three-layer token vocabulary (primitives, semantic, component) in docs/shared/design-system.css as the canonical spec, implement the L0 primitives for the Antora theme (tokens.css), inline all three layers in the landing page, and rewire existing variables plus the doc-panel markup to consume them. No visual change.
Use Special Elite as the body font and Bangers for headings, wiring each surface per its convention: self-host both faces via @fontsource in the Antora theme, and load them from Google Fonts on the landing page. Point --ds-font-body and --ds-font-display at the new faces and apply the display font to all headings.
Add the comic "Main Title" token group to the shared design system (--ds-title size/leading/color/ink/outline/shadow), mapped to the nearest existing primitives. Also italicize the docs headings the fonts commit already switched to Bangers, completing that display-font rollout. The landing hero's bespoke treatment that consumes these tokens is deferred to the B1 (landing) slice.
The docs navbar logo used {{or site.url siteRootPath}}, which in local/dev builds resolved to the hardcoded production URL. Point it at "/" so it lands on the site root (the landing page) in every environment.
Also ignore the local-preview symlink docs/website/docs.
WIP checkpoint — comic navbar (white/ink bar, Special Elite links, gold GitHub button, theme toggle), the real two-tone Figma logo lockup (separate light/dark SVGs swapped per theme), correct GitHub icon, and a responsive hamburger menu below 768px. Also the in-progress hero comic-title treatment; yellow token now #facc15. Also cache-busts styles.css via render.js. Tweaks to follow in the next commit.
custom.css imported after doc.css and reset .doc h1-h6 back to the body face, so the display-face declaration never applied. Drop that reset and keep only the heading colour there. Case is deliberately left alone: reference headings are C++ symbol names, so text-transform stays off in the docs. That half of the original reasoning still holds. Bangers ships upright only, so the font-style: italic on these headings renders as a browser-synthesized oblique rather than a true italic.
Add the accent-label palette the mockups use for eyebrow pills and card titles (--ds-pink-500 on light, --ds-red-500 on dark), expose it as --ds-color-label, and add --ds-color-surface-accent for the card fill. All three theme blocks are covered, and design-system.css is kept in sync as the canonical spec. Style the feature grid off the bare divs the template already emits, so index.html needs no regeneration: filled panel, hard outline, hard offset shadow, bordered icon tiles, pink underlined titles. Tighten the desktop grid gap, which was tuned for un-boxed content and reads as adrift once the cards have visible edges. Name the component group --ds-feature-* rather than --ds-card-*: a generic soft-ambient --ds-card-* group already exists and, being declared later in the same :root, would have overridden bg, radius and shadow. That group is left in place as spec. Dark-theme values are inferred; the mockups only cover light.
Code/reference rows take the comic treatment: both halves get a hard outline and hard offset shadow, backdrop blur is dropped, and the panel labels (h2 symbol title, h3 sections) go gold, uppercase and italic per the mockups. h4 stays in the reading face, since that is only the NOTE admonition. These rules are appended last on purpose so they win over the theme-aware surface block at equal specificity. This overrides the panel-heading exemption for the landing page only. The docs site keeps it: there the headings are arbitrary template signatures, whereas here they are five short curated names. Theme toggle now follows the Figma "Secondary/Default" spec exactly: 38x38, 5px padding, 2px edge, 2px 2px 0 shadow, 22px icon, square corners (the export omits a radius). Much of this existed already in the B1 --navc-* group but targeted .nav-btn--toggle, markup that was dropped when the shipped .theme-toggle-btn was kept; those dead rules are gone and their spec now lives on the live button. Edge and icon get their own tokens rather than reusing --navc-border and --navc-shadow, which are shared with the navbar, GitHub button and hamburger and have no Figma spec of their own. Icons swap from filled glyphs to the stroked outlines the spec calls for, with stroke="currentColor" so they theme, and the CSS fill is removed because it would otherwise beat fill="none" and render them as solid shapes. Template and generated HTML are updated together.
|
| Scope | Lines Δ% | Lines Δ | Lines + | Lines - | Files Δ | Files + | Files ~ | Files ↔ | Files - |
|---|---|---|---|---|---|---|---|---|---|
| 📄 Docs | 100% | 1975 | 1674 | 301 | 12 | 2 | 10 | - | - |
| ⚙️ CI | <1% | 3 | 3 | - | 1 | - | 1 | - | - |
| Total | 100% | 1978 | 1677 | 301 | 13 | 2 | 11 | - | - |
Legend: Files + (added), Files ~ (modified), Files ↔ (renamed), Files - (removed)
🔝 Top Files
- docs/website/styles.css (Docs): 1034 lines Δ (+846 / -188)
- docs/shared/design-system.css (Docs): 435 lines Δ (+435 / -0)
- docs/ui/src/css/tokens.css (Docs): 198 lines Δ (+198 / -0)
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #1261 +/- ##
========================================
Coverage 83.12% 83.12%
========================================
Files 35 35
Lines 3662 3662
Branches 844 844
========================================
Hits 3044 3044
Misses 410 410
Partials 208 208
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
julioest
changed the title
Add the magenta badges above each code/reference row and over the hero
title. Copy lives in data.json: an eyebrow at root and a label per
panel, keyed by source filename so reordering panels cannot misalign
them, stored in natural case with the uppercasing done in CSS.
Markup is {{#if}}-guarded so a panel without a label renders nothing,
and is mirrored into the generated index.html.
Styling follows the Figma spec: Bangers at 16px/16px with 0.1em
tracking, white on #EC4899, 2px #0F172A edge with a 2px 2px 0 shadow,
6px 12px padding, square corners. font-style is pinned upright since
Bangers has no italic cut and would otherwise be synthesised.
Corrects --ds-pink-500 from #e63c90, sampled off a mockup screenshot, to
the exact #EC4899. This also corrects the feature-card titles, which
route through the same --ds-color-label token.
Two labels are inferred rather than read off the design: is_prime.cpp,
which was illegible at screenshot resolution, and function_object.cpp,
which has no row in the mockup at all. Dark-mode values keep the
existing theme swap; the spec covers light only.
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
1 participant
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.
Draft — WIP on the comic design refresh (initiatives#4, Figma).
Rebased onto current
developand reconciled with the brand theme work ina51d1621b/faea11b9c. Upstream values win everywhere — the design system only supplies the indirection, so this shouldn't shift anything visually except where a slice deliberately restyles it.docs/shared/design-system.css(spec) +docs/ui/src/css/tokens.css(primitives for the Antora theme)vars.cssvars at tokens, values unchangedSecondary/Defaultspec, stroked iconscustom.cssreset, but leaves case alone so symbol names are never uppercasedNotes:
docs/website/index.htmlis hand-merged, not regenerated. No prebuilt mrdocs matches currentdevelop— the newest release is older than the one the Antora cache pulls, and that one breaks thesqrtpanel's latexmath. Generated panel interiors are untouched; only template chrome (nav, lockup, toggle) was merged in