Add color var() names in the ECL guidelines [feature]

[joarod-eu]

Expected behavior

Using CSS var() colors are the best practice to keep all components aligned with the same UI. Searching for the right color in the guidelines will be helpful for developers and designers so we can customize external components quicker.

Actual behavior

ECL color guidelines show the hexadecimal color code but not the CSS var() name. Impossible to know which var name is associated.

Steps to reproduce the issue

Visit the page:
https://ec.europa.eu/component-library/ec/guidelines/colours/

Find the color needed, inspect the element in the list. No var() name is declared or used. All colors are hardcoded in rgb format. The only way to know the CSS var() color associated is to copy the hexadecimal color, then go to the ecl-ec.css or ecl-eu.css an search by #hex code the variable associated.

[planctus]

Mmhh..well, @joarod-eu

Impossible to know which var name is associated.

The name of the custom properties we define for colors is standardised, --ecl-color-{name of the color}, i agree that we should at least mention this in the guildelines about colors, but difficult to say that the only way to retrieve the variable name is to copy the hex code and look for it in the compiled css.
We will consider explicitely showing the custom property relative to each color, for the time being now you know the "rule" for naming them, no need to look into the ec/eu css :)

[joarod-eu]

Hi @planctus, thanks for the quick reply.

That info that you just shared now

The name of the custom properties we define for colors is standardised, --ecl-color-{name of the color}

is gold for new developers and I'm agree that mentioning that in the guidelines will help a lot!

I will share it with my team and design agency, and invite you to include it in the documentation as it is useful information for those starting to work with ECL.

[planctus]

@joarod-eu, it's done, https://v4-dev--europa-component-library.netlify.app/ec/guidelines/colours/, not yet released in production, though.

[joarod-eu]

@planctus Thanks for adding the --var name on hover, that will help a lot!

Something I noticed is the button with the #hex color code is not working onClick... maybe because there is a conflict with both click/copy actions (var color code and hex color code).