Skip to content

chore(design-system): update all four packages to latest and re-sync artifacts - #4

Merged
EliRobinson merged 1 commit into
mainfrom
chore/design-system-latest
Aug 13, 2026
Merged

EliRobinson merged 1 commit into
mainfrom
chore/design-system-latest

Conversation

@EliRobinson

Copy link
Copy Markdown
Owner

Updates all four @elirobinson/* packages to their latest published versions and regenerates everything the design system tooling owns.

Package From To
@elirobinson/react 1.3.0 2.0.1 (major)
@elirobinson/tokens 0.3.0 0.5.0
@elirobinson/ai-patterns 0.5.0 0.9.2
@elirobinson/eslint-config 0.2.0 0.3.0

ds-resync under-reported the gap

node_modules had drifted ahead of the committed manifests — react@2.0.1 was installed while package.json and the lockfile pinned ^1.3.0. Since ds-resync reads node_modules, it reported only ai-patterns a single patch behind. Measured against the lockfile (the state CI and a fresh clone actually get) this is a four-package update including a major. package.json, the lockfile, and node_modules now agree.

The react 2.0.0 breaks don't reach this repo

Both were checked rather than assumed:

  • ./styles/* narrowed to ./styles/*.css — the app imports the top-level @elirobinson/react/styles.css, which is a different export and unaffected. Nothing imports through the styles/* subpath.
  • importPath dropped from the manifest — nothing here reads the manifest.

Font tokens move to the supported hook

tokens 0.5.0 adds --ds-font-*-override. The previous approach (redefining --font-sans directly) still worked, but only because globals.css is imported after the unlayered tokens.css — a load-order dependency that fails silently if it ever changes. tokens.css declares the override hooks nowhere, so they resolve from any cascade layer.

A matched hook replaces the whole fallback list, so the system stacks are spelled out rather than dropped.

Verified in a browser rather than assumed — this is precisely the silent failure the upstream changelog describes (page renders in the system font, nothing errors):

--font-sans   "Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif
--font-mono   "Geist Mono","Geist Mono Fallback",ui-monospace,monospace
body          Geist, "Geist Fallback", ui-sans-serif, system-ui, sans-serif

Generated skill trees

ds-resync artifacts --write adds three trees under .claude/skills/ (design-system-reference/, ds-resync/, miltinson-design/) plus the ds-artifacts.json hash manifest that drives drift detection. .gitignore already keeps .claude/skills shared, so these are committed like the existing agent instructions.

They are generated output and are excluded from ESLint and Prettier. The UI-kit JSX ships as prototype reference material and trips the design system's own rules (hardcoded shadow, undefined imports in excerpt files) — 59 lint errors, all confined to those five vendored files. Fixing them in place would be overwritten by the next sync, so the trees are ignored instead. .prettierignore already set this precedent for the ds init --agents output.

AGENTS.md gains the ds-resync artifacts --write step, which the documented upgrade flow was missing.

Verification

All green: type-check, lint, format:check, unit tests, production build, and all 16 Playwright tests — including the design system contracts (touch targets, visible focus, WCAG AA contrast) in light and dark across chromium, firefox, webkit, and mobile-chrome.

Note for the reviewer

The font-token migration is behavior-neutral and separable — drop that hunk in src/app/globals.css if you'd rather keep the upgrade purely mechanical.

…artifacts

Bring the design system packages up to the latest published versions and
regenerate everything the tooling owns.

  @elirobinson/react         1.3.0 -> 2.0.1  (major)
  @elirobinson/tokens        0.3.0 -> 0.5.0
  @elirobinson/ai-patterns   0.5.0 -> 0.9.2
  @elirobinson/eslint-config 0.2.0 -> 0.3.0

node_modules had drifted ahead of the committed manifests, so `ds-resync`
reported only a single patch behind. The lockfile is the real baseline, and
against it this is a four-package update including a major.

The react 2.0.0 breaks are both no-ops here: `./styles/*` narrowing does not
apply (the app imports the top-level `@elirobinson/react/styles.css`), and
nothing reads the manifest's removed `importPath` alias.

Font tokens move to the `--ds-font-*-override` hooks added in tokens 0.5.0.
Overriding `--font-sans` directly still worked, but only because globals.css
is imported after the unlayered tokens.css; the hooks are declared nowhere in
that stylesheet, so they resolve from any cascade layer. A matched hook drops
the shipped fallbacks, so the stacks are spelled out. Verified in a browser:
`--font-sans` resolves to "Geist","Geist Fallback",ui-sans-serif,system-ui and
body computes to Geist rather than falling through to the system face.

`ds-resync artifacts --write` adds three generated skill trees under
.claude/skills/ plus the ds-artifacts.json hash manifest. They are generated
output, so they are excluded from ESLint and Prettier — the UI-kit JSX in them
is prototype reference material that trips the design system's own rules, and
a fix in place would be overwritten by the next sync.

Verified: type-check, lint, format:check, unit tests, production build, and
all 16 Playwright tests including the design system contracts in light and
dark across four browser projects.
@EliRobinson
EliRobinson merged commit 70aa1cd into main Aug 13, 2026
3 checks passed
@EliRobinson
EliRobinson deleted the chore/design-system-latest branch August 13, 2026 05:26
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