fonts support, cleanup

src/App.scss

@@ -22,7 +22,7 @@ html {
 
 body {
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
   margin: 0;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
@@ -130,12 +130,7 @@ i[class*="icon-"],
 
 nav {
   z-index: var(--ZI_navbar);
-  background-color: $fallback--fg;
+  box-shadow: var(--shadow);
-  background-color: var(--topBar, $fallback--fg);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
   position: fixed;
@@ -359,7 +354,7 @@ nav {
   box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
 
   &::-moz-focus-inner {
     border: none;
@@ -409,11 +404,8 @@ nav {
   color: inherit;
 
   &.-link {
-    color: var(--link);
+    /* stylelint-disable-next-line declaration-no-important */
-  }
+    color: var(--link) !important;
-
-  &.-fullwidth {
-    width: 100%;
   }
 }
 
@@ -437,8 +429,7 @@ textarea {
   border: none;
   border-radius: var(--roundness);
   box-shadow: var(--shadow);
-  font-family: sans-serif;
+  font-family: var(--font);
-  font-family: var(--inputFont, sans-serif);
   font-size: 1em;
   margin: 0;
   box-sizing: border-box;
@@ -466,9 +457,8 @@ textarea {
     display: none;
 
     &:checked + label::before {
-      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
+      box-shadow: var(--shadow);
-      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
+      background-color: var(--background);
-      background-color: var(--accent, $fallback--link);
     }
 
     &:disabled {
@@ -523,11 +513,8 @@ textarea {
       width: 1.1em;
       height: 1.1em;
       border-radius: var(--roundness);
-      box-shadow: 0 0 2px black inset;
+      box-shadow: var(--shadow);
-      box-shadow: var(--inputShadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -551,7 +538,7 @@ textarea {
 
 option {
   color: var(--text);
-  background-color: var(--bg, $fallback--bg);
+  background-color: var(--background);
 }
 
 .hide-number-spinner {
@@ -667,8 +654,7 @@ option {
 
 .visibility-notice {
   padding: 0.5em;
-  border: 1px solid $fallback--faint;
+  border: 1px solid var(--textFaint);
-  border: 1px solid var(--faint, $fallback--faint);
   border-radius: var(--roundness);
 }
 

src/components/input.style.js

@@ -37,6 +37,7 @@ export default {
     },
     {
       directives: {
+        '--font': 'generic | inherit',
         background: '--fg, -5',
         roundness: 3,
         shadow: [{

src/components/rich_content/rich_content.scss

@@ -1,10 +1,10 @@
-@import "../../variables";
-
 .RichContent {
+  font-family: var(--font);
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
-    border-left: 0.2em solid var(--faint, $fallback--faint);
+    border-left: 0.2em solid var(--textFaint);
     padding-left: 1em;
   }
 
@@ -17,7 +17,7 @@
   kbd,
   var,
   pre {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 
   p {

src/components/rich_content/rich_content.style.js

@@ -9,6 +9,8 @@ export default {
   defaultRules: [
     {
       directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
         textNoCssColor: 'yes'
       }
     }

src/components/root.style.js

@@ -9,5 +9,12 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | sans-serif'
+      }
+    }
   ]
 }

src/components/select/select.vue

@@ -32,12 +32,10 @@ label.Select {
     appearance: none;
     background: transparent;
     border: none;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--inputText, --text, $fallback--text);
     margin: 0;
     padding: 0 2em 0 0.2em;
-    font-family: sans-serif;
+    font-family: var(--font);
-    font-family: var(--inputFont, sans-serif);
     font-size: 1em;
     width: 100%;
     z-index: 1;
@@ -53,7 +51,7 @@ label.Select {
     height: 100%;
     width: 0.875em;
     color: $fallback--text;
-    color: var(--inputText, $fallback--text);
+    font-family: var(--font);
     line-height: 2;
     z-index: 0;
     pointer-events: none;

src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue

@@ -25,12 +25,11 @@
 
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
+    color: var(--cOrange);
-    color: var(--cOrange, $fallback--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>

src/components/status_body/status_body.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .StatusBody {
   display: flex;
   flex-direction: column;
@@ -14,7 +12,6 @@
 
   & .text,
   & .summary {
-    font-family: var(--postFont, sans-serif);
     white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -41,7 +38,7 @@
     margin-bottom: 0.5em;
     border-style: solid;
     border-width: 0 0 1px;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     flex-grow: 0;
 
     &.-tall {

src/components/tab_switcher/tab_switcher.scss

@@ -177,7 +177,7 @@
     cursor: pointer;
     box-shadow: var(--shadow);
     font-size: 1em;
-    font-family: var(--interfaceFont, sans-serif);
+    font-family: var(--font);
     border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;

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)
+    const { theme } = generatePreset(input)
-    fonts = rules.fonts
     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')
   })
 }
 

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
+  const directives = Object.entries(rule.directives).map(([k, v]) => {
-  if (rule.component !== 'Root') {
+    switch (k) {
-    directives = Object.entries(rule.directives).map(([k, v]) => {
+      case 'roundness': {
-      switch (k) {
+        return '  ' + [
-        case 'roundness': {
+          '--roundness: ' + v + 'px'
-          return '  ' + [
+        ].join(';\n  ')
-            '--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)};
-            `
-          }
-          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]
-          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(`backdrop-filter: blur(${v}) `)
-            }
-          }
-          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')
+      case 'shadow': {
-  } else {
+        return '  ' + [
-    directives = {}
+          '--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)};
+          `
+        }
+        if (v === 'transparent') {
+          if (rule.component === 'Root') return []
+          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]
+        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(`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 ''
+    }
+  }).filter(x => x).map(x => '  ' + x).join(';\n')
 
   return [
     header,

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

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 {