diff --git a/src/components/input.style.js b/src/components/input.style.js index 65a3d2ad..c60ac1e4 100644 --- a/src/components/input.style.js +++ b/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'] } }, { diff --git a/static/palettes/index.json b/static/palettes/index.json index 356f4ae7..acb4e4d9 100644 --- a/static/palettes/index.json +++ b/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"