Color Contrast Issue

Hmm...I'm not entirely sure we should be hard-coding color values, the custom properties are likely in use for a reason. Ideally @mhercel or @rikki_ikki (or another front-end expert) should sign off here.

Yeah, it should really have a variable as the color, or if one off, a comment explaining why the variable wouldn't work.

Do we need to check if the color: var(--color-text-neutral-soft) is inadequate in Drupal CMS, does that mean it is inadequate in claro itself, which means this issue should be moved to the Claro issue queue? Are there other places

I have followed the white rabbit on this one, and can see that neutral-soft is:
var(--color--gray-45); which itself is:
hsl(var(--color--gray-hue), var(--color--gray-saturation), 40%); (I love that gray-45 is 44% saturation, was it 45% at one point, or just a rounding thing?)

The thought was that I could find another variable colour to use instead. I suspected that that adjacent value, --color-text-neutral-medium, would work, but choosing that makes it the same colour as the text below, which seems to have the same effect as removing the colour value all together.

While looking at the colour variables, I also spotted --color-text-primary-medium: var(--color--primary-40), which is a blueish colour (/* Blue dark */ according to the comment), I think it looks kind of nice but may make the job title pop a little too much. However that fails the requirements as does --color-text-primary-loud: var(--color--primary-30);

The other thought I had was to play around with that saturation of --color--gray-45, perhaps moving it towards 40% which may mean it needs to be renamed --color--gray-40 instead, but could have more of a positive effect by darkening it enough to meet the contrast ratio required. Unfortunately we need to go all the way 30% to get a ratio that passes, which is actually closer to the --color--gray-20 than it is to original --color--gray-45. If we were to choose --color--gray-20 we would be back using --color-text-neutral-medium and that is like removing the color from the field in any case. Maybe we add a --color--gray-30... there is a --color--gray-60 and a --color--gray-65, so that's not out of the realm of impossibility, but it would need to be fixed in Claro as that is where the variables are.

The 2 options would be to flip this over to the Claro issue queue to get:
--color--gray-30: hsl(var(--color--gray-hue), var(--color--gray-saturation), 30%); added and then either get the color-text-neutral-soft changed to:
--color-text-neutral-soft: var(--color--gray-30);
or just change the color in the MR here to:
color: var(--color--gray-30);

That being said having changed it locally, the difference between -color--gray-20 and -color--gray-30 in this context looks negligible. I would just remove it.

This is annoyingly close and even 40% would work. I do think the grey is nicer than black so I added a custom style for this. Also updated the selectors so that it applies to all node types.

Looks good :)

This approach is similar to other Olivero color styles. It doesn't look like the subtheme is defining any variables... should it? If something else needs this grey, it would be nice... not marking RTBC but can if we are okay not putting in a new variable.

./css/base/variables.css:  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
./css/base/variables.css:  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
./css/base/variables.css:  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
./css/base/variables.css:  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
./css/base/variables.css:  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
./css/base/variables.css:  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
./css/base/variables.css:  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
./css/base/variables.css:  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
./css/base/variables.css:  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
./css/base/variables.css:  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */

Moved the variable to base.css because it will be needed by some of the XB components.

I'll take a look now.

RTBC...

• Code changes look good
• Passes contrast checker
• New variable is being used

pameeela → credited heikkiy → .

Credited @heikkiy for catching the variable duplication and posting in Slack.

Whoops. Sorry about that

I just pulled that change and double checked that the contrast checker and code still look fine, and it's good.

Merged into 1.x and cherry-picked to 1.0.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.