Is there are a way to handle custom "types" of theme variants?

Package

v4.x

Description

Hey there! Thanks for a module, its really nice and useful.

But I have one problem. For example - lets take a look on <UModal> component (or <UCard>). Theme has just few variants: transition, fullscreen, overlay, scrollable. Thats all. Imagine I need to add custom sizes for modals (or cards), lets say sm, md (defaul), lg. For now, to achieve it - Im creating new custom wrapper component, like MyModal.vue, add my "size" prop, and pass all slots and props to child <UModal />. So in this example - the only reason why <MyModal> exists - handle customization for sizes.

So my question is - is there are any way to add new "type of variants" for ui components? I understand I can easily add new custom variants for existing one - lets say, I can add new "color" for UButton, or new variant "variant" (solid, soft etc). But if component have no variant "color" - I cant do anything with it at the moment.

And from that question I have a second one - how to handle my own "variants" the same way as I do for ui theme? I have folder "theme" in app directory with configs for all components, and its imported and passed into app.config. Can I handle my own props same way as variants, so my theming is centralized? For example, when I add MyModal with prop "size" - can I handle it with theme config, and create new "my-modal" with variant "size"?

Or whats the best way to handle such behaviour? Right now I dont really like the fact my theming is scattered across the project. UI components - in theme config, custom components - in props or classes of the component itself. And for modal in this example I need to look into both modal ui config and MyModal component classes. I wish to put it in one place.

Thanks in advance!