MixPicker
A studio picks its colours: each mix a round swatch split across its two colours, named beneath, the chosen one in the selected ring, its mix's second colour deep. MixScope then sets the mix over everything inside it, and the mark, the ball and the letter tile follow.
Preview
Pick one: the letter tile above takes it. Arrow keys move through the mixes; each swatch is a 40px target.
import { MixPicker } from "@/components/shared/mix-picker";
import { MixScope } from "@/components/shared/mix-scope";
const [mix, setMix] = useState<MixId>(studio.mix);
<MixScope mix={mix}>
<StudioMark name={studio.name} />
</MixScope>
<MixPicker value={mix} onValueChange={setMix} aria-label={t("colours")} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | MixId | — | The chosen mix. |
| onValueChange | (mix: MixId) => void | — | Called with the mix picked. |
| labels | Partial<Record<MixId, string>> | English names | The mixes' names in the page's language; any left out read in English. |
| aria-label | string | — | Names the group. Or aria-labelledby, pointing at a visible label. |
| MixScope mix | MixId | — | Sets the mix's colours over its children (an inline style, so it paints from the first byte). className lays out its wrapper; contents leaves the layout alone. |
Guidelines
- One picker per studio, in Settings › Studio and on onboarding's Studio card, beside a preview that takes the mix as it changes.
- A mix is the studio's identity: its mark, ball, loader and letter tile. Never wrap a button or a chosen state in a MixScope to colour it; the UI stays black and white.