Redesign: Add a form field component

[jryans]

The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.

Adapted from @ara4n's experiment into a React component with a CSS only
approach.

[turt2live]

Some variables might need to be added to riot-web's status theme as well (errors might not crop up until someone uses the component, though)

[jryans]

Some variables might need to be added to riot-web's status theme as well (errors might not crop up until someone uses the component, though)

These days, such errors seem to appear at build time. (Perhaps that's new as of the content hashed image work, unsure...) In any case, the Status theme root imports the light theme's _base.scss, so it should be okay.

[turt2live]

so it does... I wonder why I've never had luck with that...

I guess it's fine though - it seems to build fine

[ara4n]

woo, awesome :) thank you! i don’t believe we need to worry about keeping the status theme working with Experimental.

the demo gif here highlights that we need to distinguish “focused” from “valid” somehow; need input from @nadonomy here

[nadonomy]

@jryans looking great! Small tweak/fix request; the label is vertically misaligned:

@ara4n yeah I was thinking about this while designing; whatever blue we're using for anchor tags should feel great for focused input.

[ara4n]

@nadonomy okay - so how do we distinguish between unfocused-and-valid and focused-and-valid? as the current zeplin implies they should both be green atm...

[nadonomy]

@ara4n just updated the comp in Zeplin to show what I'm thinking: https://zpl.io/VDqejkr

[jryans]

Opened #2468 for the label alignment and new focused color.