Size Change: +13 B (0%)

Total Size: 1.08 MB

_{compressed-size-action}

Very nice work, this is working well and is close! This is what I see:

Zooming in though, there are a few small things:

The tooltip isn't perfectly centered above the knob. That's probably fine, but if easy to fix would be a nice bit of polish. The focus style is square, though, and 1px. Ideally it's circular like the knob, and 1.5px. This is a bit gnarly as it means we can't use either outline or outline-offset.

The focus style on the current toggle is actually off (it's 2px instead of 1.5px), but the same CSS could potentially be used:

.components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--wp-admin-theme-color);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

I realize that creates a white halo on the inside to emulate the outset. I wonder if we can use background-clip: padding-box; to accomplish something similar, I recall getting something like that to work for this scrollbar that had a bigger hit-area yet still surfaced the color below. 🤔

Note that the 2px solid transparent outline is necessary if we use box-shadow for the focus style. Windows high contrast mode removes any box shadows entirely, whereas at the same time it makes any transparent outlines or borders fully opaque. It's a bit of a trick, but it works well. More on that here.

Let me know if you'd like me to push some tweaks to the branch directly, happy to take a stab.

So interesting, if you check my screenshot of the focus styles... they are circular on Firefox. I'll have to see if Chrome is doing something odd 🤷