You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
joarod-eu
changed the title
Add color var() names in the ECL guidelines
Add color var() names in the ECL guidelines [feature]
Dec 13, 2024
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 :)
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.
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.
The text was updated successfully, but these errors were encountered: