Fixed px units in Switch Component cause UI scaling issue

Describe the bug

Using px unit for height and width in certain parts breaks the UI when root font size is not 16px. This means that if the user changes the font size in the browser settings or the root font size is set to a value other than 16px, the styling breaks.

I haven't checked all the components, but I found this behavior on Switch component. It was using fixed px units for width and height. In contrast, the original shadcn/ui, it uses rem units only.

Here are the classes for the Switch in shadcn-svelte:

"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"

Here are the classes for the Switch in the original shadcn/ui:

"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"

The only part difference is h-[24px] w-[44px] and h-6 w-11.

Here are examples of the issue when the root font size is changed:

Root font size 10px:
Root font size 24px:

Note: The select also breaks because it has a fixed width of 145px.

Could you please explain the reason behind using px instead of rem because it seems intentional. If possible, please consider using rem units.

Thank you!

Reproduction

Change the root font size.

<html style="font-size: 10px;">

Logs

No response

System Info

Not necessary

Severity

annoyance

huntabyte / shadcn-svelte