Instructor: 0:00 To identify what classes we want to apply to different impact variants, let's take a look at the Hardcoded buttons. We're looking at these three buttons up here. The code for them starts here.

0:11 It's quite clear that the primary concern of the impact variant, in terms of visual styles, has to deal with colors. We have a dark background and white text for the bold variants. A light background and dark text for the light variants. A transparent or very light background on hover for the none variant.

0:28 Looking at the classes, we can identify this bg-indigo-500 background color, which is this one, the text-white. The hover-bg-indigo-600, as you can see on hover. Background color, text color, and background hover color is essentially the main three classes that the impact variant deals with.

0:47 It might be a bit hard to see, but the bold variant also has a subtle shadow below the button, which the other variants do not have. You can see the shadow-md class here, which is also undone when the button is disabled. You can see that the light and none variants do not have this shadow, but they do have a background color, a text color, and a hover background color.

1:11 Let's scroll up. For the first button, let's grab a little bit more. We're going to grab all of this and copy that. We'll go in the button. Remember we have these impactClasses that uses a TypeScript record. The nice thing about TypeScript here is you can see a suggestion of the three keys that this impactClasses object should have.

1:30 Let's start with bold. Here we can paste our strings, but remember we have a little bit too much here. We want to get rid of the padding classes, the font-semibold class. We're left with background color, text color, the shadow that is specific to the bold variants, and the hover background color. Nice.

1:47 The next key of our object will be light. For this, let's check the second button classes. We are going to grab bg-indigo, all the way to the hover background color too. Paste it here. We'll remove the padding classes and the font weight. We'll do that one more time. Command space, you can see that only the none key is available left.

2:10 Notice how now we're satisfying the conditions for this record. There is no more red underline. If we had a typo in one of the keys like nonne, you can see that now it's going to tell us that none does not exist in our record. Also, if we're missing a key, now the error is at the object name level, and it's telling us that the none property is missing.

2:31 That's super useful to make sure that we reflect each possible variant for a prop. Which is key, because we're going to rely on accessing these keys when we apply our styles in the className attribute.

2:43 For the none variant, we'll go down here, and this time we have bg-transparent, text-indigo-700, and hover: bg-indigo-50. Copy, paste, remove the extra classes we don't need, and save. That is our impactClasses object complete.

3:01 Now, we can go down here. Remember we have this cx( ) function that lets us combine multiple variables that hold classes like this, cx (baseClasses, impactClasses). If I save this, it's not going to work, because impactClasses is an entire object. What we want to do is specify which key we want to reach for.

3:25 For example, if we are reaching for bold, you can see that now all our buttons have the bold variant. If we had light, all of them are lights. What we want is to dynamically reach for the correct key based on the prop that is passed to the button.

3:40 What we can do instead of hardcoding the value here is to use our impact prop, which is exactly that. It's either bold, light, or none. When I save this, you can see that now the first variant is bold, second is light, and third is none. Then all the others are bold, which is equivalent to what we have up here.

4:00 We have successfully implemented the impact variant styles and composed this with the baseClasses already in place. Now, we can continue the process with the other variants to complete our button.