Tone Picker Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its two bands drawn inline under a picture of the inspector, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the format you chose in the copy is the one the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Each tone is a pure grey, so the band computes its relative luminance with the WCAG formula and divides: the lighter of the tone and the ground, plus 0.05, over the darker plus 0.05. That is the ratio shown to one place, and the words follow the usual thresholds: 7 and up is AAA, 4.5 and up AA, 3 and up AA for large text only, and under 3 is below AA. White and black are fixed grounds, not the page, so the numbers stay the same in every theme. The drawn sample beside each ratio is a short bar of the tone on that ground, not text.

Every value in the list, the band and what gets copied. HEX writes #737373, RGB rgb(115, 115, 115) and HSL hsl(0, 0%, 45%); the ramp is neutral, so the hue and the saturation are zero and the three formats describe the same grey. One format is always chosen, the status line says which, and the search reads all three, so typing 737373, rgb or dark finds the tone.

The highlighted tone, written in the chosen format, through the clipboard; the status line says what was copied, or that the browser refused. Enter then sets the Fill (the swatch and the name in the drawn inspector, and the drawn rectangle on its canvas), moves the tone to the front of Recent (three at most, no repeats) and closes the menu with focus on the field. The Copy button in the band copies the same text and changes nothing else.

All of it. The ramp, the Recent list and the Fill are typed state in the block; nothing is saved and the clipboard is the only thing the browser really does. In your app build TONES from your own palette, write the chosen tone to the selected layer in pick, and persist Recent where you keep user settings.

Yes. Type to search by step, value or word, the arrow keys move through the tones, Enter copies and chooses, and Escape closes the menu and puts focus on the field; Tab reaches the format switch and Copy. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The swatches are hidden from assistive technology; every row carries the name and the value, and the Fill is read as ", the Fill".

The inspector goes and the two bands stay. The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go, the count stays, and the band's two ratios stack. The real dialog keeps the Command dialog's own phone layout.