I have a <Button> component with a prop I call intent: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' which I'd like to use to determine the background color of the button. I feel like I'm using a quite naive approach by using a switch (intent) to return strings like "red-500" or "transparent" which get added to the markup like so:

<button class="btn bg-{getBackgroundColor(intent)}" {disabled} class:bg-opacity-50={disabled}>
  <slot/>
</button>

This works only for background colors that were previously statically generated. My workaround for this is stacking all the classes that I want available at runtime onto a random <div class="hidden ...">. This seems like a smelly solution to me; I was wondering if it was a common enough use case to add a config property to define which classes will always be available.

Maybe I am missing something though, and there is a more straightforward way to accomplish what I want. Otherwise, I'm a huge fan of unocss so far 👍.