#227
Tinted and glowing
Three glass surfaces over a gradient: tinted, glowing, and tinted with glow.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Tinted and glowing" pattern (@codeatlasdev/ui demo #227, foundation/materials) in my app.
Call get_demo({ ids: ["#227"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Highlighting a glass chip or panel with a brand tint, a glow, or both.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `<Surface material="glass" tone="brand" class="chip">` labelled Tinted
- `<Surface material="glass" glow class="chip">` labelled Glowing
- `<Surface material="glass" tone="brand" glow class="chip">` labelled Tinted + glowing
- Backdrop gradient runs `var(--ca-brand-main) 0%` to `var(--ca-semantic-success) 100%`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Surface
@codeatlasdev/ui
How it is built
- `<Surface material="glass" tone="brand" class="chip">` labelled Tinted
- `<Surface material="glass" glow class="chip">` labelled Glowing
- `<Surface material="glass" tone="brand" glow class="chip">` labelled Tinted + glowing
- Backdrop gradient runs `var(--ca-brand-main) 0%` to `var(--ca-semantic-success) 100%`
Related
Loading source.