UnoCSS version

66.1.2

Describe the bug

      // 'surface-200': '#e2e8f0',
      // 'surface-200': 'rgb(226, 232, 240)',
      // 'surface-200': 'var(--p-surface-200)',

      'surface-200': 'oklch(0.93 0.0126 255.51)',
      'surface-200': 'oklch(from var(--p-surface-200) l c h)',

All colors will compile to color-mix with color interpolation method oklch, when use non OKlab color space, it will be wrong color output

Color only works perfect with oklch() function with Absolute value syntax or Relative value syntax

e.g

/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #0000FF calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--aColor) l c h / calc(alpha - 0.1))

Can not avoid wrong color output when use class bg-[arbitrary value] with custom css hex color varible or color defined from third party UI library not use oklab color syntax.

Reproduction

Playground
It perfroms good in firefox, but not as expected in chrome! LOL

unocss.config.ts

export default defineConfig({
  theme: {
    colors: {
      // 'surface-200': '#e2e8f0',
      // 'surface-200': 'rgb(226, 232, 240)',
      // 'surface-200': 'var(--p-surface-200)',

      // 'surface-200': 'oklch(0.93 0.0126 255.51)',
      'surface-200': 'oklch(from var(--p-surface-200) l c h)',
    },
  },
})

my.vue

<template>
    <div class="bg-[--p-content-hover-background]">
    </div>
</template>

System Info

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.