initial work on dynamic slots + move remaining css stuff into separate file

src/components/input.style.js

@@ -1,14 +1,4 @@
-const border = (top, shadow) => ({
-  x: 0,
-  y: top ? 1 : -1,
-  blur: 0,
-  spread: 0,
-  color: shadow ? '#000000' : '#FFFFFF',
-  alpha: 0.2,
-  inset: true
-})
-
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
 
 const hoverGlow = {
   x: 0,

src/services/style_setter/style_setter.js

@@ -1,7 +1,8 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
-import { init, getCssRules } from '../theme_data/theme_data_3.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import { getCssRules } from '../theme_data/css_utils.js'
 import {
   sampleRules
 } from 'src/services/theme_data/pleromafe.t3.js'

src/services/theme_data/css_utils.js

@@ -41,3 +41,75 @@ export const getCssShadowFilter = (input) => {
     .map(_ => `drop-shadow(${_})`)
     .join(' ')
 }
+
+export const getCssRules = (rules) => 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] = v.split('|').map(x => x.trim()) // woah, Extreme!
+            switch (type) {
+              case 'color':
+                return k + ': ' + rgba2css(rule.dynamicVars[k])
+              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)

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,