fix(json-render-ui): align catalog component styling

[dvcolomban]

Summary

• add translucent raised and sunken panel shortcuts based on the design system semantic tokens
• apply the layers to cards, text inputs, code, tables, and neutral notices
• normalize every catalog button variant to a 32px height
• replace the collapsible-card text glyph with a rotating Phosphor caret
• expand stories for all button variants, both card states, and nested panel surfaces

FormSelect and FormCombobox remain unchanged.

Before

After

Refs #267

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devframe	Skipped		Aug 21, 2026 6:01pm

[Copilot]

Pull request overview

Updates JSON renderer catalog styling with translucent panel surfaces, standardized 32px buttons, rotating card carets, and expanded stories.

Changes:

• Adds raised and sunken panel styling across catalog components.
• Normalizes button variants to 32px height.
• Expands Storybook coverage for variants and nested surfaces.

Review finding: the standalone SPA UnoCSS config lacks the new panel shortcuts, so affected surfaces will not receive CSS there. Add the aliases to the SPA config or share the shortcut definition. (Moderate, 3 votes.)

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Summary
packages/json-render-ui/uno.config.ts	Adds panel shortcuts; SPA configuration also needs them.
packages/json-render-ui/src/renderer.ts	Styles static notices with raised panels.
packages/json-render-ui/src/JsonRender.stories.ts	Expands styling and component stories.
packages/json-render-ui/src/components/TextInput.ts	Applies sunken input styling.
packages/json-render-ui/src/components/Text.ts	Updates inline code surfaces.
packages/json-render-ui/src/components/DataTable.ts	Adds layered table surfaces.
packages/json-render-ui/src/components/CodeBlock.ts	Adds layered code surfaces.
packages/json-render-ui/src/components/Card.ts	Adds panel styling and rotating carets.
packages/json-render-ui/src/components/Button.ts	Normalizes button sizing.

Suppressed comments (2)

packages/json-render-ui/src/components/Card.ts:25

• CardProps.title is optional, so a valid collapsible card can have no visible summary text. Since the only other child is now aria-hidden, that summary has an empty accessible name; the old glyph was at least exposed (though not descriptive). Add an aria-label fallback such as props.title || 'Toggle details' to the <summary>.

      h('summary', { class: `${headerClass} cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden` }, [

packages/json-render-ui/src/components/DataTable.ts:34

• bg-panel-raised expands to the alpha-only bg-hover token. For a DataTable with height set, rows scroll underneath this sticky <thead>, so their text can bleed through the translucent header and make the column labels hard to read. Keep the sticky header opaque or add a reliable occluding/backdrop treatment for the scrolling content.

      h('thead', { class: 'sticky top-0 bg-panel-raised' }, [

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.