Common prop `borderRadius="large-100"` not working as expected in UI-Extensions

Extensions
,
1

This code:

   <>
      <s-box borderRadius="large">large</s-box>
      <s-box borderRadius="large-100">large-100</s-box>
    </>

Produces this:

image
image1920×1110 476 KB

image
image1920×1110 480 KB

Prop values large and large-100 output the exact same css var of --x-border-radius-large.

I would expect large-100 to output a different var, larger than large

Version

    "@shopify/ui-extensions": "2026.4.3"

Tested contexts:

  • Customer accounts
2

Hey @muchisx - thanks for reaching out and for including the DevTools output.

I did some digging and it looks like you’re seeing the expected behaviour here: for borderRadius, large and large-100 are aliases, so both resolve to the same radius. large-100 isn’t a larger step in the radius scale. The same goes for small and small-100. The supported values are documented here for reference:

Hope this helps!