bug: Empty badges lose their 1:1 ratio when theme --size-selector is modified

[simoami]

Reproduction URL (Required)

https://play.tailwindcss.com/GjYkrVib7m

What version of daisyUI are you using?

5.5.5

Which browsers are you seeing the problem on?

Chrome

Describe your issue

After modifying the default --size-selector at the theme level, which the theme editor allows, empty badges lose their square ratio. The issue is that the padding-inline attribute uses a hardcoded value 0.25rem matching the default selector value, which makes the issue not obvious since all official themes use this value in their --size-selector. The suggested fix is to use the --size-selector variable instead of the hardcoded 0.25rem to adjust the horizontal padding.

I suggest replacing the following expression in all sizes:

padding-inline: calc(0.25rem * 3 - var(--border));

with:

padding-inline: calc(var(--size-selector) * 3 - var(--border));

[github-actions]

Thank you @simoami for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

I think it would also remove some CSS rule because we could calculate the inline padding based on --size
https://play.tailwindcss.com/LIAC6GczHe?file=css

@saadeghi do you agree that the padding should be based on selector size?

It looks like button, kbd, and tab also have size based on multiples of --size-fiels or --size-selector and paddings based on multiples of 0.25rem

[simoami]

@pdanpdan your proposal looks good. Thanks!

[simoami]

@saadeghi Do you like this fix?