Define CSS variable theming with @theme directive or similar

[requestmethod]

The new @theme directive works great for defining the base set of variables that are pushed into all of TW utils classes. It would very handy to be able to create class based theme override mappings using a similar method.

What are class based theme overrides?

In the examples below, we have the same card HTML and base tokens and we want to render 3 entirely different themes: white, black and green by simply attaching a new theme css class.

<!-- Card example w/ white theme -->

<div class="theme--white bg-background-primary p-12">
  <h3 class="text-content-primary">Card w/ white theme</h3>
  <p class="text-content-secondary">
    Mollit reprehenderit fugiat eu ullamco ad exercitation velit labore mollit id minim id.
  </p>
  <button class="text-action">Action text</button>
</div>

<!-- Card example w/ black theme -->

<div class="theme--black bg-background-primary p-12">
  <h3 class="text-content-primary">Card w/ black theme</h3>
  <p class="text-content-secondary">
    Mollit reprehenderit fugiat eu ullamco ad exercitation velit labore mollit id minim id.
  </p>
  <button class="text-action">Action text</button>
</div>

<!-- Card example w/ green theme -->

<div class="theme--green bg-background-primary p-12">
  <h3 class="text-content-primary">Card w/ green theme</h3>
  <p class="text-content-secondary">
    Mollit reprehenderit fugiat eu ullamco ad exercitation velit labore mollit id minim id.
  </p>
  <button class="text-action">Action text</button>
</div>

In TW 3, you can define a plugin like mine here: https://github.com/requestmethod/tailwind-plugin-css-themes.

In TW 4, it would be great to handle this with CSS, possibly by using a directive similar to @theme.