Add /legacy/tokens.css CSS shim for design-system migration#36
Open
MaxGhenis wants to merge 1 commit into
Open
Add /legacy/tokens.css CSS shim for design-system migration#36MaxGhenis wants to merge 1 commit into
MaxGhenis wants to merge 1 commit into
Conversation
The JS-only @policyengine/ui-kit/legacy shim makes the import-path rename
from @policyengine/design-system mechanical for code, but consumers'
globals.css that referenced \`var(--pe-color-*)\` aliases shipped by
design-system's tokens.css broke after the migration — those CSS
variables had nowhere to come from.
Ship src/legacy/tokens.css with the same :root { --pe-color-*, --pe-font-*,
--pe-space-*, --pe-radius-* } block design-system 0.3.0 shipped, expose
it via the new ./legacy/tokens.css subpath export, and add src/legacy to
the published files. Consumers migrating now flip one import line
instead of inlining hex values per repo:
- @import "@policyengine/design-system/tokens.css";
+ @import "@policyengine/ui-kit/legacy/tokens.css";
Mirrors design-system 0.3.0 values bit-identical (verified by diffing
against the tarball). New code should keep using the canonical
@policyengine/ui-kit/theme.css (shadcn-style tokens); /legacy is the
back-compat surface.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Ship a CSS-side companion to the existing JS
@policyengine/ui-kit/legacyshim. Mirrors the--pe-color-*/--pe-font-*/--pe-space-*/--pe-radius-*:rootblock that@policyengine/design-system@0.3.0shipped viadist/tokens.css, exposed under a new./legacy/tokens.csssubpath export.Why
The JS-only legacy shim lets
from '@policyengine/design-system'→from '@policyengine/ui-kit/legacy'work mechanically, but consumers whoseglobals.cssreferencedvar(--pe-color-primary-500)etc. silently broke after the migration — those custom properties had nowhere to come from oncetokens.cssstopped being imported.I just hit this in
working-Americans-tax-cut-act-(the live page rendered withbg-primary-500resolving to nothing — white hero text on white background). The fix there was to inline the hex values directly in the@themeblock. With this PR, the cleaner fix is a one-line import bump:Values
Bit-identical to design-system 0.3.0
dist/tokens.css(verified by diffing the tarball). Covers ~50 CSS variables: primary/gray/semantic/bg/text/border colors, font families/sizes/weights/line-heights, space scale, border radii.Scope
src/legacy/tokens.css— new file, mirrors design-system 0.3.0 tokenspackage.json: new./legacy/tokens.csssubpath export pointing at the file;src/legacyadded tofiles; version bumped 0.10.1 → 0.11.0changelog.d/feat-legacy-tokens-css.added.md— towncrier fragmentNew code should keep using
@policyengine/ui-kit/theme.css(shadcn-style tokens —--primary,--background, etc.) —/legacyis the back-compat surface only.Verification
bun install— cleanbun run build— clean (no regression in bundle sizes)bun run test— 302/302 passbg-[var(--pe-color-primary-500)]renders teal again