Color Opacity Modifier: Adding Support For Older Browsers

[mariodukoskiinfinum]

Hello 👋

In the project I'm working on, we're using the color opacity modifier feature in Panda CSS. However, we also need to support older browsers. While I know I can opt-out and define colors with opacity directly in the colors object, I was wondering if it would make sense for Panda CSS to handle this out of the box.

Specifically, rather than using variables in the color-mix function, could Panda CSS fall back to using raw color values?
For example:

/* Current */
color-mix(in srgb, var(--colors-base-neutrals-0) 30%, transparent);

/* Proposed */
color-mix(in srgb, #fff 30%, transparent);

By using raw color values, the PostCSS plugin for color-mix can process and resolve the mix, making it compatible with older browsers. Currently, this plugin doesn't support resolving variables, and it’s unclear if it ever will.

Example of My Setup

Theme Contract:

export const defaultTheme = themeContract({
	semanticTokens: {
		colors: {
			text: {
				regular: {
					default: {
						value: '{colors.base.neutrals.0/30}',
					},
				},
			},
		},
	},
});

Color-Mix Transform:

const extractVariable = (input: string) => {
	const match = input.match(/var\(--([\w-]+)\)/);
	return match ? `var(--${match[1]})` : null;
};

export const removeColorMixTransform = (cssProperty: string): PropertyTransform => {
	return (value, { token, raw }) => {
		const colorValue = token.raw(`colors.${raw}`)?.value;

		if (!colorValue?.startsWith('color-mix')) {
			return { [cssProperty]: value };
		}

		const colorVar = extractVariable(colorValue);

		if (colorVar) {
			const normalizedPath = colorVar
				.replace(/^var\(--colors-/, '')
				.replace(/\)$/, '')
				.replace(/-/g, '.');

			const resolvedColor = get(colors, `${normalizedPath}.value`);

			if (resolvedColor) {
				return { [cssProperty]: colorValue.replace(colorVar, resolvedColor) };
			}
		}

		return { [cssProperty]: value };
	};
};

Utility Config Example (Background):

export const background: UtilityConfig = {
	background: {
		shorthand: 'bg',
		className: 'bg',
		values: 'colors',
		group: 'Background',
		transform: removeColorMixTransform('background'),
	},
	backgroundColor: {
		shorthand: 'bgColor',
		className: 'bg-c',
		values: 'colors',
		group: 'Background',
		transform: removeColorMixTransform('backgroundColor'),
	},
};

Questions:

1. Would it be possible for Panda CSS to use raw color values instead of variables for the color-mix function?
2. Is there a specific reason why variables are used instead of raw colors in this context?
3. Does it make sense for me to use the transform utility shared above, or could there be potential issues with this approach?

Thank you for your time and input!