fix: don't add opacity modifier for variable colors by michaelgold3n · Pull Request #250 · bernaferrari/FigmaToCode
Problem
When a color is from a Figma variable that already contains alpha (e.g., rgba(255,0,0,0.5)), the Tailwind output was incorrectly adding an opacity modifier.
Expected: bg-myVar
Actual: bg-myVar/50
This is incorrect because:
- The variable already contains the alpha value
- Adding
/50compounds the opacity (50% of 50% = 25%)
Solution
Skip the opacity modifier when colorType is 'variable' since the alpha is already baked into the variable definition.
Changes made in tailwindColor.ts:
tailwindSolidColor(): Return early for variable colors without opacity suffixtailwindGradientStop(): Same fix for gradient stops
Testing
- Build passes
- No TypeScript errors
Fixes #232