Scaling

Change the density of your application.

Often times users have a preference for the percieved size of elements in their application. Winnie supports this concept via the data-scale attribute. The scaling attribute modifies css values which affect the overall density of the layout in the application.

export default function Root() {
  return (
    <html>
      <head></head>
      <body class="winnie-ui" data-scale="100%">
        <App />
      </body>
    </html>
  );
}

Scaling Factor

Winnie provides a scaling factor token that you can use to create custom components that adhere to the overall density of your application.

Scaling	Factor
90%	0.90
95%	0.95
100%	1.00
105%	1.05
110%	1.10

Scaling factors can be used with the calc function in css. By default all space, font-size, line-height, border-width, and border-radius have scale calculated for them.

.movie-card {
  height: calc(48px * var(--wui-scale));
}

Example

Putting this all together, we can create a component that scales across the different factors seamlessly.