Inability to use `border` CSS and reference base-theme colors in variants, must use long-hand border properties.

[anmpog]

Is your feature request related to a problem? Please describe. When defining variants or styles.root values, I've found that I'm unable to reference the theme.colors object when defining borders using the CSS border shorthand (ex border: 2px solid primary where primary is a color defined on the theme.colors object). However, I CAN reference the colors defined on the theme.colors object when I use the longhand border-color CSS property.

Very specifically, on theme.styles.root I'm setting some default styling on the <section> element, and was attempting to define a border style using border: '2px solid primary to no effect – however, using:

section: {
  borderWidth: '2px',
  borderStyle: 'solid',
  borderColor: 'primary'

... works as intended ('primary' correctly references a color on my theme.colors object).

Describe the solution you'd like It would be nice to be able to reference theme values using the CSS border shorthand.

[lachlanjc]

Totally! There's two approaches I see here:

1. Make it less annoying to write out the multi-part syntax, via something like nested objects, prototyped here but never finished: https://github.com/system-ui/theme-ui/compare/css-shorthands?expand=1
2. Support (theme) => value function in theme specification, #2066

[lachlanjc]

Going to close for now in favor of the second solution I mentioned, which is a still-open issue!