Theme verification page: replace raw HTML elements with actual Rokkit components

[jerrythomas]

Description

/playground/themes uses raw HTML elements with data attributes instead of the actual Rokkit Svelte components. This makes the page misleading and means theme styles are not verified properly — component-internal markup (icons, spinners, label slots, state management) is absent.

Playwright-Verified Evidence

Buttons — 7 of 10 themes show identical rokkit gradient

Inspected via Playwright getComputedStyle:

Theme	background-image on [data-button][data-variant="primary"]
rokkit	linear-gradient(in oklch, orange 0%, pink 100%) ✅ intentional
minimal	none ✅ flat fill
material	none ✅ flat fill
glass	rokkit gradient ❌
shadcn	rokkit gradient ❌
daisy-ui	rokkit gradient ❌
bits-ui	rokkit gradient ❌
carbon	rokkit gradient ❌
ant-design	rokkit gradient ❌

Those 5 new themes have no button CSS of their own and fall back to the base gradient.

Also: data-style is being set on individual <button> elements (for outline/ghost style), which overrides the parent [data-style="{theme}"] scope. Button's own data-style prop means something different (outline/ghost style), not the theme name.

Input — whitish border is Tailwind bleed

• rokkit input: borderColor: rgb(229, 231, 235) — this is Tailwind border class default (gray-200), NOT from the theme
• minimal input: all 4 borders are 1px solid — should be bottom border only (underline style)
• minimal input: transition: background-color 0.15s — underline focus animation not wired up

Card — same Tailwind border bleed

• rokkitCard: borderColor: rgb(229, 231, 235) — from the border Tailwind class on the raw div, not the theme

Toggle — native checkbox, not <Switch>

The page uses <input type="checkbox"> wrapped in a <label>. The <Switch> component exists and should be used.

What Needs to Change

Replace every raw element in site/src/routes/(play)/playground/themes/+page.svelte with the actual component:

Current (raw)	Replace with
<button data-button data-variant=... data-style=...>	<Button variant=... style=...> from @rokkit/ui
<div data-input-root><input ...></div>	<Input ...> from @rokkit/forms
<input type="checkbox"> in label	<Switch ...> from @rokkit/ui
<div data-card><div data-card-header>...</div>...</div>	<Card> with {#snippet header()} from @rokkit/ui

Also remove the bare border Tailwind classes — let theme CSS own all borders.

Additional Issues Found

These should be fixed alongside or tracked separately:

1. Missing accent/tertiary button variant — the themes page only shows default/primary/secondary/danger/outline/ghost. An accent variant should be added since the token exists.
2. Material theme: inputs need floating label — material style requires the label to sit inline then float up on focus. Raw <input placeholder> cannot implement this; needs the <Input> component with a label prop.
3. Minimal theme: underline input not implemented — bottom-border-only with focus animation is not rendering correctly.
4. 5 new themes have no button CSS — glass, shadcn, daisy-ui, bits-ui, carbon, ant-design need theme-specific button styles defined.

Affected File

site/src/routes/(play)/playground/themes/+page.svelte

[jerrythomas]

Fixed in 83598aa1f81c769349306274f923e5f20b020cbe. The themes verification page now uses actual Rokkit components:

• <Button> — proper variant/style/disabled props, correct data attributes
• <Input> — no more Tailwind border bleed, theme CSS owns the border
• <Switch> with On/Off options — replaces native checkbox
• <Card> with header/body/footer snippets — proper component markup

Remaining from this issue:

• 5 new themes (glass, shadcn, daisy-ui, bits-ui, carbon, ant-design) still fall back to the base rokkit gradient for buttons — tracked in issue Theme verification: buttons look identical across all themes (gradient from primary bleeds through) #89
• Minimal input underline animation not implemented — tracked in issue List: child items not indented in rokkit theme; missing gap before group headers #87
• Material floating label not implemented — tracked in issue List: child items not indented in rokkit theme; missing gap before group headers #87
• accent button variant not yet supported — filed as issue Button: add accent/tertiary variant #92

[jerrythomas]

Resolved — themes/+page.svelte uses , , and Rokkit components throughout.