Hi there,
I’ve just come across a bug in the way colors seem to be output on the front-end differing from the preview window. I have some global colors set up, one of which is just straight up white, but when setting up the color I put it in as #fff. This works fine in the Cornerstone editor, and I can adjust the transparency just as expected. However, when this is output on the front-end, the transparency is being added to the end of the hex code, but as the stored hex code is #fff, the output becomes #fff80 for white at 50% transparency, which is an invalid colour.
Here is what the global color is set to:
Interestingly, in the global color editor, it shows it fully as #ffffff:
Then in Cornerstone as a background color it is showing up as rgba(255, 255, 255, 0.5)
Likewise, it shows this value in the generated CSS in the editor too:
However, looking at the live page it is showing as #fff80:
And therefore not being displayed correctly.
The quick fix is obviously to change #fff to #ffffff, but you may want to account for this edge case in the global color calculations, as copying colors from other places may result in some 3-character colors being input, and people will be confused when transparencies don’t work! I certainly was!
All the best and thanks for your ongoing support and development of Pro