How to accomplish similar functionality with pure v4 css config?

[chuckdries]

The README for this project states

With Tailwind v4's release, you may want to consider using Tailwind's built-in CSS configuration for managing multiple themes instead

How do I actually do this?

To make it concrete, I want to be able to have a HTML structure like this

<div class="hue-red">
  <button class="bg-hue">
    ...
  </button>
</div>

What should I put in my tailwind config to make bg-hue be red in this example?

[chuckdries]

I figured it out! In my index.css, I did this

@theme inline {
  --color-hue: var(--hue-base);
}

@layer base {
  .hue-red {
    --hue-base: var(--color-red-500);
  }
}

Cheers!