1 files changed, 10 insertions, 78 deletions
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 88bff2aa..af40758c 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -13,12 +13,6 @@ import {
   process
 } from './theme3_slot_functions.js'
 
-import {
-  getCssShadow,
-  getCssShadowFilter,
-  getCssColorString
-} from './css_utils.js'
-
 const DEBUG = false
 
 // Ensuring the order of components
@@ -105,78 +99,6 @@ const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVar
   }
 }
 
-export const getCssRules = (rules, staticVars) => rules.map(rule => {
-  let selector = rule.selector
-  if (!selector) {
-    selector = 'body'
-  }
-  const header = selector + ' {'
-  const footer = '}'
-
-  const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
-    return '  ' + k + ': ' + v
-  }).join(';\n')
-
-  let directives
-  if (rule.component !== 'Root') {
-    directives = Object.entries(rule.directives).map(([k, v]) => {
-      switch (k) {
-        case 'roundness': {
-          return '  ' + [
-            '--roundness: ' + v + 'px'
-          ].join(';\n  ')
-        }
-        case 'shadow': {
-          return '  ' + [
-            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
-            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
-            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
-          ].join(';\n  ')
-        }
-        case 'background': {
-          if (v === 'transparent') {
-            return [
-              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
-              '  --background: ' + v
-            ].filter(x => x).join(';\n')
-          }
-          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          return [
-            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-            '  --background: ' + color
-          ].filter(x => x).join(';\n')
-        }
-        case 'textColor': {
-          if (rule.directives.textNoCssColor === 'yes') { return '' }
-          return 'color: ' + v
-        }
-        default:
-          if (k.startsWith('--')) {
-            const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
-            switch (type) {
-              case 'color':
-                return k + ': ' + rgba2css(findColor(value, rule.dynamicVars, staticVars))
-              default:
-                return ''
-            }
-          }
-          return ''
-      }
-    }).filter(x => x).map(x => '  ' + x).join(';\n')
-  } else {
-    directives = {}
-  }
-
-  return [
-    header,
-    directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
-    '',
-    virtualDirectives,
-    footer
-  ].join('\n')
-}).filter(x => x)
-
 // Loading all style.js[on] files dynamically
 const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 componentsContext.keys().forEach(key => {
@@ -587,6 +509,16 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.stacked = lowerLevelStackedBackground
         dynamicVars.background = computed[selector].background
 
+        const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+        dynamicSlots.forEach(([k, v]) => {
+          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          switch (type) {
+            case 'color':
+              dynamicVars[k] = findColor(value, dynamicVars, palette)
+          }
+        })
+
         addRule({
           dynamicVars,
           selector: cssSelector,