Right now, there's no support for shorthand properties. This means that I can't set something like this:

{
  Container: {
   border: '1px solid primary'
  }
}

One idea for allowing this could be to split the shorthand into string tokens using .split, then look for tokens and replace.

// assumes the value is border shorthand: '1px solid primary'
border.split(' ').map(replaceThemeUITokensWithValues).join(' ')

The edge case here would be comma-separated values (e.g. multiple backgrounds):

{
  Container: {
    background: 'primary, rgba(0, 0, 0, 0.75)'
  }
}

This could be worked around with regex 😱 (e.g. /([,\s]*)(\w+)([,\s]*)/) to capture non-word characters and drop them back in:

const handleNonWordCharacters = str => {
  const [_, pre, maybeToken, post] = str.match(/([,\s]*)(\w+)([,\s]*)/);

  return pre + replaceThemeUITokensWithValues(maybeToken) + post;
}

There are probably a large number of dragons to consider with this approach, but if it's limited to only a few shorthand properties (e.g. border, background) maybe it's manageable?