const listStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column' };
const spaces = [
  '--space',
  '--space-2x',
  '--space-3x',
  '--space-4x',
  '--space-5x',
  '--space-6x',
  '--space-7x',
  '--space-8x',
  '--space-9x',
  '--space-10x',
];

<ul style={listStyles}>
  {spaces.map(space => {
    return (
      <li key={space}>
        <Measure variable={space}></Measure>
      </li>
    );
  })}
</ul>;

Border Radius

Smaller border radius is used for inputs, buttons, and inner containers (like cards). The larger border radius is only used on Page elements.

const listStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column' };

<ul style={listStyles}>
  <li>
    <Measure
      variable="--border-radius"
      previewStyle={{
        width: '30px',
        height: '30px',
        borderRadius: 'var(--border-radius)',
      }}
    ></Measure>
  </li>
  <li>
    <Measure
      variable="--border-radius-2x"
      previewStyle={{
        width: '30px',
        height: '30px',
        borderRadius: 'var(--border-radius-2x)',
      }}
    ></Measure>
  </li>
</ul>;

Misc

const listStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column' };

<ul style={listStyles}>
  <li>
    <Measure
      variable="--velocity"
      previewClassName="u-testVelocity"
      previewStyle={{
        width: '30px',
        height: '30px',
      }}
    ></Measure>
  </li>
</ul>;