Improve hierarchy in the “Apply text styles” UI to match the Styles panel

While working with text styles, I noticed an inconsistency between the Styles view/edit panel and the UI used when applying text styles to text.

The Styles view/edit panel has a strong visual hierarchy:

• Clear grouping (e.g., body → size → variant)

• Nested structure that is easy to scan

• Logical ordering that helps designers understand relationships between styles

However, when applying text styles, this hierarchy is flattened. The lack of grouping makes it harder to:

• Quickly scan available styles

• Understand size and variant relationships

• Confidently choose the correct style, especially in large design systems

Suggestion

Consider using the same hierarchical structure from the Styles view/edit panel in the Apply text style UI.
For example:

• Preserve parent groups like body / small / medium / large

• Visually nest variants such as base, prominent, and link

• Maintain consistent ordering and indentation

Why this helps

• Faster style selection for designers

• Reduced cognitive load when working with large typography systems

• Better alignment between how styles are created and how they are consumed

• Improved usability for design systems and token-driven workflows

This consistency would make applying typography styles much easier to scan and more intuitive, especially for teams managing complex design systems.