feat(module): implement --ui-radius CSS variable

[sandros94]

🔗 Linked issue

Resolves #2314

❓ 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

As a follow-up for #2298 this PR adds an intermediate --ui-radius css variable that uses Tailwind's defaults --radius ones but enables to edit rounded corners project-wide all at once.

These are the defaults:

:root {
  --ui-radius: var(--radius);
}

For a sharp corners layout, it is sufficient to add the following in your app.vue:

<style>
@import 'tailwindcss';
@import '@nuxt/ui';

:root {
  --ui-radius: 0px;
}
</style>

📝 Checklist

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

[sandros94]

@benjamincanac

The xl, 2xl, 3xl and 4xl aren't actually used, should I remove them?

[benjamincanac]

This is not how I want to implement it, the goal here is to only have one --radius: var(--radius); variable in the :root.

And in the theme use calc to reproduce the sm, md, lg, etc.

[benjamincanac]

This way we can only change the base radius and all variants will be calculated accordingly 😊

[sandros94]

This is not how I want to implement it, the goal here is to only have one --radius: var(--radius); variable in the :root.

And in the theme use calc to reproduce the sm, md, lg, etc.

That was actually my first goto. But then I realized how are we able override the calc? For example when creating a non-rounded layout?

EDIT: might be a dumb question tho...

[benjamincanac]

Something like:

• rounded-sm => rounded-[calc(var(--ui-radius)/2)]
• rounded => rounded-[--ui-radius]
• rounded-md => rounded-[calc(var(--ui-radius)*1.5)]
• rounded-lg => rounded-[calc(var(--ui-radius)*2)]

[benjamincanac]

[benjamincanac]

For non-rounded layouts, 0 / 2 equals 0.

[sandros94]

I've made the change and now it's only one --ui-radius var.

I'm only concerned about full: for now I've set it to be rounded-[calc(var(--ui-radius)*625)] but in reality we just need it to be either 0px or 9999px

[benjamincanac]

You can leave rounded-full as-is I guess.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/nuxt/ui/@nuxt/ui@2341

commit: 9cf5cd6