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()]
+}