How PUDL lights a surface

Every raised control in PUDL is drawn from two colours: the light falling on it and the shade beneath it. Neither is painted directly. The stylesheet mixes each into the surface with color-mix(), so a theme that changes its surface colour gets highlights and shadows that belong to it, without naming them.

Try it. The mixer below is the same applet that runs in a page of its own and in a window, embedded here in the article's column. Mix the accent into white and you have a light theme's hover tint; mix it into near-black and you have a dark theme's.

Some mixes the stylesheet uses. Each link sets the mixer above, and without script it is this article's address with the mixer set; Back undoes it either way.

• A selected row's tint, the accent at 12% on white.
• A light theme's shadow, the shade at its depth of 18%.
• A warning badge, the warn colour at 22%.

The address keeps whatever mix you settle on, so copying it shares the article with the mixer as you left it. Adjusting the mixer replaces the address rather than adding to the history, so Back does not step through every colour you tried; only a preset, which is a link, adds a step.