feat(Theme): new component

[Bobakanoosh]

🔗 Linked issue

Resolves #4250

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Detailed in the issue: #4250

Needing Review

This MR is still in draft mode, but I have an initial POC made. I was hoping to get feedback on the approach and the changes before applying them to all components, and writing documentation.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[Bobakanoosh]

@benjamincanac Any thoughts on this? I'd love to finish out the rest of this MR, just wanted to get your initial thoughts.

[benjamincanac]

Wouldn't it be easier to inject the provided ui prop inside the ui computed like we do for the app config? 🤔 https://github.com/nuxt/ui/blob/v3/src/runtime/components/Button.vue#L106

Also, I think it would be best to externalize the composable to be consistent.

[Bobakanoosh]

Also, I think it would be best to externalize the composable to be consistent.

Done!

Wouldn't it be easier to inject the provided ui prop inside the ui computed like we do for the app config? 🤔 https://github.com/nuxt/ui/blob/v3/src/runtime/components/Button.vue#L106

My first thought was also to put it where we put app config. But the ui prop and the app.config.ts behave a bit differently (unfortunately), and I wanted it to function like the ui prop.

For example, applying the following in app.config.ts does not work:

button: {
   slots: {
       base: 'px-20'
   }
}

But applying the same thing via the ui prop does. This is because the app config value isn't getting sent into the tailwind merger. I'd consider this to be a worse DX than how the UI prop works, so instead I made sure the slots coming from UTheme get tailwind merged with the ui prop.

In other words, if I wanted to change the base padding of all buttons in an area, I would have to resort to px-20!, which is less than desirable.