make dynamic directives have a type

2 files changed, 8 insertions, 2 deletions

diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
index 1a8c179d..a6190f59 100644
--- a/src/components/user_card/user_card.style.js
+++ b/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)'
       }
     },
     {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index d916f97d..a73d4cb5 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/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 ''
           }