feat(inspector): adopt @antfu/design design system (v0.2.0)#177
Open
antfubot wants to merge 2 commits into
Open
feat(inspector): adopt @antfu/design design system (v0.2.0)#177antfubot wants to merge 2 commits into
antfubot wants to merge 2 commits into
Conversation
Replace the hand-rolled UnoCSS design layer with the extracted @antfu/design package: theme tokens, semantic shortcuts, the severity scale and background patterns now come from presetAnthonyDesign, the shared base/scrollbar/animation/floating-vue/reka-ui/splitpanes styles come from @antfu/design/styles.css, and the migration-ratio donut now renders with the package's DisplayDonut. The bespoke PNG dot-grid backdrop is renamed bg-dot-grid so it no longer collides with the preset's bg-dots pattern rule. A small dependency patch lets the package's color-ramp helper pass the project's strict noUncheckedIndexedAccess typecheck.
0.2.0 fixes the color-ramp helper's strict typing and moves the overlay deps (reka-ui/splitpanes/@TanStack) to optional peers, so the local dependency patch and the vue-demi build allowance are both dropped, and the duplicate overlay deps fall out of the lockfile. Adapt to the new preset behaviour: opt out of the plain-`z-<number>` blocklist (the app already owns a deliberate z-index system), drop the now-redundant `content.pipeline.include` (the default scan already picks up the package's components), and apply the root surface from the app's own CSS so it never depends on the directives transformer reaching the package's node_modules styles.
antfubot
changed the title
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.
Adopts the @antfu/design design system (pinned to
0.2.0) in the inspector SPA, replacing the project's hand-rolled UnoCSS design layer with the package it was extracted from.What changed
uno.config.tscomposespresetAnthonyDesignfor the theme ramps, semantic shortcuts (color-base,bg-*,border-*,btn-*,badge*,op-*), thecolor-scale-*severity layer and thebg-dots/bg-gridpattern rules. The project's WCAG-tuned greenprimaryramp is preserved verbatim. App-only shortcuts (icon-catppuccin, the bespoke z-index ladder,page-padding*,color-deprecated) stay local.@antfu/design/styles.css(the shipped styles recolor overlays via token--at-applydirectives, so@unocss/transformer-directivesis wired up). The app keeps ownership of its root surface and a few local overrides (xterm, reverse-spin keyframe, the PNG dot-grid, tooltip refinements).DisplayDonut.Notes
bg-dot-gridso it no longer collides with the preset'sbg-dotspattern rule.z-<number>utilities in favour of named layers; this app already owns a deliberate z-index system (a named ladder plus a few local, within-component z values), so it opts out viablocklists: { plainZIndex: false }.vue-demibuild allowance are gone). A smallPresetcast remains inuno.config.tsbecause the package still resolves its own@unocss/coreinstance under the pinned-nightly lockfile.Scope
This is the "foundation + clean components" slice. The other local components (version / empty-state / safe-image / number-badge / checkbox / percentage) encode app-specific behaviour — string version prefixes,
npm:/workspace:specs, image pre-loading, labelled proportion segments — that the minimal package primitives don't cover 1:1, so they're left for a follow-up with visual QA.Verification
typecheck,build,lintand unit tests pass. One pre-existingnode-modules-toolsh3 module-type test fails onmaintoo (h3 v2-rc is ESM-only vs the staledualexpectation), unrelated to this change. Live browser / e2e a11y QA is recommended as a follow-up (Playwright chromium isn't preinstalled in this environment).This PR was created with the help of an agent.