Radius

Adjust the feeling of your application by changing the radius of corners.

Corner radius drastically changes the feel of an application. Larger radius’ make applications feel soft, where as no radius makes an application feel sharp and edgy.

Winnie allows you to adjust the corner radius of elements using the data-radius attribute. This means that any elements styled using the --wui-radius-<value> variables will react to changes in this attribute.

root.tsx
export default function Root() {
  return (
    <html>
      <head></head>
      <body class="winnie-ui" data-radius="md">
        <App />
      </body>
    </html>
  );
}

Radius Factor

The implementation uses a radius factor, similar to Scaling Factor.

RadiusFactor
none0
sm0.75
md1.00
lg1.5
round9999

Corner radius variables can be applied to the border-radius property in css.

button.css
.my-button {
  border-radius: var(--wui-border-radius-2);
}

Example

Putting this all together, we can create a interfaces whose personality changes based on the radius factor.