Unit

The Reshaped unit system is based on a single base value defined in the theme, which is 4px in the default theme. We generate multipliers from 1 to 10 for direct use in the product.

--rs-unit-x1
...
--rs-unit-x10

/* Usage */
.element {
  margin-top: var(--rs-unit-x4);
}

Sometimes these multiplier variables are not enough. In such cases, you can multiply the value yourself in CSS.

.element {
  height: calc(var(--rs-unit-x1) * 40);
}