even more weight loss

src/components/list/list_item.style.js

@@ -1,48 +0,0 @@
-export default {
-  name: 'ListItem',
-  selector: '.list-item',
-  states: {
-    active: '.-active',
-    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
-  },
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    // Optimization: don't put heavy components unless needed
-    // 'Button',
-    // 'ButtonUnstyled',
-    // 'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover', 'active'],
-      directives: {
-        background: '--inheritedBackground, 20',
-        opacity: 1
-      }
-    }
-  ]
-}

src/components/menu_item.style.js

@@ -4,11 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Input',
+    'Border'
-    'Border',
-    'ButtonUnstyled',
-    'Badge',
-    'Avatar'
   ],
   states: {
     hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

src/components/mobile_drawer.style.js

@@ -10,11 +10,9 @@ export default {
     // 'Button',
     // 'ButtonUnstyled',
     // 'Input',
-    'PanelHeader',
     'MenuItem',
     'Notification',
-    'Alert',
+    'Alert'
-    'UserCard'
   ],
   defaultRules: [
     {

src/components/panel.style.js

@@ -6,30 +6,16 @@ export default {
     'Link',
     'Icon',
     'Border',
-    // Optimization: don't put heavy components unless needed
-    // 'Button',
-    // 'ButtonUnstyled',
-    // 'Input',
     'PanelHeader',
-    'MenuItem',
     'Post',
-    'Notification',
+    'Notification'
-    'Alert',
-    'UserCard',
-    'Chat',
-    'Tab',
-    'ListItem'
   ],
   validInnerComponentsLite: [
     'Text',
     'Link',
     'Icon',
     'Border',
-    // Optimization: don't put heavy components unless needed
+    'PanelHeader'
-    // 'Button',
-    // 'Input',
-    'PanelHeader',
-    'Alert'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -14,9 +14,7 @@ export default {
     // 'Button',
     // 'ButtonUnstyled',
     // 'Input',
-    'MenuItem',
+    'MenuItem'
-    'Post',
-    'UserCard'
   ],
   defaultRules: [
     {

src/components/user_card/user_card.style.js

@@ -1,42 +0,0 @@
-export default {
-  name: 'UserCard',
-  selector: '.user-card',
-  notEditable: true,
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    // Optimization: don't put heavy components unless needed
-    // 'Button',
-    // 'ButtonUnstyled',
-    // 'Input',
-    'Alert'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0,
-        roundness: 3,
-        shadow: [{
-          x: 1,
-          y: 1,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }],
-        '--profileTint': 'color | $alpha(--background 0.5)'
-      }
-    },
-    {
-      parent: {
-        component: 'UserCard'
-      },
-      component: 'RichContent',
-      directives: {
-        opacity: 0
-      }
-    }
-  ]
-}

src/services/style_setter/style_setter.js

@@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
 
   const themes3 = init({
     inputRuleset,
-    debug
+    debug: true
   })
 
   getCssRules(themes3.eager, debug).forEach(rule => {