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, as well as x0.5 and x1.5 for more flexibility in condensed layouts.

--rs-unit-x0-5
--rs-unit-x1
--rs-unit-x1-5
--rs-unit-x2
...
--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);
}