Colour

tier 2 — classes

Picking a colour: the platform's own picker in the field's chrome, and a preset palette to choose from. There is no picker logic in the library — the native input already is one.

A colour field

.form-color on <input type="color"> gives it the shared control heights, the field border and the field focus ring, so it lines up beside a .form-input; .form-input-sm and .form-input-lg size it. Pair it with a text field for the value when the reader may need to type or paste one — the native picker's own entry is per-engine.

Label colour

<div class="sedna-col sedna-gap-3" style="max-width:360px">
    <div class="form-field">
        <label class="form-label" for="label-colour">Label colour</label>
        <div class="sedna-row sedna-gap-2">
            <input class="form-color" id="label-colour" type="color" value="#3aa8e2" />
            <input class="form-input" type="text" value="#3aa8e2" aria-label="Label colour as hex" spellcheck="false" />
        </div>
    </div>
    <div class="sedna-row sedna-gap-2" style="align-items:center">
        <input class="form-color form-input-sm" type="color" value="#22c55e" aria-label="Small" />
        <input class="form-color" type="color" value="#f59e0b" aria-label="Default" />
        <input class="form-color form-input-lg" type="color" value="#a283ff" aria-label="Large" />
        <input class="form-color" type="color" value="#707e93" aria-label="Disabled" disabled />
    </div>
</div>

A preset palette

.swatch-grid of <button class="swatch">, each carrying its colour as --swatch in its style attribute, because the colour is your data. The chosen one is aria-pressed="true", drawn as a ring rather than a tint so it shows on any colour. Name every swatch with aria-label: a colour is not an accessible name, and a reader who cannot tell two greens apart needs the word.

Calendar group

<div class="form-field">
    <span class="form-label" id="group-colour">Calendar group</span>
    <div class="swatch-grid" role="group" aria-labelledby="group-colour">
        <button class="swatch" type="button" style="--swatch: var(--coral-500)" aria-label="Coral" aria-pressed="false"></button>
        <button class="swatch" type="button" style="--swatch: var(--orbit-500)" aria-label="Blue" aria-pressed="true"></button>
        <button class="swatch" type="button" style="--swatch: var(--green-500)" aria-label="Green" aria-pressed="false"></button>
        <button class="swatch" type="button" style="--swatch: var(--amber-500)" aria-label="Amber" aria-pressed="false"></button>
        <button class="swatch" type="button" style="--swatch: var(--violet-500)" aria-label="Violet" aria-pressed="false"></button>
        <button class="swatch" type="button" style="--swatch: var(--teal-500)" aria-label="Teal" aria-pressed="false"></button>
        <button class="swatch" type="button" style="--swatch: var(--slate-500)" aria-label="Grey" aria-pressed="false"></button>
    </div>
</div>