Add updated new UI icons and mappings

[helin24]

This is following guidance from https://plugins.jetbrains.com/docs/intellij/icons.html#new-ui-icons and removes the need for us to toggle icon changes on light/dark mode or compact vs. normal mode.

Light:

Dark:

Compact light:

Compact dark:

[c5inco]

Have you actually tried these icons at runtime? I ask because it looks like you are using some shades of blue that don't exactly match the IntelliJ icon color palette, which can be an issue on the active selected state on a tool window since it may not fully turn the icon white and result in blue on blue background.

[c5inco]

Ah yeah, this issue has already been reported: #7621

[helin24]

@c5inco thanks, I'll see if I can change to using the standard icon color palette. Where can I find what colors are part of the IntelliJ palette?

Never mind, I suspect it's in here and I've requested access to figma to open it.

[helin24]

@c5inco When I'm choosing a color for icons, does being "standard" mean that the color has to be noted as being relevant for icons? For example, should I be able to use Blues 1-3, or only Blue 4 in an icon? I seem to be getting inconsistent results when I'm testing: blue 4 always works, but blue 1-3 sometimes works and sometimes doesn't.

[c5inco]

Yes the color palette can be found in the Int UI Kit Community file.

And yes, you should be using colors that the palette descriptions describe as being used. So to your example, yes, when using Blue, you need to use Blue4 (for light theme) and the other for dark theme (can't recall at the moment what it i s). This should be noted in the Figma file.

It's also helpful to look at the colors used in the Int UI Icons Community file which shows the larger range of colors you can use, that should map as well.

[helin24]

Thanks for the advice! I believe I'm using the right colors now, but I get inconsistent results on hover.

There are five custom icons here below the selected icon:

Out of these, icons 2 and 3 exhibit the correct behavior on selection, e.g.:

Icons 1, 4, and 5 don't become white on selection, e.g.:

All five are using a combination of gray 6 (#6C707E) and blue 4 (#3574F0). Are there other factors besides color that determine whether the icon turns white on selection?

[c5inco]

Tool window icons only tint to white on active selection (since the background turns to the accent blue). For other states like hover or inactive selection, it doesn't tint to white in order to maintain contrast with the respective state backgrounds (shades of gray).

[helin24]

Thanks! I think I was in the state of inactive selection due to some of these tool windows not truly being initialized until an app was running. This works as expected now.