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.
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?
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
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.
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"
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.
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
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
