bug: Padding in toggles is not dependent on size, leading to inconsistencies

[Acccent]

Reproduction URL (Required)

https://play.tailwindcss.com/kp9hHDDfAy

What version of daisyUI are you using?

5.0.0

Which browsers are you seeing the problem on?

All browsers

Describe your issue

The padding inside the toggle element (used to create space between the "outside border" and the "inner toggle" itself) is set as an absolute value.

This can lead to inconsistent appearances, if the --size-selector variable or the root font-size is changed. See repro link.

An easy fix would be to make the padding dependent on the --size variable that's already calculated for each toggle element:

- --toggle-p: 0.1875rem;
   --size: calc(var(--size-selector, 0.25rem) * 6);
+ --toggle-p: calc(var(--size)*0.125);

Additionally this change would make the padding automatically work for all size variations of the toggle, removing the need to specify it 6 times.

I can submit a PR if it helps.

[github-actions]

Thank you @Acccent 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.

[saadeghi]

Can you help me seeing the inconsistency?
At each size, the width, height, size of thumb and the padding gets bigger as expected.
And it's working well with root font size, as well as --size-selector (you can see here)

[Acccent]

Sure :)

Currently:

• very large root font size, large then small selector size
  
  

• very small root font size, large then small selector size
  
  

Same with the proposed fix:

• large root font size
  
  

• small root font size
  
  

The current behavior makes the inner toggle take up more or less space depending on the situation, resulting in feling like it's either "cramped" or "floating" in element. With the fix, the relative look is kept consistent throughout, imo.

[saadeghi]

Thank you!