Sizing

Elements in Universal UI scale their padding, font-size, gap, etc... based on the data-attribute data-size.

Elements expose a size prop that can be used to set the size of the element.

For all sizing attributes, such as p-, m-, space-x-, text-, gap-, etc... you can add -size-{AMOUNT} to the end of the class.

<div data-size="sm">
  {/* all content inside of here will be smaller */}
  <div className="px-size-2x py-size-2y">Padded Section</div>
</div>

Using text-size will make the font size respect the current size. This is commonly paired with leading-size to make the line-height smaller as well.

<div data-size="sm">
  <p className="text-size">This text is smaller</p>
  <p className="text-size leading-size">This text is smaller and has a smaller line-height</p>
</div>

The body1 and body2 props in <Text /> also have text-size and leading-size applied by default.

Using the variables

The following CSS variables are exposed by Universal UI, which listen to the nearest data-size attribute.

--size-text (font-size) Used in text-size
--size-line (line-height) Used in spacing, line-height

## Spacing Multipliers
--size-x   (Default x-padding for inputs)
--size-y   (Default y-padding for inputs)
--size-2x
--size-2y
--size-4x
--size-4y
--size-8x
--size-8y
--size-hx (Half x)
--size-hy (Half y)
--size-qx (Quarter x)
--size-qy (Quarter y)

These can be used in your own CSS, or in custom Tailwind classes. You can even use them in calc().

<div className='flex items-center' data-size='lg'>
  <div className='w-[var(--size-text)] h-[var(--size-text)] bg-blue-500 mr-2' />
  <p className='text-size'>Hello World</p>
</div>

It's recommended to use the provided CSS variables when building components, so that they scale with the rest of the UI.