Support alpha values for theme() function

[thecrypticace]

This PR provides two new APIs, one in CSS and one in JS, to handle changing the alpha value of a color when possible.

In CSS we've co-opted the / alpha syntax used in functions like rgb, hsl, and color and have applied this our theme function usable from CSS. The provided alpha is a raw opacity value but you can use the theme function here to pull from your config.

The following all work now in CSS:

color: theme(colors.rose.500 / 50%); /* color: rgb(244 63 94 / 50%); */
color: theme(colors.blue.500 / 0.5); /* color: rgb(59 130 246 / 50%); */
color: theme(colors.emerald.500 / var(--my-alpha-value)); /* color: rgb(16 185 129 / 50%); */
color: theme(colors.emerald.500 / theme(opacity.50)); /* color: rgb(16 185 129 / 50%); */

In JS-land we have theme.withAlpha(key, opacity) that is usable from your config:

theme: {
  extend: {
    textColor: ({ theme }) => ({
      translucentBlue: theme.withAlpha('colors.blue.500', 'var(--my-alpha)'),
    }),
  },
},

The JS API is still subject to change.

In addition, either from CSS or JS, using the rgb and hsl helpers in your config for defining colors with customizable opacity works as well:

theme: {
  extend: {
    colors: ({ rgb }) => ({
      primary: rgb('--primary'),
    }),
  },
},

color: theme(colors.primary / 50%); /* color: rgb(var(--primary) / 50%); */