Share design tokens and API contracts across React and Angular#30
Open
sjoerdbeentjes wants to merge 7 commits into
Open
Share design tokens and API contracts across React and Angular#30sjoerdbeentjes wants to merge 7 commits into
sjoerdbeentjes wants to merge 7 commits into
Conversation
The package exported raw TypeScript source (src/index.ts). Vite transpiles that fine, but Angular's webpack Storybook does not transpile .ts from node_modules, so buttonContract resolved to undefined at runtime and the Button stories crashed reading `.description`. Compile to dist (tsc) and point exports at the built JS + d.ts. The satisfies-based parity still erases from each framework's published dist (types only); only the story runtime data now comes from compiled JS.
Wiring the shared token CSS accidentally dropped the local --radius: 0.625rem from :root. The Spartan preset derives the whole radius scale (--radius-sm/md/lg/...) from --radius via calc(), so without it every rounded-* utility resolved to an undefined value and buttons rendered square. --radius is local wiring (React keeps its own), not a shared token.
sjoerdbeentjes
force-pushed
the
feat/shared-tokens-contracts
branch
from
b47cb8f to
60bc9c3
Compare
@surfnet/contracts now resolves through its built dist/*.d.ts, so type-checking a consumer needs that dist to exist. The lint task had no build dependency, so in CI (clean tree, lint before build) ngc could not find @surfnet/contracts. Add dependsOn ^build to lint so sibling outputs are present when each package is type-checked.
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.
What
Two shared packages so tokens and Button API live in one place across
@surfnet/reactand@surfnet/angular.@surfnet/tokens(publishable): DTCG JSON compiled by Style Dictionary intotokens.css(:root+.dark,oklchverbatim) plus a typed token map andTokenNameunion. Reconciles prior drift (canonical dark--sidebar-primary, shared--chart-*).@surfnet/contracts(private, build-time only):buttonContractderives the variant/size name unions. Compile-timesatisfiesin both Buttons makes adding or omitting a variant failpnpm lint. Types erase from each publisheddist.satisfies, and sources story variants/docs from the contract.AGENTS.md,README.md, and theadd-componentskill updated.Why
The oklch tokens and Button variant APIs were hand-duplicated and had already drifted. Centralising tokens removes the drift; the contract makes API parity a compile-time guarantee.
Reviewer notes
name/kebabtransform (no color transform), sooklchis untouched. The JS map and literalTokenNameunion use small custom formats (built-in TS declarations give no literal union).h-8vsh-9default-size difference is intentionally left as-is.Out of scope (separate tickets)
Release tooling, test runner, cva dimensional parity, Angular library CSS distribution.