@theme-ui/color functions do not work in "long-hand" declarations, e.g. boxShadow

Describe the bug I would have expected that color functions like transparentize('primary', 0.7) work in template strings for long-hand declarations like boxShadow, especially since there is no short-hand boxShadowColor available. Unfortunately, that does not work.

To Reproduce Steps to reproduce the behavior:

1. Install @theme-ui/color@0.3.1
2. Declare a style with the sx prop on an element like so:

const Example = props => (
  <div
    {...props}
    sx={{
      boxShadow: `0 0 1px 4px ${transparentize('primary', 0.5)}, 0 0 1px 8px ${transparentize('primary', 0.7)}`,
      height: `40px`,
      width: `40px`,
      transition: 'box-shadow 0.25s ease-in-out',
      ':hover': {
        boxShadow: `0 0 1px 12px ${transparentize('primary', 0.7)}, 0 0 1px 20px ${transparentize('primary', 0.9)}`,
      },
    }}
  />
);

Additional context Workaround using css custom properties:

const Example = props => (
  <div
    {...props}
    sx={{
      '--box-shadow-color-light': transparentize('primary', 0.9),
      '--box-shadow-color-med': transparentize('primary', 0.7),
      '--box-shadow-color-dark': transparentize('primary', 0.5),
      boxShadow: `0 0 1px 4px var(--box-shadow-color-dark), 0 0 1px 8px var(--box-shadow-color-med)`,
      height: `40px`,
      width: `40px`,
      transition: 'box-shadow 0.25s ease-in-out',
      ':hover': {
        boxShadow: `0 0 1px 12px var(--box-shadow-color-med), 0 0 1px 20px var(--box-shadow-color-light)`,
      },
    }}
  />
);

[jxnblk]

To use @theme-ui/color functions in properties like boxShadow, you can manually pass the theme object with a functional value (this isn’t an ideal API, but should work with the current release):

boxShadow: theme => `0 0 2px 4px ${transparentize('primary', 0.9)(theme)}`,

[dburles]

Just as a side note to your original question. It might be simpler to instead use the shadows property on the theme. Your shadows will be more consistent as you won’t need to provide inline values to either theboxShadow property or the transparentize function.