Add Color Variables to theme-variables.css

[TheWebTech]

I've never personally truly standardized color variable names.

I tend to name them things like: dark-blue blue light-blue

I think that practice is fine, but I think having Primary Secondary etc. is good and more site agnostic.

Maybe it makes sense to kinda combine the best of both worlds. Users would create their own color variable names, then assign primary, secondary etc. colors to reference the named colors?

Example of the concept: https://getbootstrap.com/docs/4.0/utilities/colors/

[adesignl]

I agreeOn May 14, 2019 9:23 AM, Jon McLaren notifications@github.com wrote:I've never personally truly standardized color variable names. I tend to name them things like: dark-blue blue light-blue I think that practice is fine, but I think having Primary Secondary etc. is good and more site agnostic. Maybe it makes sense to kinda combine the best of both worlds. Users would create their own color variable names, then assign primary, secondary etc. colors to reference the named colors? Example of the concept: https://getbootstrap.com/docs/4.0/utilities/colors/

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or mute the thread.

[TheWebTech]

I think lets go with it, whoever gets a chance to implement it first, go for it.

These would go in theme-variables.css

[dennisedson]

I am more of a fan of using a more general variable names. primary, secondary etc.
If a brand changes primary color from blue to orange, blue is a terrible variable name to represent orange. This methodology goes hand in hand with having a clear design guide. Swatches have the rgb and the variable name

[TheWebTech]

Agreed, what we're talking is kind of a hybrid.

[johnsfuller]

I'm torn on it, I like my variable names to be semantic and descriptive. In my experience if a brand changes colors, then they're probably changing their website theme anyways

[TheWebTech]

I also agree with that too. I can't say after a site's been up a long while I've really needed to re-color it very often, and when I have needed to do that. find and replacing the color name var if it was used instead of the primary secondary wasn't a big deal at all. Took all of 5 seconds.

This is kinda why I think a hybrid approach might be better.

Example user makes a blue variable Primary == blue variable everything in crankshaft that might use primary is now using blue.

for text color classes for example both text-blue and text-primary could make the color blue

So to kinda explain, certain simple utility classes would be generated to support both "primary" and the descriptive color name.

CrankShaft specific utilities would only use the semantic (Primary, secondary) type names

[danaholdt]

@TheWebTech I'll take this guy on.

I agree with a hybrid approach, though we might want to consider how to handle darkening/lightening colors. Has one of you ever created a macro that handles something like that, that we could integrate for easier control of such situations? It would be great if we could plug in something like:

{% set brandBlue = #0366d6 %}
{% set primaryColor    = brandBlue %}

.btn-funtimes { 
    color: lighten( {{ primaryColor }} , 10 )
}

[TheWebTech]

Totally agree on it would be great to have macros for handling the color lightening/darkening.

I haven't created one but I'm sure we could reference one built for scss or another tool and basically just rebuild it using HubL.

otherwise for light and dark users could also specify hsl colors but, I think most devs prefer hex or rgba since they're easier to read and know what's going on.

[danaholdt]

I'll do some investigation.

[TheWebTech]

Resolved by @danaholdt in #77

Any further discussion on color vars or related to colors make a new issue