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
|