better input styles

src/components/input.style.js

@@ -1,12 +1,3 @@
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
 export default {
   name: 'Input',
   selector: '.input',
@@ -27,7 +18,9 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)'
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
     },
     {
@@ -54,7 +47,19 @@ export default {
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, '--defaultInputBevel']
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused', 'hover'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {

static/palettes/index.json

@@ -20,8 +20,8 @@
     "link": "#81a2be",
     "text": "#c5c8c6",
     "cRed": "#cc6666",
-    "cGreen": "#8abeb7",
-    "cBlue": "#b5bd68",
+    "cBlue": "#8abeb7",
+    "cGreen": "#b5bd68",
     "cOrange": "#de935f",
     "_cYellow": "#f0c674",
     "_cPurple": "#b294bb"