feat: add swc-ai-button to the AI toolkit (WIP demo) - #6731
rubencarvalho wants to merge 2 commits into
Conversation
WIP demonstration. Adds a branded AI action button pattern under patterns/ai-toolkit/ai-button, extending the core ButtonBase: - sizes s/m/l/xl, optional slotted label, always-on sparkle icon - brand-relative OKLCH gradient wash + inset gloss; retint via the --swc-ai-button-brand-color custom property - ambient glow with hover/press states - stories + docs page Adds a shared SparkleIcon to the toolkit icon utils.
|
Track the pointer on the window (rAF-throttled) and write proximity + position custom properties. A masked border-ring reflection lights the edge nearest the cursor, and the ambient glow and wash scale with proximity; hovering is just proximity = 1. Disabled suppresses it.
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
1 participant
Adds a branded AI action button pattern under
patterns/ai-toolkit/ai-button, extending the coreButtonBase.What's here
swc-ai-buttonelement: sizess/m/l/xl, optional slotted label, always-on sparkle icon (icon-only renders a circle and requiresaccessible-label).swc-prompt-field: a brand-relative OKLCH gradient wash + inset gloss dome, driven by the--swc-ai-button-brand-colorcustom property (override it to retint — no attribute).SparkleIconadded to the toolkit icon utils.Notes / open questions
ponytail:comment). Worth deciding whether these should become real tokens.light-dark()rather than separate blend-mode layers.🤖 Generated with Claude Code