more optimizations, execution is now split into eager (for main UI) and

lazy (for modals, popovers etc) parts

src/components/alert.style.js

@@ -0,0 +1,42 @@
+export default {
+  name: 'Alert',
+  selector: '.alert',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Link',
+    'Border'
+  ],
+  variants: {
+    normal: '.neutral',
+    error: '.error',
+    warning: '.warning',
+    success: '.success'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--text',
+        opacity: 0.8
+      }
+    },
+    {
+      variant: 'error',
+      directives: {
+        background: '--cRed'
+      }
+    },
+    {
+      variant: 'warning',
+      directives: {
+        background: '--cOrange'
+      }
+    },
+    {
+      variant: 'success',
+      directives: {
+        background: '--cGreen'
+      }
+    }
+  ]
+}

src/components/badge.style.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'Badge',
+  selector: '.badge',
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  variants: {
+    normal: '.neutral',
+    notification: '.notification'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--cGreen'
+      }
+    },
+    {
+      variant: 'notification',
+      directives: {
+        background: '--cRed'
+      }
+    }
+  ]
+}

src/components/button.style.js

@@ -38,11 +38,11 @@ export default {
     // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
     // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
     // normal: '' // normal state is implicitly added, it is always included
-    disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
     hover: ':hover',
-    focused: ':focus-within'
+    focused: ':focus-within',
+    disabled: ':disabled'
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
@@ -107,13 +107,6 @@ export default {
         shadow: [...buttonInsetFakeBorders]
       }
     },
-    {
-      state: ['disabled', 'hover'],
-      directives: {
-        background: '$blend(--background, 0.25, --parent)',
-        shadow: [...buttonInsetFakeBorders]
-      }
-    },
     {
       component: 'Text',
       parent: {
@@ -124,17 +117,6 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'Button',
-        state: ['disabled', 'hover']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
     }
   ]
 }

src/components/button_unstyled.style.js

@@ -10,7 +10,8 @@ export default {
   },
   validInnerComponents: [
     'Text',
-    'Icon'
+    'Icon',
+    'Badge'
   ],
   defaultRules: [
     {

src/components/menu_item.style.js

@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Input',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   states: {
     hover: ':hover',

src/components/modals.style.js

@@ -1,6 +1,7 @@
 export default {
   name: 'Modals',
   selector: '.modal-view',
+  lazy: true,
   validInnerComponents: [
     'Panel'
   ],

src/components/panel.style.js

@@ -11,7 +11,8 @@ export default {
     'PanelHeader',
     'MenuItem',
     'Post',
-    'Notification'
+    'Notification',
+    'Alert'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -6,7 +6,9 @@ export default {
     'Link',
     'Icon',
     'Button',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge',
+    'Alert'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -1,8 +1,8 @@
 export default {
   name: 'Popover',
   selector: '.popover',
+  lazy: true,
   variants: {
-    tooltip: '.tooltip',
     modal: '.modal'
   },
   validInnerComponents: [

src/components/top_bar.style.js

@@ -7,7 +7,8 @@ export default {
     'Icon',
     'Button',
     'ButtonUnstyled',
-    'Input'
+    'Input',
+    'Badge'
   ],
   defaultRules: [
     {

src/components/underlay.style.js

@@ -6,7 +6,8 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel'
+    'Panel',
+    'Alert'
   ],
   defaultRules: [
     {