update, should inherit stuff properly now.

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]
+      }
+    }
+  ]
+}