Color Token Grid Gallery Block for React

From the page itself. After mount the block reads each swatch's computed background colour, draws it onto one canvas pixel so any colour syntax (oklch, color-mix, hex) turns into sRGB bytes, and prints those bytes as RGB and Hex and converts them to OKLCH. A token defined in a wider colour space shows its nearest sRGB value.

The swatches repaint at once because they use the tokens, and the block watches the page's root element for a changed class, style or theme attribute and reads the values again, so the text stays true in light and dark.

The text shown under the swatch in the current format, such as var(--primary) (under Token, which shows --primary), oklch(0.205 0 0), rgb(24 24 27) or #18181b. The button changes to a check and a screen reader hears what was copied. If the browser refuses the clipboard, the button shows a cross and says so.

The server cannot know what the browser will paint, so the first render shows the token names (--primary) and the values arrive a moment after mount. Under the Token format the names are what you want anyway.

Edit the SWATCHES list: each entry is the token's name, a literal Tailwind class that paints it (bg-brand) and a short line saying what it is for. Add a second list for another group, or turn the grid into a tab per group.

The Format group is one tab stop, with the arrow keys moving between formats. Tab then visits each Copy button in reading order; Enter or Space copies.