Tones
The tone= attribute sets --aura-tone-color, which is consumed by
surfaces, borders, and text. Tones and surfaces compose independently — set tone once,
change surface freely.
All tones — ghost surface
primary
danger
success
warning
info
accent
neutral
<div surface="ghost" tone="primary" density="default" radius="lg">primary</div> <div surface="ghost" tone="danger" density="default" radius="lg">danger</div> <div surface="ghost" tone="success" density="default" radius="lg">success</div> <div surface="ghost" tone="warning" density="default" radius="lg">warning</div> <div surface="ghost" tone="info" density="default" radius="lg">info</div> <div surface="ghost" tone="accent" density="default" radius="lg">accent</div> <div surface="ghost" tone="neutral" density="default" radius="lg">neutral</div>
All tones — solid surface
<button surface="solid" tone="primary" density="default" radius="md" motion="expressive">primary</button> <button surface="solid" tone="danger" density="default" radius="md" motion="expressive">danger</button> <button surface="solid" tone="success" density="default" radius="md" motion="expressive">success</button> <button surface="solid" tone="warning" density="default" radius="md" motion="expressive">warning</button> <button surface="solid" tone="info" density="default" radius="md" motion="expressive">info</button> <button surface="solid" tone="accent" density="default" radius="md" motion="expressive">accent</button> <button surface="solid" tone="neutral" density="default" radius="md" motion="expressive">neutral</button>
All tones — neon surface
primary
danger
success
accent
<div surface="neon" tone="primary" density="default" radius="md">primary</div> <div surface="neon" tone="danger" density="default" radius="md">danger</div> <div surface="neon" tone="success" density="default" radius="md">success</div> <div surface="neon" tone="accent" density="default" radius="md">accent</div>
Tone as text color
Without a surface, tone= sets the text color only.
Inline tone (no surface)
Status: All systems operational
Warning: Approaching usage limit
Error: Authentication failed
<p>Status: <span tone="success">All systems operational</span></p> <p>Warning: <span tone="warning">Approaching usage limit</span></p> <p>Error: <span tone="danger">Authentication failed</span></p>
Custom tone color
Override the tone CSS variable at the root (or any scope) to use your own brand color.
Token override via CSS or init()
Ghost orange
/* CSS */
:root { --aura-color-primary: #f97316; }
/* OR via JS runtime */
import { init } from 'useaura'
init({ tokens: { tone: { primary: '#f97316' } } })