Plugin styling system / common stylesheet

[lfzawacki]

Ideally we could have a common plugin style system and document it as well as include it as part of the template. This way most people building a plugin could benefit of having a common style that meshes well with BBB 3.0.

It should also take advantage of the CSS variables that are already used by the customStyles functionality. This way plugins would keep the same colors and look and feel even when integrations have customized these styles. See here

Common components that would be useful would probably be:

• [ ] popup / modal
• [ ] rectangular/circular button
• [ ] toggle
• [ ] radio button
• [ ] inputs
• [ ] checkboxes
• [ ] text areas

[TiagoJacobs]

In my opinion we should not go in the direction of creating a library (as discussed in some chats), but instead, rewrite the CSS of BBB to allow it to be used in plugins.

For example, if the BBB CSS implements a "class=primary-button", the plugin can simply use it.

What do you think @lfzawacki ?

[lfzawacki]

In my opinion we should not go in the direction of creating a library (as discussed in some chats), but instead, rewrite the CSS of BBB to allow it to be used in plugins.

For example, if the BBB CSS implements a "class=primary-button", the plugin can simply use it.

What do you think @lfzawacki ?

Recently @Arthurk12 got styled-components to work. I think we should go this route because then we can get to a point where we have a reusable component library and we won't have namespace problems.

[TiagoJacobs]

The problem I see with this approach is that the plugin's style would depend on the version of the component library used during compilation, rather than the one in use by the BBB instance the plugin is running on.

So, it boils down to a trade-off: maintaining consistency by directly relying on BBB's CSS versus gaining flexibility and modularity with a reusable component library. Ideally, a hybrid approach might work best—using core BBB styles while selectively enhancing them with a component library when necessary.

This way, whenever BBB updates its styles, plugins automatically inherit those changes, ensuring visual consistency across versions.

[lfzawacki]

But it will always be a problem because updating the 'base component style' on BBB could break the plugin's interface no? So an older working plugin might render differently if we update BBB even though the plugin code stays the same.

The behavior of of these components will probably change very little except for right now where we're redoing the styles and creating the components from scratch.

I think in the long run having a library is better, because we'll actually be able to use this library for components in the html5 client and remove this code from the core. And styled components is good for code reuse even thought it's a little more complicated.

Of course the very basic styles defined in the 'custom variables' by the HTML5 client should be respected by these components. This way plugins that choose to use the official BBB components can be skinned by the custom_style_url file.