Color Picker Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The header's Brand colour button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ColourFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Because the colours are the visitor's own content: a brand colour is what the dialog is for. The swatches, the header button's dot and the drawn mark carry the chosen colour inline through a CSS variable, each marked with a code comment, and the digits are kept without the hash so no colour literal sits in the source. Everything else, the dialog, the tabs, the buttons and the focus rings, is theme tokens in light and dark.

By the WCAG 2.2 formula, in a pure function: each channel is linearised, the relative luminance is 0.2126 red plus 0.7152 green plus 0.0722 blue, and the ratio is the lighter luminance plus 0.05 over the darker plus 0.05. The colour is compared with white and with a near-black ink, and the better pairing gets the verdict: 7 to 1 is AAA, 4.5 AA, 3 AA for large text, anything lower below AA. It ignores opacity, and it says only what the maths gives, not whether your brand looks right.

Everything. Use colour recolours the drawn page in local state, moves the colour to the front of Recent and says so in a polite status message; nothing is saved. The clipboard is the one thing the page touches. In your app save the colour in use in the format your design tokens take, and keep Recent per user. The HEX, RGB and HSL fields check what you type when you leave the field or press Enter, and say what is wrong instead of changing the colour.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. The colour area and the sliders move with the arrow keys, the presets are a radio group, and each recent colour is a button named by its hex value.

The picker and the tabs stack into one column. The copy shown on load docks to the foot of the page as a bottom sheet with Use colour pinned at the bottom, and everything above it scrolls. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.