Loading
Current section: Color Design Tokens 10 exercises
Problem

Broader Scopes

Transcript

00:00 Do you know how before, by accident, we had broken the transparency and we couldn't have our button be transparent on hover because of the way we've defined the colors? Well, it turns out there's another problem that we've sneakily introduced without meaning to. To demonstrate this, I'm going to pretend that we want to make this first card here,

00:18 the conversion rate card, have a gradient background from teal to purple or from highlight to accent. And so where it's BG highlight here, I'm going to go BG gradient

00:30 and I go to right and then from inherit? No, from highlight. Oh no, looks like we can't use a background from and to color stops because these are not background colors.

00:48 They're actually part of a different core plugin in Tailwind. And the gradient might sound a bit niche, but if I go to the Tailwind CSS docs one more time and I search for core plugins, the theme configuration page right at the end has a config reference with all the available

01:05 core plugins. And if I search for the word color here and I scroll down, you can see that there's accent color, background color, border color, box shadow, carrot colors, colors, divide color, gradient color, which is the one that we were trying to show. There's a few, actually a lot

01:22 of different things related with colors. And all of these, except text color, border color, and background color, we have wiped. Oops. And so when you try to lock down colors to specific use cases, you are almost certainly going to make that mistake of over aggressively

01:40 scoping down things. And so in this exercise, what you have to do is not bring back the comprehensive list of different core plugins, but just add a couple of them for each just as a practice, because this is probably something you're going to have to do in a situation like that.