opacity stuff, better debug mode

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

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) : '',

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

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('--'))