fonts support, cleanup

4 files changed, 122 insertions, 72 deletions

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ed6c8505..1cda7213 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,25 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  console.log({ ...input })
   let extraRules
-  let fonts
   if (input.themeType !== 1) {
     const t0 = performance.now()
-    const { rules, theme } = generatePreset(input)
-    fonts = rules.fonts
+    const { theme } = generatePreset(input)
     const t1 = performance.now()
-    console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
+    console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
     extraRules = convertTheme2To3(theme)
   } else {
-    console.log(input)
+    console.debug(input)
     extraRules = convertTheme2To3(input)
   }
 
   const t1 = performance.now()
   const themes3 = init(extraRules, '#FFFFFF')
   const t2 = performance.now()
-  console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
+  console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -33,8 +30,6 @@ export const applyTheme = (input) => {
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  styleSheet.toString()
-  styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
@@ -58,7 +53,7 @@ export const applyTheme = (input) => {
       styleSheet.insertRule(rule, 'index-max')
     })
     const t3 = performance.now()
-    console.log('Themes 3 finalization took ' + (t3 - t2) + 'ms')
+    console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
   })
 }
 
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index b83b90bf..f04fed42 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -1,6 +1,6 @@
 import { convert } from 'chromatism'
 
-import { rgba2css } from '../color_convert/color_convert.js'
+import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
 
 // This changes what backgrounds are used to "stacked" solid colors so you can see
 // what theme engine "thinks" is actual background color is for purposes of text color
@@ -78,72 +78,79 @@ export const getCssRules = (rules) => rules.map(rule => {
     return '  ' + k + ': ' + v
   }).join(';\n')
 
-  let directives
-  if (rule.component !== 'Root') {
-    directives = Object.entries(rule.directives).map(([k, v]) => {
-      switch (k) {
-        case 'roundness': {
-          return '  ' + [
-            '--roundness: ' + v + 'px'
-          ].join(';\n  ')
+  const directives = Object.entries(rule.directives).map(([k, v]) => {
+    switch (k) {
+      case 'roundness': {
+        return '  ' + [
+          '--roundness: ' + v + 'px'
+        ].join(';\n  ')
+      }
+      case 'shadow': {
+        return '  ' + [
+          '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+          '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+          '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+        ].join(';\n  ')
+      }
+      case 'background': {
+        if (DEBUG) {
+          return `
+            --background: ${getCssColorString(rule.dynamicVars.stacked)};
+            background-color: ${getCssColorString(rule.dynamicVars.stacked)};
+          `
         }
-        case 'shadow': {
-          return '  ' + [
-            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
-            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
-            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
-          ].join(';\n  ')
+        if (v === 'transparent') {
+          if (rule.component === 'Root') return []
+          return [
+            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+            '  --background: ' + v
+          ].filter(x => x).join(';\n')
         }
-        case 'background': {
-          if (DEBUG) {
-            return `
-              --background: ${getCssColorString(rule.dynamicVars.stacked)};
-              background-color: ${getCssColorString(rule.dynamicVars.stacked)};
-            `
-          }
-          if (v === 'transparent') {
-            return [
-              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
-              '  --background: ' + v
-            ].filter(x => x).join(';\n')
-          }
-          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          const cssDirectives = ['--background: ' + color]
+        const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+        const cssDirectives = ['--background: ' + color]
+        if (rule.directives.backgroundNoCssColor !== 'yes') {
+          cssDirectives.push('background-color: ' + color)
+        }
+        return cssDirectives.filter(x => x).join(';\n')
+      }
+      case 'blur': {
+        const cssDirectives = []
+        if (rule.directives.opacity < 1) {
+          cssDirectives.push(`--backdrop-filter: blur(${v}) `)
           if (rule.directives.backgroundNoCssColor !== 'yes') {
-            cssDirectives.push('background-color: ' + color)
+            cssDirectives.push(`backdrop-filter: blur(${v}) `)
           }
-          return cssDirectives.filter(x => x).join(';\n')
         }
-        case 'blur': {
-          const cssDirectives = []
-          if (rule.directives.opacity < 1) {
-            cssDirectives.push(`--backdrop-filter: blur(${v}) `)
-            if (rule.directives.backgroundNoCssColor !== 'yes') {
-              cssDirectives.push(`backdrop-filter: blur(${v}) `)
+        return cssDirectives.join(';\n')
+      }
+      case 'font': {
+        return 'font-family: ' + v
+      }
+      case 'textColor': {
+        if (rule.directives.textNoCssColor === 'yes') { return '' }
+        return 'color: ' + v
+      }
+      default:
+        if (k.startsWith('--')) {
+          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          switch (type) {
+            case 'color': {
+              const color = rule.dynamicVars[k]
+              if (typeof color === 'string') {
+                return k + ': ' + rgba2css(hex2rgb(color))
+              } else {
+                return k + ': ' + rgba2css(color)
+              }
             }
+            case 'generic':
+              return k + ': ' + value
+            default:
+              return ''
           }
-          return cssDirectives.join(';\n')
         }
-        case 'textColor': {
-          if (rule.directives.textNoCssColor === 'yes') { return '' }
-          return 'color: ' + v
-        }
-        default:
-          if (k.startsWith('--')) {
-            const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
-            switch (type) {
-              case 'color':
-                return k + ': ' + rgba2css(rule.dynamicVars[k])
-              default:
-                return ''
-            }
-          }
-          return ''
-      }
-    }).filter(x => x).map(x => '  ' + x).join(';\n')
-  } else {
-    directives = {}
-  }
+        return ''
+    }
+  }).filter(x => x).map(x => '  ' + x).join(';\n')
 
   return [
     header,
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 7adbbd42..11f517c6 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -14,6 +14,13 @@ export const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const fontsKeys = new Set([
+  'interface',
+  'input',
+  'post',
+  'postCode'
+])
+
 export const opacityKeys = new Set([
   'alert',
   'alertPopup',
@@ -249,6 +256,40 @@ export const convertTheme2To3 = (data) => {
     return newRules
   }
 
+  const convertFonts = () => {
+    const newRules = []
+    Object.keys(data.fonts).forEach(key => {
+      if (!fontsKeys.has(key)) return
+      const originalFont = data.fonts[key].family
+      const rule = {}
+
+      switch (key) {
+        case 'interface':
+        case 'postCode':
+          rule.component = 'Root'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'post':
+          rule.component = 'RichContent'
+          break
+      }
+      switch (key) {
+        case 'interface':
+        case 'input':
+        case 'post':
+          rule.directives = { '--font': 'generic | ' + originalFont }
+          break
+        case 'postCode':
+          rule.directives = { '--monoFont': 'generic | ' + originalFont }
+          newRules.push({ ...rule, component: 'RichContent' })
+          break
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
   const convertShadows = () => {
     const newRules = []
     Object.keys(data.shadows).forEach(key => {
@@ -457,5 +498,5 @@ export const convertTheme2To3 = (data) => {
 
   const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
-  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...convertFonts(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 0133dfe4..13caef9e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -411,6 +411,13 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
               }
               break
             }
+            case 'generic': {
+              dynamicVars[k] = value
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = value
+              }
+              break
+            }
           }
         })
 
@@ -454,9 +461,9 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   }
 
   processInnerComponent(components.Root, eagerRules)
-  console.log('TOTAL COMBOS: ' + counter)
+  console.debug('Eager combinations processed:' + counter)
   const lazyExec = Promise.all(promises).then(() => {
-    console.log('TOTAL COMBOS: ' + counter)
+    console.debug('Total combinations processed: ' + counter)
   }).then(() => lazyRules)
 
   return {