Opacify a color token

[sseagull]

Is it possible to set an alpha on a token color, similar to how tailwind allows bg-blue-200/40?

Example

// assuming a theme config like

export default defineConfig({
  // ...
  tokens: {
      colors: {
        dark: { value: '#000000' }
      }
  }
})

// and usage like
const button = css({
  backgroundColor: 'dark' // Is it possible to set the alpha channel to 40%?
})

I sifted through the docs and couldn't find anything on color (hex) opacity, though totally possible that I just missed something in the docs. Thanks in avance!

[anubra266]

@sseagull it's not possible yet. We plan to implement this using color-mix

[astahmer]

it's a css native function that is not yet supported in all browsers, this might help:
https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function

[itsjavi]

would it be technically possible to support it in a similar way as tailwindcss does? with a (color)/(opacity) format, e.g. blue.500/50

for the time being, I am trying the postcss plugin you suggested to use color-mix() css function and it works with panda:

color-mix(in srgb, token(colors.blue.500) 50%, transparent)

[emmbm]

Is there a roadmap or an issue somewhere to track implementation of this feature?

[astahmer]

afaik we're waiting for the color-mix API to be widely supported by all browsers https://caniuse.com/?search=color-mix
you can do it yourself using an utility in the meantime, like this: https://github.com/kumaaa-inc/shadow-panda/blob/b1591b96508ce82eda73443634548482cbd9e1ff/packages/preset/src/utilities/background-alpha.ts

[emmbm]

Current support for the color-mix syntax seems pretty much as wide as it can get in terms of modern APIs. I am currently using utilities transformations to handle this, but it doesn't feel that clean to use custom property names (e.g. backgroundColorAlpha, nor to overwrite existing property names from userland (e.g.: backgroundColor). Also, the amount of utilities needed quickly gets out of hand if we want to make a transparentization syntax work for every property with values that can consist of or contain a color.

[VinSpee]

Here's a naive userland implementation:

https://play.panda-css.com/huZH-3NCkd

      <button
        className={css({
          color: 'red.400',
          bgct: 'red.400/90'
        })}
      >
        Hello world
      </button>

[technorav3nn]

Thanks for this!

[itsjavi]

I didn't know but this seems now possible. There's still part of the docs (the FAQ) linking to this discussion though.

[astahmer]

can confirm it works, both in runtime usage (css) and config (tokens/semanticTokens references)
would you like to send a PR to update the docs ?

[itsjavi]

Yes I was thinking about it :)

[itsjavi]

here is the PR #2467