Add --radius-full variable

[keithburgie]

The rounded-full classname doesn't match the pattern of the other radius classnames:

rounded-xl: border-radius: var(--radius-xl)
rounded-2xl: border-radius: var(--radius-2xl)
rounded-3xl: border-radius: var(--radius-3xl)
rounded-full: border-radius: calc(infinity * 1px)

This PR makes var(--rounded-full) available to use like all the others in the theme.css.

[adamwathan]

Hey! We didn't make this a variable out of the box because full only means full, kinda like none. Is there a situation where you'd want rounded-full to mean something different from one project to the next?

[keithburgie]

Hey 👋 I understand what you're saying. I ran into it because I was trying to use 'var(--rounded-full)' as a value for a custom variable — not trying to override what it meant. I was stumped at first why it wasn't working like the others.

I ended up not needing it, because, as you said, the component in question was always going to be round and I was able to use @apply. But I could imagine someone out there wanting to use it that way.

My situation is one where I'm not interacting with HTML. I'm working on a library that a consuming app will need to theme via CSS file. There's a good chance I'm doing everything wrong 😅

[adamwathan]

Nah that makes sense! I think it's probably worth including this one anyways because the calc(infinity * 1px) stuff is sort of cryptic and nice to put behind an expressive variable name 👍

[adamwathan]

Note for us maintainers, if we remove the hard-coded rounded-full utility from utilities.ts this is technically a breaking change, because someone who did this:

@theme {
  --*: initial
}

...would now lose the rounded-full utility if they don't redefine it themselves along with their own border radius values. Not sure what to do about that, maybe means we should refactor things so that we use the variable if it's defined, but still make it work if it isn't.