search

primefaces / primevue-sass-theme

PrimeVue Theming with SASS
https://primevue.org/theming/#customtheme
MIT License
64 stars 36 forks source link

Checkbox: border-radius missmatch #78

Open joaomarcelofm opened 1 month ago

joaomarcelofm commented 1 month ago

The border-radius for the checkbox component uses the global definition for it ($borderRadius). However, if I look at the theme presets on PrimeVue docs, the value differs when applied to the component.

The problem with this definition is that the checkbox becomes almost round for larger radius values. Still, most importantly, it behaves inconsistently based on what's in the document versus what's generated with the sass themes.

Example of field with the default radius value:

Screenshot 2024-05-24 at 14 39 11

Example of checkbox with the overwritten value:

Screenshot 2024-05-24 at 14 40 42

These specs aren't available on the Figma file either so it's hard to understand what's happening here.

Here's a sample stackblitz project to validate that. The difference can be seen in the below comparison as well:

Screenshot 2024-05-24 at 14 46 06

What's the best approach to solve this issue? I wouldn't like to custom change the theme as it'd require us to manually update it on every PV or theme update.

joaomarcelofm commented 4 weeks ago

@tugcekucukoglu do you have any feedback on this topic? I could open a PR if that's allowed. The main issue I see is that this property is not available as a token in the UI Kit.