fix(web): apply opacity modifiers to theme colors

[divyanshu-iitian]

Fixes #387

Tailwind treated Sourcebot's complete CSS-variable colors as opaque values, so utilities such as text-primary/80 and bg-muted/50 ignored their opacity modifiers.

• add a shared color adapter using Tailwind's <alpha-value> placeholder and color-mix()
• support semantic, sidebar, editor, and chat theme colors without rewriting the underlying light/dark tokens
• keep non-color sentinel tokens (none and inherit) unchanged
• add a config-level regression test covering HSL, hex, and semantic variables

Testing:

• yarn workspace @sourcebot/web test --run (93 files, 1128 tests)
• yarn workspace @sourcebot/web lint (0 errors; 6 existing warnings)
• yarn workspace @sourcebot/web build

---

Note

Low Risk
Styling-only Tailwind theme and runtime color resolution changes with regression tests; no auth, API, or data-path impact.

Overview
Fixes Tailwind opacity utilities (e.g. text-primary/80, bg-muted/50) being ignored for theme colors defined as raw CSS variables.

Theme colors in tailwind.config.ts now go through a withOpacity helper that wraps each token in color-mix(in srgb, var(--token) calc(<alpha-value> * 100%), transparent), covering semantic, sidebar, editor, and chat palettes while leaving a few editor tokens as plain var(...) where opacity modifiers are not needed.

src/tailwind.ts post-processes the resolved config so runtime consumers (CodeMirror themes, highlighters) get fully opaque color strings without the <alpha-value> placeholder.

Adds tailwindConfig.test.ts to assert generated utility CSS and runtime color resolution, plus an unreleased CHANGELOG entry.

^{Reviewed by Cursor Bugbot for commit e4633c6. Bugbot is set up for automated code reviews on this repo. Configure here.}

Summary by CodeRabbit

• Bug Fixes
  • Fixed opacity modifiers for Tailwind theme colors backed by CSS variables.
  • Opacity utilities now generate correct blended color output for text, backgrounds, borders, rings, and UI color tokens.
• Tests
  • Added automated checks that compiled utilities and resolved theme colors include concrete alpha values and exclude the alpha placeholder.
• Documentation
  • Updated the unreleased changelog to reflect the opacity fix for CSS-variable theme colors.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 674f1334-0cb9-41f5-ae4e-cbc61f285666

📥 Commits

Reviewing files that changed from the base of the PR and between cfdf07f and e4633c6.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/tailwind.ts
• packages/web/tailwindConfig.test.ts

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

• CHANGELOG.md
• packages/web/tailwindConfig.test.ts

---

Walkthrough

Tailwind CSS-variable theme colors now support opacity modifiers through color-mix(...). Runtime theme colors resolve alpha placeholders to opaque values, tests verify compiled utilities and theme output, and the changelog records the fix.

Changes

Tailwind color opacity

Layer / File(s)	Summary
Opacity-aware theme color configuration packages/web/tailwind.config.ts, CHANGELOG.md	Adds withOpacity across CSS-variable-backed theme colors and documents the fix.
Runtime alpha placeholder resolution packages/web/src/tailwind.ts	Recursively replaces Tailwind alpha placeholders with concrete opaque values in exported theme colors.
Compiled opacity and runtime coverage packages/web/tailwindConfig.test.ts	Compiles opacity-modified text, background, and border utilities and verifies resolved theme color output.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ 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 clearly describes the main change: fixing opacity modifiers for theme colors.
Linked Issues check	✅ Passed	The changes directly address #387 by making Tailwind theme colors opacity-aware with the recommended CSS-variable pattern.
Out of Scope Changes check	✅ Passed	The PR stays focused on the opacity fix, with only supporting tests and a changelog entry added.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@CHANGELOG.md`:
- Line 11: Move the `#1485` “Applied Tailwind opacity modifiers…” entry to the
bottom of the Fixed section in CHANGELOG.md, after the existing `#1474` entry,
while preserving the entry text and link.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b3246d6d-301f-49a8-bf69-daac3738faa1

📥 Commits

Reviewing files that changed from the base of the PR and between 08cf01d and cfdf07f.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/tailwind.config.ts
• packages/web/tailwindConfig.test.ts

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit cfdf07f. Configure here.}