0:00 Just as we've finished organizing our button classes within different styles lookup objects, here comes the product manager with an adoscope new request. We need to implement support for a new tone prop, which is responsible for changing the tone of the button from default to danger or success.

0:17 This tone prop clearly impacts the colors of the button, and up to now we were using the impact prop to handle the styling concern of colors, so we have to revisit that. Thinking of it and looking at the name of the impact props, it feels to me like Bold, Light and None, instead of color concern could be intensity concern.

0:36 The Bold has a very intense dark color and bright text, and then the Light has a subtle light background and dark text, and None has virtually no background except on hover.

0:46 If we look at the different tones, the same bold concerns are applied. We have a bold strong color for Bold, a Light bright background, and transparent for the None variant.

0:59 We might be able to split our color concerns into two components, intensity and color. What if we make the tone prop responsible for the actual color of the button, and the impact prop becomes responsible for the intensity of the shade? I'm talking the 50 to 900 shades of the tailwind colors. I think that will work.

1:17 Here's your challenge. The impactClasses object has now changed its type. We have a nested record that uses the tone and the impact props together. You can see that TypeScript is not happy because this is not respecting the new shape of this impact classes object. Your job is to update this and separate these concerns between intensity of the color and the actual color. Good luck.