search

cfpb / generator-cf

Yeoman generator for Capital Framework
http://cfpb.github.io/capital-framework/getting-started/
Creative Commons Zero v1.0 Universal
9 stars 13 forks source link

Consistent color variable naming #60

Closed anselmbradford closed 8 years ago

anselmbradford commented 9 years ago

brand-palette.less contains variables @darkgray and @dark-redorange. Dark grey should probably be updated to @dark-gray for consistency. The color naming convention appears to be:

@<variant>-<color>-<tint percentage>
anselmbradford commented 9 years ago

This would also mean:

@green-midtone ➡ @midtone-green @green-tint ➡ @green-20

anselmbradford commented 9 years ago

Actually on further thought, this kind of makes more sense:

@<color>-<variant>-<tint percentage>
Scotchester commented 9 years ago

I have always regretted these inconsistencies, but have been too nervous to try updating them and risk breaking everything else.

I suppose you can do stuff like 

@dark-gray: @darkgray;
@midtone-green: @green-midtone;
@green-20: @green-tint

While leaving the old ones in place for a time, to give people a chance to update.

anselmbradford commented 9 years ago

That seems like a reasonable migration path. Most projects I see label things deprecated and keep them around for a few releases and then kill them. This projects semver versioning should handle that nicely. There could even be something like a cf-deprecated.less file that served the opposite purpose of cf-enhancements.less and was where outmoded variables go to die (eventually).

jimmynotjim commented 9 years ago

I was wondering, can we send "deprecated" messages with Less? I know how to do it in Sass, but I'm failing at finding docs for Less.

anselmbradford commented 9 years ago

That would be cool... that settles it, switching to SASS ;)

himedlooff commented 9 years ago

Ugh, SASS :stuck_out_tongue_closed_eyes:

You could probably build this into a Grunt task though, a precompile step that searches for deprecated Less stuff.

jimmynotjim commented 9 years ago

I think I'd rather just switch to Sass...but I guess if we created a deprecated.json it'd be somewhat easy to utilize in a grunt task and keep up to date.

himedlooff commented 9 years ago

@jimmynotjim, can you elaborate on how you'd do it in SASS? I'm seeing the @warn directive but I'm not sure how you'd use it to check for old variable names.

jimmynotjim commented 9 years ago

Thinking it through more, I don't think there's a way to check if the variable was used in Sass, only whether it exists, which it would if we left it pointing to the new variable. Your grunt suggestion is probably a better choice in this situation. I'm still curious if Less has something similar for use in mixins and functions.

anselmbradford commented 8 years ago

brand-palette.less has been updated and has migration instructions in https://github.com/cfpb/generator-cf/blob/master/app/templates/src/static/css/brand-palette.less#L123-L145