Set Box.defaultProps.borderColor?

[shawnbot]

One thing I've noticed when adding borders to boxes is that it feels like we're asking a lot of our users to know that borderColor="gray.2" is necessary to make, say, borderBottom={1} "work". Does it make sense to have Box.defaultProps.borderColor = 'gray.2' so that borders can be activated with the border or border{Top,Bottom,Right,Left} props, and users don't have to internalize the default border color?

[shawnbot]

One note here because I tried fixing this today and it's kinda tricky: It looks like because of the way that styled-system, Emotion, and CSS (like, the actual application of style properties) work, we would have to specify the default props with border: 0 before borderColor: 'gray.2'. If you don't, the resulting CSS looks like this:

/* default */
.css-abcdef {
  border-color: #ddd;
  border: 0;
}

/* with border={1} */
.css-abc123 {
  border-color: #ddd;
  border: 1px solid;
}

In the latter case, border: 1px solid is actually interpreted as 1px solid currentColor, so the border-color property is essentially ignored and the border color is always the text color (color property). If you put border: 0 in Box.defaultProps before borderColor: 'gray.2', it generates:

/* default */
.css-abcdef {
  border: 0;
  border-color: #ddd;
}

/* with border={1} */
.css-abc123 {
  border: 1px solid;
  border-color: #ddd;
}

Given how tricky and error-prone this can be, it might be worth considering a borderGray color key that we set to gray[2] behind the scenes.

[emplums]

Closing this as it's not applicable anymore since we added the BorderBox component!