Merge branch 'themes3' into shigusegubu-themes3

src/services/style_setter/style_setter.js

@@ -50,15 +50,25 @@ export const applyTheme = async (input) => {
   // Optimization - instead of processing all lazy rules in one go, process them in small chunks
   // so that UI can do other things and be somewhat responsive while less important rules are being
   // processed
-  chunk(themes3.lazy, 5).forEach(chunk => {
-    setTimeout(() => {
-      Promise.all(chunk.map(x => x())).then(result => {
-        getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
-          styleSheet.insertRule(rule, 'index-max')
-        })
+  let counter = 0
+  const chunks = chunk(themes3.lazy, 200)
+  // let t0 = performance.now()
+  const processChunk = () => {
+    const chunk = chunks[counter]
+    Promise.all(chunk.map(x => x())).then(result => {
+      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+        styleSheet.insertRule(rule, 'index-max')
       })
-    }, 200)
-  })
+      // const t1 = performance.now()
+      // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
+      // t0 = t1
+      counter += 1
+      if (counter < chunks.length) {
+        setTimeout(processChunk, 0)
+      }
+    })
+  }
+  setTimeout(processChunk, 0)
 
   return Promise.resolve()
 }

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',
@@ -202,6 +201,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
   }
@@ -503,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'] })
@@ -513,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 {

src/services/theme_data/theme3_slot_functions.js

@@ -1,5 +1,5 @@
 import { convert, brightness } from 'chromatism'
-import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 
 export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
@@ -23,6 +23,17 @@ export const colorFunctions = {
       return { ...colorArg, a: amount }
     }
   },
+  textColor: {
+    argsNeeded: 2,
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+
+      return getTextColor(background, foreground, preserve === 'preserve')
+    }
+  },
   blend: {
     argsNeeded: 3,
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {