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) |
Edited by julientaq