Skip to content

Consume HIG 7c67a07 packages in Chart docs - #53

Merged
joeblau merged 3 commits into
mainfrom
hig/34-chart-docs-packages
Oct 15, 2026
Merged

joeblau merged 3 commits into
mainfrom
hig/34-chart-docs-packages

Conversation

@joeblau

@joeblau joeblau commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Part of bloxwap/hig#34 (Chart row). Builds on #52, which copied a HIG plain-CSS snapshot from bloxwap/hig@1a776b9.

Chart docs now install HIG as packages instead of keeping copies. The packed @bloxwap/hig-tokens, @bloxwap/hig-contracts and @bloxwap/hig-react candidate tarballs from bloxwap/hig@7c67a07 sit under vendor/bloxwap-hig/ as file: dependencies, pinned by SHA-256.

Replaced

  • Tokens: the shell imports @bloxwap/hig-tokens/css and @bloxwap/hig-react/css and uses --hig-* roles directly. The copied token CSS and manifest are gone, along with the alias adapter (--card, --bloxwap-green, --space-*). Radius/type/motion/density roles are generated from the package manifest, because the CSS distribution doesn't emit them yet.
  • Fonts: the social-card renderer reads Bloxwap Sans faces from @bloxwap/hig-tokens/fonts instead of two copied TTFs. Web fonts stay on @bloxwap/[email protected].
  • Controls: the hand-written .btn family is replaced by HIG Button/.hig-button. Install tabs use HIG Tabs around the InstallCommand recipe; the code-window copy uses HIG IconButton busy.
  • Callouts and states: MDX <Callout> renders HIG Callout. Search failure shows HIG Alert, an empty result shows EmptyState, and the playground loading status uses Spinner.
  • Demo: it gets @bloxwap/hig-tokens/css unmodified and a chart theme from the typed manifest. SDK engine, controls, base path /chart, metadata, deep links, API examples and capability wording are unchanged.
  • Guard: npm run lint now checks tarball hashes and installed versions, and rejects copied palettes, .btn primitives and font binaries in docs source.

Measured against c4dff80 (same Node 24 / Next 16.3.6 / /chart export; size-report.json)

Before After Δ
Emitted CSS 145,759 B 152,712 B +6,953
Emitted JS 2,172,631 B 2,188,721 B +16,090
Emitted fonts 14,205,712 B 14,205,712 B 0
Export total / files 29,653,520 / 826 29,686,679 / 827 +33,159 / +1
Hand-maintained docs CSS 2 files / 460 lines 1 / 406 −54 lines
Docs source files removed 9 files, 904,638 B tokens, manifest, adapter, TTFs + notices
Docs direct deps / lockfile pkgs 16 / 400 19 / 403 +3 @bloxwap/hig-*, no transitive additions

The emitted output grows a little: HIG's component CSS and OKLCH token block now ship, and the HIG React modules replace the local primitives. In return, nine copied files and the alias layer are gone, and the shell updates with the package. The 4.2 MB tokens tarball is now in the repository; most of it is native TTFs the docs don't use.

Validation (macOS, Node 24.10.0, npm 11.6.1, Chrome 155 via Playwright; validation.txt, browser.json)

  • npm ci: passes with plain npm ci.
  • npm run docs:build with NEXT_PUBLIC_BASE_PATH=/chart: 30 HTML pages, 1,530 local links/assets and 25 social cards verified.
  • npm run docs:check, npm run lint and npm run typecheck pass.
  • npm run coverage: 1,869/1,869 passed, 100% coverage.
  • npm run docs:test (browser):
    • install tabs respond to Arrow/Home/End keys;
    • repeat copy activations join one clipboard write, success is announced, and denial shows recovery text;
    • HIG palette, fonts and reduced motion apply, with no legacy aliases left;
    • the playground demo runs offline: 500 bars, 0 duplicates, WebGL2, settings dialog closes on Escape, wheel zoom works;
    • search shows results, opens on Ctrl/Cmd+K, and shows the HIG empty and failure states;
    • the callout is not a live region, and the keyboard focus ring is visible;
    • pages hold up in RTL and at 200% text;
    • at 390px with touch emulation, the copy target is at least 48px and the mobile sidebar navigates.

Screenshots (Chrome via Playwright; external requests blocked so both demos use the offline synthetic market):

Before After
Home, desktop
Home, 390px
Quick start (callout), 390px
Playground demo, desktop

All 16 captures (configuration reference included) are in docs/hig-adoption/hig-7c67a07.

Exceptions (review 2026-11-13, details in docs/hig-adoption/README.md and vendor/bloxwap-hig/README.md)

  • .npmrc sets legacy-peer-deps=true. HIG React's optional exact Radix peers (dialog/popover 1.1.15) clash with Fumadocs' 1.1.23. Without the flag, npm nests a second Radix tree and drops the packages/chart workspace link in favor of the registry build.
  • @bloxwap/hig-react/recipes imports the overlay entry, which needs the dropdown-menu/tooltip Radix peers. To avoid adding them, the InstallCommand/CodeWindow recipe markup is built from the HIG button/surface primitives. Suggested HIG follow-up: split that entry.
  • The decorative purple/pink/yellow colors in the OG spectrum are kept.

Not covered: physical touch or mobile chart gestures, iOS/Android hardware, VoiceOver/TalkBack and wide-gamut review were not done. No iOS Simulator or Android emulator run was needed for this web-only docs change. Touch emulation is not device evidence. The other four SDK docs rows and the canonical HIG matrix update stay upstream, so this PR does not close hig#34.

No npm publish, tags, releases or manual deploys. To roll back, revert the three commits together.

🤖 Generated with Claude Code

joeblau and others added 3 commits October 14, 2026 19:14
Replace the vendored token snapshot (bloxwap/hig@1a776b9), the shadcn-style
alias adapter, the hand-written .btn family and the copied OG font binaries
with the packed @bloxwap/hig-tokens, -contracts and -react candidate tarballs
from bloxwap/hig@7c67a07 (file: dependencies under vendor/bloxwap-hig).

- Shell CSS imports @bloxwap/hig-tokens/css and @bloxwap/hig-react/css and
  uses --hig-* roles directly; only manifest roles the CSS distribution lacks
  (radius/type/motion/density) are generated from the package manifest.
- Buttons, install tabs and copy, code-window copy, callouts, search error and
  empty states and the playground loading status use HIG Button, IconButton,
  Tabs, Surface, Callout, Alert, EmptyState and Spinner.
- The chart demo receives @bloxwap/hig-tokens/css unmodified and the chart
  theme from the typed package manifest; SDK engine, API examples, base path,
  metadata and deep links are unchanged.
- Lint checks tarball hashes, installed versions, generated-role drift and
  rejects copied palettes, .btn primitives and font binaries in docs source.
- Browser tests cover HIG copy/install behaviour, callout, keyboard focus,
  search shortcut, empty and failed search, demo and mobile navigation.

Part of bloxwap/hig#34

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Before/after screenshots (desktop and 390px) of home, quick start,
configuration reference and the playground demo, browser check output,
size report against c4dff80 and the validation record.

Part of bloxwap/hig#34

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant