#840
Flat panel
Full-page AuthLayout whose side panel is flat (solid surface, no gradient, no blobs) with a toggle back to the brand gradient.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Flat panel" pattern (@codeatlasdev/ui demo #840, layout/auth-layout) in my app.
Call get_demo({ ids: ["#840"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Sign-in pages in themes with a flat or outlined surface style, or design systems that forbid gradients.
Keep these library parts, with the props and tokens the demo uses:
- AuthLayout, AuthCard, Button, SegmentedControl, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<AuthLayout logoName="Acme" panelTone={tone}>` with `let tone = $state<'brand' | 'flat'>('flat')`
- `panel` snippet holds `<p class="auth-quote__text">Ship the boring parts in a day.</p>`
- `<AuthCard title="Welcome back" subtitle="Panel tone: {tone}">` holds a `SegmentedControl` (Flat, Brand) bound to `tone` and a Close button
- Opened by an outlined small Button inside an overlay with `position: fixed;` and `inset: 0;`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- AuthLayout
@codeatlasdev/ui - AuthCard
@codeatlasdev/ui - Button
@codeatlasdev/ui - SegmentedControl
@codeatlasdev/ui - Stack
@codeatlasdev/ui
How it is built
- `<AuthLayout logoName="Acme" panelTone={tone}>` with `let tone = $state<'brand' | 'flat'>('flat')`
- `panel` snippet holds `<p class="auth-quote__text">Ship the boring parts in a day.</p>`
- `<AuthCard title="Welcome back" subtitle="Panel tone: {tone}">` holds a `SegmentedControl` (Flat, Brand) bound to `tone` and a Close button
- Opened by an outlined small Button inside an overlay with `position: fixed;` and `inset: 0;`
Related
Loading source.