feat(core): info/success/warning/danger variants on json-render Card & Stack - #491
Open
dvcolomban wants to merge 2 commits into
Open
feat(core): info/success/warning/danger variants on json-render Card & Stack#491dvcolomban wants to merge 2 commits into
dvcolomban wants to merge 2 commits into
Conversation
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
dvcolomban
force-pushed
the
feat/json-render-semantic-variants
branch
from
July 28, 2026 17:02
521ed68 to
10cff95
Compare
…& Stack Extends the variant model from vitejs#477 (which added secondary/ghost/danger) with info/success/warning — new variants entirely, with no prior pixel output to preserve. Also retunes danger: vitejs#477 gave it a flat colored background with a plain grey border, which reads as a mismatch once info/success/warning exist alongside it with a real tinted border, so danger now gets the same treatment as the three new variants instead of staying a fourth "neutral" surface. Each of the four semantic variants (info/success/warning/danger) gets: - a light background tint on the body (Card content, Stack row) - a stronger same-hue tint on Card's header bar, so a titled card reads as a deliberate two-tone surface rather than one flat wash - a matching border, brightened on hover when `interactive` primary/secondary/ghost keep their exact prior background, border (none), and hover behavior — verified via the Card story's Controls panel. Also types Card's and Stack's own props (`CardProps`, `StackProps`) co-located in their component files, and adds `registryProps<Type, Props>()` — a typed alternative to the untyped `props: ['element', 'emit', ...]` array form every registry component currently uses, so `defineComponent` infers `setup`'s `ctx.element.props` as the component's own type instead of `Record<string, any>`. Both types are re-exported from the client webcomponents entry (`@vitejs/devtools/client/webcomponents`, already public) as opt-in strict types.
dvcolomban
force-pushed
the
feat/json-render-semantic-variants
branch
from
July 28, 2026 17:14
10cff95 to
0471912
Compare
dvcolomban
marked this pull request as ready for review
July 28, 2026 17:21
…mantic-variants # Conflicts: # packages/core/src/client/webcomponents/index.ts # packages/core/src/client/webcomponents/json-render/registry.ts # test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts
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
Continues #477's
variant/interactivework onCard/Stackwith the four semantic hues already used byBadge(info/success/warning/danger):variantSurface(variant)helper intokens.tssoCardandStackread one table instead of duplicating avariantBackgroundmap each.Badge's pill palette (colors) — a badge-strength fill would read as a heavy block over a whole card, so body/header/border/hover alphas are tuned separately.Card's header bar reads a step stronger than its body, so a titled card is a two-tone surface rather than one flat tint.interactivehover strengthens the variant's own border color (not a generic grey) — previously the hover step was indistinguishable from rest for the semantic variants.primary/secondary/ghost/dangerremain pixel-identical to today's look — this is additive.Stack's row variant is independent from its parentCard's variant, and theCardstory now has arowVariantControl so both can be exercised separately.Screenshots
Test plan
pnpm run lintpnpm run typecheckCardstory Controls: cycled all 7 variants ×interactive×rowVariant, confirmedprimary/secondary/ghost/dangerare unchanged fromupstream/main, confirmed hover border is a clearly visible step up from rest for the four semantic variants