Can I set the default color-mix mode to in srgb?

[dmitrc]

Is there any way to explicitly opt out of in oklab mode in color-mix (so, --alpha()) utils?

Given a theme:

--color-white: #ffffff;
--color-black: #000000;
--color-almostTransparent: light-dark(
    --alpha(var(--color-white) / 10%),
    --alpha(var(--color-black) / 10%)
  );

The resolved CSS will be:

--color-almostTransparent: light-dark(
    color-mix(in srgb, #ffffff 10%, transparent),
    color-mix(in srgb, #000000 10%, transparent)
  );

@supports (color: color-mix(in lab, red, red)) {
  --color-almostTransparent: light-dark(
    color-mix(in oklab, var(--color-white) 10%, transparent),
    color-mix(in oklab, var(--color-black) 10%, transparent)
  );
}

If it's guaranteed in our @theme that all of our colors are rgb and not oklch, then the second declaration doesn't really do anything other than add the dead-weight to the stylesheet (and the variables can be embedded safely into the first declaration to begin with).

Thanks in advance!

[wongjn]

The --alpha() "calls" the alpha() function here:

tailwindcss/packages/tailwindcss/src/css-functions.ts

Lines 18 to 39 in 25539e3

	function alpha(
	_designSystem: DesignSystem,
	_source: AstNode,
	value: string,
	...rest: string[]
	): string {
	let [color, alpha] = segment(value, '/').map((v) => v.trim())
	if (!color || !alpha) {
	throw new Error(
	`The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
	)
	}
	if (rest.length > 0) {
	throw new Error(
	`The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
	)
	}
	return withAlpha(color, alpha)
	}

Which in turn calls the withAlpha() function here:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 165 to 177 in 25539e3

	export function withAlpha(value: string, alpha: string): string {
	if (alpha === null) return value
	// Convert numeric values (like `0.5`) to percentages (like `50%`) so they
	// work properly with `color-mix`. Assume anything that isn't a number is
	// safe to pass through as-is, like `var(--my-opacity)`.
	let alphaAsNumber = Number(alpha)
	if (!Number.isNaN(alphaAsNumber)) {
	alpha = `${alphaAsNumber * 100}%`
	}
	return `color-mix(in oklab, ${value} ${alpha}, transparent)`
	}

And as you can see in the return statement, the in oklab is hard-coded. So there doesn't seem to be a way to change the mode.