Opacity modifier `bg-{color}/{n}` ignored for var()-based theme colors (emits solid color)

[glennmichael123]

Summary

When a theme color is defined as a CSS variable (e.g. success: 'var(--success)'), the opacity modifier (bg-success/10, bg-success/15, hover:bg-error/15, …) is silently dropped — crosswind emits the solid color, so the element renders fully opaque. Tailwind handles this case via color-mix(...).

Repro

crosswind.config.ts:

export default {
  theme: { extend: { colors: { success: 'var(--success)' } } },
}

CSS variable:

:root { --success: #10b981; }

Markup:

<div class="bg-success/10 text-success">0 visitors online</div>

Expected

A translucent background (10% alpha), e.g. what Tailwind emits:

.bg-success\/10 { background-color: color-mix(in srgb, var(--success) 10%, transparent); }
/* or */          background-color: rgb(16 185 129 / 0.1);

…so text-success (the same green) stays readable against it.

Actual

The /10 is ignored and the background is fully opaque:

getComputedStyle(el).backgroundColor === "rgb(16, 185, 129)"  // solid, no alpha

Result: green text/icons on a solid-green pill are invisible. The generated CSS contains no rgba()/color-mix() for the color at all.

Impact

Any bg-<varColor>/<opacity> utility (subtle badges, translucent hover states, status pills) renders fully opaque. The only workaround is a hand-written color-mix() rule in a <style> block, defeating the utility.

Environment

• @cwcss/crosswind 0.2.4
• Theme color defined as a var(--x) reference holding a full hex value (not channel triplets). Standard Tailwind resolves this with color-mix; crosswind drops the alpha.