Color variables
The purpose of this issue is to come up with a common list of color variables for theming in pubsweet applications.
The idea is to compare the ideas that elife and coko/collabra have on the subject and find a "vanilla" list that organisations can build on.
| Elife asset name | Elife suggested variable | Coko suggested variable | Vanilla variable | Notes |
|---|---|---|---|---|
| Primary color | $color-primary |
$color-primary |
This color is the branding main color | |
| Primary secodary | $color-secondary |
This color is the branding secondary color | ||
| Interation color | $hover-focus |
$color-action |
This color is the color used when hovering a button, a link. | |
| Text color | $color-text |
$color-text |
Main color for the text, which should be inherited by all elements | |
| Text secondary color | $color-text-secondary |
What is the use of this color? | ||
| Text placeholder / disabled color | $color-tex-placeholder |
|||
| Furniture color (dividers) | $color-text-dividers |
|||
| Background color hue | $color-text-background-hue |
Where is that variable used? | ||
| Success color | $color-success |
$color-valid |
||
| Attention color | $attention-color |
$color-warning |
||
| Attention color | $color-danger |
|||
| Attention color | $attention-color |
|||
| **light grey ** | This color comes from editoria alignmentBox, need to be updated | |||
| **grey ** | This color comes from editoria alignmentBox, need to be updated | |||
| dark grey | This color comes from editoria alignmentBox, need to be updated | |||
| whitergba | This color comes from editoria alignmentBox, need to be updated (used for the inset of the alignmentBox) |