title: How to use vuetify color props with custom theme variations
body: <p>I'm using vuetify (2.5.8) with our own custom theme colors. We've defined our own color names via String, or Object if we need more control over which variations are generated and to have fewer css variables.
  However, I haven't been able to get these variations to work with the color prop of vuetify elements, specifically <code>v-expansion-panel-header</code>.</p>
  <p>In the docs I saw example use of <code>color=”purple darken-2&quot;</code> and <code>color=&quot;success darken-2&quot;</code>, separating the theme color and its variation by a space. This works, when a color in my theme is defined as a string and its variations are generated by vuetify as (darken|lighten)-{n}.</p>
  <p>But when I define my own variations, this doesn't work anymore. For example: if I define the color <code>success: { base: '#1CC234', muted: '#2AAC9B', }'</code> in my theme, I can't use <code>color=&quot;success muted&quot;</code>, it will always display the base color. This is also true when I try to name my variations the way vuetify describes them, for example <code>success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'</code>. In this case, <code>color=&quot;success darken-2&quot;</code> no longer works.</p>
  <p>I've tried working around it by naming my variations 'darken-2' and the like, as well as nested syntax (<code>success.muted</code>) as the name of the generated color variable (<code>success-muted</code>), but to no avail. Does anyone have a way to pass these variations via the color prop, without having to use a v-deep selector and restyling the entire component everywhere I use it? Or should I use a computed to reach into <code>this.$vuetify.theme</code> and see if I can get the hexcode that way?</p>
  <p>Thanks in advance.</p>