Form variables

The purpose of this issue is to come up with a common list of variables for theming form inputs in pubsweet applications.

Elife component name	Image of Elife component	Collabra component name	Image of Collabra component	Elife suggested variable	Coko suggested variable	Vanilla variable	Notes
Button primary	Button primary	button	Button	$border-radius, $color-primary, $primary-text-color	$button-background ,$button-borders, $button-border-radius, $button-border-color
Button primary small	Button primary small	na	na	$border-radius, $color-primary, $primary-text-color	$button-background ,$button-borders, $button-border-radius, $button-border-color		the only change in the css would be the font-size (as every size should be in em for the atoms, so their size will be set by their parent)
Button secondary	Button secondary	Button secondary	button	$border-radius, $border-width, $secondary-border-color	$button-background ,$button-borders, $button-border-radius, $button-border-color
Text input	Text input	Text field	text-field	$border-radius, $border-width, $color-text-dividers	$border-color, $border-width, $background
Text area	Text area	Text area	Not in the style guide yet	$border-radius, $border-width, $color-text-dividers
Select menu	Select menu	Menu	Menu	$border-radius, $border-width, $color-text-dividers
Check box	Check box	checkbox	checkbox	$border-radius, $border-width	$color-primary, $color-text,		checkboxes and radio buttons are a little tricky as it's using some specific css for collabra, and i think that elife ones relies on SVG. SVG could be a simple way to change element in the vanilla theme though.
Radio button	Radio button	radio	radio	$border-radius, $border-width	$color-primary, $color-text