Clay: Add processed colors in globals

[boton]

What is your proposal?

Add processed values to scss colors in atlas variables, like font size.

Example:

$primary-d1: darken($primary, 5.10) !default; // #0053f0

Why would adopting this proposal be beneficial?

Select the correct color defined in Figma o choose another one closet.

What are the alternatives to this proposal?

This but needs to be updated when globals change.

[marcoscv-work]

I think is great idea, sometimes we have created a new variable because we don't know it currently exists in clay, so it can improve the color search process

[pat270]

@boton not sure what you are asking. You want a Sass comment with the hex color value next to the variables in https://github.com/liferay/clay/blob/master/packages/clay-css/src/scss/atlas/variables/_globals.scss? It should be no problem to add that.

In the mean time, I also have http://pat270.github.io/lexicon/v2.16.2/content/colors/. I think it's easier to copy paste from there.

[matuzalemsteles]

hey @pat270 we should even migrate this page to clayui.com 😁

[pat270]

@matuzalemsteles we can do that. I want to migrate most things from the test site.

[matuzalemsteles]

@pat270 That would be great, if you make a list of what you think you still have to move, I can help you with that.

[boton]

You want a Sass comment with the hex color value next to the variables in https://github.com/liferay/clay/blob/master/packages/clay-css/src/scss/atlas/variables/_globals.scss?
I just want that.

I miss the #hexval near to the calc code, but http://pat270.github.io/lexicon/v2.16.2/content/colors/ is awesome too.

[jbalsas]

Hey @boton, please avoid using that reference!

@matuzalemsteles, @diegonvs, please work with @pat270 to migrate all content that we want to expose as official to the official site and avoid keeping these "unofficial" ones to avoid dispersing the channels.

Also, let's try to provide code solutions and void copy-pasting approaches. It is impossible to track down usages after a while and re-sync when things change. This is easily seen with manual color codes all over the place that we're going to be force to refactor by hand or by the mess of z-index values we have all over the place.

@boton, following up @pat270's question... what is it really you want? the computed colour next the variable? What for? Why can't you just use the variable?

[jbalsas]

Re-reading, maybe what's missing is that our designs in figma use color names rather than hex values?

@drakonux, is this something we could work to improve?

[pat270]

@jbalsas so am I not adding

$primary-d1: darken($primary, 5.10) !default; // #0053F0

to atlas/variables/_globals.scss? Can we close this if so?

[drakonux]

@jbalsas yes, but I was expecting a clear proposal from Clay about this.

We are here to help you and provide the information in the most usable form for you. So create a request in LEXI with your needs and we will study it.

[boton]

I want a way to link the names of Figma with our SCSS var, maybe the

$primary-d1: darken($primary, 5.10) !default; // #0053F0

isn't ideal but is something.

[jbalsas]

So, wouldn't it be best if we label colours in our figma designs with the primary-d1 key so you don't have to go looking for a hex code?

[boton]

YES

So, wouldn't it be best if we label colours in our figma designs with the primary-d1 key so you don't have to go looking for a hex code?

But until this happens maybe have a workaround isn't a bad idea

[drakonux]

Emiliano did a proposal weeks ago related to this: LEXI-705

We agree. What do you think? We will schedule the ticket for this sprint.

[jbalsas]

Sounds good to me! 👍

[boton]

My teammate Emiliano is awesome

[drakonux]

LEXI ticket finished 😉

[pat270]

I'm closing this feel free to reopen if something needs to be done.