Color opacity modifiers are used to alter the transparency of an existing color token. They help to blend elements with backgrounds or achieve specific design effects.
Color opacity modifiers can only be applied to color-related CSS properties, such as border-color,
color, outline-color, background-color, etc.
{color}/{opacity}For example, to express a 40% transparency on a gray.200 tokenToString, we express it as:
gray.200/40.
Panda converts this to the native CSS color-mix syntax:
color-mix(in srgb, var(--colors-gray-200) 40%, transparent)