[Bug Report] Enabling customProperties breaks the theme in IE11

Environment

Vuetify Version: 2.0.3 Vue Version: 2.6.10 Browsers: Internet Explorer OS: Windows 10

Steps to reproduce

Codepen seems to have its own issues on IE11. So, to reproduce with a new project created with Vue CLI:

1. Create a new project with the Vue CLI with default preset.
2. (Change directory and) vue add vuetify with default preset.
3. As given in the docs for IE 11 support, create vue.config.js and add

// vue.config.js

module.exports = {
  transpileDependencies: ['vuetify']
}

1. Enable customProperties in the vuetify initialisation

// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
  },
  icons: {
    iconfont: 'mdi',
  },
});

1. Add color="primary" to Latest release button in App.vue (or somewhere else where adding the color would have an effect)
2. On running (or building) the project, the button is not given the correct background color.

Expected Behavior

The colors are shown correctly even on IE11.

Actual Behavior

Different colors shown on IE11 vs Chrome and Firefox

Reproduction Link

https://codepen.io/literallyliterature/pen/dxRvZm

[jacekkarczmarczyk]

Maybe polyfill (https://github.com/jhildenbiddle/css-vars-ponyfill), but i don’t know if it works well with Vuetify

[opadilla]

Maybe polyfill (https://github.com/jhildenbiddle/css-vars-ponyfill), but i don’t know if it works well with Vuetify

This worked for me.

That one didn’t work for me for some reason. This one did though: https://github.com/nuxodin/ie11CustomProperties