[Theme] spacing function

I’d like to propose the following additive change to theme.spacing:

import warning from 'warning';

const unit = 8;

const spacing = (...args) => {
  if (process.env.NODE_ENV !== 'production') {
    warning(
      args.length <= 4,
      `Too many arguments, exepected 1..4, got ${args.length}`,
    );

    args.forEach((arg, index) => {
      warning(
        typeof arg === 'number',
        `Expected argument ${index + 1} to be a number, got ${arg}`,
      );
    });
  }

  return args
    .map((multiplier = 0) => multiplier && `${unit * multiplier}px`)
    .join(' ');
};

spacing.unit = unit;

export default spacing;

This is a backward compatible change that allows you to then:

Single value:

Example

padding: theme.spacing(1)

Result

padding: 8px;

Multiple values:

Example

padding: theme.spacing(1, 2)

Result

padding: 8px 16px;

---

Example

padding: theme.spacing(.5, 1, 2, 3)

Result

padding: 4px 8px 16px 24px;

I’d like to open a pull request for this if we’re onboard.

[valoricDe]

How would I write margin: 16px auto? [theme.spacing(2), 'auto']?

[socketpair]

#16163