Radius

Radius tokens define the standard corner radius of the components.


<View direction="row" align="center" justify="center" gap={6}>
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-unit-radius-small)",
      width: 60,
      height: 60,
    }}
  />
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-unit-radius-medium)",
      width: 80,
      height: 80,
    }}
  />
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-unit-radius-large)",
      width: 120,
      height: 120,
    }}
  />
</View>

Reshaped supports three radius tokens based on the expected size of the components.

--rs-unit-radius-small
--rs-unit-radius-medium
--rs-unit-radius-large

/* Usage */
.element {
  border-radius: var(--rs-unit-radius-medium);
}

Small radius is used for small atomic elements like Badge.
Medium radius is used for more prominent elements such as Card or large Button.
Large radius is used for bigger elements like Modal or decorative blocks that need to stand out.

Unit

Shadow