Pro Tailwind

05. Adding an extra `tone` prop

🐇 TL;DR

  • We’ve got one more sneaky requirement that popped up for our Button: a tone prop to support danger and success variants.
  • Scope creep, amirite?
  • No sweat, we can do this, building on our existing approach!

⬇️ Skip to the challenge

🐢 Background

Our Button supports style variants for size, impact and shape.

Just as we’re about to call it a day in terms of styling, the product manager comes with a new request:

Can we please also make the button red for danger and green for success?

Hmmm, sure thing. Can do.

Here’s what these new variants – called tones – should look like:

Default tone

Danger tone

Success tone

Mixed concerns about color utility classes

Our new tone variants will alter one thing: colors.

But see, the impact prop was already responsible to take care of dynamic color management.

So what do we do?

We make impact and tone work together on that concern.

Sharing the load of color management

Right now, all colors are handled in the impactClasses object:

const impactClasses = {
  bold: 'bg-indigo-500 text-white shadow-md hover:bg-indigo-600',
  light: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
  none: 'bg-transparent text-indigo-700 hover:bg-indigo-50',
}

I can see the word indigo in those strings a lot.

And the danger and success tones for sure do not look indigo to me. We need to change that.

Preserving the same shades, but changing the colors

The key difference between the impact props is the 50 to 900 shade. All three impact variants use the same color.

So how about this:

  • we let the impact prop define the shades
  • we let the tone prop define the underlying color

That sounds like a great way to share the responsibility or managing colors, while giving a different “job” to each prop!

Technically, both variants will work together insice the impactClasses object - we’re not creating a new toneClasses object.

🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. Look at the new type of the impactClasses object. You’ll see it’s now composing a two-level Record, combining tone and impact values.

  2. Create the expected impactClasses object structure, and use the correct utility classes to make everything look like it should.

  3. If you’ve done everything right, the Button components on the bottom of the browser window should look just like the “hardcoded” ones on top!

✌️ Good luck!

Open in Gitpod →