Negative margin atoms with tokens through calculation

[nayaabkhan]

Maybe this is not as ingenious as I felt the time I figured it 😬

But finally, after a lot of head-banding, I managed to get negative margins using the spacing tokens without any duplication.

import mapValues from 'lodash/mapValues'

const responsiveProperties = defineProperties({
  properties: {
    marginTop: vars.spacings,
    marginBottom: vars.spacings,
    marginLeft: vars.spacings,
    marginRight: vars.spacings,

    '-marginTop': mapValues(vars.spacings, (value) => ({
      marginTop: calc.negate(value),
    })),
    '-marginBottom': mapValues(vars.spacings, (value) => ({
      marginBottom: calc.negate(value),
    })),
    '-marginLeft': mapValues(vars.spacings, (value) => ({
      marginLeft: calc.negate(value),
    })),
    '-marginRight': mapValues(vars.spacings, (value) => ({
      marginRight: calc.negate(value),
    })),
  },
})