update, should inherit stuff properly now.

src/components/button.style.js

@@ -1,11 +1,34 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
 export default {
   name: 'Button',
-  selector: '.btn',
+  selector: '.button-default',
   states: {
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover'
+    hover: ':hover',
+    focused: ':focus-within'
   },
   variants: {
     danger: '.danger',
@@ -20,14 +43,49 @@ export default {
     {
       component: 'Button',
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 2,
+          spread: 0,
+          color: '#000000',
+          alpha: 1
+        }, ...buttonInsetFakeBorders]
       }
     },
     {
       component: 'Button',
       state: ['hover'],
       directives: {
-        background: '#FFFFFF'
+        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Button',
+      state: ['hover', 'pressed'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Button',
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--background, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
       }
     }
   ]

src/components/dropdown_menu.style.js

@@ -0,0 +1,19 @@
+export default {
+  name: 'DropdownMenu',
+  selector: '.dropdown',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input'
+  ],
+  states: {
+    hover: ':hover'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}

src/components/input.style.js

@@ -0,0 +1,60 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
+export default {
+  name: 'Input',
+  selector: '.input',
+  states: {
+    disabled: ':disabled',
+    pressed: ':active',
+    hover: ':hover',
+    focused: ':focus-within'
+  },
+  variants: {
+    danger: '.danger',
+    unstyled: '.unstyled',
+    sublime: '.sublime'
+  },
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 2,
+          spread: 0,
+          color: '#000000',
+          alpha: 1
+        }, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    }
+  ]
+}

src/components/panel.style.js

@@ -6,13 +6,14 @@ export default {
     'Link',
     'Icon',
     'Button',
-    'PanelHeader'
+    'Input',
+    'PanelHeader',
+    'DropdownMenu'
   ],
   defaultRules: [
     {
-      component: 'Panel',
       directives: {
-        background: '--fg'
+        background: '--bg'
       }
     }
   ]

src/components/panel_header.style.js

@@ -12,7 +12,6 @@ export default {
       component: 'PanelHeader',
       directives: {
         background: '--fg'
-        // opacity: 0.9
       }
     }
   ]

src/components/popover.style.js

@@ -0,0 +1,20 @@
+export default {
+  name: 'Popover',
+  selector: '.popover',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'Input',
+    'PanelHeader',
+    'DropdownMenu'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}

src/components/root.style.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'Root',
+  selector: ':root',
+  validInnerComponents: [
+    'Underlay',
+    'TopBar',
+    'Popover'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    }
+  ]
+}

src/components/top_bar.style.js

@@ -0,0 +1,18 @@
+export default {
+  name: 'TopBar',
+  selector: 'nav',
+  validInnerComponents: [
+    'Link',
+    'Text',
+    'Icon',
+    'Button',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}

src/components/underlay.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Underlay',
-  selector: '#content',
+  selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such...
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'