src/App.scss

@@ -762,6 +762,12 @@ 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,7 +2,6 @@ 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,7 +2,6 @@ export default {
   name: 'RichContent',
   selector: '.RichContent',
   notEditable: true,
-  transparent: true,
   validInnerComponents: [
     'Text',
     'FunText',

src/components/root.style.js

@@ -2,6 +2,27 @@ 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

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

src/services/theme_data/theme_data_3.service.js

@@ -32,7 +32,6 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
-  PanelHeader: null,
   Panel: null,
   Chat: null,
   ChatMessage: null
@@ -152,25 +151,6 @@ 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)
 
@@ -264,21 +244,7 @@ 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 {
@@ -507,21 +473,11 @@ export const init = ({
     let validInnerComponents
     if (editMode) {
       const temp = (component.validInnerComponentsLite || component.validInnerComponents || [])
-      validInnerComponents = temp
+      validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
-        .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else if (component.name === 'Root') {
-      validInnerComponents = component.validInnerComponents || []
     } else {
-      validInnerComponents = component
+      validInnerComponents = component.validInnerComponents || []
-        .validInnerComponents
-          ?.filter(
-            c => virtualComponents.has(c)
-              || transparentComponents.has(c)
-              || extraCompileComponents.has(c)
-          )
-          || []
     }
 
     // Normalizing states and variants to always include "normal"