fix: apply opacity modifiers to var()-based theme colors via color-mix

Fixes #16

A theme color holding a var() reference (success: 'var(--success)') has
no channels to rewrite, so applyOpacity's fallback returned the color
unchanged and bg-success/10 rendered fully opaque. Such values now emit
color-mix(in srgb, <color> N%, transparent), matching Tailwind. Applies
to every opacity path (bg/text/border/ring/gradient stops) and to
currentColor; inherit and transparent pass through unchanged.

Author: chrisbbreuer

packages/crosswind/src/rules.ts

@@ -541,7 +541,15 @@ export function applyOpacity(color: string, opacity: number): string {
       return `hsl(${hslMatch[1]} / ${opacity})`
     }
   }
-  // Fallback: use opacity as-is with the color
+  // Values whose channels can't be rewritten inline — var() references,
+  // color-mix(), named colors, currentColor — get their alpha via color-mix
+  // (like Tailwind), instead of silently dropping the opacity and rendering
+  // the color fully opaque. `inherit` can't participate in color-mix, so it
+  // passes through unchanged.
+  if (cleanColor !== 'inherit' && cleanColor !== 'transparent') {
+    const pct = Number((opacity * 100).toFixed(2))
+    return `color-mix(in srgb, ${cleanColor} ${pct}%, transparent)`
+  }
   return cleanColor
 }
 

packages/crosswind/test/colors.test.ts

@@ -1099,3 +1099,59 @@ describe('Nested color DEFAULT key (issue #17)', () => {
     expect(css).not.toContain('--brand-DEFAULT')
   })
 })
+
+describe('Opacity modifier on var()-based theme colors (issue #16)', () => {
+  // A theme color holding a var() reference has no channels to rewrite, so
+  // the opacity modifier must go through color-mix() instead of being
+  // silently dropped (which rendered bg-success/10 fully opaque).
+  const varConfig = {
+    ...defaultConfig,
+    theme: {
+      ...defaultConfig.theme,
+      extend: { colors: { success: 'var(--success)' } },
+    },
+  }
+
+  it('emits color-mix for bg-{varColor}/{n}', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generate('bg-success/10')
+    expect(gen.toCSS(false)).toContain('background-color: color-mix(in srgb, var(--success) 10%, transparent);')
+  })
+
+  it('emits color-mix for text and border with variants', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generateBatch(['text-success/50', 'hover:bg-success/15'])
+    const css = gen.toCSS(false)
+    expect(css).toContain('color: color-mix(in srgb, var(--success) 50%, transparent);')
+    expect(css).toContain('.hover\\:bg-success\\/15:hover')
+    expect(css).toContain('background-color: color-mix(in srgb, var(--success) 15%, transparent);')
+  })
+
+  it('emits color-mix for arbitrary opacity values', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generate('border-success/[0.04]')
+    expect(gen.toCSS(false)).toContain('border-color: color-mix(in srgb, var(--success) 4%, transparent);')
+  })
+
+  it('keeps native alpha for channel-based theme colors', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generate('bg-blue-500/50')
+    const css = gen.toCSS(false)
+    expect(css).toContain('/ 0.5)')
+    expect(css).not.toContain('color-mix')
+  })
+
+  it('applies color-mix to currentColor but passes inherit through', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generateBatch(['bg-current/50', 'bg-inherit/50'])
+    const css = gen.toCSS(false)
+    expect(css).toContain('background-color: color-mix(in srgb, currentColor 50%, transparent);')
+    expect(css).toContain('background-color: inherit;')
+  })
+
+  it('does not alter the solid form of the var color', () => {
+    const gen = new CSSGenerator(varConfig)
+    gen.generate('text-success')
+    expect(gen.toCSS(false)).toContain('color: var(--success);')
+  })
+})