feat(design): replace @internal/design with @antfu/design#53
Merged
Conversation
Adopt @antfu/design as the one design system across every built-in plugin and example, so they look and feel like one product. Each app wires the @antfu/design UnoCSS preset directly (devframe's sage-green primary over Wind4, Phosphor icons, DM Sans/Mono, named z-layers). The Vue surface (inspect) imports @antfu/design components directly; the React, Svelte, Solid, Preact and vanilla surfaces render the same @antfu/design vocabulary through faithful, co-located framework ports. Remove the internal, source-only @internal/design package along with its df-* class vocabulary and --df-* token set, and update the plugin storybooks and the e2e selectors to match. Intentional, minor visual changes come with adopting the shared system.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
2 participants
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
Adopts
@antfu/design(v0.2.1) as the single design system for every built-in plugin and example, replacing the internal source-only@internal/designpackage.uno.config.tscomposespresetAnthonyDesign({ primary })(devframe's sage green) over Wind4, with Phosphor icons, DM Sans/Mono, the directive/variant-group transformers, and the namedz-*layers the preset requires. A small preflight restores the subtle shared border color Wind4 otherwise leaves atcurrentColor.inspect) imports@antfu/design/components/*directly (LayoutToolbar,LayoutTabs,ActionButton,ActionIconButton). git (React), terminals (Svelte), a11y (Solid), code-server (vanilla) and the Preact/Next/vanilla examples render the same@antfu/designvocabulary through faithful, co-locateddesign.tsports.@internal/design(itsdf-*class vocabulary,--df-*token set, preset and safelist), pruningalias.ts+ the generatedtsconfig.base.jsonpaths.@antfu/designstyles + theme toggle;inspect'svue3-vitestorybook is the Vue reference the other ports match.df-*classes (text/structure-based).Why
Make the design consistent with the broader antfu devtools ecosystem and simplify the codebase by leaning on one maintained system instead of a parallel internal one. Intentional, minor visual changes come with the adoption.
Verification
pnpm lint,pnpm typecheck,pnpm build(13/13 packages) andpnpm test(532 tests) all pass.Notes
@internal/designwas private/unpublished, so no published plugin's public API changes — only the bundled client UI and a build-time devDependency swap.@antfu/designshipping its own storybook upstream, the realigned plugin storybooks (withinspectas the Vue reference) cover it without duplication. Happy to add a dedicated one if preferred.This PR was created with the help of an agent.