Spacing

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>

Breakpoints

Predefined breakpoints via custom-media.

Note: This section is not automatically updated in case the actual breakpoints are changed. Double-check in the source file if the values here are up-to-date.

const breakpointStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column'};
const breakpoints = {
  '--small-device': '(max-width: 825px)',
  '--medium-device': '(min-width: 826px)',
  '--large-device': '(min-width: 1280px)'
};

<dl style={breakpointStyles}>
  {
    Object.entries(breakpoints).map(([name, query]) => {
      return (
        <React.Fragment key={name}>
          <dt><Code>{name}</Code></dt>
          <dd><Code>{query}</Code></dd>
        </React.Fragment>
      );
    })
  }
</dl>

Use it like this in your CSS (requires postcss):

@media (--medium-device) {
  ...
}

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>