feat: restyle widget playground

[effie-ms]

Which Linear task is linked to this PR?

EMB-348

Why was it implemented this way?

Complete redesign of the widget playground sidebar, replacing the old accordion-based layout with a new navigation-driven architecture using sliding panel transitions.

Sidebar structure: Replaced expandable card/accordion components with a nav list → detail view pattern. Each section (Mode, Variant, Height, Wallet management, Developer controls, Theme) has its own detail view with a back button and reset action. Panels slide in/out via a SidebarViewTrack CSS transform approach.

Edit Theme view: New dedicated view for theme customization with inline color pickers, font selection, and surface blocks (Widget/Card/Button) for corner radius, shadow, and border editing. Shadow and border sections use Collapse transitions. Mode toggle is icon-only with filled light/dark icons.

Developer controls: Restructured with a nested sliding panel for widget event configuration. Form values auto-populate on toggle and clear on disable. Reset clears all toggles including widget events.

Removed black and white from playground color customization: The old playground exposed theme.palette.common.black and theme.palette.common.white as editable colors. These were not meaningfully used — common.black had zero active references, and common.white was only used for switch toggle styling. Neither had any real effect on the widget appearance, so exposing them as customization options was misleading. All references to common.black (#000) and common.white (#fff) are now hardcoded.

Standardized grey palette to grey[300]/grey[800] only: The codebase previously used grey[200], grey[400], grey[600], grey[700], and grey[900] in various places. These have been consolidated — grey[200] in WalletTag normalized to grey[300], grey[900] in playground to grey[800], and hover states that used intermediate grey steps (400/600/700) now use color-mix with onBackground at varying opacities, matching the widget's existing hover pattern.

Replaced drop-shadow with box-shadow: All elevation card shadows used CSS filter: drop-shadow(...) which lacks spread control and is more expensive to render. Switched to box-shadow across createTheme.ts, watermelonLight.ts, and playground theme. Added shadow offset X/Y controls to the playground surface blocks alongside existing blur and spread sliders. Tightened slider ranges: blur 0–24, spread 0–8, offsets -8–8.

Header spacing adjustment: Removed header bottom padding and added equivalent top padding to the content area below the header for cleaner visual separation.

Summary of changes

Playground (widget-playground)

• Redesigned sidebar with nav → detail view sliding panel navigation
• New components: NavListItem, CardSelect, SidebarHeader, SidebarFooter, DetailViewHeader
• New detail views: ModeDetailView, VariantDetailView, HeightDetailView, WalletManagementDetailView, DeveloperControlsDetailView, ThemeEditDetailView
• Theme editing: color palette (with mode toggle), typography/font picker, surface blocks for Widget/Card/Button (corner radius, shadow, border)
• Shadow controls: offset X/Y (-8–8), blur (0–24), spread (0–8) with slider and editable input
• Developer controls: form values presets (chains/tokens, amount, to address) with config/formRef toggle, bookmark store seeding, skeleton preview, widget event listeners
• Height controls: card-select layout picker, input with minimum hint, cross button clears input and resets container
• Collapse transitions on expandable sections (shadow, border, form values, theme nav item)
• System mode as default when theme supports both light/dark
• Simplified grey palette config (only grey.300/grey.800)
• Viewport background updates on mode switch with fallback colors
• Removed old accordion-based controls, code editor panel, and unused logo components
• Hardcoded common.white (#fff) and common.black (#000) — removed from theme palette customization
• Hover states use color-mix(onBackground) instead of discrete grey steps
• Replaced drop-shadow filter with box-shadow in playground theme

Widget (widget)

• Replaced filter: drop-shadow(...) with box-shadow in createTheme.ts and watermelonLight.ts
• Header padding-bottom set to 0, content area gets padding-top via AppLayout
• Standardized grey.200→grey.300 in WalletTag
• Hardcoded common.white to #fff in Switch component
• Replaced common.black/common.white theme vars with hex values in watermelonLight theme

Visual showcase (Screenshots or Videos)

TODO: Add screenshots of the new sidebar design

Checklist before requesting a review

• I have performed a self-review and testing of my code.
• This pull request is focused and addresses a single problem.
• If this PR modifies the Widget API or adds new features that require documentation, I have updated the documentation in the public-docs repository.

[github-actions]

Hey! This is your new endpoint: https://ef3ccbb6.widget-playground-1so.pages.dev

[github-actions]

Hey! This is your new endpoint: https://a011f626.widget-playground-1so.pages.dev

[github-actions]

Hey! This is your new endpoint: https://3982bdd4.widget-playground-1so.pages.dev

[github-actions]

Hey! This is your new endpoint: https://27687382.widget-playground-1so.pages.dev