feat(design): unify built-in plugins on a shared @internal/design system#4
Closed
antfubot wants to merge 2 commits into
Closed
feat(design): unify built-in plugins on a shared @internal/design system#4antfubot wants to merge 2 commits into
antfubot wants to merge 2 commits into
Conversation
The git (React/Next), terminals (Svelte) and code-server (vanilla DOM) plugins each shipped their own styling engine, palette and components, so they read as three different products. Introduce a single, framework-neutral design system the built-in plugins extend, so they look and feel like one product everywhere. - Add @internal/design (private): one `presetDevframe()` UnoCSS preset (presetWind4 + presetIcons + directive/variant-group transformers + the semantic token theme + the shared `df-*` component vocabulary), the `--df-*` token values in theme.css (light/dark), and a prebuilt stylesheet for non-UnoCSS consumers. - Migrate terminals and code-server onto the shared preset + `df-*` classes. - Migrate git from Tailwind v4 + shadcn to UnoCSS driven by the same tokens. - Wire the package into alias/tsconfig/turbo and document the convention.
Add a component layer on top of the token + class vocabulary so "a button", "a tab", "a nav" have one definition shared across frameworks, not just a documented class contract. - @internal/design/components exports recipes — button, badge, tab, navTab, nav, toolbar, card, panel, input, link, dot, spinner, tag — that return the canonical `df-*` classes and read the same in React (className=), Svelte (class=) and vanilla DOM. - Because the classes are assembled at runtime (so static extraction can't see them), the preset safelists the full `df-*` vocabulary. Add `df-nav` and `df-toolbar` bar shortcuts. - Adopt the builders in all three plugins: git's shadcn Button/Badge/Card/Tabs shells, terminals' Svelte chrome, and code-server's vanilla launcher now describe the same components the same way.
Owner
Author
|
Superseded by devframes#45 (same branch, targeting upstream). |
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.
Why
The built-in plugins each shipped their own styling engine, palette, and components, so they read as three separate products:
This unifies them on one framework-neutral design system so the built-in plugins look and feel like a single product, with one source of truth for the look.
What
@internal/designpackage (private, unpublished — consumed by the plugins only at build time):presetDevframe()— the single UnoCSS preset every plugin extends. It bundlespresetWind4+presetIcons+ the directive/variant-group transformers, the semantic token theme, and the shareddf-*component vocabulary.theme.css— the--df-*token values (light + dark via the.darkclass); the only place colors are defined.style.cssfor non-UnoCSS consumers.df-*classes (df-btn,df-badge,df-tab,df-navtab,df-card,df-input,df-dot,df-tag-*, …) and semantic token utilities (bg-primary,text-muted-foreground,bg-card, …) resolve identically everywhere.df-*vocabulary; git moves from Tailwind v4 + shadcn to UnoCSS (@unocss/postcss) driven by the same tokens.alias.ts,tsconfig.base.json, the Turbo graph, and the pnpmfrontendcatalog, and documents the convention inAGENTS.md.pnpm lint,pnpm typecheck,pnpm build, andpnpm testall pass; each plugin's built CSS was checked to confirm the shared tokens and classes are emitted.This PR was created with the help of an agent.