Craft Marketplace - why all the color variables

At a glance

The community members are discussing the use of variables, particularly color variables, in a craft marketplace template. One community member is unsure about the benefit of having all the different colors set in the variables, as they feel it clutters the variable section. Another community member explains that the colors come from the Open Props library, and suggests removing the unused variables. The discussion explores various approaches, such as using a function to clean up unused variables, collapsible elements to group variables, and using a tool like PurgeCSS to remove unused CSS. There is no explicitly marked answer, but the community members seem to be working towards finding a solution to manage the variable clutter.

Useful resources

PPieterVP283

I'm starting a new project with the craft marketplace template.
I like the way it is set up, to work with variables and a styleguide where the most common layouts are available.
But i don't know the benefit of all the different colors that are set in the variables. For me it clutters the variable section.
Am i missing something here? Why use these colors and not just the colors that you are going to use in your project?

17 comments

JJohn Siciliano

Yeah I should probably remove the ones that aren't used there. Basically they all come from Open Props. Then I map the themes coors to the Open Props ones. After that maybe its good practice to remove all the extras

Attachment

PPieterVP283

oh, i see. This all comes from open-props. Thanks for answering my question John!

OOleg Isonen

The quesiton is basically if we should include full open props library or not

OOleg Isonen

ah, on a specific template? then yes, definitely delete all unused variables

OOleg Isonen

actually we need a function to clean it up with 1 click

OOleg Isonen

@John Siciliano would that be helpful? or do you still need to select which unused variables need to stay?

HHolger

It's not only the sheer amount of variable of the same type (here: colours), but variables of unexpected type that may get in the way. It's not likely that wants to set element sizes based on an predefined gradient or easing behaviour.

Mapping the most likely variable-types per input-type and letting user search for uncommon ones would make variables a lot easier to digest.

Attachment

JJohn Siciliano

I think there would need to be some unused vars that need to stay. Like if I use box shadow 3 but not 2 or 1.. or if I use size 1 and 3 but not 2, I dont think it makese sense to get rid of the "in betweens"

JJohn Siciliano

So right now I think what I'd do is option click the color palettes that aren't used. Or what about setting their values to unset?

Any opinions?

OOleg Isonen

Maybe if the value is needed, it should be used in the style guide, so it can't be cleeaned up as unused?

jjan6is

One idea that came to mind was to use collapsible elements to keep things tidy—something like grouping variables into dropdowns based on their prefixes. I understand this might not make much sense since the advanced section is typically reserved for all CSS attributes. However, in Global Roots, this could help reduce clutter, especially in colors, and serve as a temporary solution until the dedicated variables section is implemented.

JJohn Siciliano

True but this is something separate.

JJohn Siciliano

Maybe, seems like a lot of add all of the sizes just so they don't get cleaned up.

For Webstudio site, I removed all the extra colors but kept everything else including gradients (there are 30 but we only use 6). Part of this is because if I ever add gradient 7, all of my gradients will be next to eachother. If I remove gradient 7 then add it back, it will be placed at the top of the list

OOleg Isonen

maybe can be done in a smart way, e.g. using a select box or something to avoid cluttering the page

OOleg Isonen

Part of this is because if I ever add gradient 7, all of my gradients will be next to eachother. If I remove gradient 7 then add it back, it will be placed at the top of the list

So we need alphabetic sorting there?

JJohn Siciliano

Yes see last checkbox here https://github.com/webstudio-is/webstudio/issues/4392

DDJTwoTone

What about something like this? https://purgecss.com/

Add a reply

Join the Webstudio community

Craft Marketplace - why all the color variables