Clay: Buttons color variations

[laugardie]

We are working on LEXI-758 to adapt the primary buttons to the colour of the status message. Could you check if these colours are matching these variables?
$success-d1: #226A33
$success-d2: #1C5629
$info-d1:#294F98
$info-d2: #234584
$danger-d1: #C31212
$danger-d2: #AB1010
$warning-d1: #9F4500
$warning-d2: #863A00

cc/ @drakonux

[pat270]

@laugardie They're not all exact, but pretty close.

[laugardie]

Hey @pat270, sorry for the late response but I have been PTO.

I see that some colors are the same and others are pretty similar. We would like to update the variables that don't match with the colors that we propose. We follow a rule to calculate them.

For example.-
We use the defalut color for $success:#287D3C. Then we calculate the darker colors following this pattern:
$success-d1: Default + 5% darken
$success-d2: Default + 10% darken

I have checked all the variables and the ones that need to be updated are the following:
$danger-d1:#C31212
$info-d1:#294f98
$success-d1:#226A33
$success-d2:#1C5629

Also, I have noticed that the $success and $success-l1 colors differ from the values that Lexicon has established. It should be $success:#287D3C and $success-l1:#5ACA75

[pat270]

@laugardie no worries. The percentage values don't apply across the board for every color. For example, darken($warning, 5%) outputs #A04500. The same goes for -l1 and -l2. The forumlas on https://liferay.design/lexicon/foundations/color/ don't match 100% with Sass output.

Do you care if I just set the values to be exactly what you want? If not we need to coordinate on getting the formulas correct on the Lexicon site as well as Clay CSS. In my experience, having darken and lighten functions aren't very useful because the variant color output is suboptimal at best.

[laugardie]

@pat270 I have tested both hex values together and the color difference is not perceptible. So we could leave the values as you said before.

[pat270]

@laugardie I tweaked the colors/formulas in Atlas for the colors you listed. Those should match exactly.

/cc @drakonux

[laugardie]

Thanks @pat270 👍