More overt color variable naming

[kpeatt]

More overt color variable naming

Status: Opened for visibility
Reviewers: @ry5n @jeffkamo

Changes

1. Suffixed all color variables with -color.
2. Reordered light and dark variations to have -light and -dark suffixes instead.

Notes

• Fixes Variables: use -gradient the same way as the -color suffix. #20
• Fixes Reduce number of gradients #19

[ry5n]

I don’t think color names need the -color suffix. Just things like $success, $text, which could use the clarity of $success-color, $text-color.

[ry5n]

Discussed this with @kpeatt. We agreed that we should be consistent with the -color suffix, except cases like $blue-color, which seems a bit silly. So, the convention would be:

// All colours use a `-color` suffix except explicit colour names, 
// in which case the suffix should be left off. 
// Additional suffixes `-light` and `-dark` should go after `-color`.

// Good
$brand-color: #f00;
$brand-color-light: #ba2;
$blue: blue;
$blue-light: cyan;

// Not good
$brand: #f00;
$brand-light-color: #ba2;
$blue-color: blue;
$blue-light-color: cyan:

[jeffkamo]

I recently read elsewhere a convention that was similar, but the order of the words inside the variable name were slightly different:

Note that "color-" comes first...

$color-brand: #f00;
$color-brand-light: #ba2;

rather than...

$brand-color: #f00;
$brand-color-light: #ba2;

This convention might make lists of many colors a bit more readable/scannable.

$color-brand: #f00;
$color-brand-light: #ba2;
$color-brand-dark: #ba2;
$color-accent: #f00;
$color-accent-light: #ba2;
$color-accent-dark: #ba2;

$blue: blue;
$blue-light: cyan;

[jeffkamo]

Would that be worth considering?

[kpeatt]

@jeffkamo Yeah, I think we might want to start using color- as a prefix on these. And then we would say we're using that prefix on all colors.

Eg. $color-blue: blue;

[ry5n]

Definitely. I’m on the fence myself about this :) The idea of {category}-{thing}-{variation} is compelling. Just thinking about it across the board:

$color-brand: #f00;
$color-brand-light: #ba2;

// Is this weird tho? Or would we leave it as `$font-family`?
$family-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

// Or is $font-family analogous to a var called $color, where it’s 
// the bare default and “base/default” is implicit?
$color;
$font-family;
$font-size;

[kpeatt]

I think font is the color analog here so I don't think those variables need to change.

ie. $font-family, $font-size, $font-color

[ry5n]

Agreed offline to do this all as part of establishing a new global variable naming convention. See #29.