ds
Components
Tone swatch

Tone swatch

Pick a tone for a component or zone.

Code

<div class="tones" role="radiogroup" aria-label="Tone">
  <button class="tone" role="radio" aria-checked="true" aria-label="Default"></button>
  <button class="tone t-purple" role="radio" aria-checked="false" aria-label="Purple"></button>
  <button class="tone t-amber" role="radio" aria-checked="false" aria-label="Amber"></button>
  <button class="tone t-green" role="radio" aria-checked="false" aria-label="Green"></button>
  <button class="tone t-blue" role="radio" aria-checked="false" aria-label="Blue"></button>
  <button class="tone t-red" role="radio" aria-checked="false" aria-label="Red"></button>
  <button class="tone t-teal" role="radio" aria-checked="false" aria-label="Teal"></button>
  <button class="tone t-pink" role="radio" aria-checked="false" aria-label="Pink"></button>
</div>

Each swatch shows a tone's wash with its line colour as the border. The selected one gets a ring in ink with a gap, so it reads on every tone.

Class	On	What it does
`.tones`	div	Row of swatches.
`.tone`	button	A swatch. Default is --surface.
`.t-purple … .t-pink`	.tone	The tone.
`aria-checked="true" / .on`	.tone	Selected ring.