feat(editor): use hex format for checking if a color is selected

[gerardbalaoro]

What

Added a minor enhancement to the color comparison logic in the ColorSelectorPopover component. When checking if a Tailwind v4 color is selected, we convert the currentColor and color to hex format. This would cover cases where colors are entered in different formats.

Why

I wanted to customize the "Blue" theme from the shadcn website which clearly uses the "Blue" palette from Tailwind v4. However, importing it to the editor converts the colors to hex format which prevents the color popover from correctly identifying any Tailwind v4 colors.

Changes

• I used the culori package which is already installed and has functions to parse colors from any format and convert it to hex.
• If any errors are thrown during conversion, we fallback to the original logic of checking string equality.

The package-lock.json changes happened when I ran npm install. I moved it to a separate commit which can be dropped if the maintainers don't want it to be included.

Summary by CodeRabbit

• Bug Fixes

  • Improved color selector reliability by normalizing color values before comparison and adding a safe fallback when normalization fails, reducing incorrect matches and making selection more robust and consistent across different color formats.

• Chores

  • No user-facing API changes.

[vercel]

@gerardbalaoro 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

Replaces direct string equality in color comparison with hex-normalized comparison using culori's parse and formatHex, converting both values inside a try/catch and falling back to strict equality on failure. No public API changes.

Changes

Cohort / File(s)	Change summary
Color normalization components/editor/color-selector-popover.tsx	Adds formatHex and parse imports from culori; introduces toHex helper; updates isColorSelected to compare colors by converting both values to hex inside a try/catch and falling back to strict equality if conversion fails.

Sequence Diagram(s)

sequenceDiagram
  participant UI as ColorSelector UI
  participant Fn as isColorSelected
  participant Culori as culori (parse/formatHex)

  UI->>Fn: "is this color selected?"
  Fn->>Culori: parse(currentColor) → formatHex
  Culori-->>Fn: normalizedHexA
  Fn->>Culori: parse(targetColor) → formatHex
  Culori-->>Fn: normalizedHexB
  alt both parsed successfully
    Fn->>Fn: compare normalizedHexA == normalizedHexB
    Fn-->>UI: return true/false
  else parse/format error
    Fn->>Fn: fallback compare currentColor === targetColor
    Fn-->>UI: return true/false
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify correct imports and usage of parse / formatHex.
• Confirm try/catch scope and fallback behavior for invalid or undefined colors.
• Ensure surrounding component logic and tests (if any) remain unaffected.

Possibly related PRs

• Feature/tw color support #139: Prior modifications to components/editor/color-selector-popover.tsx that touch the same component and color logic.

Suggested reviewers

• jnsahaj

Poem

🐰 Hopping through hex and hue so bright,

I parse the colors, set them right.
Format and compare with careful art,
Fallback ready if parsing falls apart.
A tiny hop — the palette's tight.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically summarizes the main change: converting colors to hex format for comparison in the color selector component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0942db3 and 3cd7e01.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• components/editor/color-selector-popover.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/editor/color-selector-popover.tsx

---

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)

components/editor/color-selector-popover.tsx (1)

49-49: Consider extracting the helper function for minor performance improvement.

The toHex helper is redefined on every isColorSelected invocation. While likely negligible in practice, you could extract it outside the callback or memoize it separately for a micro-optimization.

+const toHex = (c: string) => formatHex(parse(c));
+
 const isColorSelected = useCallback(
   (color: string) => {
     try {
-      const toHex = (c: string) => formatHex(parse(c));
-
       return toHex(currentColor) === toHex(color);
     } catch {
       return currentColor === color;
     }
   },
   [currentColor]
 );

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 26028eb and 781d852.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• components/editor/color-selector-popover.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

🔇 Additional comments (2)

components/editor/color-selector-popover.tsx (2)

46-57: Solid approach with appropriate fallback handling.

The hex normalization correctly solves the color format mismatch issue. The try/catch with fallback to string equality provides a safe and practical solution when color parsing fails.

---

21-21: No issues found — implementation correctly guards against undefined inputs.

The try/catch wrapper at lines 48–52 provides appropriate error handling for edge cases where parse() returns undefined or formatHex() fails. culori.parse supports CSS Color Level 4 formats used by Tailwind v4, but returns undefined for unrecognized strings, and formatHex expects a valid color. The code safely handles this by wrapping both calls in a try/catch block and falling back to string comparison when hex conversion fails.