Optional callback values in props for direct access to theme

[dslovinsky]

Is your feature request related to a problem? Please describe.
Problem:
The ability to reference theme values directly from properties as a string is good, but this isn't ideal for more complex values like border or linear gradients which might reference theme values within them rather as the whole value. This leads to people sometimes going outside quarks to import theme values directly which is inefficient:

import COLORS from 'theme/colors';
...
      <Div
        $border={`1px solid ${COLORS.primary[500]}`} // BAD
      >

Describe the solution you'd like
In addition to applying the regular string value, allow the ability to pass in a callback. The callback will have one argument corresponding with the users' theme and could be used much in the same way that other CSS-in-JS libraries use callbacks within tagged template literals. This could be accomplished using function overloads.
Ex:

      <Div
        $backgroundColor="primary100"
        $border={(theme) => `1px solid ${theme.color.primary100}`}
        $background={({ color }) => `linear-gradient(${color.primary100}, ${color.primary200})`}
      >

This could have other benefits, such as the ability to have a dark/light mode value stored in theme that can be referenced the same way:

      <Div
        $backgroundColor={({ isDark }) => isDark ? 'white' : 'primary800'}
      >

[jpwallace22]

I hate the syntax of these function overloads and NEVER want to write them. However, it works. I feel like we should lean more heavily on cssOverwrites then move over to here.

Also, I would love to make sure we get a dark and light theme worked into theme. But I figured you were already thinking that as well.