A coworker asked me for icons similar to the “font color” and “highlight color” buttons like this in Outlook:
We use an icon font for our web apps like VSTS. Unlike these monocolor basic icons, the font color and highlight color icons need to be “multicolor” and “dynamic”. With icon font, multi-color icons are actually stacked font glyphs with different CSS styles. Then (a part of) the icon color changes to reflect user’s selection. I made a simple demo to show him how to do it in a web UI.
What I learned
::selection pseudo class.
It’s bad practice to use
event.stopPropagation() to dismiss a popup
I wanted to dismiss the expanded swatch panel when clicking outside. Instead of
event.stopPropagation(), I added a listener to
document and let it explicitly detect clicks that are not supposed to open the swatch.