Skip to content

docs: use HIG token roles, drop hig-roles.generated.css (hig#66) - #54

Closed
joeblau wants to merge 1 commit into
mainfrom
hig/66-token-roles
Closed

joeblau wants to merge 1 commit into
mainfrom
hig/66-token-roles

Conversation

@joeblau

@joeblau joeblau commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Part of bloxwap/hig#66 (the Chart follow-up its acceptance criteria ask for). Also picks up bloxwap/hig#65 and bloxwap/hig#64.

What changes

The HIG candidate is re-vendored from bloxwap/hig@d7ff478 (0.1.0-candidate.shad7ff4780), built with npm ci && npm run generate:fonts && npm run build && npm run release:dry-run -- --channel candidate. SHA-256 hashes are in vendor/bloxwap-hig/provenance.json and checked by npm run lint.

  • Roles from @bloxwap/hig-tokens/css (#66). apps/docs/styles/hig-roles.generated.css and its manifest generator are deleted. app/global.css now uses the HIG role names:
    • --hig-type-<role>-line → --hig-type-<role>-line-height
    • --hig-duration-<speed> → --hig-motion-duration-<speed> (0ms under reduced motion, as before)
    • --hig-control-<mode> → --hig-density-<mode>-control
  • No font bridge (#65). .hig-button { font-family: var(--font-sans) } is removed. HIG reads --hig-font-sans, which resolves the @bloxwap/font loader variable already on <html>.
  • OG fonts (#64). The static TTFs moved out of @bloxwap/hig-tokens and into @bloxwap/hig-native-fonts (same bytes). lib/og-card.tsx reads them from there, and only at build time. The tokens tarball drops from 4.2 MB to 7.9 KB, and the new native-fonts tarball is 4.2 MB.
  • Guards.
    • npm run lint (scripts/hig-tokens.mjs --check) now fails when the docs use a --hig-* role that the installed HIG CSS doesn't define. It also fails if a *.generated.css copy or apps/docs/styles/ comes back.
    • docs:test checks the computed radius, line-height, compact control and easing roles against the typed manifest.
  • Docs. apps/docs/README.md, vendor/bloxwap-hig/README.md and docs/hig-adoption/README.md (new step 3 and matrix row) are updated.

Verification (local, macOS arm64, Node 24.10.0, NEXT_PUBLIC_BASE_PATH=/chart as in CI)

Command Result
npm run docs:build pass. Static export verified: 30 HTML pages, 1530 local links/assets, 25 social cards (rendered with the native-fonts TTFs), basePath /chart
npm run docs:check pass
npm run lint pass. Tarball provenance, installed versions and 35 --hig-* roles are all defined upstream, and the copy-drift checks pass
npm run docs:test (automated browser: Chrome via Playwright) pass, all 9 check groups, including "palette and radius/type/motion/density roles, HIG controls in Bloxwap typography … reduced motion"
Negative: one use put back to --hig-type-body-line lint fails with --hig-* roles not defined by @bloxwap/hig-tokens/css or @bloxwap/hig-react/css: --hig-type-body-line
Negative: apps/docs/styles/hig-roles.generated.css restored lint fails with apps/docs/styles/ is gone; use the roles from @bloxwap/hig-tokens/css …

No physical device checks were run. No publish, tag or release.

🤖 Generated with Claude Code

…ig#66)

Re-vendor the HIG candidate from bloxwap/hig@d7ff478
(0.1.0-candidate.shad7ff4780). @bloxwap/hig-tokens/css now ships the
radius, type, motion and density roles, so the docs read them directly:

- delete apps/docs/styles/hig-roles.generated.css and its generator;
  rename --hig-type-<role>-line, --hig-duration-<speed> and
  --hig-control-<mode> to the HIG names (-line-height,
  --hig-motion-duration-<speed>, --hig-density-<mode>-control)
- drop the .hig-button font-family bridge: HIG reads --hig-font-sans,
  which resolves the @bloxwap/font loader variable on <html> (hig#65)
- read the OG card's static TTFs from @bloxwap/hig-native-fonts, where
  they moved in hig#64 (same bytes); the tokens tarball drops to 8 KB
- lint now fails if the docs use a --hig-* role the installed HIG CSS
  does not define, or if a generated role copy or apps/docs/styles/
  returns; docs:test checks computed radius/type/density/easing roles

Co-Authored-By: Claude Opus 5.5 <[email protected]>
joeblau added a commit to bloxwap/hig that referenced this pull request Oct 15, 2026
…ated.css (#66)

bloxwap/chart#54 re-vendors the d7ff478 candidate, reads the radius, type,
motion and density roles from @bloxwap/hig-tokens/css and deletes
styles/hig-roles.generated.css. Record it as the open Chart PR in
planning/adoption.json and in the new-repository drift notes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
joeblau added a commit to bloxwap/hig that referenced this pull request Oct 15, 2026
…ated.css (#66)

bloxwap/chart#54 re-vendors the d7ff478 candidate, reads the radius, type,
motion and density roles from @bloxwap/hig-tokens/css and deletes
styles/hig-roles.generated.css. Record it as the open Chart PR in
planning/adoption.json and in the new-repository drift notes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
joeblau added a commit to bloxwap/hig that referenced this pull request Oct 15, 2026
…ated.css (#66)

bloxwap/chart#54 re-vendors the d7ff478 candidate, reads the radius, type,
motion and density roles from @bloxwap/hig-tokens/css and deletes
styles/hig-roles.generated.css. Record it as the open Chart PR in
planning/adoption.json and in the new-repository drift notes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
joeblau added a commit to bloxwap/hig that referenced this pull request Oct 15, 2026
…e fence (#66) (#81)

* test(tokens): packed plain-CSS consumer check for radius/type/motion/density roles (#66)

Add `npm run smoke:packed-css`: installs only the packed @bloxwap/hig-tokens
tarball into an empty consumer, links @bloxwap/hig-tokens/css from a
script-free HTML page whose stylesheet uses only the roles, and checks the
computed radius, type (longhands and font shorthand), motion (including 0ms
under prefers-reduced-motion and [data-hig-motion='reduced']) and density
(including [data-hig-density='compact']) values in Chromium, Firefox and
WebKit against packages/tokens/source.json. It fails if the page requests
anything other than the HTML, its stylesheet and the token CSS, so the
manifest is never read. CI runs it after the packed Next smoke.

Fix the Tokens only / plain CSS section of docs/installation.md: the CSS
example's closing fence shared a line with the next paragraph, so the rest of
the page rendered as code in the docs site.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

* docs(adoption): link the Chart follow-up that deletes hig-roles.generated.css (#66)

bloxwap/chart#54 re-vendors the d7ff478 candidate, reads the radius, type,
motion and density roles from @bloxwap/hig-tokens/css and deletes
styles/hig-roles.generated.css. Record it as the open Chart PR in
planning/adoption.json and in the new-repository drift notes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

---------

Co-authored-by: Claude Opus 5.5 <[email protected]>
@joeblau

joeblau commented Oct 15, 2026

Copy link
Copy Markdown
Contributor Author

Closing as superseded by #56 (merged as 2c952f6). That PR re-vendored HIG 0.1.0-candidate.sha872906a9 and deleted apps/docs/styles/hig-roles.generated.css, its generator and its drift guard. It also renamed the docs CSS to the package role names and removed the .hig-button font bridge, which together cover everything this PR did. It also drops legacy-peer-deps (bloxwap/hig#63). This branch was built on the older d7ff478 candidate, and main has moved past it.

bloxwap/hig#66's Chart criterion is met by chart#56.

🤖 Generated with Claude Code

@joeblau joeblau closed this Oct 15, 2026
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