Global styles variations: Improve naming and clarify feature

[afercia]

Description

Noticed while working on #59508
See also #59504

As a user, I'm confused about what the various 'styles variations' are in the editor.
They're are named inconsistently and it's not clear they come from the theme. Also, when themss provide specific variations for specific aspects like Typography varaitions or Colors variations, it's not clear how setting a specific variation interat with a global variation and vice-versa.

Naming

• In the editor navigation panel, they are under the Styles panel and referred to as 'style combination'.
• In the Styles panel > Tpography or Colors, they were referred to as 'Presets'. These headings have been entirely removed in Global Styles: Remove preset headers #59504
• Lastly in the Styles > Browse styles, they are referred to as 'variations`.

Screenshot:

The inconsistent naming (or lack of it) doesn't help users understand what this feature is and how it works.
To me, these are 'variations' and should always be named as sucn.

Also, any section in the Typograph and Colors panel should be clearly identified by a heading. I'm not sure removing the 'Presets' heading is ideal, rather this sections should be named 'Variations'. All other sections are identified by headings e.g.: Fonts, Elements, Palette, Color...

Provided by themes

AFAIK there's no explanation anywhere these variations are provided by the active theme and, as such, they will be lost when switching to another theme.

The naming and descriptions on these panels don't help understand a fundamental aspect of this feature. I'd think the UI should clearly explain these styles variations are a theme feature.
Note: I'm not sure whether variations can be provided by plugins as well.

Reset to default

While the 'global' variations in the editor navigation panel under Design > Styles and in the Styles panel under 'Browse stylew' do have a 'Default' variation that allows users to reset to the default, the Typography and Colors variation can't be reset.

• Use Twenty Twnety-Four as active theme.
• Go to Site Editor > Design > Styles and observe there are 8 varaition previews. The first one is 'Default'.
• Go to Site Editor > Styles > Browser styles, and observe there are 8 varaition previews. The first one is 'Default'.
• Go to Site Editor > Styles > Typography and observe there are 5 variation previews. There's no 'Default'.
• Go to Site Editor > Styles > Colors and observe there are 7 variation previews. There's no 'Default'.

As such, when applhying a Typography variation or a Color variation separately, there's no way to 'reset' them to the default.

Active variations indication could be improved.

This is particularly confusing when setting single specific variations for Typography or Colors, For example.

• Set a Typography variation.
• Set a Color viaration (different from the Typography one).
• Go to Site Editor > Design > Styles or to Site Editor > Styles > Browser styles: the 'global' variation previews don't indicate in any way that one of them has been set for Typography only and another one has been set for Colors only.
• As such, as a user, I'd be confused and I could attempt to click one of the global styles, thus resetting the single variations I previously set.

Overall, I'd think the UI is confusing for users and should be clarified drastically.

Step-by-step reproduction instructions

See above.

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

[Marc-pi]

@afercia have a look at this #59675 also :-)
it's not natural to see directly the varations list (it's not a daily usefull feature)...