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)', // @deprecated
  '--medium-device': '(min-width: 826px)', // @deprecated
  '--small-device-unification': '(max-width: 1023px)',
  '--large-device': '(min-width: 1280px)', // @deprecated
};

<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>;