Provide styling possibilities

[maheichyk]

Is your feature request related to a problem? Please describe.

We tried to use module API to partially implement sidebar changes described in https://github.com/matrix-org/matrix-react-sdk-module-api/issues/8.

The following was applied:

• Custom module created and installed
• Simple component was added to the Element menu as an extension point that uses ModuleRunner.instance.invoke to load and render extra sidebar button with menu from a custom module
• Sidebar button with menu is using matrix-react-sdk components like SpaceButton, IconizedContextMenu etc to make the UI to look like an Element. To be able to use these components matrix-react-sdk was added as dependency to the custom module and some dependencies where updated in matrix-react-sdk-module-api to be as in matrix-react-sdk for the code to compile

While these steps allow to add a sidebar button it seems that it is currently not possible to provide a custom styling for components used from matrix-react-sdk. In particular a sidebar button (SpaceButton) needs a custom icon and to be able to use styles from matrix-react-sdk like here: https://github.com/matrix-org/matrix-react-sdk/blob/0d1fce37b22c0565d25c517ad8e50ff42cab78ff/res/css/structures/_SpacePanel.pcss#L199-L226

Would be great if module system could allow to apply custom styling to matrix-react-sdk components and in general to new components added by custom module.

Describe the solution you'd like

Styling is possible in a similar way it is done in matrix-react-sdk: https://github.com/matrix-org/matrix-react-sdk/tree/develop/res

Describe alternatives you've considered

To apply custom changes to Element fork, but this is what we want to avoid and to use module system instead.

[germain-gg]

Thank you for opening this issue, I'm going to address the questions you've asked above, but I'm also going to outline our plan for the future, with Compound.

Regarding the SpaceButton example, I believe this component has not been created with composability in mind. It should accept an svg icon as a child of the React component. This would help would circumvent the stylesheet issue you're describing, but also would make sense given the icon conveys meaning, so its better placed in the HTML structure rather than in the stylesheet.

But back to the custom CSS point, if we were to allow to inject CSS from a module, I would feel more comfortable if that CSS was scoped to the boundaries of the injected module. I would find that unexpected to have a module bleed and have side-effect across the entire product. But I might be missing a use-case you're facing, so feel free to fill me in.

For global CSS, I believe an alternative avenue would be to add a custom stylesheet to index.html, which should be achievable, especially when running a fork. This area is low traffic enough that conflicts should not occur often.

Could you maybe elaborate on the following, I am not sure I grasp fully your reasoning

To apply custom changes to Element fork, but this is what we want to avoid and to use module system instead.

Compound

We're currently developping Compound (Element's design system) to have easy to build and replicable interfaces. This manifests in two concrete things, design tokens and UI libraries

Design tokens to unlock themability

They are atomic primitives that document and provide design decisions for every platform to consume. As part of that we have built a new set of colour scale with a big focus on accessibility.

Those are not to be used on their own, and we have another layer of variable that consumes the color in a more semantic and contextual way, see our documentation around semantic tokens.

The way we imagine themability to work in that context, is that someone will provide a set of a handful of colour, which will generate alternative brand colour scale. That new color scale will override some semantic tokens automatically and the app will be tinted to the colour of one's brand. The foundations to do the above are in place, but this is currently not possible to automate the stylesheet automatic build with a custom brand color scale.

UI Libraries

UI libraries are available for web, iOS and Android. And they will help to have more consistent interfaces across the board. They'll provide the building blocks needed for UIs in a widget, a module that are a carbon copy of what exists within Element Web.

At that point, the need for custom CSS is lesser – unless the systemised components do not provide the functionality you're after.

https://github.com/vector-im/compound-web is still in its nascency but you can peek at what's available already.

[Johennes]

Closing this as answered.