Opacities Scale

[peduarte]

Is your feature request related to a problem? Please describe.
In Modulz, we're exposing Opacity Tokens, however:

• theme-ui/css and styled-system/css functions don't include an opacities scale in its scales mapping
• System UI Spec doesn't specify one (Opacities scale theme-specification#12)

Describe the solution you'd like
I'd like to be able to use the CSS function with an opacities scale:

css({
  opacity: 1 // should return 50%
})({
  theme: {
    opacities: ["0%", "50%", "100%"]
  }
})

Describe alternatives you've considered
The CSS function defaults to mapping to a scale named after the property. It's probably not intentional, @jxnblk would appreciate some context here.

Because of that, if we have a scale called opacity, it works:

css({
  opacity: 1 // should return 50%
})({
  theme: {
    opacity: ["0%", "50%", "100%"]
  }
})

Additional context
Here's a Codesandbox Demo with my expectation and workaround mentioned above

[jxnblk]

I certainly have never really used opacity in this sort of way, and tend to avoid it due to z-index issues, but this makes sense to me. For context, the fallback to picking up theme[CSSProperty] is intended to catch things like this that aren't currently supported by a given scale name

[peduarte]

Gotcha. You cool with me explicitly adding an opacities scale mapping in theme-ui/css then?