Explore how setting categories are formatted

[roblourens]

This came up in #54690 (comment) and #55616 (comment)

tl;dr, we show settings with some category context that's dynamically computed based on the sections its in. In the flat search mode, we show the full category from the setting key but not the TOC category.

• Should we show the TOC category somewhere in the flat search mode?
• Should the category with multiple components be formatted differently? e.g. instead of Editor.Hover: Delay, Editor > Hover: Delay or something like that? Not a fan of the dot here especially when a component contains spaces. Workbench.Command Palette: History looks wrong
• Since we updated the category opacity to meet color contrast guidelines, the categories are harder to skim/parse out visually. Anything we can do about that?
• Acronyms like IE and CSS should be formatted in all caps, where they are extracted from the setting key.

[chpxu]

Hi @roblourens, I prefer the arrow, I think it'd be a better choice since it'll show a hierarchy of the settings better and it won't get weird like you mentioned.

Also for the colour contrast, what about when you click on a setting, the background of that box transitions to something else?

Maybe add some hr tags to denote ends/beginnings of sections too?

[roblourens]

Extra line?

Basic gt sign:

Monospace gt sign:

Unicode "division slash":

Dot:

Filled in arrow:

Fancy arrows:

👇👇👇

[roblourens]

@misolori we lost some of the color contrast in the category, to fit the color contrast accessibility guidelines. I thought the setting names got harder to scan when we made that change. Do you think it would be ok to use the brighter "highlight" white color from the section titles and TOC selected item for the setting label?

Would look like this:

[roblourens]

Should we show the TOC category somewhere in the flat search mode?

Feels too noisy, redundant in some cases.