Skip to content

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)

@julientaq @Nick

Edited by julientaq