Box-header has double borders

[shawnbot]

Box headers (.Box .Box-header) have a double border on their sides:

I discovered this on github.com, confirmed that it's not an issue in primer@11.0.0, and compared the @primer/css CSS build with the primer@11.0.0 CSS build to confirm that it's a regression. It turns out that this seeming innocuous commit is the root of the problem. Before:

css/modules/primer/box/box.scss

Line 73 in ce591bb

margin: -1px -1px 0 -1px;

after:

css/src/box/box.scss

Line 73 in 368cf73

margin: -$border-width -$border-width 0;

I assumed that this would be interpreted as -1px -1px 0, but it looks like the - are being treated as mathematical operators and we're getting -2px 0 in the output. I think the fix is to wrap the numbers in parens, which is something that we do elsewhere in the same file:

.Box-header {
  // ...
  margin: (-$border-width) (-$border-width) 0;
  // ...