Is there no way to use vars without the cost of an additional JS which is loaded in sync and inline Javascript on every page and on every browser?

#22085 (comment)
@Allon like that?

Can be one approach, looks a bit hacky and requires inline JS as well. Honestly I would even go that far and do it on the server side, even when it is not the safest way to rely on the user agent or whatever.

I'm not really seeing the advantage here. The main advantage of CSS variables over SCSS variables is they can be changed client side.. eg.

:root {
  --base-font-size: 14px;
}

@media only screen and (max-width: 600px) {
  :root {
    --base-font-size: 16px;
  }
}

As the majority of our CSS is behind bootstrap which does not use CSS variables, I am not sure the gains outweigh the losses. We are loading a polyfill for something we can't really use. All we do here is replace SCSS variables with CSS variables. CSS 'variables' are more than that.

As the majority of our CSS is behind bootstrap which does not use CSS variables

https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables

Well as you can see here it can be made to work. Like pretty much the entire dashboard with this PR (aside from buttons) now uses a CSS variable and as you can see it's not much more complicated than it was...

I'm not really seeing the advantage here
Basically right now we have a problem that people cannot easily use colour schemes for their websites. This is getting solved in this - because we can create a straight css file in php that just allows overriding certain CSS vars

Also it's required for passing the site colour schemes down into any web components.

I'm not in a position to check but I am pretty sure them variables are not been used within bootstrap. The SCSS variables are just been listed as CSS variables for external usage? Not the same thing.

Also it's required for passing the site colour schemes down into any web components.

Would this require a polyfil?

https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables

Well as you can see here it can be made to work. Like pretty much the entire dashboard with this PR (aside from buttons) now uses a CSS variable and as you can see it's not much more complicated than it was...

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_root.scss

As I suspected, all bootstrap is doing here is mirroring the SCSS variables to CSS variables. This is largely useless. The only use case for this is if you wanted the values of these particular bootstrap variables in an external stylesheet or framework that supports/uses CSS variables.

I'm not in a position to check but I am pretty sure them variables are not been used within bootstrap. The SCSS variables are just been listed as CSS variables for external usage? Not the same thing.

If you install Joomla backend right now I've changed pretty much every usage of atum-template-color and atum-template-color-dark so on the dashboard I changed the css var to green and dark green and pretty much everything swapped over except the buttons. By default they aren't. But that's why I've set up some extra variables in the variables file

Would this require a polyfil?

For browsers with native support definitely not. For the ones using Dimtris' polyfill i'm unsure - it depends what the polyfill is providing right now.

Are these user updatable vars? If so then we should be careful as they can then create pallets that are not accessible. See https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/ for a possible technique if thats the case

If you install Joomla backend right now I've changed pretty much every usage of atum-template-color and atum-template-color-dark so on the dashboard I changed the css var to green and dark green and pretty much everything swapped over except the buttons.

Of course this works.. you are changing non-bootstrap variables. Try changing bootstrap variables!

Of course this works.. you are changing non-bootstrap variables. Try changing bootstrap variables!

I have in some places. Look at the link colour here for example https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR185 or the text colour https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR93

Are these user updatable vars? If so then we should be careful as they can then create pallets that are not accessible. See https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/ for a possible technique if thats the case

Right now they are not (well you can change it easier in the inspector) - but that would be the intention to shove it in the UI somewhere.

If we are going to use that technique when we get there then we'd probably need to polyfill the calc function - seems possible with https://github.com/closingtag/calc-polyfill tho

I have in some places. Look at the link colour here for example https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR185 or the text colour https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR93

No you haven't, in both cases. All you have done here is made a SCSS variable equal to a CSS variable. Your 2 examples still have to be compiled. The whole point of CSS variables is they are done client side. You don't have to compile them! A framework that actually uses CSS variables would allow you to change variable values on the client (eg. via JS, via media queries). The browser will then repaint using these new values.

Bottom line is that IMO Bootstrap is unsuitable for CSS variables. It can only be applied to the most basic bootstrap variables. As soon as any operation/function is applied to that variable, it runs in to trouble. Even consider the changes made with this PR... why use a CSS variable here... https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR131 .. but then use the equivalent SCSS variable in the following line? Because the following line uses a color function and will not allow the use of CSS variable. It is for this reason I see bootstrap and CSS variables an unsuitable match.

The problem isn't just with Bootstrap, I believe any CSS framework that goes through a precompiler is going to have some tough questions to answer when it comes to CSS variables. To use a precompiler means using functions, using functions means you can't correctly use CSS variables.

A framework that actually uses CSS variables would allow you to change variable values on the client (eg. via JS, via media queries). The browser will then repaint using these new values.

You mean like this? Yes I made this edit in my browser - SASS was compiled with the blue default and you can see the result

Because the following line uses a color function and will not allow the use of CSS variable.

Fixed it in my latest commit. Defined it as an additional colour - which whilst not quite as useful as a CSS function - unfortunately that one doesn't have a polyfill available and is for example also why youtube defines so many colours

The only use of the color functions after the change below is now in the login.scss file because of the opacity filters we are using. And that's not a problem that solvable even if you didn't use SASS https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency

A couple of things regarding your screenshot that needs to be mentioned. Correct me if I am wrong here but...

• primary-dark is not a Bootstrap variable
• Most of what changes color are not Bootstrap elements

There is certainly some merit in what you are demonstrating. I was wrong in stating that no CSS variables can be used in Bootstrap. We just need to realise that it is a very select number of variables that can be switched (talking stictly Bootstrap here). Variables that can be changed will only work in some areas (eg. I cant see changing --primary working with alerts as alerts heavely use functions).

primary-dark is not a Bootstrap variable

Nope - I've added these colours as extra colours vars here https://github.com/joomla/joomla-cms/pull/22100/files#diff-4fb62b8a0eddc5883b2258f9cc6fbf1dR38 (all things in colors map get turned into CSS vars) - but this variable is only used by our own CSS anyhow.

Most of what changes color are not Bootstrap elements

No - but neither are we using many bootstrap elements thanks to the custom elements. That's why I overrode text and link colours in my POC to show it's possible however (although obviously requires more work to do things comprehensively). But even if we were and overriding the mixins to use CSS vars for things like buttons + alerts. For example to style native BS tabs we'll need to override the following BS defaults to use the CSS var equivalents using the var() function.

$nav-link-disabled-color:           $gray-600 !default;
$nav-tabs-border-color:             $gray-300 !default;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;
$nav-divider-color:                 $gray-200 !default;

It is possible we potentially end up in a situation where to use CSS vars for the entire of bootstrap we don't include bootstraps variables file and do everything ourselves...

Ok. Sounds like you have a plan 😃 . I'll test the polyfill in the morn.

Btw specifically re say alerts. We already have tried in the past overriding the mixin for alerts https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/vendor/bootstrap/_alert.scss (apparently this file is no longer actually included by us but....) so you can override the mixin in a similar way and instead of calling darken inside the mixing you do it before. As the file isn't used anymore I can't test this but in theory this should work https://github.com/wilsonge/joomla-cms/compare/feature/use-css-vars...wilsonge:feature/alerts-override?expand=1

We probably don't want to override every mixin for every bootstrap feature known to bootstrap. We have to be realistic on what we want to maintain. But nothing stopping us doing it for the very commonly used elements...

Also just for the record - not saying using bootstrap makes this easy - anything but. But it is possible and it gives people exposure and us some flexibility even if the majority of our template uses CSS vars - it's giving us some things to play with in the future

Working fine in IE11...

That seems somewhat sad (you've lost all the primaries). Are there any console errors?

I think that was just my choice of color. Tested by adding the following to the end of the template CSS..

:root {
    --primary-dark: #222;
}

No console errors. CSS variable changed as expected.

Ahh oops! Awesome!

OK merging this to make progress. Opening an issue here to address how we want to actually include the polyfill #22164

This was merged but still shows up on the issue tracker

Just marked as closed in the issue tracker.

Thanks