Merge branch 'fixes-roundup4' into shigusegubu-themes3

src/App.scss

@@ -762,12 +762,6 @@ option {
     margin-left: 0.7em;
     margin-top: -1em;
   }
-
-  &.-neutral {
-    background-color: var(--badgeNeutral);
-    color: white;
-    color: var(--badgeNeutralText, white);
-  }
 }
 
 .alert {

src/components/button_unstyled.style.js

@@ -2,6 +2,7 @@ export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
   notEditable: true,
+  transparent: true,
   states: {
     toggled: '.toggled',
     disabled: ':disabled',

src/components/rich_content/rich_content.style.js

@@ -2,6 +2,7 @@ export default {
   name: 'RichContent',
   selector: '.RichContent',
   notEditable: true,
+  transparent: true,
   validInnerComponents: [
     'Text',
     'FunText',

src/components/root.style.js

@@ -2,27 +2,6 @@ export default {
   name: 'Root',
   selector: ':root',
   notEditable: true,
-  validInnerComponents: [
-    // These are purely for --parent--text et such to work
-    'Text',
-    'Link',
-    'Border',
-
-    'Underlay',
-    'Modals',
-    'Popover',
-    'TopBar',
-    'Scrollbar',
-    'ScrollbarElement',
-    'MobileDrawer',
-    'Alert',
-    'Button' // mobile post button
-  ],
-  validInnerComponentsLite: [
-    'Underlay',
-    'Scrollbar',
-    'ScrollbarElement'
-  ],
   defaultRules: [
     {
       directives: {

src/services/theme_data/pleromafe.t3.js

@@ -1,2 +0,0 @@
-export const sampleRules = [
-]

src/services/theme_data/theme_data_3.service.js

@@ -32,6 +32,7 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
+  PanelHeader: null,
   Panel: null,
   Chat: null,
   ChatMessage: null
@@ -151,6 +152,25 @@ componentsContext.keys().forEach(key => {
   }
   components[component.name] = component
 })
+Object.keys(components).forEach(key => {
+  if (key === 'Root') return
+  components.Root.validInnerComponents = components.Root.validInnerComponents || []
+  components.Root.validInnerComponents.push(key)
+})
+
+
+Object.keys(components).forEach(key => {
+  const component = components[key]
+  const { validInnerComponents = [] } = component
+  validInnerComponents.forEach(inner => {
+    const child = components[inner]
+    component.possibleChildren = component.possibleChildren || []
+    component.possibleChildren.push(child)
+    child.possibleParents = child.possibleParents || []
+    child.possibleParents.push(component)
+  })
+})
+
 
 const engineChecksum = sum(components)
 
@@ -244,7 +264,21 @@ export const init = ({
   }
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
+  const transparentComponents = new Set(Object.values(components).filter(c => c.transparent).map(c => c.name))
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
+  const extraCompileComponents = new Set([])
+
+  Object.values(components).forEach(component => {
+    const relevantRules = ruleset.filter(r => r.component === component.name)
+    const backgrounds = relevantRules.map(r => r.directives.background).filter(x => x)
+    const opacities = relevantRules.map(r => r.directives.opacity).filter(x => x)
+    if (
+      backgrounds.some(x => x.match(/--parent/)) ||
+        opacities.some(x => x != null && x < 1))
+    {
+      extraCompileComponents.add(component.name)
+    }
+  })
 
   const processCombination = (combination) => {
     try {
@@ -473,11 +507,21 @@ export const init = ({
     let validInnerComponents
     if (editMode) {
       const temp = (component.validInnerComponentsLite || component.validInnerComponents || [])
-      validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
+      validInnerComponents = temp
+        .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else {
+    } else if (component.name === 'Root') {
       validInnerComponents = component.validInnerComponents || []
+    } else {
+      validInnerComponents = component
+        .validInnerComponents
+          ?.filter(
+            c => virtualComponents.has(c)
+              || transparentComponents.has(c)
+              || extraCompileComponents.has(c)
+          )
+          || []
     }
 
     // Normalizing states and variants to always include "normal"