Persistent List View: Update hover, focus, select styles to make the focus clear in relation to the canvas

[Copons]

This issue is about the Persistent List View experiment (#28637), currently only available in the Site Editor.

When clicking a Persistent List View item, it should be immediately clear that the focus moved to the corresponding block in the canvas.
Currently, the selected item's black background is much heavier than the selected block's thin outline, so the former steals the attention from the latter.

Once the focus has moved to the block, navigating the canvas (as in, changing the block selection) will also change the selected item in the List View.
This synchronous change makes it even harder to determine if the focus is on the block or on the list.

The confusion gets even more problematic because the list navigation is linear (up/down), whereas navigating the canvas is bidimensional (e.g. horizontally aligned blocks).
If the focus is in the canvas, but the user thinks the focus is on the List View, navigating vertically might produce unexpected behaviours (e.g. it jumps between blocks).

[jameskoster]

Hoo boy, this is rather complex. Some thoughts:

It is likely in our best interest to align styles between the canvas and list view as much as possible. IE a consistent focus treatment for blocks, consistent colors applied upon selection, hover, etc.

Using the blue halo as a ring that denotes focus makes sense as there is existing precedent (see menu items in popovers, icons in toolbar, etc). A problem there is that we currently use a blue ring to highlight the selected block on the canvas. This may need to change. There is also a problem in that combining the blue focus ring with another outline on the canvas can create some awkward visuals.

The solid background applied to selected blocks in list view is strong, but I hope that a consistent application of focus treatment as mentioned above will help address this.

Here's a rough take at bringing everything in to alignment:

The focus treatments are intentionally prominent, probably overly so. I'm hoping this can serve as a starting point from which we can refine.

---

Bringing this back in to some actual user flows... here's how the styles are applied as a user performs the following:

• Selects a block
• Tabs from the block to the toolbar, and back again
• Opens list view (note the focus ring moves from the canvas to list view)
• Navigates up / down list view using ⬆️ ⬇️ keys
• Selects a block from list view (focus moves back to the canvas)

list.view.mp4

---

It's really hard to investigate the full nuance of this in figma. If we agree on the principles above, I would love to see a PR based on them that we can all play around with.

Either way, let's discuss.

[Copons]

On paper, LGTM.

I have some doubts about the "double border" of Focused&Selected. It looks aesthetically pleasant to me, but maybe with different admin colors it could clash with the block type color. 🤔

Just for clarity, I'm adding a zoomed-in version of what I'm talking about:

List	Block

[jameskoster]

Yeah the double border thing is going to be tricky to get right :) The empty gap between them should help with color compatibility, but I worry it might feel too heavy on the canvas. If we can get something up and running in a PR then we can fine-tune the details.