Improve color variable naming scheme

[mzdr]

For a long time we’ve been using the double variables system, mostly in order to preserve the ability to easily create a themable stylesheet.

For example all basic colors were stored in variables beginning with $color-{{name}}: #e43e33;. Then we created color variables that made the semantic link to the actual color, like this: $color-background-primary: $color-cinnabar;

As I mentioned in the beginning we did that for a long time. By now I'm wondering if that‘s still necessary because I think we can switch to a single naming/variable system and still keep our options open regarding themability. Plus we would lose the tight coupling/chaining of semantic color variables.

So I would propose we handle it like this:

1. Only use variables for color codes and name them after the color
2. Place frequently (≥3⨉) used color variables in meta/_colors.scss
3. Use color manipulating functions to create nuances (See Controlling color with Sass color functions for inspiration)

Yeah, gimme code. I need code.

$color-black: #000000;
$color-japanese-laurel: #06a20d;
$color-cinnabar: #e43e33;

// Far far down the Sass road…

.my-error {
    border: 1px solid darken($color-cinnabar, 10%);
    color: $color-cinnabar;
}

// 👆 If that darker red color comes up more then 2 times, 
// we’ll store it in a separate variable.

@gridonic/frontend Can I get a 👍?

[peschee]

Looks good to me.

What about when using our variables in conjunction with a 3rd party library (e.g. bootstrap). Do we stick to using our own colors and set the 3rd party library variables where appropriate? For example, we define

$color-black: #000000;
$color-japanese-laurel: #06a20d;
$color-cinnabar: #e43e33;

in our files. Then, in variables.scss from bootstrap, we add

$brand-primary: $color-black

and so on?

[mzdr]

@peschee Seems legit! 👍

[dschenk]

Let's try it.
I see one danger to the system: uncontrolled growth of colors in use in the scss files by way of many different color-modifiers. We could create a little tool which outputs all color variants. I'm thinking about the styleguide and communication with various stakeholders (designers, product owners, etc.) and color (over-) use here.
But for now: let's just try yo keep it simple, so go on with the change.

[mzdr]

@dschenk Good point!

We could create a little tool which outputs all color variants.

We already have this feature in our styleguide generator, but it’s currently disabled. So we are kind of locked and loaded for this case. ☺️