feat(design): shared design system with strict nav, buttons, and tab selector#50
Merged
Merged
Conversation
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ples
Tighten the shared `@internal/design` vocabulary so every surface reads as
one product:
- One nav: a single fixed-height `df-nav` led by `navBrand()` (a
primary-tinted Phosphor icon + the product name), replacing each
surface's bespoke header.
- Exactly three button forms: a text button (`button()`), an icon button
(`iconButton()`, bordered) and a borderless icon button
(`iconButton({ variant: 'ghost' })`). Icon sizes are removed from the
text-button recipe so the forms can't blur together.
- One segmented view switcher (`tabsList()` + `tab()`) with a leading
icon per tab. Inspect's tabs gain icons; git drops its sidebar switcher
for the same top-nav selector.
Bring every plugin (inspect, git, a11y, terminals, code-server) and all
five examples onto the system, adding the UnoCSS toolchain to the
examples. Document the rules in AGENTS.md, including the antfu /
antfu-design skills and the upstream inspector UIs the surfaces descend
from.
antfubot
force-pushed
the
feat/strict-component-styles
branch
from
382a99b to
3820c29
Compare
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
Brings every built-in plugin and every example onto one shared, framework-neutral design system (
@internal/design) so they read as a single product — across React/Next (git), Svelte (terminals), Vue (inspect), Solid (a11y), vanilla DOM (code-server), and the Preact/Next/vanilla examples. The system is a single UnoCSS preset (presetDevframe()) plus a--df-*light/dark token sheet and a set of framework-neutral class recipes.On that foundation, this work makes the component styles strict:
df-nav, led by anavBrand()block (a primary-tinted Phosphor icon + the product name) — replacing each surface's bespoke header.button()), an icon button (iconButton(), bordered) and a borderless icon button (iconButton({ variant: 'ghost' })). Icon sizing is dropped from the text-button recipe so the forms stay distinct.tabsList()+tab()) with a leading icon per tab. Inspect's tabs gain icons, and git trades its vertical sidebar switcher for the shared top-nav selector.AGENTS.mdcaptures the rules and points future UI work at theantfu/antfu-designskills and the upstream inspector UIs these surfaces descend from (node-modules-inspector, vite-plugin-inspect, eslint config-inspector, vite-devtools rolldown).Why
The surfaces are built in five different frameworks, so a shared class vocabulary — not shared components — is what keeps them identical. Making that vocabulary strict stops it drifting back into per-surface one-offs.
Verification
pnpm lint,pnpm typecheck,pnpm build, andpnpm test(503 tests) pass; all five plugin SPAs and all five examples build.This PR was created with the help of an agent.