Come build with us.
Stacks API v13 for Stacks 5.0
%id=colorID%
%id=<colorControlID>%
%id=<colorControlID> <operation> n%
<colorControlID> is the ID of a color control.<operation> is a color math operation, one of: +, -, or *.
+ and * lighten the color- darkens the color ( * 0.5 darkens )Color Math operations can be used to modify the colors.
Color values output as rgba CSS color strings including opacity if it is enabled.
template:
/* lighten the color by 25/255ths */
.lighterStuff {
background-color: %id=userSelectedColor + 25%;
}
/* darken the color by 25/255ths */
.darkerStuff {
background-color: %id=userSelectedColor - 25%;
}
/* twice as light */
.lightestStuff {
background-color: %id=userSelectedColor * 2%;
}
/* twice as dark */
.darkestStuff {
background-color: %id=userSelectedColor * 0.5%;
}
With THIS COLOR (rgba(255, 0, 128, 1.0)) chosen.
/* lighten the color by 25/255ths */
.lighterStuff {
background-color: %id=userSelectedColor + 25%;
}
/* darken the color by 25/255ths */
.darkerStuff {
background-color: %id=userSelectedColor - 25%;
}
/* twice as light */
.lightestStuff {
background-color: %id=userSelectedColor * 2%;
}
/* twice as dark */
.darkestStuff {
background-color: %id=userSelectedColor * 0.5%;
}
which should render like this:
Original
Lighter Stuff
Darker Stuff
Lightest Stuff
Darkest Stuff