Extract css

[brianteeman]

Is it possible to compile the script without and then use an external stylesheet.

It will mean using two lines of code instead of one to use the script but it will make it easier to customise the css to match the site

[ranbuch]

Hi @brianteeman, I was thinking about exposing all CSS values as variables. That way they would be overridden in a convenient manner.

WDYT?

[brianteeman]

The ability to have an external css would be more useful/practical

When I look at the main requests we are receiving it would be much easier to resolve with external css.

Example requests are

1. support dark mode
2. change the main icon
3. change the tool iconsets

[ranbuch]

Can't imagine someone adding his own style for all elements of the component and all cases and functionality like iframe model, screen reader etc.

A much more healthier approach will be to override only what you want. It's currently possible but with the exposure of CSS variables it's going to be even easier.

support dark mode

Supporting dark mode is already possible and will be easy with CSS variables.

change the main icon

Not necessarily possible with CSS only anyways. You can currently use this:

 {icon: {
    img: 'my new text icon',
    fontClass: 'my new font class'
}}

The default value of img is accessibility. The default value of fontClass is material-icons.

change the tool iconsets

It's currently impossible but we can enable it view CSS variables as well. The icons are actually the value of the content CSS attribute of a before pseudo element.

Having said that:

1. We will add a new parameter for suppressing the CSS injection (if not defined we will inject as usual) suppressCssInjection: boolean.
2. We will expose the injectCSS function.
3. We will expose a new function called removeCSS.

Just to satisfy all.

[brianteeman]

All I can say is that given the choice I would want to rewrite 100% of the css for my own use.

Changing the icon - currently you can only use a font icon from material-icons or an emoji - which is a limitation if I just wanted to use an svg or an icon from a font already loaded on the site.

So yes please to your proposal and for Joomla we will chose to supress the css injection

[ranbuch]

@brianteeman understood. Version 5.0.1 is live and ready. Please let me know if there are any issues.

Just for documentation sake, I would argue that you can change the icons to another set as described here without suppressing the original CSS.

[brianteeman]

Thanks. Will test over the weekend