Design Tokens Command Menu Block for React

So you can see it without a click. On load the menu is the Command and its box pane 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 box you built in the copy is the box 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.

Only the property its group sets. A neutral token sets the fill, a space token the padding, a radius token the corner, a shadow token the shadow and a type token the size of the letters; the other four stay as they were. The box is drawn with the classes each token carries, the five facts beside it and the Fill field in the drawing read the same state, and the status line says what was applied. A tick and the words ", applied" mark the token in use in each group.

Each group is reached through the same semantic tokens: the box's fill is button.bg, which points at surface.raised, which points at the neutral you picked. The pane shows that chain for the token applied last, so you see which names a change would travel through. The chains are typed with the groups; in your app they come from your token files.

The token applied last, in the format you chose: a CSS variable (--neutral-100: 96%;) or JSON ({ "neutral-100": "96%" }), through the clipboard. The line under the chips shows exactly the text that will be copied, and the status line says what was copied or that the browser refused. The values are the demo system's own; the shadow ones use a made-up --ink-12 variable, so replace them with yours.

All of it. The tokens, their values and the box are typed, nothing is saved and the page's theme never changes: the swatches are mixes of the theme's own text and page colours, so they stay grey in every theme. In your app build TOKENS from your design-token files, keep a class or a style for each so the box can wear it, and make pick write the token to the selected layer.

Yes. Type to search by name, value or word ("radius", "16", "shadow"), the arrow keys move through the tokens, Enter applies the highlighted one and keeps focus in the input, and Escape closes the menu and puts focus on the field; Tab reaches the format chips 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 drawings in the rows are hidden from assistive technology; the names and values carry the same facts.

The inspector goes and the box pane stays under the list. 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 and the count stays. The real dialog keeps the Command dialog's own phone layout.