This is a bit of an advanced tip, but I created a list of the Source var colours. If you use the Source var colours, this can act as a reminder or the correct syntax, what’s available and also a quick way to copy and paste what you want. I paste the list below into the Dev notes in my Settings containing Grouper stack.
(PS These can also be veiwed along with their colours, in Developer Mode, Page Inspector)
Many of these colours can be accessed in Edit mode in other ways, but some such as the softer and richer colours are not accessible in thse ways.
The biggest use I find for these is in adding these into small bits of CSS code to pick a colour set in the Source settings stack that would otherwise have to be entered manually.
A typical example use would be to set links to use the softer text colour which would be:
a {color:var(--text-color-softer)}
Note. Depending how you use this, you may need to add an important, i.e.
a {color:var(--text-color-softer)!important}
If you wanted to make a specific paragraps links use the softer colour, then add a class name such as softerlink to that paragraph class, in the paragraph stack settings, and use:
.softerlink a {color:var(--text-color-softer)!important}
SOURCE VAR COLOURS
var(–accent-color)
var(–accent-color-hover)
var(–accent-text-color)
var(–accent-text-color)
var(–background-color)
var(–background-color-alt)
var(–base-font-size)
var(–border-color)
var(–border-color-richer)
var(–border-color-softer)
var(–button-primary-color)
var(–button-primary-color-hover)
var(–code-background)
var(–code-text)
var(–container-max-width)
var(–container-max-width-alt)
var(–link-color)
var(–link-color-hover)
var(–nav-bg)
var(–nav-bg-hover)
var(–nav-link)
var(–nav-link-hover)
var(–second-color)
var(–second-color-alt)
var(–second-color-hover)
var(–text-color-normal)
var(–text-color-richer)
var(–text-color-softer)
