JetBrains: Capture all possible theme colors for the JS -> Java bridge and add debugging view in standalone mode

Created by: philipp-spiess

Right now, we manually create a JSON theme based on manual mapping from our names (e.g. backgroundColor ) to the JetBrains name (e.g. Panel.background). For this, we’ve added a typing in TypeScript that matches the generated JSON and we manually map this interim format to CSS variables in our design system.

I am proposing that we, for now, extract a map of all addressable theme colors with their JetBrains name (so e.g. we’d have { "Panel.background": "#123" } ) and handle this in a generic way (with no type safety as to which properties exist).

This is going to remove quite a bit of overhead when we want to extract new fields and would allow for a quick development as we can directly map JetBrains theming names to our style system. We can also easily snapshot the values for dark and light mode for our standalone bridge and would not need to change these, whenever we need a new color to work with.

I also suggest that we only access this new color map from a single place so that, come the point of release, we can quickly see all the property names that are actually used and use those to generate the theme map, instead of always containing every field. This is mostly for performance reasons to avoid sending hundreds of colors over the wire when we end up only needing e.g. 20.

Test plan

Manually verified that JetBrains still starts with the last changes:

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.