Add outline button variant(s)

[jackgranatowski]

Idea

Add an outline button variant to .sf-btn (optional/components.css) — border-only, transparent-background button — and consider a gradient-border variant on top of it once the solid outline exists.

Why

.sf-btn currently only has fill-style variants (--secondary/--ghost/--primary/--neutral/--success/--warning/--info/--danger/--block) — there is no outline variant at all, solid or otherwise. This is a common, expected button style that's just missing, not a stylistic add-on.

Scope

• Start with a plain solid-color outline variant (.sf-btn--outline or similar), using existing color role tokens for the border/hover-fill transition.
• Gradient-border variant as a follow-up once the base outline pattern and its hover/focus states are settled (gradient borders need a border-image/pseudo-element technique, more involved than solid).
• Update docs/components.md per existing conventions (it already notes a planned but unshipped .sf-button variant set — reconcile with that).

[jackgranatowski]

The solid outline variant is shipped: .sf-btn--outline is live in optional/components.css (transparent to start, fills with the family colour on hover) and composes with any colour family (e.g. .sf-btn--outline.sf-btn--danger). Documented in docs/components.md, which also includes a gradient-outline recipe. The gradient-border variant was explicitly scoped as an optional follow-up ("consider … once the solid outline exists"), so the core ask here is complete. Closing as completed.

---

Generated by Claude Code