independence from themes3, converter/backwards compat WIP

src/services/style_setter/style_setter.js

@@ -2,6 +2,7 @@ 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 } 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
@@ -10,10 +11,12 @@ import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
   const t0 = performance.now()
-  const { rules, t3b } = generatePreset(input)
+  const { rules, theme } = generatePreset(input)
+  console.log(rules, theme)
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
-  const themes3 = init(sampleRules, t3b)
+  const extraRules = convertTheme2To3(theme)
+  const themes3 = init([...sampleRules, ...extraRules])
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
@@ -26,7 +29,7 @@ export const applyTheme = (input) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
-  getCssRules(themes3.eager, t3b).forEach(rule => {
+  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -45,7 +48,7 @@ export const applyTheme = (input) => {
   })
   body.classList.remove('hidden')
   themes3.lazy.then(lazyRules => {
-    getCssRules(lazyRules, t3b).forEach(rule => {
+    getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
       styleSheet.insertRule(rule, 'index-max')
     })
     const t3 = performance.now()
@@ -358,7 +361,7 @@ export const generateShadows = (input, colors) => {
   }
 }
 
-export const composePreset = (colors, radii, shadows, fonts, t3b) => {
+export const composePreset = (colors, radii, shadows, fonts) => {
   return {
     rules: {
       ...shadows.rules,
@@ -371,8 +374,7 @@ export const composePreset = (colors, radii, shadows, fonts, t3b) => {
       ...colors.theme,
       ...radii.theme,
       ...fonts.theme
-    },
-    t3b
+    }
   }
 }
 
@@ -382,8 +384,7 @@ export const generatePreset = (input) => {
     colors,
     generateRadii(input),
     generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input),
-    colors.theme.colors
+    generateFonts(input)
   )
 }
 

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
   }
 }