Add transparency on themed colors (modify alpha channel of color)

🚀 Feature request

Ability to add an alpha value to a color registered in the theme.colors object when using it.

🧱 Problem Statement / Justification

Sometimes we want to apply a color value to a props fo a component (bgColor, bgGradient, color, etc…) by using a color registered in the theme.colors object. However right now (if I’m correct), it is not possible to add or modify an alpha value to that color.

For example:

<Box
  bgColor='green.500' // <- Here we cannot add an alpha value to the color without explicitly using hardwritten RGBA or Hex value
>
</Box>

Adding a opacity props to the Box component doesn’t solve the problem as all the component, including the text, will be transparent.

✅ Proposed solution or API

We could try to format the name of the color with a special delimiter like @ for example to be able to parse the value of the alpha channel. If the color already has an alpha value to it, it overrides the alpha value. For example the string "green.500@0.4" return theme.colors.green[500] with an opacity of 0.4

So something like this can be done :

<Box
  bgGradient='linear(to-b, white, green.500@0.3)'
  >
</Box>

What do you think? Or did I miss something?

Thank you 😄

[la55u]

https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme-tools/src/color.ts#L45 transparentize function does that exactly

[georgebutter]

I think a workaround for some use cases (probably not gradients though) would be to set your colours up using CSS variables in RGBA format.

grey: {
    900: rgba(51, 51, 51, --opacity),
  },

Then use the sx prop to set the var to your desired value on a parent element.

<Box sx={{ "--opacity": 0.5 }}>
  <Heading color="grey.900" size="lg">
    This uses CSS Custom Properties!
  </Heading>
</Box>

I haven’t tested whether this works just putting it out there