[docs] color swatches in hides color name

As much as I like the animation of the swatches they seem to block the name unfortunately 😥. The other issue I see is that when the drop down is clicked the size of the swatch expands (not sure if that was intended or no)

https://user-images.githubusercontent.com/11358903/145268230-59665553-1170-4a80-b6d3-652a612eaa50.mp4

I'd like to help fix this issue, would love some pointers @argyleink! Also would like to know if you had considered regular square swatches (like in tailwind docs maybe?) and the naming the colors inside the square or below each square?

No file or test entry point is named in the issue; start by locating the documentation color-swatch UI and reproducing the behavior shown in the linked video. Done means color names remain visible and opening the dropdown does not unexpectedly change the swatch size, with the intended layout confirmed.

Written by the indexing model from the issue text.