independence from themes3, converter/backwards compat WIP

src/services/theme_data/theme2_to_theme3.js

@@ -1,7 +1,7 @@
 import allKeys from './theme2_keys'
 
 // keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
-const basePaletteKeys = new Set([
+export const basePaletteKeys = new Set([
   'bg',
   'fg',
   'text',
@@ -14,13 +14,26 @@ const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const shadowsKeys = new Set([
+  'panel',
+  'topBar',
+  'popup',
+  'avatar',
+  'avatarStatus',
+  'panelHeader',
+  'button',
+  'buttonHover',
+  'buttonPressed',
+  'input'
+])
+
 // Keys that are not available in editor and never meant to be edited
-const hiddenKeys = new Set([
+export const hiddenKeys = new Set([
   'profileBg',
   'profileTint'
 ])
 
-const extendedBasePrefixes = [
+export const extendedBasePrefixes = [
   'border',
   'icon',
   'highlight',
@@ -47,12 +60,74 @@ const extendedBasePrefixes = [
   'chatMessageOutgoing'
 ]
 
-const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
+export const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
 
 // Keysets that are only really used intermideately, i.e. to generate other colors
-const temporary = new Set([
+export const temporary = new Set([
   'border',
   'highlight'
 ])
 
-const temporaryColors = {}
+export const temporaryColors = {}
+
+export const convertTheme2To3 = (data) => {
+  const generateRoot = () => {
+    const directives = {}
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
+    return {
+      component: 'Root',
+      directives
+    }
+  }
+
+  const convertShadows = () => {
+    const newRules = []
+    shadowsKeys.forEach(key => {
+      const originalShadow = data.shadows[key]
+      const rule = {}
+
+      switch (key) {
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'topBar':
+          rule.component = 'TopBar'
+          break
+        case 'popup':
+          rule.component = 'Popover'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarStatus':
+          rule.component = 'Avatar'
+          rule.parent = { component: 'Post' }
+          break
+        case 'panelHeader':
+          rule.component = 'PanelHeader'
+          break
+        case 'button':
+          rule.component = 'Button'
+          break
+        case 'buttonHover':
+          rule.component = 'Button'
+          rule.state = ['hover']
+          break
+        case 'buttonPressed':
+          rule.component = 'Button'
+          rule.state = ['pressed']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+      }
+      rule.directives = {
+        shadow: originalShadow
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
+
+  return [generateRoot(), ...convertShadows()]
+}

src/services/theme_data/theme_data_3.service.js

@@ -119,7 +119,8 @@ componentsContext.keys().forEach(key => {
 
 const ruleToSelector = genericRuleToSelector(components)
 
-export const init = (extraRuleset, palette) => {
+export const init = (extraRuleset) => {
+  const staticVars = {}
   const stacked = {}
   const computed = {}
 
@@ -287,7 +288,7 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, palette)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -354,7 +355,7 @@ export const init = (extraRuleset, palette) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars, palette)).rgb
+          const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -376,7 +377,7 @@ export const init = (extraRuleset, palette) => {
             let targetShadow
             if (typeof shadow === 'string') {
               if (shadow.startsWith('$')) {
-                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, palette)
+                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
               }
             } else {
               targetShadow = shadow
@@ -384,7 +385,7 @@ export const init = (extraRuleset, palette) => {
 
             return {
               ...targetShadow,
-              color: findColor(targetShadow.color, dynamicVars, palette)
+              color: findColor(targetShadow.color, dynamicVars, staticVars)
             }
           })
         }
@@ -404,8 +405,13 @@ export const init = (extraRuleset, palette) => {
         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)
+            case 'color': {
+              const color = findColor(value, dynamicVars, staticVars)
+              dynamicVars[k] = color
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = color
+              }
+            }
           }
         })
 
@@ -456,6 +462,7 @@ export const init = (extraRuleset, palette) => {
 
   return {
     lazy: lazyExec,
-    eager: eagerRules
+    eager: eagerRules,
+    staticVars
   }
 }