[BUG] Border radius "default" variant is never generated as 1rem

[omnichronous]

Description

Thanks for your work on this plugin, it's amazing. 🎉 But I do have one problem. I expected the plugin to calculate the border-radius variants based on the base font-size (like it does with the font-size variants), and I see in the code that that's how it's meant to work, however I've tried it with multiple files now and for some reason the default variant is never 1rem. For example in the file I've shared below I get these values:

 "borderRadius": {
  "none": "0",
  "xs": "0.125rem",
  "sm": "0.25rem",
  "default": "0.3125rem",
  "lg": "0.375rem",
  "xl": "0.5rem",
  "2xl": "0.75rem",
  "3xl": "1rem",
  "4xl": "1.5rem",
  "5xl": "4rem"
 }

Steps to reproduce

1. Open the example file and run the plugin
2. Generate everything and check out border-radius in the output
3. "default" should be "1rem" but it's not

Additional info

• Figma version: web app (latest release seems to be from May 17, 2024)
• OS version: Windows 10

Extra

File you can test with: https://www.figma.com/design/7IbQtuI9IvHVKvvH5ppAHv/Official-Tailwind-CSS-Styles-(Community)?node-id=1%3A1180&t=5P4G4s89Djh290qy-1

[jan-dh]

hi @omnichronous thanks for the bug report. The issue was I wasn't actually passing the base font size to the calculation of the border radius. I've updated this but it does have some implications on the naming convention.

The borders are now just named

rounded-1,
rounded-2,
rounded-3,

Since there's currently no way to select a "default" value. New version of the plugin is live, can you take it for a spin?

[omnichronous]

Thanks for the super quick reaction @jan-dh! I tested the plugin just now and unfortunately it still doesn't solve my problem. I realize I made a mistake in my original description though, so let me try again for more clarity. 🙇

Tailwind defaults are like this:

borderRadius: {
  none: '0px',
  sm: '0.125rem',
  DEFAULT: '0.25rem',
  md: '0.375rem',
  lg: '0.5rem',
  xl: '0.75rem',
  '2xl': '1rem',
  '3xl': '1.5rem',
  full: '9999px',
},

If I use a bunch of random pixel values throughout my document obviously the plugin can't know which of them I intended as the default, so may I suggest adding a dropdown to choose the base value, working exactly the same way as in the font size step? Here's what I mean:

1. In the font size step I select 16px as the base font size. Font sizes get computed and ordered based on that.
2. In the border radius step I might see I have these values: 2, 4, 6, 8, 12, 16, 24, 32, 48.
3. The rem values get computed from the font size base, same as before, for example:
   1. 4px/16=0.25rem
   2. 48px/16=3rem
4. I have a dropdown to select which of these should be the default (and end up as the rounded class).
5. I select 0.25rem as the default.
6. The plugin then uses that to generate the same naming pattern as the font sizes - everything smaller becomes sm, xs and nxs, everything bigger - md, lg, xl and nxl.

So to summarize, from the values I started with (2, 4, 6, 8, 12, 16, 24, 32, 48), this is what I want to end up with:

borderRadius: {
  sm: '0.125rem',
  DEFAULT: '0.25rem',
  md: '0.375rem',
  lg: '0.5rem',
  xl: '0.75rem',
  '2xl': '1rem',
  '3xl': '1.5rem',
  '4xl': '2rem',
  '5xl': '3rem',
},

Please let me know if I can clarify something else or help in any way.

[jan-dh]

I can look into adding a border radius default value select, for now the running the plugin gives you:

 "borderRadius": {
  "rounded-0": "0rem",
  "rounded-1": "0.125rem",
  "rounded-2": "0.25rem",
  "rounded-3": "0.3125rem",
  "rounded-4": "0.375rem",
  "rounded-5": "0.5rem",
  "rounded-6": "0.75rem",
  "rounded-7": "1rem",
  "rounded-8": "1.5rem",
  "rounded-9": "4rem"

for the values of 2, 4, 6, 8, 12, 16, 24, 32, 48. If there's some urgency I suggest editing the values in the output theme file directly. Will look into adding a select.

[omnichronous]

Thank you @jan-dh I appreciate that 👍