Provide sensible integration of Carbon into the app

[nikku]

What should we do?

We want to ensure that Carbon components, such as the Variables Overview are properly integrated into the existing UI. The approach I propose is "theming", by overriding the existing Carbon variables.

• Ensure that Carbon integrates properly into the app, without averse effects (Welcome tab changes font size #4555)
• Consider customization so Carbon components fit into the existing UI frame

Why should we do it?

Ensure uses experience a coherent UI.

[barmac]

Moving this to the backlog as we are not deriving any value from this right now. It will be useful once we introduce more Carbon components to the app.

[jarekdanielak]

Related to bpmn-io/variable-outline#4 (that can possible be closed if we decide to tract this problem here)

[philippfromme]

Moving this to backlog for now. To be picked up whenever we work on the next Carbon-heavy topic.

[nikku]

This continues to cause issues, i.e. when integrating the improved search (#4711).

The core issue is that these styles, being inlined to variable-outline and potential other utilities are loaded async, i.e. late, and will always override ("reset") sensible defaults established elsewhere.

To go carbon first I suggest the following strategy:

• We incorporate a recent version of the Carbon styles, as a foundation.
• Libraries that build on top of Carbon, i.e. variable-outline do not ship the styles, but rely on them to be provided through infrastructure

This way we accomplish the following:

• Application can do sensible adjustments ("theming") as it sees fit
• Application has the styles there per default, hence we prevent any sort of surprises when including carbonized components
• Such core styles should follow the ("there can only be one") philosophy, as all other framework styles (diagram-js.css, ...) follow in the editor.

[nikku]

Discussed with @marstamm today that the approach sketched earlier would work for plug-in development, too:

• plug-ins, like any components would assume the presence of Carbon styles as "shared infrastructure", there can only be one anyway.
• they can in whatever way inject their custom styles (lazy load and inject or provide as custom CSS that must be added to the application)
  • Custom styles MUST NOT cause side-effects
  • Custom styles MUST NOT transitively load carbon styles, but override / customize using standard means of CSS

[nikku]

Moving to ready as I think we can (and should) make substantial progress on this issue before increasing our use of Carbon.

[jarekdanielak]

I will work on this as a part of Hackathon 2025.