I think we should increase this width back to how it was before: calc(2 * var(--wp-admin-border-width-focus)). It's hard to notice it at the thinner width.

This is x2 on the outline-width and * -3 for the offset. I think this looks good and is easier to see where the focus ring is.

I think we should increase this width back to how it was before: calc(2 * var(--wp-admin-border-width-focus)). It's hard to notice it at the thinner width.

But we don't use that thicker focus anywhere else. This is the standard.

The size of the thing that's being focused is the difference here. It's way too easy to miss with it wrapping something that takes up almost the entire page. I did a hallway test with my partner and she couldn't even see where the focus went with the thinner ring.

I'd echo the instinct to avoid edge-cases on the variables. If we need more indications, potentially additional options are available, such as a stacked outline/halo, a shadow change outside the entire area itself. Unless the regression has been fixed, the scaling of the entire preview is also still missing.

Another benefit of using the variable is that we can add a toggle or even a stepped slider in the acccessibility settings of preferences to have thicker outlines. The variable would make that relatively trivial to do, since it's already uniformly applied across compontry for that specific reason.

I'm fine with whatever approach allows for it to be clear that the canvas is selected. I'm not attached to the approach. The current thinner border isn't enough to communicate the canvas is focused.

I agree the inset outline can be tricky to see, especially if the site background is in the same ballpark as the admin theme color. This is a TT4 style variation and it's basically invisible to my eye, even when zoomed in:

Could the outline be outset instead? I don't know if it breaks a11y rules, but this selector works:

.edit-site-layout__canvas:has(.is-focused) {}

We can't use outset, in its current form at least, as it's hidden via overflow-hidden. Not sure if we can adjust where the focus is applied?

This uses a layered focus style to ensure it works while inset.

We can't use outset, in its current form at least, as it's hidden via overflow-hidden

The selector I suggested targets the outer container (only when the button is focused), so is not hampered by overflow: hidden;. The idea is to apply the outline to that element instead.