shit more or less works for the very basic stuff

src/components/button.style.js

@@ -2,10 +2,10 @@ export default {
   name: 'Button',
   selector: '.btn',
   states: {
-    hover: ':hover',
     disabled: ':disabled',
+    toggled: '.toggled',
     pressed: ':active',
-    toggled: '.toggled'
+    hover: ':hover'
   },
   variants: {
     danger: '.danger',

src/components/panel.style.js

@@ -4,6 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Button'
+    'Button',
+    'PanelHeader'
   ]
 }

src/components/panel_header.style.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'PanelHeader',
+  selector: '.panel-heading',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Button'
+  ]
+}

src/components/text.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Text',
-  selector: '',
+  selector: '/*text*/',
   states: {
     faint: '.faint'
   }

src/components/underlay.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Underlay',
-  selector: '.underlay',
+  selector: '#app',
   validInnerComponents: [
     'Panel'
   ]

src/services/color_convert/color_convert.js

@@ -188,6 +188,7 @@ export const rgba2css = function (rgba) {
  */
 export const getTextColor = function (bg, text, preserve) {
   const contrast = getContrastRatio(bg, text)
+  console.log(contrast)
 
   if (contrast < 4.5) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}

src/services/theme_data/pleromafe.t3.js

@@ -4,7 +4,7 @@ export const sampleRules = [
     // variant: 'normal',
     // state: 'normal'
     directives: {
-      background: '#000',
+      background: '#000000',
       opacity: 0.2
     }
   },
@@ -15,11 +15,17 @@ export const sampleRules = [
       opacity: 0.9
     }
   },
+  {
+    component: 'PanelHeader',
+    directives: {
+      background: '#000000',
+      opacity: 0.9
+    }
+  },
   {
     component: 'Button',
     directives: {
       background: '#808080',
-      text: '#FFFFFF',
       opacity: 0.5
     }
   }

src/services/theme_data/theme_data_3.service.js

@@ -1,5 +1,9 @@
+import { convert } from 'chromatism'
+import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
+
 import Underlay from 'src/components/underlay.style.js'
 import Panel from 'src/components/panel.style.js'
+import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
 import Text from 'src/components/text.style.js'
 import Icon from 'src/components/icon.style.js'
@@ -8,6 +12,7 @@ const root = Underlay
 const components = {
   Underlay,
   Panel,
+  PanelHeader,
   Button,
   Text,
   Icon
@@ -34,7 +39,7 @@ export const ruleToSelector = (rule) => {
   const component = components[rule.component]
   const { states, variants, selector } = component
 
-  const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
+  const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
   const applicableVariantName = (rule.variant || 'normal')
   let applicableVariant = ''
@@ -63,12 +68,37 @@ export const init = (ruleset) => {
   const addRule = (rule) => {
     rules.push(rule)
     rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
-    rulesByComponent.push(rule)
+    rulesByComponent[rule.component].push(rule)
   }
 
-  ruleset.forEach(rule => {
+  const findRules = (combination) => rule => {
+    if (combination.component !== rule.component) return false
+    if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
+      if (combination.variant !== rule.variant) return false
+    } else {
+      if (combination.variant !== 'normal') return false
+    }
+
+    if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
+      const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
+      return combination.state.every(state => ruleStatesSet.has(state))
+    } else {
+      if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
+      return true
+    }
+  }
 
-  })
+  const findLowerLevelRule = (parent, filter = () => true) => {
+    let lowerLevelComponent = null
+    let currentParent = parent
+    while (currentParent) {
+      const rulesParent = ruleset.filter(findRules(currentParent, true))
+      lowerLevelComponent = rulesParent[rulesParent.length - 1]
+      currentParent = currentParent.parent
+      if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
+    }
+    return filter(lowerLevelComponent) ? lowerLevelComponent : null
+  }
 
   const processInnerComponent = (component, parent) => {
     const {
@@ -87,18 +117,82 @@ export const init = (ruleset) => {
       return stateCombinations.map(state => ({ variant, state }))
     }).reduce((acc, x) => [...acc, ...x], [])
 
+    const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
+
     stateVariantCombination.forEach(combination => {
-      // addRule(({
-      //   parent,
-      //   component: component.name,
-      //   state: combination.state,
-      //   variant: combination.variant
-      // }))
+      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
+      const lastRule = existingRules[existingRules.length - 1]
+
+      if (existingRules.length !== 0) {
+        const { directives } = lastRule
+        const rgb = convert(directives.background).rgb
+
+        // TODO: DEFAULT TEXT COLOR
+        const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+
+        if (!lastRule.cache?.background) {
+          const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
+          lastRule.cache = lastRule.cache || {}
+          lastRule.cache.background = blend
+
+          addRule(lastRule)
+        }
+      } else {
+        if (VIRTUAL_COMPONENTS.has(component.name)) {
+          const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+
+          const lowerLevel = findLowerLevelRule(parent, (r) => {
+            if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
+            if (r.cache?.background === undefined) return false
+            if (r.cache.textDefined) {
+              return !r.cache.textDefined[selector]
+            }
+            return true
+          })
+          if (!lowerLevel) return
+          lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
+          lowerLevel.cache.textDefined[selector] = true
+          addRule({
+            parent,
+            component: component.name,
+            ...combination,
+            directives: {
+              // TODO: DEFAULT TEXT COLOR
+              textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
+              // Debug: lets you see what it think background color should be
+              background: convert(lowerLevel.cache.background).hex
+            }
+          })
+        }
+      }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
-  return rules
+
+  // console.info(rules.map(x => [
+  //   (parent?.component || 'root') + ' -> ' + x.component,
+  //   // 'Cached background:' + convert(bg).hex,
+  //   // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
+  //   JSON.stringify(x.directives)
+  //   // '=> Blend: ' + convert(x.cache.background).hex
+  // ].join(' ')))
+
+  return {
+    raw: rules,
+    css: rules.map(rule => {
+      const header = ruleToSelector(rule) + ' {'
+      const footer = '}'
+      const directives = Object.entries(rule.directives).map(([k, v]) => {
+        switch (k) {
+          case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          default: return ''
+        }
+      }).filter(x => x).map(x => '  ' + x).join(';\n')
+      return [header, directives, footer].join('\n')
+    })
+  }
 }

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -1,8 +1,7 @@
 // import { topoSort } from 'src/services/theme_data/theme_data.service.js'
 import {
   getAllPossibleCombinations,
-  init,
-  ruleToSelector
+  init
 } from 'src/services/theme_data/theme_data_3.service.js'
 import {
   sampleRules
@@ -19,8 +18,8 @@ describe.only('Theme Data 3', () => {
   describe('init', () => {
     it('test simple case', () => {
       const out = init(sampleRules)
-      console.log(JSON.stringify(out, null, 2))
-      out.forEach(r => console.log(ruleToSelector(r)))
+      // console.log(JSON.stringify(out, null, 2))
+      console.log('\n' + out.css.join('\n') + '\n')
     })
   })
 })