fix: don't add opacity modifier for variable colors (#250)

When a color is from a Figma variable that already contains alpha,
the output was incorrectly adding an opacity modifier like /50.
For example, a variable 'myVar' defined as rgba(255,0,0,0.5) was
generating 'bg-myVar/50' instead of just 'bg-myVar'.

The fix skips the opacity modifier when colorType is 'variable'
since the alpha is already baked into the variable definition.
Adding the modifier would incorrectly compound the opacity.

Fixes #232

Co-authored-by: Michael Golden <michael@wayframe.com>

Author: michaelgold3n

packages/backend/src/tailwind/builderImpl/tailwindColor.ts

@@ -81,7 +81,15 @@ export const tailwindSolidColor = (
   }
 
   // Original implementation for non-variable colors or when not using var syntax
-  const { colorName } = getColorInfo(fill);
+  const { colorName, colorType } = getColorInfo(fill);
+
+  // Don't add opacity modifier for variable colors - the alpha is already baked
+  // into the variable definition. Adding /50 to a variable that's already
+  // defined with alpha would incorrectly compound the opacity.
+  if (colorType === "variable") {
+    return `${kind}-${colorName}`;
+  }
+
   const effectiveOpacity = calculateEffectiveOpacity(fill);
   const opacity =
     effectiveOpacity !== 1.0 ? `/${nearestOpacity(effectiveOpacity)}` : "";
@@ -101,7 +109,14 @@ export const tailwindGradientStop = (
   stop: ColorStop,
   parentOpacity: number = 1.0,
 ): string => {
-  const { colorName } = getColorInfo(stop);
+  const { colorName, colorType } = getColorInfo(stop);
+
+  // Don't add opacity modifier for variable colors - the alpha is already baked
+  // into the variable definition
+  if (colorType === "variable") {
+    return colorName;
+  }
+
   const effectiveOpacity = calculateEffectiveOpacity(stop, parentOpacity);
   const opacity =
     effectiveOpacity !== 1.0 ? `/${nearestOpacity(effectiveOpacity)}` : "";