From c34590c43983711152a843a2e36b991a5fe3bcdf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:34 +0200
Subject: update, should inherit stuff properly now.

---
 src/services/theme_data/theme2_to_theme3.js | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/services/theme_data/theme2_to_theme3.js

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
new file mode 100644
index 00000000..5ac87beb
--- /dev/null
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -0,0 +1,58 @@
+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([
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+
+  'cBlue',
+  'cRed',
+  'cGreen',
+  'cOrange'
+])
+
+// Keys that are not available in editor and never meant to be edited
+const hiddenKeys = new Set([
+  'profileBg',
+  'profileTint'
+])
+
+const extendedBasePrefixes = [
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+
+  'popover',
+
+  'panel',
+  'topBar',
+  'tab',
+  'btn',
+  'input',
+  'selectedMenu',
+
+  'alert',
+  'badge',
+
+  'post',
+  'selectedPost', // wrong nomenclature
+  'poll',
+
+  'chatBg',
+  'chatMessageIncoming',
+  'chatMessageOutgoing'
+]
+
+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([
+  'border',
+  'highlight'
+])
+
+const temporaryColors = {}
-- 
cgit v1.2.3-70-g09d2


From 0285efadbb10ed68940a2aef2f320fbf65f841c9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 20:47:27 +0200
Subject: independence from themes3, converter/backwards compat WIP

---
 src/services/style_setter/style_setter.js       | 19 +++---
 src/services/theme_data/theme2_to_theme3.js     | 87 +++++++++++++++++++++++--
 src/services/theme_data/theme_data_3.service.js | 23 ++++---
 3 files changed, 106 insertions(+), 23 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 95d1b6c4..0c8e503d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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)
   )
 }
 
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 5ac87beb..0bc3b82d 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/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()]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c4dfdc4c..8196415b 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/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
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 2172529dd06cb03be6341b3ae5cb2a74187e8e03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Feb 2024 01:05:17 +0200
Subject: backwards compat WORKING

---
 src/services/style_setter/style_setter.js   |   6 +-
 src/services/theme_data/theme2_to_theme3.js | 218 +++++++++++++++++++++++++++-
 2 files changed, 214 insertions(+), 10 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0c8e503d..14521994 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 0bc3b82d..7155875f 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/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]
 }
-- 
cgit v1.2.3-70-g09d2


From c3e6e7c61de8fcf9cdeeeac6479d8a00a9b47b3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Feb 2024 01:18:21 +0200
Subject: improvements to backcompat + fixes to topbar

---
 src/components/top_bar.style.js             | 10 +++++++++-
 src/services/style_setter/style_setter.js   |  1 -
 src/services/theme_data/theme2_to_theme3.js |  3 ++-
 top_bar.style.js                            | 23 -----------------------
 4 files changed, 11 insertions(+), 26 deletions(-)
 delete mode 100644 top_bar.style.js

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index c02fecf1..46b3fb56 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -13,7 +13,15 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
       }
     }
   ]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 14521994..587e6a45 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -13,7 +13,6 @@ export const applyTheme = (input) => {
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   const extraRules = convertTheme2To3(theme)
-  console.log(extraRules)
   const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 7155875f..3d9ede49 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -222,7 +222,7 @@ export const convertTheme2To3 = (data) => {
       rule.variant = 'outgoing'
     } else if (prefix === 'panel') {
       rule.component = 'PanelHeader'
-    } else if (prefix === 'topbar') {
+    } else if (prefix === 'topBar') {
       rule.component = 'TopBar'
     } else if (prefix === 'chatMessage') {
       rule.component = 'ChatMessage'
@@ -248,6 +248,7 @@ export const convertTheme2To3 = (data) => {
         case 'Border':
           newRule.parent = rule
           newRule.directives.textColor = data.colors[key]
+          newRule.directives.textAuto = 'no-auto'
           variantArray = parts.slice(0, -1)
           break
         default:
diff --git a/top_bar.style.js b/top_bar.style.js
deleted file mode 100644
index 4def18a3..00000000
--- a/top_bar.style.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  name: 'TopBar',
-  selector: 'nav',
-  validInnerComponents: [
-    'Link',
-    'Text',
-    'Icon'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
-    }
-  ]
-}
-- 
cgit v1.2.3-70-g09d2


From 900eb34186d6e80af95ea9120c7452b36b1c0f47 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 12:33:33 +0200
Subject: improve backwards compat for avatar shadows

---
 src/services/theme_data/theme2_to_theme3.js | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 3d9ede49..48ab96ff 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -199,6 +199,12 @@ export const convertTheme2To3 = (data) => {
         shadow: originalShadow
       }
       newRules.push(rule)
+      if (key === 'avatarStatus') {
+        newRules.push({ ...rule, parent: { component: 'Notification' } })
+      }
+      if (key === 'buttonPressed') {
+        newRules.push({ ...rule, state: ['toggled'] })
+      }
     })
     return newRules
   }
-- 
cgit v1.2.3-70-g09d2


From f609aaba0c9a7c4d3c3d579a2a0021ecd5fc4028 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 13:10:11 +0200
Subject: improve checkbox styles

---
 src/components/checkbox/checkbox.vue             |  5 ++---
 src/components/font_control/font_control.vue     |  2 +-
 src/components/input.style.js                    | 10 ++++++++++
 src/components/poll/poll.vue                     |  4 ++--
 src/components/range_input/range_input.vue       |  2 +-
 src/components/shadow_control/shadow_control.vue |  2 +-
 src/services/theme_data/theme2_to_theme3.js      | 10 +++++-----
 7 files changed, 22 insertions(+), 13 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 9739c08b..eac79199 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -82,8 +82,7 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    border-radius: var(--roundness);
     box-shadow: var(--shadow);
     background-color: var(--background);
     vertical-align: top;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index b90fba56..d5e63578 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 985d5412..b1c9f3db 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -12,6 +12,10 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
+  variant: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
@@ -21,6 +25,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
     {
       directives: {
         background: '--fg, -5',
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 087822e1..57ec879a 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -43,7 +43,7 @@
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="input poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -52,7 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
-            class="input"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index c7648f72..2f8645c0 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 4fefaee1..10e6476f 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input input-inset visible-for-screenreader-only"
+          class="input -checkbox input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 48ab96ff..743bc386 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
 export const radiiKeys = new Set([
   'btn',
   'input',
-  // 'checkbox',
+  'checkbox',
   'panel',
   'avatar',
   'avatarAlt',
@@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
         case 'input':
           rule.component = 'Input'
           break
-        // TODO: missing feature?
-        // case 'checkbox':
-        //   rule.component = 'Input'
-        //   break
+        case 'checkbox':
+          rule.component = 'Input'
+          rule.variant = 'checkbox'
+          break
         case 'panel':
           rule.component = 'Panel'
           break
-- 
cgit v1.2.3-70-g09d2


From 8a21594dbc5075b92d245f4c83530c7dae71c62a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 22:18:56 +0200
Subject: shadow slots work + minor fixes

---
 src/boot/after_store.js                            |  1 +
 src/components/button.style.js                     | 43 ++++++--------
 src/components/input.style.js                      | 12 ++--
 .../settings_modal/tabs/theme_tab/theme_tab.js     | 20 +++----
 src/components/shadow_control/shadow_control.js    |  2 +-
 src/services/style_setter/style_setter.js          | 26 ++++++---
 src/services/theme_data/css_utils.js               | 20 +++++++
 src/services/theme_data/theme2_to_theme3.js        | 29 ++++++++--
 src/services/theme_data/theme3_slot_functions.js   | 22 ++++----
 src/services/theme_data/theme_data_3.service.js    | 66 ++++++++++++++--------
 10 files changed, 153 insertions(+), 88 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 84fea954..49a8130c 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -359,6 +359,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
+  console.log({ ...customThemeSource }, { ...customTheme })
   if (customThemePresent) {
     if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 1404061c..4910a5ac 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,23 +1,3 @@
-const buttonInsetFakeBorders = ['$borderSide(#FFFFFF, top, 0.2)', '$borderSide(#000000, bottom, 0.2)']
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-const buttonOuterShadow = {
-  x: 0,
-  y: 0,
-  blur: 2,
-  spread: 0,
-  color: '#000000',
-  alpha: 1
-}
-
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
 export default {
   name: 'Button', // Name of the component
   selector: '.button-default', // CSS selector/prefix
@@ -49,52 +29,61 @@ export default {
   ],
   // Default rules, used as "default theme", essentially.
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
+        '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
+        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
+        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+      }
+    },
     {
       // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
         roundness: 3
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['hover', 'pressed'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground, 0.25, --parent)',
-        shadow: [...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonBevel']
       }
     },
     {
diff --git a/src/components/input.style.js b/src/components/input.style.js
index b1c9f3db..70c775ad 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -1,5 +1,3 @@
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-
 const hoverGlow = {
   x: 0,
   y: 0,
@@ -25,6 +23,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+      }
+    },
     {
       variant: 'checkbox',
       directives: {
@@ -42,13 +46,13 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, ...inputInsetFakeBorders]
+        }, '--defaultInputBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: [hoverGlow, '--defaultInputBevel']
       }
     }
   ]
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 58f8d44a..dd525920 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -4,15 +4,7 @@ import {
   getContrastRatioLayers
 } from 'src/services/color_convert/color_convert.js'
 import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
+  getThemes
 } from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
@@ -25,7 +17,15 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index a1d1012b..f8e12dbf 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,7 +1,7 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import Select from '../select/select.vue'
-import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1fb65e1c..1bc92584 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,12 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const t0 = performance.now()
-  const { rules, theme } = generatePreset(input)
-  console.log(rules, theme)
+  const { version, theme: inputTheme } = input
+  let extraRules
+  let fonts
+  if (version === 2) {
+    const t0 = performance.now()
+    const { rules, theme } = generatePreset(inputTheme)
+    fonts = rules.fonts
+    const t1 = performance.now()
+    console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
+    extraRules = convertTheme2To3(theme)
+  } else {
+    console.log(input)
+    extraRules = convertTheme2To3(input)
+  }
+
   const t1 = performance.now()
-  console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
-  const extraRules = convertTheme2To3(theme)
   const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
@@ -24,7 +34,7 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
+  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/)) {
@@ -133,8 +143,8 @@ export const getPreset = (val) => {
         data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
       }
 
-      return { theme: data, source: theme.source }
+      return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
     })
 }
 
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
+export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 8395f6a7..412accf9 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,6 +2,26 @@ import { convert } from 'chromatism'
 
 import { rgba2css } from '../color_convert/color_convert.js'
 
+export const parseCssShadow = (text) => {
+  const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
+  const inset = /inset/.exec(text)?.[0]
+  const color = text.replace(dimensions, '').replace(inset, '')
+
+  const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
+  const isInset = inset?.trim() === 'inset'
+  console.log(color.trim())
+  const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
+
+  return {
+    x,
+    y,
+    blur,
+    spread,
+    inset: isInset,
+    color: colorString
+  }
+}
+
 export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
 
 export const getCssShadow = (input, usesDropShadow) => {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 743bc386..b367af36 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -100,6 +100,8 @@ export const temporary = new Set([
 export const temporaryColors = {}
 
 export const convertTheme2To3 = (data) => {
+  data.colors.accent = data.colors.accent || data.colors.link
+  data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
     basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
@@ -111,7 +113,8 @@ export const convertTheme2To3 = (data) => {
 
   const convertRadii = () => {
     const newRules = []
-    radiiKeys.forEach(key => {
+    Object.keys(data.radii).forEach(key => {
+      if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
       const rule = {}
 
@@ -150,13 +153,17 @@ export const convertTheme2To3 = (data) => {
         roundness: originalRadius
       }
       newRules.push(rule)
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
 
   const convertShadows = () => {
     const newRules = []
-    shadowsKeys.forEach(key => {
+    Object.keys(data.shadows).forEach(key => {
+      if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
       const rule = {}
 
@@ -205,6 +212,10 @@ export const convertTheme2To3 = (data) => {
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
       }
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
@@ -234,10 +245,13 @@ export const convertTheme2To3 = (data) => {
       rule.component = 'ChatMessage'
     } else if (prefix === 'poll') {
       rule.component = 'PollGraph'
+    } else if (prefix === 'btn') {
+      rule.component = 'Button'
     } else {
       rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
     }
     return keys.map((key) => {
+      if (!data.colors[key]) return null
       const leftoverKey = key.replace(prefix, '')
       const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
       const last = parts.slice(-1)[0]
@@ -335,12 +349,17 @@ export const convertTheme2To3 = (data) => {
           newRule.variant = variantArray[0].toLowerCase()
         }
       }
-      console.log(key, newRule)
-      return newRule
+
+      if (newRule.component === 'Button') {
+        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
+        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+      } else {
+        return [newRule]
+      }
     })
   })
 
-  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
   return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 2324e121..2715c827 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -1,7 +1,7 @@
 import { convert, brightness } from 'chromatism'
 import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
 
-export const process = (text, functions, findColor, dynamicVars, staticVars) => {
+export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
   const args = argsString.split(/,/g).map(a => a.trim())
 
@@ -9,27 +9,27 @@ export const process = (text, functions, findColor, dynamicVars, staticVars) =>
   if (args.length < func.argsNeeded) {
     throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
   }
-  return func.exec(args, findColor, dynamicVars, staticVars)
+  return func.exec(args, { findColor, findShadow }, { dynamicVars, staticVars })
 }
 
 export const colorFunctions = {
   alpha: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [color, amountArg] = args
 
-      const colorArg = convert(findColor(color, dynamicVars, staticVars)).rgb
+      const colorArg = convert(findColor(color, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
       return { ...colorArg, a: amount }
     }
   },
   blend: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [backgroundArg, amountArg, foregroundArg] = args
 
-      const background = convert(findColor(backgroundArg, dynamicVars, staticVars)).rgb
-      const foreground = convert(findColor(foregroundArg, dynamicVars, staticVars)).rgb
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       return alphaBlend(background, amount, foreground)
@@ -37,10 +37,10 @@ export const colorFunctions = {
   },
   mod: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [colorArg, amountArg] = args
 
-      const color = convert(findColor(colorArg, dynamicVars, staticVars)).rgb
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       const effectiveBackground = dynamicVars.lowerLevelBackground
@@ -54,7 +54,7 @@ export const colorFunctions = {
 export const shadowFunctions = {
   borderSide: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }) => {
       const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
 
       const width = Number(widthArg)
@@ -86,7 +86,7 @@ export const shadowFunctions = {
             break
         }
       })
-      return targetShadow
+      return [targetShadow]
     }
   }
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 8196415b..91bda11e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,4 +1,5 @@
 import { convert, brightness } from 'chromatism'
+import { flattenDeep } from 'lodash'
 import {
   alphaBlend,
   getTextColor,
@@ -20,6 +21,7 @@ import {
   normalizeCombination,
   findRules
 } from './iss_utils.js'
+import { parseCssShadow } from './css_utils.js'
 
 const DEBUG = false
 
@@ -36,7 +38,32 @@ const components = {
   ChatMessage: null
 }
 
-const findColor = (color, dynamicVars, staticVars) => {
+const findShadow = (shadows, { dynamicVars, staticVars }) => {
+  return (shadows || []).map(shadow => {
+    let targetShadow
+    if (typeof shadow === 'string') {
+      if (shadow.startsWith('$')) {
+        targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
+      } else if (shadow.startsWith('--')) {
+        const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
+        const variableSlot = variable.substring(2)
+        return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
+      } else {
+        targetShadow = parseCssShadow(shadow)
+      }
+    } else {
+      targetShadow = shadow
+    }
+
+    const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
+    return shadowArray.map(s => ({
+      ...s,
+      color: findColor(s.color, { dynamicVars, staticVars })
+    }))
+  })
+}
+
+const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {
@@ -76,7 +103,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 
   if (color.startsWith('$')) {
     try {
-      targetColor = process(color, colorFunctions, findColor, dynamicVars, staticVars)
+      targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
     } catch (e) {
       console.error('Failure executing color function', e)
       targetColor = '#FF00FF'
@@ -89,7 +116,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
   const opacity = directives.textOpacity
   const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
-  const textColor = convert(findColor(intendedTextColor, dynamicVars, staticVars)).rgb
+  const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
   if (opacity === null || opacity === undefined || opacity >= 1) {
     return convert(textColor).hex
   }
@@ -288,7 +315,7 @@ export const init = (extraRuleset) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -355,7 +382,7 @@ export const init = (extraRuleset) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
+          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -373,21 +400,7 @@ export const init = (extraRuleset) => {
         }
 
         if (computedDirectives.shadow) {
-          dynamicVars.shadow = (computedDirectives.shadow || []).map(shadow => {
-            let targetShadow
-            if (typeof shadow === 'string') {
-              if (shadow.startsWith('$')) {
-                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
-              }
-            } else {
-              targetShadow = shadow
-            }
-
-            return {
-              ...targetShadow,
-              color: findColor(targetShadow.color, dynamicVars, staticVars)
-            }
-          })
+          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
         }
 
         if (!stacked[selector]) {
@@ -403,14 +416,23 @@ export const init = (extraRuleset) => {
         const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
 
         dynamicSlots.forEach(([k, v]) => {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
           switch (type) {
             case 'color': {
-              const color = findColor(value, dynamicVars, staticVars)
+              const color = findColor(value[0], { dynamicVars, staticVars })
               dynamicVars[k] = color
               if (component.name === 'Root') {
                 staticVars[k.substring(2)] = color
               }
+              break
+            }
+            case 'shadow': {
+              const shadow = value
+              dynamicVars[k] = shadow
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = shadow
+              }
+              break
             }
           }
         })
-- 
cgit v1.2.3-70-g09d2


From 879f520b75bcb379790317627bc2a8d2b739a2fb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 00:02:24 +0200
Subject: tabs support + cleanup

---
 src/boot/after_store.js                       |  1 -
 src/components/alert.style.js                 |  3 +-
 src/components/button_unstyled.style.js       |  2 --
 src/components/panel.style.js                 |  3 +-
 src/components/tab_switcher/tab.style.js      | 52 +++++++++++++++++++++++++++
 src/components/tab_switcher/tab_switcher.jsx  |  2 +-
 src/components/tab_switcher/tab_switcher.scss | 14 +++++---
 src/services/theme_data/css_utils.js          |  1 -
 src/services/theme_data/theme2_to_theme3.js   | 10 ++++--
 9 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 src/components/tab_switcher/tab.style.js

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 49a8130c..84fea954 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -359,7 +359,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  console.log({ ...customThemeSource }, { ...customTheme })
   if (customThemePresent) {
     if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 5881e833..bb97bd64 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Link',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   variants: {
     normal: '.neutral',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 60dd0d47..a2d854aa 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -3,8 +3,6 @@ export default {
   selector: '.button-unstyled',
   states: {
     disabled: ':disabled',
-    toggled: '.toggled',
-    pressed: ':active',
     hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 95a10366..504ecbcb 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -16,7 +16,8 @@ export default {
     'Alert',
     'UserCard',
     'Chat',
-    'Attachment'
+    'Attachment',
+    'Tab'
   ],
   defaultRules: [
     {
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
new file mode 100644
index 00000000..563da87c
--- /dev/null
+++ b/src/components/tab_switcher/tab.style.js
@@ -0,0 +1,52 @@
+export default {
+  name: 'Tab', // Name of the component
+  selector: '.tab', // CSS selector/prefix
+  states: {
+    active: '.active',
+    hover: ':hover:not(:disabled)',
+    disabled: '.disabled'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: ['--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Tab',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index b444da43..027a380a 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -97,7 +97,7 @@ export default {
       .map((slot, index) => {
         const props = slot.props
         if (!props) return
-        const classesTab = ['tab', 'button-default']
+        const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
         if (this.activeIndex === index) {
           classesTab.push('active')
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 705925c8..a90a13ed 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -25,8 +25,7 @@
         content: "";
         flex: 1 1 auto;
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--border, $fallback--border);
+        border-bottom-color: var(--border);
       }
 
       .tab-wrapper {
@@ -37,8 +36,7 @@
           right: 0;
           bottom: 0;
           border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
+          border-bottom-color: var(--border);
         }
       }
 
@@ -173,6 +171,14 @@
   }
 
   .tab {
+    user-select: none;
+    color: var(--text);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    font-size: 1em;
+    font-family: var(--interfaceFont, sans-serif);
+    border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 412accf9..3bbee6af 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -9,7 +9,6 @@ export const parseCssShadow = (text) => {
 
   const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
   const isInset = inset?.trim() === 'inset'
-  console.log(color.trim())
   const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
 
   return {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index b367af36..ef9506a6 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -55,7 +55,7 @@ export const extendedBasePrefixes = [
 
   'panel',
   'topBar',
-  // 'tab', // TODO: not implemented yet
+  'tab',
   'btn',
   'input',
   'selectedMenu',
@@ -122,6 +122,9 @@ export const convertTheme2To3 = (data) => {
         case 'btn':
           rule.component = 'Button'
           break
+        case 'tab':
+          rule.component = 'Tab'
+          break
         case 'input':
           rule.component = 'Input'
           break
@@ -155,6 +158,7 @@ export const convertTheme2To3 = (data) => {
       newRules.push(rule)
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -215,6 +219,7 @@ export const convertTheme2To3 = (data) => {
 
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -351,8 +356,7 @@ export const convertTheme2To3 = (data) => {
       }
 
       if (newRule.component === 'Button') {
-        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
-        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
       } else {
         return [newRule]
       }
-- 
cgit v1.2.3-70-g09d2


From 5e0ba2bcd9e0891ae15aa584f91be942c97c83a6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 01:10:24 +0200
Subject: initial work on mobile stuff

---
 src/components/mobile_drawer.style.js       | 42 ++++++++++++++
 src/components/mobile_nav/mobile_nav.vue    |  4 +-
 src/components/root.style.js                |  3 +-
 src/components/side_drawer/side_drawer.vue  | 88 ++++++++++++++++-------------
 src/services/style_setter/style_setter.js   | 10 ++--
 src/services/theme_data/theme2_to_theme3.js |  9 ++-
 6 files changed, 108 insertions(+), 48 deletions(-)
 create mode 100644 src/components/mobile_drawer.style.js

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
new file mode 100644
index 00000000..671105c8
--- /dev/null
+++ b/src/components/mobile_drawer.style.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'MobileDrawer',
+  selector: '.mobile-drawer',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'PanelHeader',
+    'MenuItem',
+    'Notification',
+    'Alert',
+    'UserCard'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      component: 'PanelHeader',
+      parent: { component: 'MobileDrawer' },
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 2e7590b9..b95f26e8 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -44,12 +44,12 @@
     </nav>
     <aside
       v-if="currentUser"
-      class="panel mobile-notifications-drawer"
+      class="mobile-notifications-drawer mobile-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
-      <div class="mobile-notifications-header">
+      <div class="panel-heading mobile-notifications-header">
         <span class="title">
           {{ $t('notifications.notifications') }}
           <span
diff --git a/src/components/root.style.js b/src/components/root.style.js
index f0ad731e..8ddb8038 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -7,6 +7,7 @@ export default {
     'Popover',
     'TopBar',
     'Scrollbar',
-    'ScrollbarElement'
+    'ScrollbarElement',
+    'MobileDrawer'
   ]
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c6e5802..2e99897b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-drawer-container"
+    class="side-drawer-container mobile-drawer"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
     <div
@@ -35,7 +35,10 @@
           v-if="!currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'login' }">
+          <router-link
+            :to="{ name: 'login' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -47,7 +50,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="timelinesRoute">
+          <router-link
+            :to="timelinesRoute"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -59,7 +65,10 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'lists' }">
+          <router-link
+            :to="{ name: 'lists' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -74,6 +83,7 @@
           <router-link
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative;"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -91,7 +101,10 @@
       </ul>
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -103,7 +116,10 @@
           v-if="currentUser.locked"
           @click="toggleDrawer"
         >
-          <router-link to="/friend-requests">
+          <router-link
+            to="/friend-requests"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -121,7 +137,10 @@
           v-if="shout"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'shout-panel' }">
+          <router-link
+            :to="{ name: 'shout-panel' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -135,7 +154,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'search' }">
+          <router-link
+            :to="{ name: 'search' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -147,7 +169,10 @@
           v-if="currentUser && suggestionsEnabled"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'who-to-follow' }">
+          <router-link
+            :to="{ name: 'who-to-follow' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -157,7 +182,7 @@
         </li>
         <li @click="toggleDrawer">
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -168,7 +193,10 @@
           </button>
         </li>
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'about'}">
+          <router-link
+            :to="{ name: 'about'}"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -181,7 +209,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click.stop="openAdminModal"
           >
             <FAIcon
@@ -197,6 +225,7 @@
         >
           <router-link
             :to="{ name: 'announcements' }"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -215,7 +244,10 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'edit-navigation' }">
+          <router-link
+            :to="{ name: 'edit-navigation' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -228,7 +260,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="doLogout"
           >
             <FAIcon
@@ -305,17 +337,8 @@
   width: 80%;
   max-width: 20em;
   flex: 0 0 80%;
-  box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--panelShadow);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
+  box-shadow: var(--shadow);
+  background-color: var(--background);
 
   .badge {
     margin-left: 10px;
@@ -362,8 +385,7 @@
   margin: 0;
   padding: 0;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 
 .side-drawer ul:last-child {
@@ -380,18 +402,6 @@
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1bc92584..57e4a7b8 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,12 +6,12 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const { version, theme: inputTheme } = input
+  console.log({ ...input })
   let extraRules
   let fonts
-  if (version === 2) {
+  if (input.themeType !== 1) {
     const t0 = performance.now()
-    const { rules, theme } = generatePreset(inputTheme)
+    const { rules, theme } = generatePreset(input)
     fonts = rules.fonts
     const t1 = performance.now()
     console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
@@ -127,7 +127,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? {} : theme.theme
+      const data = isV1 ? { themeType: 1 } : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])
@@ -143,7 +143,7 @@ export const getPreset = (val) => {
         data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
       }
 
-      return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
+      return { theme: data, source: theme.source }
     })
 }
 
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ef9506a6..aa29d359 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -210,6 +210,9 @@ export const convertTheme2To3 = (data) => {
         shadow: originalShadow
       }
       newRules.push(rule)
+      if (key === 'topBar') {
+        newRules.push({ ...rule, component: 'PanelHeader', parent: { component: 'MobileDrawer' } })
+      }
       if (key === 'avatarStatus') {
         newRules.push({ ...rule, parent: { component: 'Notification' } })
       }
@@ -355,8 +358,12 @@ export const convertTheme2To3 = (data) => {
         }
       }
 
-      if (newRule.component === 'Button') {
+      if (newRule.component === 'Panel') {
+        return [newRule, { ...newRule, component: 'MobileDrawer' }]
+      } else if (newRule.component === 'Button') {
         return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+      } else if (newRule.component === 'TopBar') {
+        return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {
         return [newRule]
       }
-- 
cgit v1.2.3-70-g09d2


From 09e0e53ad6bb2afd53baf5281290dcee4c20327a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 14:36:56 +0200
Subject: opacity stuff, better debug mode

---
 src/services/style_setter/style_setter.js       |  2 +-
 src/services/theme_data/css_utils.js            | 13 +++-
 src/services/theme_data/theme2_to_theme3.js     | 88 ++++++++++++++++++++++++-
 src/services/theme_data/theme_data_3.service.js | 31 ++-------
 4 files changed, 104 insertions(+), 30 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 57e4a7b8..ed6c8505 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -22,7 +22,7 @@ export const applyTheme = (input) => {
   }
 
   const t1 = performance.now()
-  const themes3 = init(extraRules)
+  const themes3 = init(extraRules, '#FFFFFF')
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 3bbee6af..b98a78ed 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,6 +2,11 @@ import { convert } from 'chromatism'
 
 import { 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
+// generation and for when --stacked variable is used
+const DEBUG = false
+
 export const parseCssShadow = (text) => {
   const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
   const inset = /inset/.exec(text)?.[0]
@@ -21,7 +26,7 @@ export const parseCssShadow = (text) => {
   }
 }
 
-export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
+export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha })
 
 export const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
@@ -90,6 +95,12 @@ export const getCssRules = (rules) => rules.map(rule => {
           ].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) : '',
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index aa29d359..32797c42 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -14,6 +14,20 @@ export const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const opacityKeys = new Set([
+  'alert',
+  'alertPopup',
+  'bg',
+  'border',
+  'btn',
+  'faint',
+  'input',
+  'panel',
+  'popover',
+  'profileTint',
+  'underlay'
+])
+
 export const shadowsKeys = new Set([
   'panel',
   'topBar',
@@ -111,6 +125,78 @@ export const convertTheme2To3 = (data) => {
     }
   }
 
+  const convertOpacity = () => {
+    const newRules = []
+    Object.keys(data.opacity).forEach(key => {
+      if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
+      const originalOpacity = data.opacity[key]
+      const rule = {}
+
+      switch (key) {
+        case 'alert':
+          rule.component = 'Alert'
+          break
+        case 'alertPopup':
+          rule.component = 'Alert'
+          rule.parent = { component: 'Popover' }
+          break
+        case 'bg':
+          rule.component = 'Panel'
+          break
+        case 'border':
+          rule.component = 'Border'
+          break
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'faint':
+          rule.component = 'Text'
+          rule.state = ['faint']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'panel':
+          rule.component = 'PanelHeader'
+          break
+        case 'popover':
+          rule.component = 'Popover'
+          break
+        case 'profileTint':
+          return null
+        case 'underlay':
+          rule.component = 'Underlay'
+          break
+      }
+
+      switch (key) {
+        case 'alert':
+        case 'alertPopup':
+        case 'bg':
+        case 'btn':
+        case 'input':
+        case 'panel':
+        case 'popover':
+        case 'underlay':
+          rule.directives = { opacity: originalOpacity }
+          break
+        case 'faint':
+        case 'border':
+          rule.directives = { textOpacity: originalOpacity }
+          break
+      }
+
+      newRules.push(rule)
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
+      }
+    })
+    console.log(newRules)
+    return newRules
+  }
+
   const convertRadii = () => {
     const newRules = []
     Object.keys(data.radii).forEach(key => {
@@ -372,5 +458,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(), ...flatExtRules]
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 91bda11e..0133dfe4 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -23,8 +23,6 @@ import {
 } from './iss_utils.js'
 import { parseCssShadow } from './css_utils.js'
 
-const DEBUG = false
-
 // Ensuring the order of components
 const components = {
   Root: null,
@@ -146,7 +144,7 @@ componentsContext.keys().forEach(key => {
 
 const ruleToSelector = genericRuleToSelector(components)
 
-export const init = (extraRuleset) => {
+export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
@@ -338,32 +336,11 @@ export const init = (extraRuleset) => {
         earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
         computed[lowerLevelSelector].virtualDirectives = virtualDirectives
         computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
-
-        // Debug: lets you see what it think background color should be
-        if (!DEBUG) return
-
-        const directives = {
-          textColor,
-          background: convert(computed[lowerLevelSelector].background).hex,
-          ...inheritedTextOpacity
-        }
-
-        addRule({
-          dynamicVars,
-          selector: cssSelector,
-          virtual: true,
-          component: component.name,
-          parent,
-          ...combination,
-          directives,
-          virtualDirectives,
-          virtualDirectivesRaw
-        })
       } else {
         computed[selector] = computed[selector] || {}
 
         // TODO: DEFAULT TEXT COLOR
-        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
+        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
 
         if (computedDirectives.background) {
           let inheritRule = null
@@ -386,7 +363,7 @@ export const init = (extraRuleset) => {
 
           if (!stacked[selector]) {
             let blend
-            const alpha = computedDirectives.opacity
+            const alpha = computedDirectives.opacity ?? 1
             if (alpha >= 1) {
               blend = rgb
             } else if (alpha <= 0) {
@@ -410,7 +387,7 @@ export const init = (extraRuleset) => {
           computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
         }
 
-        dynamicVars.stacked = lowerLevelStackedBackground
+        dynamicVars.stacked = stacked[selector]
         dynamicVars.background = computed[selector].background
 
         const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
-- 
cgit v1.2.3-70-g09d2


From 779b3dc1228030740ccfbd5192bcd368b526ce56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 15:15:08 +0200
Subject: blur support, fix toggled buttons not working right

---
 src/components/panel.style.js               |  1 +
 src/components/popover.style.js             |  1 +
 src/services/theme_data/css_utils.js        | 19 +++++++++++++++----
 src/services/theme_data/theme2_to_theme3.js |  5 ++---
 4 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 504ecbcb..d9b27667 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -24,6 +24,7 @@ export default {
       directives: {
         background: '--bg',
         roundness: 3,
+        blur: '5px',
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 1b51c9b3..0197271b 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -21,6 +21,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        blur: '10px',
         shadow: [{
           x: 2,
           y: 2,
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index b98a78ed..b83b90bf 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -108,10 +108,21 @@ export const getCssRules = (rules) => rules.map(rule => {
             ].filter(x => x).join(';\n')
           }
           const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          return [
-            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-            '  --background: ' + color
-          ].filter(x => x).join(';\n')
+          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 '' }
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 32797c42..7adbbd42 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -193,7 +193,6 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
       }
     })
-    console.log(newRules)
     return newRules
   }
 
@@ -424,12 +423,12 @@ export const convertTheme2To3 = (data) => {
         case 'alert': {
           const hasPanel = variantArray.find(x => x === 'Panel')
           if (hasPanel) {
-            rule.parent = { component: 'PanelHeader' }
+            newRule.parent = { component: 'PanelHeader' }
             variantArray = variantArray.filter(x => x !== 'Panel')
           }
           const hasTop = variantArray.find(x => x === 'Top') // TopBar
           if (hasTop) {
-            rule.parent = { component: 'TopBar' }
+            newRule.parent = { component: 'TopBar' }
             variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
           }
           break
-- 
cgit v1.2.3-70-g09d2


From 7d2faccd4f62e8ff6c2f6cc9b8b11d890a6ab974 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:04:28 +0200
Subject: fonts support, cleanup

---
 src/App.scss                                       |  36 ++----
 src/components/input.style.js                      |   1 +
 src/components/rich_content/rich_content.scss      |   8 +-
 src/components/rich_content/rich_content.style.js  |   2 +
 src/components/root.style.js                       |   7 ++
 src/components/select/select.vue                   |   8 +-
 .../tabs/security_tab/mfa_backup_codes.vue         |   5 +-
 src/components/status_body/status_body.scss        |   5 +-
 src/components/tab_switcher/tab_switcher.scss      |   2 +-
 src/services/style_setter/style_setter.js          |  15 +--
 src/services/theme_data/css_utils.js               | 125 +++++++++++----------
 src/services/theme_data/theme2_to_theme3.js        |  43 ++++++-
 src/services/theme_data/theme_data_3.service.js    |  11 +-
 13 files changed, 154 insertions(+), 114 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/App.scss b/src/App.scss
index dd790c6a..41e445d2 100644
--- a/src/App.scss
+++ b/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;
-  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-shadow: var(--shadow);
   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);
-  }
-
-  &.-fullwidth {
-    width: 100%;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: var(--link) !important;
   }
 }
 
@@ -437,8 +429,7 @@ textarea {
   border: none;
   border-radius: var(--roundness);
   box-shadow: var(--shadow);
-  font-family: sans-serif;
-  font-family: var(--inputFont, sans-serif);
+  font-family: var(--font);
   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(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
-      background-color: var(--accent, $fallback--link);
+      box-shadow: var(--shadow);
+      background-color: var(--background);
     }
 
     &: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(--inputShadow);
+      box-shadow: var(--shadow);
       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(--faint, $fallback--faint);
+  border: 1px solid var(--textFaint);
   border-radius: var(--roundness);
 }
 
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 70c775ad..139a0034 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -37,6 +37,7 @@ export default {
     },
     {
       directives: {
+        '--font': 'generic | inherit',
         background: '--fg, -5',
         roundness: 3,
         shadow: [{
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 3bb5b16b..73eb07e9 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/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 {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index 7acc9d4f..c8314000 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -9,6 +9,8 @@ export default {
   defaultRules: [
     {
       directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
         textNoCssColor: 'yes'
       }
     }
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 8ddb8038..053d984b 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,5 +9,12 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | sans-serif'
+      }
+    }
   ]
 }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 1797afc8..30fd0bb0 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -32,12 +32,10 @@ label.Select {
     appearance: none;
     background: transparent;
     border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
+    color: var(--text);
     margin: 0;
     padding: 0 2em 0 0.2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
+    font-family: var(--font);
     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;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 923161b2..002f1bb2 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/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, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 930ed803..0a467b4f 100644
--- a/src/components/status_body/status_body.scss
+++ b/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 {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index a90a13ed..489407cb 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/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;
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 {
-- 
cgit v1.2.3-70-g09d2


From c4d218cb3e605a83040d2df52ce8f66dcfebc5bf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 19:14:54 +0200
Subject: fix anon view

---
 src/services/theme_data/theme2_to_theme3.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 11f517c6..ea4b8cd2 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -134,7 +134,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertOpacity = () => {
     const newRules = []
-    Object.keys(data.opacity).forEach(key => {
+    Object.keys(data.opacity || {}).forEach(key => {
       if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
       const originalOpacity = data.opacity[key]
       const rule = {}
@@ -205,7 +205,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertRadii = () => {
     const newRules = []
-    Object.keys(data.radii).forEach(key => {
+    Object.keys(data.radii || {}).forEach(key => {
       if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
       const rule = {}
@@ -258,7 +258,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertFonts = () => {
     const newRules = []
-    Object.keys(data.fonts).forEach(key => {
+    Object.keys(data.fonts || {}).forEach(key => {
       if (!fontsKeys.has(key)) return
       const originalFont = data.fonts[key].family
       const rule = {}
@@ -292,7 +292,7 @@ export const convertTheme2To3 = (data) => {
   }
   const convertShadows = () => {
     const newRules = []
-    Object.keys(data.shadows).forEach(key => {
+    Object.keys(data.shadows || {}).forEach(key => {
       if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
       const rule = {}
-- 
cgit v1.2.3-70-g09d2


From ac85cdac68824efcd3bc60619b66d9e1b0f22afe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 19:24:26 +0200
Subject: fix themes v1 not working

---
 src/services/theme_data/theme2_to_theme3.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ea4b8cd2..1a847dc9 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -1,3 +1,4 @@
+import { convert } from 'chromatism'
 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.
@@ -125,7 +126,8 @@ export const convertTheme2To3 = (data) => {
   data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
-    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
+    console.log(data.colors)
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
     return {
       component: 'Root',
       directives
-- 
cgit v1.2.3-70-g09d2


From 528e7e44967f97121b7e327f66df94ff4ea7931b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 13:10:42 +0200
Subject: fix more annoying themes2->3 button states

---
 src/services/theme_data/theme2_to_theme3.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 1a847dc9..ba61b3f2 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -346,6 +346,14 @@ export const convertTheme2To3 = (data) => {
       }
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus'] })
+      }
+      if (key === 'buttonHover') {
+        newRules.push({ ...rule, state: ['toggled', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'hover'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
       }
 
       if (rule.component === 'Button') {
@@ -489,7 +497,21 @@ export const convertTheme2To3 = (data) => {
       if (newRule.component === 'Panel') {
         return [newRule, { ...newRule, component: 'MobileDrawer' }]
       } else if (newRule.component === 'Button') {
-        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+        const rules = [
+          newRule,
+          { ...newRule, component: 'Tab' },
+          { ...newRule, component: 'ScrollbarElement' }
+        ]
+        console.log(newRule)
+        if (newRule.state?.indexOf('toggled') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
+        }
+        if (newRule.state?.indexOf('hover') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+        }
+        return rules
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {
-- 
cgit v1.2.3-70-g09d2


From 3f6b9fbf9cc59d5ae20f9bda7c8fdf9f55d5675e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 22:56:15 +0200
Subject: user cards looking nicer now

---
 src/components/tab_switcher/tab.style.js    | 15 +++++------
 src/components/user_card/user_card.scss     | 41 +++++++++--------------------
 src/components/user_card/user_card.style.js |  1 +
 src/components/user_card/user_card.vue      |  6 ++---
 src/services/theme_data/theme2_to_theme3.js |  1 +
 5 files changed, 25 insertions(+), 39 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index bf4a4ea5..eac8aaeb 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.tab', // CSS selector/prefix
   states: {
     active: '.active',
-    hover: ':hover:not(:disabled)',
+    hover: ':hover:not(.disabled)',
     disabled: '.disabled'
   },
   validInnerComponents: [
@@ -25,23 +25,22 @@ export default {
       }
     },
     {
-      state: ['hover', 'active'],
+      state: ['active'],
       directives: {
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
         opacity: 0
       }
     },
     {
-      state: ['disabled'],
+      state: ['hover', 'active'],
       directives: {
-        background: '$blend(--inheritedBackground, 0.25, --parent)',
-        shadow: ['--defaultButtonBevel']
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
       }
     },
     {
-      state: ['active'],
+      state: ['disabled'],
       directives: {
-        opacity: 0
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: ['--defaultButtonBevel']
       }
     },
     {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index a1ac81a6..6dba3499 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -62,11 +62,6 @@
     padding: 1em;
     margin: 0;
 
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
     img {
       object-fit: contain;
       vertical-align: middle;
@@ -76,36 +71,31 @@
   }
 
   &.-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-left-radius: var(--roundness);
+    border-top-right-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
     --__roundnessBottom: 0;
   }
 
   &.-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
-    --__roundnessBottom: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-popover {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--tooltipRadius);
-    --__roundnessBottom: var(--tooltipRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-bordered {
     border-width: 1px;
     border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 }
 
@@ -176,8 +166,7 @@
     padding: 0.5em 0;
 
     &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
+      color: var(--lightText);
     }
   }
 
@@ -191,6 +180,7 @@
     }
 
     .user-screen-name {
+      color: var(--text);
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
@@ -202,16 +192,11 @@
       flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
 
     .user-role {
       flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
index a6190f59..34eaa176 100644
--- a/src/components/user_card/user_card.style.js
+++ b/src/components/user_card/user_card.style.js
@@ -15,6 +15,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        opacity: 0,
         roundness: 3,
         shadow: [{
           x: 1,
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index e69836cc..a616f526 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -113,19 +113,19 @@
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.deactivated') }}
                 </span>
                 <span
                   v-if="!!visibleRole"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t(`general.role.${visibleRole}`) }}
                 </span>
                 <span
                   v-if="user.bot"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ba61b3f2..8c623c69 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -200,6 +200,7 @@ export const convertTheme2To3 = (data) => {
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
         newRules.push({ ...rule, component: 'Tab' })
+        newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
     })
     return newRules
-- 
cgit v1.2.3-70-g09d2


From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 18:24:29 +0200
Subject: panels/statuses are looking really good now even with transparency

---
 src/components/conversation/conversation.vue  | 12 ++--
 src/components/notification/notification.scss |  5 ++
 src/components/panel.style.js                 |  1 +
 src/components/panel_header.style.js          |  1 +
 src/components/status/post.style.js           |  6 +-
 src/components/timeline/timeline.scss         |  4 ++
 src/components/user_card/user_card.scss       |  8 ---
 src/components/user_card/user_card.vue        |  5 +-
 src/components/user_panel/user_panel.vue      | 13 +++-
 src/components/user_profile/user_profile.vue  | 96 +++++++++++++++------------
 src/panel.scss                                | 10 +++
 src/services/theme_data/theme2_to_theme3.js   |  3 +
 12 files changed, 97 insertions(+), 67 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 64aa1351..d3ebf791 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -28,7 +28,10 @@
         class="rightside-button"
       />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+      >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -78,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein panel-body"
+              class="conversation-status status-fadein"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein panel-body"
+            class="conversation-status status-fadein"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"
@@ -284,7 +287,8 @@
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    background: var(--background);
+    padding: calc(var(--status-margin, $status-margin) / 2);
   }
 }
 </style>
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ad05a2f3..2dbced09 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -5,6 +5,11 @@
   word-wrap: break-word;
   word-break: break-word;
 
+  &.Status {
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
+  }
+
   --emoji-size: 14px;
 
   &:hover {
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d7459549..ad16c18f 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -23,6 +23,7 @@ export default {
   defaultRules: [
     {
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--bg',
         roundness: 3,
         blur: '5px',
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 56879fba..32464bc5 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -15,6 +15,7 @@ export default {
     {
       component: 'PanelHeader',
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--fg',
         shadow: []
       }
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 673f72e0..8dce527e 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -20,15 +20,13 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0
+        background: '--bg'
       }
     },
     {
       state: ['selected'],
       directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
+        background: '--inheritedBackground, 10'
       }
     }
   ]
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 7f886dc3..fccf28f4 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,6 +1,10 @@
 @import "../../variables";
 
 .Timeline {
+  .timeline-body {
+    background: none;
+  }
+
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 6dba3499..bf0ed5c2 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,14 +21,6 @@
     position: relative;
   }
 
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
   .background-image {
     position: absolute;
     top: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0f627f62..70c4f67d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,10 +282,7 @@
         />
       </div>
     </div>
-    <div
-      v-if="!hideBio"
-      class="panel-body"
-    >
+    <div v-if="!hideBio">
       <div
         v-if="!mergedConfig.hideUserStats && switcher"
         class="user-counts"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 95ec97af..9323b65e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
 <script src="./user_panel.js"></script>
 
 <style lang="scss">
-.user-panel .signed-in {
-  overflow: visible;
-  z-index: 10;
+.user-panel {
+  .panel {
+    background: var(--background);
+    backdrop-filter: var(--backdrop-filter);
+  }
+
+  .signed-in {
+    overflow: visible;
+    z-index: 10;
+  }
 }
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 011f32da..2d8b33e7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <UserCard
-        :user-id="userId"
-        :switcher="true"
-        :selected="timeline.viewing"
-        avatar-action="zoom"
-        rounded="top"
-        :has-note-editor="true"
-      />
-      <span
-        v-if="!!user.birthday"
-        class="user-birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
+      <div class="panel-body">
+        <UserCard
+          :user-id="userId"
+          :switcher="true"
+          :selected="timeline.viewing"
+          avatar-action="zoom"
+          rounded="top"
+          :has-note-editor="true"
         />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </span>
-      <div
-        v-if="user.fields_html && user.fields_html.length > 0"
-        class="user-profile-fields"
-      >
-        <dl
-          v-for="(field, index) in user.fields_html"
-          :key="index"
-          class="user-profile-field"
+        <span
+          v-if="!!user.birthday"
+          class="user-birthday"
         >
-          <dt
-            :title="user.fields_text[index].name"
-            class="user-profile-field-name"
-          >
-            <RichContent
-              :html="field.name"
-              :emoji="user.emoji"
-            />
-          </dt>
-          <dd
-            :title="user.fields_text[index].value"
-            class="user-profile-field-value"
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </span>
+        <div
+          v-if="user.fields_html && user.fields_html.length > 0"
+          class="user-profile-fields"
+        >
+          <dl
+            v-for="(field, index) in user.fields_html"
+            :key="index"
+            class="user-profile-field"
           >
-            <RichContent
-              :html="field.value"
-              :emoji="user.emoji"
-            />
-          </dd>
-        </dl>
+            <dt
+              :title="user.fields_text[index].name"
+              class="user-profile-field-name"
+            >
+              <RichContent
+                :html="field.name"
+                :emoji="user.emoji"
+              />
+            </dt>
+            <dd
+              :title="user.fields_text[index].value"
+              class="user-profile-field-value"
+            >
+              <RichContent
+                :html="field.value"
+                :emoji="user.emoji"
+              />
+            </dd>
+          </dl>
+        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -136,7 +138,7 @@
           {{ $t('settings.profile_tab') }}
         </div>
       </div>
-      <div class="panel-body">
+      <div>
         <span v-if="error">{{ error }}</span>
         <FAIcon
           v-else
@@ -160,6 +162,11 @@
   // No sticky header on user profile
   --currentPanelStack: 1;
 
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .user-birthday {
     margin: 0 0.75em 0.5em;
   }
@@ -228,4 +235,5 @@
     padding: 7em;
   }
 }
+
 </style>
diff --git a/src/panel.scss b/src/panel.scss
index 5df9fee4..08339765 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,5 +1,8 @@
 /* stylelint-disable no-descending-specificity */
 .panel {
+  --__panel-background: var(--background);
+  --__panel-backdrop-filter: var(--backdrop-filter);
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,8 @@
 
 .panel-body {
   padding: var(--panel-body-padding, 0);
+  background: var(--background);
+  backdrop-filter: var(--__panel-backdrop-filter);
 
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@@ -50,6 +55,7 @@
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -131,6 +137,9 @@
   border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
+  background-image:
+    linear-gradient(to bottom, var(--background), var(--background)),
+    linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
   &::after {
     background-color: var(--background);
@@ -186,5 +195,6 @@
   border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border);
+  background-color: var(--__panel-background);
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 8c623c69..75c82314 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
         newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
+      if (rule.component === 'Panel') {
+        newRules.push({ ...rule, component: 'Post' })
+      }
     })
     return newRules
   }
-- 
cgit v1.2.3-70-g09d2


From 7238b218f9a0aa60a74eb49a3581aa25e0f1d3f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:10:23 +0200
Subject: fix badgeNotification for themes2

---
 src/services/theme_data/theme2_to_theme3.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/services/theme_data/theme2_to_theme3.js')

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 75c82314..e150369f 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -126,7 +126,6 @@ export const convertTheme2To3 = (data) => {
   data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
-    console.log(data.colors)
     basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
     return {
       component: 'Root',
@@ -506,7 +505,6 @@ export const convertTheme2To3 = (data) => {
           { ...newRule, component: 'Tab' },
           { ...newRule, component: 'ScrollbarElement' }
         ]
-        console.log(newRule)
         if (newRule.state?.indexOf('toggled') >= 0) {
           rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
           rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
@@ -516,6 +514,12 @@ export const convertTheme2To3 = (data) => {
           rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
         }
         return rules
+      } else if (newRule.component === 'Badge') {
+        if (newRule.variant === 'notification') {
+          return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+        } else {
+          return [newRule]
+        }
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {
-- 
cgit v1.2.3-70-g09d2