Color input
Examples for the ss-c-color-input module: a native
input[type=color] as a square field, a colour field with
its value, and ss-c-swatch-list, a radio group of
swatches for fixed palettes.
Color input
HTML
<input type="color" class="ss-c-color-input ss-c-color-input--sm" aria-label="Stroke colour (small)" value="#287192">
<input type="color" class="ss-c-color-input" aria-label="Stroke colour" value="#287192">
<input type="color" class="ss-c-color-input ss-c-color-input--lg" aria-label="Stroke colour (large)" value="#287192">
<input type="color" class="ss-c-color-input" aria-label="Disabled colour" value="#999999" disabled>Color field with value
An <output for> next to the input; RangeOutputManager keeps it in sync for colour inputs too.
HTML
<div class="ss-c-color-field" data-ss="range-output">
<label for="cursor-colour">Cursor colour</label>
<input id="cursor-colour" type="color" class="ss-c-color-input" value="#d9480f">
<output for="cursor-colour" class="ss-c-color-field__value">#d9480f</output>
</div>Swatch list
Each swatch is a radio; its colour comes from --ss-swatch.
Names stay available to screen readers; --labelled shows them.
The selected swatch gets a two-tone ring, the focused one the focus ring.
HTML
<fieldset class="ss-c-swatch-list">
<legend class="ss-c-swatch-list__legend">Highlight</legend>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#ffffff">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #ffffff"></span>
<span class="ss-c-swatch-list__name">White</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#111111">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #111111"></span>
<span class="ss-c-swatch-list__name">Black</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#287192" checked>
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #287192"></span>
<span class="ss-c-swatch-list__name">Blue</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#2b8a3e">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #2b8a3e"></span>
<span class="ss-c-swatch-list__name">Green</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#e8590c">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #e8590c"></span>
<span class="ss-c-swatch-list__name">Orange</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch" value="#c2255c" disabled>
<span class="ss-c-swatch-list__chip" style="--ss-swatch: #c2255c"></span>
<span class="ss-c-swatch-list__name">Pink (unavailable)</span>
</label>
</fieldset>Labelled swatches
HTML
<fieldset class="ss-c-swatch-list ss-c-swatch-list--labelled">
<legend class="ss-c-swatch-list__legend">Theme colour</legend>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch-named" checked>
<span class="ss-c-swatch-list__chip" style="--ss-swatch: var(--ss-color-accent)"></span>
<span class="ss-c-swatch-list__name">Accent</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch-named">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: var(--ss-color-success)"></span>
<span class="ss-c-swatch-list__name">Success</span>
</label>
<label class="ss-c-swatch-list__item">
<input class="ss-c-swatch-list__input" type="radio" name="swatch-named">
<span class="ss-c-swatch-list__chip" style="--ss-swatch: var(--ss-color-error)"></span>
<span class="ss-c-swatch-list__name">Error</span>
</label>
</fieldset>