make dynamic directives have a type

src/components/user_card/user_card.style.js

@@ -24,7 +24,7 @@ export default {
           color: '#000000',
           alpha: 0.6
         }],
-        '--profileTint': '$alpha(--background, 0.5)'
+        '--profileTint': 'color | $alpha(--background, 0.5)'
       }
     },
     {

src/services/theme_data/theme_data_3.service.js

@@ -661,7 +661,13 @@ export const init = (extraRuleset, palette) => {
             }
             default:
               if (k.startsWith('--')) {
-                return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
+                const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+                switch (type) {
+                  case 'color':
+                    return k + ': ' + rgba2css(findColor(value, computed[selector].dynamicVars))
+                  default:
+                    return ''
+                }
               }
               return ''
           }