Style Book icon button in the navigator doesn't show any pressed style

[afercia]

Description

The 'Stye book' icon button is a 'toggle button' as in: can be activated and it stays in a 'pressed' state until it is deactivated. When activated, the editor shows the Style Book.

The 'pressed' state must be communicated visually and semantically.
Semantically: the button gets an aria-pressed="true" attribute.
Visually: it should show a pressed style.

In the Editor settings panel, the pressed style works well: the button gets a dark background against the white nackground of the sidebar. Screenshot: on the left: non-pressed, on the right: pressed.

However, in the Navigator panel, the pressed style doesn't work simply because the background of the panel is dark and the icon button is adrl also when non-pressed. There is no visual difference between the two states.
Screenshot: on the left: non-pressed, on the right: pressed.

As such, sighted users can't determine the state of the button, which is a less than ideal UI.

Step-by-step reproduction instructions

• Go to the Site Editor > Design > Styles.
• Click the Style Book icon button.
• Observe there's no visual difference when the button is pressed and non-pressed.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I proposed in #53430 a comprehensive solution approach that includes this issue.

[afercia]

@t-hamano I don't know enough about the Theme component to understand how it works but your proposal in #53430 sounds brilliant ❤️

[t-hamano]

For additional information, the design system proposed in #53612 may provide a more comprehensive solution.