backwards compat WORKING

src/services/style_setter/style_setter.js

@@ -4,9 +4,6 @@ import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/th
 import { init } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
-import {
-  sampleRules
-} from 'src/services/theme_data/pleromafe.t3.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
@@ -16,7 +13,8 @@ export const applyTheme = (input) => {
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   const extraRules = convertTheme2To3(theme)
-  const themes3 = init([...sampleRules, ...extraRules])
+  console.log(extraRules)
+  const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head

src/services/theme_data/theme2_to_theme3.js

@@ -27,6 +27,18 @@ export const shadowsKeys = new Set([
   'input'
 ])
 
+export const radiiKeys = new Set([
+  'btn',
+  'input',
+  // 'checkbox',
+  'panel',
+  'avatar',
+  'avatarAlt',
+  'tooltip',
+  'attachment',
+  'chatMessage'
+])
+
 // Keys that are not available in editor and never meant to be edited
 export const hiddenKeys = new Set([
   'profileBg',
@@ -43,12 +55,13 @@ export const extendedBasePrefixes = [
 
   'panel',
   'topBar',
-  'tab',
+  // 'tab', // TODO: not implemented yet
   'btn',
   'input',
   'selectedMenu',
 
   'alert',
+  'alertPopup',
   'badge',
 
   'post',
@@ -56,15 +69,31 @@ export const extendedBasePrefixes = [
   'poll',
 
   'chatBg',
-  'chatMessageIncoming',
-  'chatMessageOutgoing'
+  'chatMessage'
 ]
+export const nonComponentPrefixes = new Set([
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+  'chatBg'
+])
 
-export 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 => {
+      if (prefix === 'alert') {
+        return k.startsWith(prefix) && !k.startsWith('alertPopup')
+      }
+      return k.startsWith(prefix)
+    })
+  ])
+)
 
 // Keysets that are only really used intermideately, i.e. to generate other colors
 export const temporary = new Set([
-  'border',
+  '',
   'highlight'
 ])
 
@@ -80,6 +109,51 @@ export const convertTheme2To3 = (data) => {
     }
   }
 
+  const convertRadii = () => {
+    const newRules = []
+    radiiKeys.forEach(key => {
+      const originalRadius = data.radii[key]
+      const rule = {}
+
+      switch (key) {
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        // TODO: missing feature?
+        // case 'checkbox':
+        //   rule.component = 'Input'
+        //   break
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarAlt':
+          rule.component = 'Avatar'
+          rule.variant = 'compact'
+          break
+        case 'tooltip':
+          rule.component = 'Popover'
+          break
+        case 'attachment':
+          rule.component = 'Attachment'
+          break
+        case 'ChatMessage':
+          rule.component = 'Button'
+          break
+      }
+      rule.directives = {
+        roundness: originalRadius
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
+
   const convertShadows = () => {
     const newRules = []
     shadowsKeys.forEach(key => {
@@ -129,5 +203,137 @@ export const convertTheme2To3 = (data) => {
     return newRules
   }
 
-  return [generateRoot(), ...convertShadows()]
+  const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
+    if (nonComponentPrefixes.has(prefix)) return null
+    const rule = {}
+    if (prefix === 'alertPopup') {
+      rule.component = 'Alert'
+      rule.parent = { component: 'Popover' }
+    } else if (prefix === 'selectedPost') {
+      rule.component = 'Post'
+      rule.state = ['selected']
+    } else if (prefix === 'selectedMenu') {
+      rule.component = 'MenuItem'
+      rule.state = ['hover']
+    } else if (prefix === 'chatMessageIncoming') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'chatMessageOutgoing') {
+      rule.component = 'ChatMessage'
+      rule.variant = 'outgoing'
+    } else if (prefix === 'panel') {
+      rule.component = 'PanelHeader'
+    } else if (prefix === 'topbar') {
+      rule.component = 'TopBar'
+    } else if (prefix === 'chatMessage') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'poll') {
+      rule.component = 'PollGraph'
+    } else {
+      rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
+    }
+    return keys.map((key) => {
+      const leftoverKey = key.replace(prefix, '')
+      const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
+      const last = parts.slice(-1)[0]
+      let newRule = { directives: {} }
+      let variantArray = []
+
+      switch (last) {
+        case 'Text':
+        case 'Faint': // typo
+        case 'Link':
+        case 'Icon':
+        case 'Greentext':
+        case 'Cyantext':
+        case 'Border':
+          newRule.parent = rule
+          newRule.directives.textColor = data.colors[key]
+          variantArray = parts.slice(0, -1)
+          break
+        default:
+          newRule = { ...rule, directives: {} }
+          newRule.directives.background = data.colors[key]
+          variantArray = parts
+          break
+      }
+
+      if (last === 'Text' || last === 'Link') {
+        const secondLast = parts.slice(-2)[0]
+        if (secondLast === 'Light') {
+          return null // unsupported
+        } else if (secondLast === 'Faint') {
+          newRule.state = ['faint']
+          variantArray = parts.slice(0, -2)
+        }
+      }
+
+      switch (last) {
+        case 'Text':
+        case 'Link':
+        case 'Icon':
+        case 'Border':
+          newRule.component = last
+          break
+        case 'Greentext':
+        case 'Cyantext':
+          newRule.component = 'FunText'
+          newRule.variant = last.toLowerCase()
+          break
+        case 'Faint':
+          newRule.component = 'Text'
+          newRule.state = ['faint']
+          break
+      }
+
+      variantArray = variantArray.filter(x => x !== 'Bg')
+
+      if (last === 'Link' && prefix === 'selectedPost') {
+        // selectedPost has typo - duplicate 'Post'
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'popover' && variantArray[0] === 'Post') {
+        newRule.component = 'Post'
+        newRule.parent = { component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
+        newRule.parent = { component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Popover')
+      }
+
+      switch (prefix) {
+        case 'btn':
+        case 'input':
+        case 'alert': {
+          const hasPanel = variantArray.find(x => x === 'Panel')
+          if (hasPanel) {
+            rule.parent = { component: 'PanelHeader' }
+            variantArray = variantArray.filter(x => x !== 'Panel')
+          }
+          const hasTop = variantArray.find(x => x === 'Top') // TopBar
+          if (hasTop) {
+            rule.parent = { component: 'TopBar' }
+            variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
+          }
+          break
+        }
+      }
+
+      if (variantArray.length > 0) {
+        if (prefix === 'btn') {
+          newRule.state = variantArray.map(x => x.toLowerCase())
+        } else {
+          newRule.variant = variantArray[0].toLowerCase()
+        }
+      }
+      console.log(key, newRule)
+      return newRule
+    })
+  })
+
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
 }