Challenge 7: Solution

[00:00:00]
>> Mike North: We're going to look at the solution for this exercise here using a conditional inside our style sheets. Now where this began was a solution to the previous exercise where we had that the theme mixin, right? And what we're trying to do just to be clear is in the event.

[00:00:24]
Oops, sorry I had a solution on the board there. In the event that the background color is too light, we want to switch from white text to black text right. And so, we want like white text on things like this and then to keep the black text over here.

[00:00:46]
So, the first thing I wanna do is make sure that I define sort of a base button text color and I wanna do this in my app.scss file, right in the button definition itself. I'm gonna take this out of the mixin, right? And conditionally, we will apply the other color when we apply the mixin.

[00:01:09]
So here we'll do color and we'll say it's by default black. So now, I can close this file and we're gonna be inside this mixin.scss file. And where I wanna be working is within this button base mixin that we created in the last section here. And if you have a different solution, that's fine but this is another example of why having a button base here is a kind of useful construct, and why when you see something like this, or you've got like a parameterization within a parameterization it's like you have a variable within something that is expressed in terms of variables.

[00:01:53]
You might wanna consider breaking that out into it's own thing. Because all we have to do here now is if lightness of color, I always get my signs flipped here, we'll see if I get it right the first time here, is greater than 70%, actually it would be like less than 70% color is white.

[00:02:15]
Let's see if this works, ta-da. Okay, I guess it does. So, just to look at what we're seeing in our solution here, theme three is sort of a darker theme. And I deliberately made it so, so that we definitely have a couple data points on both sides of this threshold we've set.

[00:02:33]
But we can see that like other two in the theme two, that yellow button that's black text on yellow, we can see that really well. In the row above where we're seeing that like pink, where we see like the white and the light pink. That's still working pretty well.

[00:02:48]
I do want you to note that theme two's primary buttons still looks pretty bad. And the reason here and we will address this problem in the final exercise of this course. Is that brightness is not necessarily what you want to use to make the kind of call to we're making here.

[00:03:06]
It is something that it's closely related to brightness but brightness doesn't quite do it. In fact, blacks and whites stand out better against reds versus blues, versus greens a little bit differently. And we have a blue there that is 70% or less, but the black is hardly visible on it at all.

[00:03:29]
So we will look at that, at the color theory sort of behind that, and implement our own Sass function at the end that deals with addressing this problem.