Challenge 6: Solutions

[00:00:00]
>> Mike North: This was a challenging one and let's go through the solution here. All right, and we have our little themes there. So if we look at the HTML structure here,
>> Mike North: Basically what we've got is, a class that wraps a bunch of buttons. So this is sort of a theme applied from the outside, right?

[00:00:25]
And anything contained within this theme should get it's colors by way of the fact that, you know, it is inside this thing with this class. And you'll note that we have four types of buttons and then primary and secondary, again, are disabled. Just to give you something visual, some visual feedback as you code to work on this exercise.

[00:00:48]
Furthermore, if we look in our app as CSS file, you'll see that I am already kind of setting up the way I would like this theme to be structured. And that, I want to basically be completely enclosed within a mixin. Called theme, and this is gonna take what looks to be a color and at least one other argument.

[00:01:14]
If I go to the mixins file.
>> Mike North: Where our mixin is defined, you can see that we've taken a color, an angle of rotation, which has to do with like the hue rotation. It was the angle on the slide between the primary color and one of the other colors.

[00:01:38]
And then finally, a darken percentage that is used for the non-primary buttons to kind of darken them a little. So they're not as vivid, as the primary which is designed to stand out. And our goal here is to get something where we can use this in a generic way.

[00:01:54]
Where we could use this mixin to turn out another theme that has yellow as its primary color, very easily, just using this mixin. So we've defined it once, and instead of just getting one theme out of it, we've got something that builds a theme, in terms of three things that we can adjust.

[00:02:14]
And we can build arbitrary themes using these things. So let's get started. I'm actually not gonna end up working much in app.scss. I'm gonna close that and we'll just end up working in this mixins file. So the first thing I want to do is define my three colors.

[00:02:34]
These are the three colors that are not given to me, I'm given one, that's my primary color just to be clear. I'm given this one here, right. And I need to calculate the colors for button other, button other two, button secondary, right? So, let's go ahead and do that.

[00:02:54]
So, I'm gonna say, other color is adjust to you and that takes in the primary color, and a rotation angle so that's going to be rotate.
>> Mike North: Other color, too. Actually all three of these are gonna use adjust here. Other color too is straight across the color wheel from primary.

[00:03:19]
So that's 180 degree rotation.
>> Mike North: And then finally, the secondary color is going to be.
>> Speaker 2: Do you need the deg? Sorry.
>> Mike North: No, you do not.
>> Speaker 2: Okay
>> Mike North: They're all numbers.
>> Speaker 2: I know you said that, okay.
>> Mike North: No worries. So a number is a number.

[00:03:39]
Deg is a good indication to everyone who read this that this a hue. Alright, so now we've got some colors defined and I don't like to go for too long without showing something up on the screen, so that I can know that I'm on the right track and get some sort of visual feedback.

[00:03:57]
So I'm gonna go ahead and create some classes for my buttons. Knowing that this is going to be used like directly inside a theme. The parent selector isn't really too valuable to me, so I'm just gonna define my button classes right away. Btn-primary.
>> Mike North: And btn-other2. And each of these is gonna get a background color.

[00:04:34]
>> Mike North: And the first one, primary is just gonna be the primary color. The second one here is gonna be secondary color. The third one is other color. And then other two color finally.
>> Mike North: Clean up our indents a little bit.
>> Mike North: And save it, and you can already see that we're starting to get a semblance of a theme where we've defined once like how this theme works in that there are four colors involved and at an angle.

[00:05:12]
Is part of how we calculate this. Furthermore, if we go back to our app.scss and we change this to 90 degrees, I would expect the buttons in the top row to change. And they did. It was subtle, but let's go back to 10 degrees. And they changed a lot.

[00:05:28]
They're now very, very close to the primary color, right?
>> Mike North: We could go.
>> Speaker 2: Is this the same file? What file is that?
>> Mike North: I'm in app.scss. So this is where we're using the mixin. This is where we're including it. So if I go to 170 degrees, you can see that I've got a green and a red that's straight across the color wheel.

[00:05:51]
And, sorry, it's a green and a brownish thing. And then the other two colors, other and other two in secondary, they're all clustered pretty close together because that angle's very narrow, right? So this serves to kind of control where those wings of this theme's color end up being on the color wheel.

[00:06:10]
So I'm gonna put it back to 100 and we will keep on going. So, that's step one, and if I look here, I'm gonna say that the border color, I'm gonna work on these requirements sort of in order. So the border should be 20% darker than the background color.

[00:06:31]
This should apply to all buttons. So here like whenever you have something like this it is a requirement that is in terms of what I have in my mixin as a variable, right. Background color is a variable because all four of my buttons are different on a per theme basis, so we can just create another mixin.

[00:06:54]
>> Mike North: You don't have to do it this way. You could have explicitly specified it. So I'm just gonna call this bg.
>> Speaker 2: You mean just in the theme parentheses and just said border whatever?
>> Mike North: You could have just gone here and said border color, and then something like this.

[00:07:14]
>> Mike North: That would have been totally fine, right? But I'm going to go ahead and break this out a little bit more cuz we can.
>> Mike North: And mostly, because that's an indication to me if it like. It's valuable to sort of refactor this out. It is something that is dynamic and it's depending on something dynamic.

[00:07:40]
And now we can do,
>> Mike North: Like this. We're basically gonna end up with this.
>> Mike North: All right, so our theme has not changed much, although you can see if I'm looking closely at my screen. We can zoom in here, let's see. Come on browser. So hopefully what we are in fact seeing is a thin dark green border around a light green button.

[00:08:22]
So we have in fact used this background as the border color and darkened it down. So we're still staying in the world where we can create a button of any color we want or a theme of any combination of parameters that we want. But starting to look a little bit more rich here.

[00:08:44]
>> Mike North: So then, what I want to do is read my other requirements here. So the hover background should be 20% more saturated than 10% lightened. That is a terribly worded requirement, I apologize for that. So here's what I'm looking for.
>> Mike North: Background, so saturate,
>> Mike North: And then take that and lighten.

[00:09:16]
>> Mike North: By 10%. And I don't even think that tests for this but this was sort of there for people who cared to do it. And now you can see like when I hover over this primary, that's a more obvious one. Like that is a noticeably lighter color there as I hover over it.

[00:09:31]
So now that's taking effect. And I've reached the end of the all button rows there. Now I need to implement this, the non primary buttons end up being darkened by a certain percentage. The way I am gonna address this,
>> Mike North: I am just gonna have a slightly different variable name.

[00:09:52]
So you can tell the difference between what was defined where. So darken percent is going to default to 20.
>> Mike North: As part of this button base. And here, for the primary only, I'm going to pass 0. So I've effectively given myself that in all cases except primary, 20%.

[00:10:18]
>> Mike North: And now I can use it here.
>> Mike North: All right, it looks like I have very subtle color differences here.
>> Mike North: Between what my tests are asking for here, it's the secondary one. It is quite possible that I have a mistake in my tests, but let's see.
>> Mike North: Just looking through this, yeah, I'm gonna go with test mistake.

[00:10:54]
So I'm gonna update my tests, I apologize for that. People who are watching the video of course, your test will pass. People who are attending the live workshop or the live stream. Sorry [LAUGH], so I'm just gonna go in here and say the secondary background color is incorrect so that's here.

[00:11:17]
And you know what it was, we just changed the color theme around a little bit. I'm just gonna compare that. It's the same variables that we were using in ap.scss that we're using down here. So it was this one, then this is for theme one, we'll copy this in.

[00:11:41]
>> Mike North: And other button background. Another slightly different one by a very subtle amount.
>> Mike North: Theme two.
>> Mike North: So secondary, that's this one.
>> Mike North: This one. And then this one here.
>> Mike North: This is why testing CSS, this way is not ideal. I was basically asserting that certain color values were certain color values, and it's a bunch of copy paste stuff.

[00:12:27]
All right, here we go. Wait, here we go.
>> Mike North: Theme three, secondary.
>> Mike North: And these just got flipped.
>> Mike North: There we go. Not a dramatic reveal, but what we do have here now, the end result is pretty cool, where we could do something like this. Red, so now this red row here that's the theme in terms of red.

[00:12:58]
We can darken it or we could do like coded blue.
>> Mike North: Now we're using that blue. We could start with like an orange. And we have a way of kind of defining a theme of nice, complementary colors. Because these angles around the color wheel like, if you talk to someone who knows a lot more about color theory than I do, this is a good way to pick colors that tend to go together, and to contrast well against each other.

[00:13:29]
And now we have as if a Sass mixin that we can use that will give us a set of colors for an arbitrary couple of combinations. So if you're building a product and you need to do something like white label it and someone gives you the primary color of their business.

[00:13:46]
Like this is our logo color, use this. You could then generate a theme just by creating a new one of these things really easily. And this is a great example of one of these complex, higher level mixins, right?