Challenge 6: Color Functions

[00:00:00]
>> Mike North: We are going to use mixins and passing arguments to mixins to build on our idea of theming buttons. But we're going to create a combination of buttons that fit a particular theme. So like, we want buttons that go together in a particular way. Now one way of picking colors that go together involves basically what looks like this peace sign on the color that wheel here.

[00:00:29]
Where we pick one color and then go 180 degrees hue rotation across the color wheel for a complimentary color. And then we have sort of two wings that spread out from that 180 degree color at a particular angle. And those can either spread out, or come back. That is a parameter that we can tune.

[00:00:48]
So if you've ever gone to like a color scheme generator, oftentimes they'll give you an option for a four point color scheme, like four different colors to pick. And this is essentially like the placement of the various colors on the wheel. So I want us to generate a mixin that allows us to apply a class around our group of buttons, where that particular theme is applied.

[00:01:16]
And there are three arguments that this mixin is gonna take in, and they there are the three values you see on this. Two of them are values you see here on this color wheel. One of them is that rotation away from the primary color, right. So that's gonna give you the color from bottom primary to bottom other, that's the hue adjustment there.

[00:01:36]
And same goes on the other side.
>> Speaker 2: So fixed degree number?
>> Mike North: It'll be a degree number, but it'll be a variable, so you define that angle as part of your theme.
>> Speaker 2: Okay.
>> Mike North: The primary color, that's essentially gonna rotate this whole peace sign around the color wheel.

[00:01:56]
So we could start with like magenta as a our primary color here. Or we could rotate it up and say like, red is our primary color, that's gonna be a color, that's the type of that variable. And then, finally, one of the instructions here is that the nonprimary buttons should, sorry about that, the nonprimary buttons should be darkened relative to the primary button by darken percent.

[00:02:21]
So that is the third part of this theme. And I'll show you what that looks like but all of the instructions should be here on the slide. And they should all have accompanying tests that you need to code to pass. So I'm just gonna open up the starting point for this exercise and make sure that everyone's clear as to where we kick things off.

[00:02:41]
So if we open up, sorry what did I call this one? Functions, if we open up functions and look at the app.scss you can see that I've created three themes here. And I'm using optional arguments here. So I'm not always passing all three values along, right. So in this case I'm specifying a primary color and a hue rotation falling back to a darkened percent of 20%.

[00:03:16]
>> Speaker 2: Can you say that one more time?
>> Mike North: So this first theme here, here's my primary color. It's 399 here's the angle which the two colors on the wings of the peace sign, those are 100 degrees out from the primary color on either side. And then if we look at the theme mix in here I'm falling back to a default darken percent cuz I'm not passing that third argument at all.

[00:03:43]
Right, so you've got some default arguments to work with here. What you're gonna end up with in the end is if we look at our HTML. We've got several buttons here like four flavors and then two of them you have your disabled variance. Just so that we don't go having tons of buttons on the screen.

[00:04:01]
But we're wrapping them in theme-1, theme-2, and theme-3. So you're gonna define rules that are like for buttons inside theme-1, they should be these colors, here's the primary color, here's the secondary color. And we wanna define them in such a way that all of that work is done inside these mixins.

[00:04:19]
Keep in mind, just as we were doing when we started working with mixins, anything that's sort of generalized, that is not theme specific you're gonna wanna make sure you keep it outside of the mixin. So that those rules which are sort of non-changing, non-dependent on the variables, those are not repeated in the resulting CSS.