Add theme.json presets for Border Radius

[fabiankaegy]

Like spacing, color, aspect ratios etc. Border Radii are something that should be applied consistently throughout a design. Instead of having to always manually enter the raw px value it would be great to be able to use a variable instead. Ideally this would work similar to the spacing control where you can either provide a variable or enter the raw value.

[fabiankaegy]

@jameskoster @jasmussen @richtabor Would love to hear your thoughts on this. And I think this could use some design help to figure out how to best present it :)

[carolinan]

This would be a small improvement over using theme.json>settings>custom, or trying to keep consistency using a ref in theme.json.

[fabiankaegy]

@carolinan Yeah we already do this in our themes in code. But we often still need to select from different options for what radius should be used on a component level... Like for example two different groups may need different radii. And that is not something that we can really accomplish with just the defaults... Yeah we can hard code it in a pattern but then we loose the ability to change it site wide when the radius needs to be tweaked

[jameskoster]

Agree this would be a nice improvement.

The UI will need some thought. Hopefully we can reuse elements of the spacing controls. I suppose it would need to support:

• Set all corners to a single preset at once
• Set all corners to a custom value at once
• Set individual corners to different presets
• Set individual corners to different custom values
• Set individual corners to a mixture of presets and custom values

Does that sound right? Perhaps something like this could work:

[richtabor]

The UI will need some thought. Hopefully we can reuse elements of the spacing controls. I suppose it would need to support:

I like that this follows closely to the #63963 concepts pitched. We could reuse that certainly.

[aaronrobertshaw]

Like for example two different groups may need different radii. And that is not something that we can really accomplish with just the defaults... Yeah we can hard code it in a pattern but then we loose the ability to change it site wide when the radius needs to be tweaked

A short-term option could also be to leverage block style variations. They'd be editable via Global Styles, should the need to change them arise, with the changes automatically applied anywhere the variation was applied.

[jasmussen]

Tiny nitpick, the footprint of the icons inside the 24x24 base in these feel a bit too large:

[asafm7]

Can we maybe build upon custom theme.json settings to expose custom presets instead of, or in addition to, using a scale? (similarly to what we have with colors currently)

For example:

Another way to do it might be adding "Var" to the units drop-down and then manually typing the var name to the input field (maybe in the future have a dropdown or autocomplete).

For example, a design might have "soft corners" (let's say border-radius: 12px) that need to be applied to many but not all elements.

We can create: "globalBorderRadius": "12px" custom setting in theme.json (or through the UI).

It isn't a small-medium-large sort of thing.

Let's say in the future the designer wants to switch from 12px to 10px, it doesn't make sense to redefine what small or medium is. Instead, we can just change the globalBorderRadius setting.

Another way of seeing it is as bringing custom CSS properties (variables) into the editor UI. In the context of border-radius It can be applied either to each corner individually, or to all corners tighter,

This is how I understand the original message by @fabiankaegy, but maybe I'm missing something.

[youknowriad]

Can I get some help getting these "corner icons" into the icons library?

[jasmussen]

@jameskoster happy to help extract the SVGs if you point me to the Figma and have a full table otherwise.

[jameskoster]

Here we go...

All corners

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5Zm-12.5 9v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z"/>
</svg>

Top left

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g opacity=".25">
    <path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
  </g>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5.75a.25.25 0 0 0-.25.25v3h-1.5V6c0-.966.784-1.75 1.75-1.75h3v1.5H6Z" />
</svg>

Top right

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g opacity=".25">
    <path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
  </g>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5Z" />
</svg>

Bottom left

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g opacity=".25">
    <path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z"/>
  </g>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 15v3c0 .138.112.25.25.25h3v1.5H6A1.75 1.75 0 0 1 4.25 18v-3h1.5Z" />
</svg>

Bottom right

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g opacity=".25">
    <path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z"/>
  </g>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 18.25h3a.25.25 0 0 0 .25-.25v-3h1.5v3A1.75 1.75 0 0 1 18 19.75h-3v-1.5Z" />
</svg>

Figma here.

[youknowriad]

Thanks :)