Adding State Exercise

[00:00:00]
>> So let's implement some button states. So we designed our hover, focus, active, and disabled states. Now let's actually code them, so open buttons. And If you notice, on my design, let me go back to that real quickly. On my design, you can see here, make this big.

[00:00:23]
For my primary, secondary, and tertiary buttons here, they all have the same hover, focus, and active state. The disabled state's gonna be different cuz essentially, we're taking our neutral state, and we're just making it disabled. But my hover, focus, and active are all the same styling. So for me, because that's the case, I'm gonna add all of this on the base button.

[00:00:43]
So that our primary, secondary, and tertiary are just gonna inherit those. But if you have different styling for your different states of your buttons, you're gonna wanna add those to your individual buttons. So we can still nest our CSS, which is really great. So on hover, I'm gonna set my background-color to my defaultTheme primary HoverColor.

[00:01:11]
And I'm gonna set the color of the text to defaultTheme textColorOnPrimary. I'm also gonna add a transition here. This is gonna help with animating the state change. So transition, I'm gonna transition background-color, I'm gonna give it a 0.2 second duration. And I'm gonna do just a linear timing function.

[00:01:35]
So it's gonna maintain the same animation across our whole 0.2 seconds. And in our new color, same thing, 0.2, and I forgot the s here, so 0.2 seconds, and again, linear. And so if I come back now, and I hover over, something is going horribly wrong.
>> Did you call primaryColorHover?

[00:02:01]
>> primaryColorHover, I think you're right. So we can see our transition's happening, and they're all inheriting because we've put it on our base button. And I want you to do the focus, active, and disabled states. So anything that you have in your figma here, hover, focus, active, and disabled.

[00:02:20]
Do those for your secondary and tertiary buttons as well as primary, cuz we only did the hover state.