fix(color): Preserve alpha/opacity in color formatting

[Abbasa5251]

Fixes #246

This PR fixes the issue where oklch colors with percentage-based opacity (e.g., oklch(1 0 0 / 10%)) were rendering at full opacity in previews instead of respecting the transparency value.

Problem

When users input oklch colors with alpha/opacity values, the color picker correctly displayed the color, but the preview rendered it at full opacity. This occurred because the colorFormatter function was stripping the alpha channel when converting colors.

Solution

Updated /utils/color-converter.ts to preserve alpha values across all color format outputs:

• Added hasAlpha helper function to detect colors with transparency (alpha < 1)
• Updated formatHsl to include alpha channel when present: hsl(h s% l% / alpha)
• Updated colorFormatter oklch case to preserve alpha: oklch(l c h / alpha)
• Updated colorFormatter hsl case (both Tailwind v3 and v4 formats) to preserve alpha
• Updated colorFormatter hex case to use 8-digit hex (formatHex8) when alpha is present

Changes

Format	Before	After (with alpha)
oklch	oklch(1 0 0)	oklch(1 0 0 / 0.1)
hsl (v4)	hsl(0 100% 50%)	hsl(0 100% 50% / 0.1)
hsl (v3)	0 100% 50%	0 100% 50% / 0.1
hex	#ff0000	#ff00001a

Backward Compatibility

Colors without alpha (or with alpha = 1) continue to output in the same format as before, ensuring no breaking changes for existing themes.

Test Plan

• Input oklch(1 0 0 / 10%) in color picker → verify preview shows 10% opacity
• Input hsl(0 100% 50% / 50%) → verify preview shows 50% opacity
• Export theme CSS → verify alpha values are preserved in output
• Verify existing colors without alpha still work correctly

Summary by CodeRabbit

Release Notes

• New Features
  • Added comprehensive transparency/alpha channel support across HSL, oklch, and hex color formats
  • Extended color formatting with modern CSS syntax for alpha values
  • Improved robustness in color value handling for edge cases

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@abbas10to8 is attempting to deploy a commit to the tweakcn OSS program Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Color formatter enhanced with comprehensive alpha channel support across HSL, oklch, and hex formats. The colorFormatter parameter renamed from color to colorValue. New convertToHSL export function added alongside strict number formatting and alpha detection helper.

Changes

Cohort / File(s)

Summary

Color Formatter Enhancement utils/color-converter.ts

Updated formatNumber to strictly handle undefined/null and zero values; introduced hasAlpha helper to detect alpha presence; enhanced formatHsl with alpha support using extended syntax (e.g., "hsl(h s% l% / alpha)"); updated colorFormatter signature (parameter renamed color → colorValue) and logic to propagate alpha across HSL, oklch, and hex formats; oklch path now formats with alpha support; hex path prefers 8-digit format when alpha present; added new public export convertToHSL(colorValue: string)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Alpha channel logic verification: Ensure alpha handling is consistent across HSL, oklch, and hex formatting paths, particularly for percentage-based opacity values (relates to issue #246)
• formatNumber strict handling: Confirm that undefined/null and zero cases return expected values ("0")
• Parameter rename impact: Verify all internal calls to colorFormatter use the updated parameter name colorValue
• convertToHSL export: Confirm the new function integrates properly and returns expected HSL string format

Suggested reviewers

• jnsahaj

Poem

🐰 Hop through the alpha channels with glee,
HSL, oklch, and hex now see!
Opacity flows where shadows play,
Color formatting's here to stay!
🎨✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: preserving alpha/opacity in color formatting across multiple color formats.
Linked Issues check	✅ Passed	The PR directly addresses issue #246 by implementing alpha preservation across oklch, hsl, and hex formats, matching the requirement to respect opacity in color previews.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing alpha/opacity handling in color formatting; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

utils/color-converter.ts (1)

73-73: Consider whether v4 format would be more intuitive.

The function defaults to Tailwind v3 format (e.g., "0 100% 50%" without the hsl() wrapper). For a function named convertToHSL, developers might expect standard CSS format. Consider whether defaulting to tailwindVersion: "4" would provide a more intuitive API for general HSL conversion.

That said, the current default is consistent with colorFormatter's default and may be intentional for Tailwind config usage.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5ce7e81 and 6cfe263.

📒 Files selected for processing (1)

• utils/color-converter.ts (2 hunks)

🔇 Additional comments (6)

utils/color-converter.ts (6)

5-9: LGTM! Clean null-safety and formatting logic.

The explicit handling of undefined/null/zero makes the function's behavior clear and predictable. The toFixed(4) precision is appropriate for color values.

---

11-13: LGTM! Correct alpha detection logic.

The helper correctly identifies when alpha transparency should be included in the output (when defined and less than 1). This ensures colors without transparency or with full opacity remain in their simpler format.

---

15-24: LGTM! Proper CSS Color Module Level 4 syntax.

The function correctly formats HSL colors with alpha support using the standard hsl(h s% l% / alpha) syntax. The conditional inclusion of alpha keeps colors without transparency in their simpler format.

---

36-46: LGTM! Appropriate handling for both Tailwind versions.

The implementation correctly distinguishes between Tailwind v3 (config format without wrapper) and v4 (standard CSS format with wrapper), while preserving alpha in both cases when present.

---

49-58: LGTM! Fixes the core issue with oklch opacity.

This directly addresses issue #246 by preserving alpha in oklch colors. The implementation correctly uses the CSS Color Module Level 4 syntax oklch(l c h / alpha) to ensure transparency is maintained in previews.

---

59-63: LGTM! Proper alpha handling in hex format.

The implementation correctly uses formatHex8 to include alpha in the 8-digit hex format when transparency is present, and falls back to standard 6-digit hex otherwise. This ensures alpha is preserved across all color formats.