fix: ensure CSS variable are usable in calc

[brunosabot]

Hello! I'm contributing to a HA plugin that uses the --mdc-drawer-width variable to make some calculation.

However, when using in dual with kisok-mode, it does not display because the calc function does not recognize unit-less values.

It is not really recommended to use unit less values in CSS variables -although it's perfectly fine outside the CSS variables scope- because it blocks the usage of calc.

WDYT?

[elchininet]

@brunosabot, Similar to this one. That should not be a problem for kiosk-mode and it will make it compatible with your plugin, so it is OK for me. We just need to check why tests are failing.

[elchininet]

@brunosabot, I know what is happening, pull requests from other repos don't have access to screts by default. This makes the tests fail. We need to fix that, but for now, I'll submit a PR from this repo with your same changes, it should pass there.

[elchininet]

Hi @brunosabot, Let's follow these changes here. Once it gets merged and a new version is released, you can use that variable for calculations without any issue.

[brunosabot]

Awesome! Thanks!