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 change to Tailwind theme definitions and resolved color strings; limited blast radius with tests covering compiled CSS and runtime theme export.

Overview
Fixes Tailwind opacity utilities (e.g. text-primary/80, bg-muted/50) on theme colors that were plain var(--token) values, which Tailwind treated as opaque and ignored the / alpha.

Theme colors now go through a shared withOpacity helper that wraps CSS variables in color-mix(in srgb, … calc(<alpha-value> * 100%), transparent) so Tailwind can substitute opacity when building utilities. Semantic, sidebar, editor, chat, and related tokens are updated; a few editor tokens stay as raw var(...) where opacity modifiers are not needed.

Runtime config (src/tailwind.ts) recursively replaces <alpha-value> with 1 (and the calc form with 100%) on resolved theme colors so CodeMirror/search bar consumers get valid color strings instead of build-time placeholders.

Tests compile sample utility classes and assert color-mix output for opacity modifiers, and that the exported theme has no <alpha-value> left in JSON.

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

Summary by CodeRabbit

• Bug Fixes
  • Fixed Tailwind opacity modifiers for CSS-variable-backed theme colors, ensuring correct blended output for text, backgrounds, borders, rings, and UI/editor/chat tokens.
  • Updated runtime theme color resolution to remove alpha placeholders and always provide concrete alpha values.
• Tests
  • Added checks that compiled Tailwind utilities and resolved theme colors use color-mix(...) with real alpha values (and never the alpha placeholder).
• Documentation
  • Updated the unreleased changelog to document the Tailwind opacity fix for CSS-variable theme colors.

[coderabbitai]

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

Sequence Diagram(s)

sequenceDiagram
participant TailwindConfig
participant TailwindCompiler
participant RuntimeTheme
participant Tests
TailwindConfig->>TailwindCompiler: Provide color-mix expressions with alpha placeholders
TailwindCompiler->>Tests: Compile opacity-modified utilities
TailwindConfig->>RuntimeTheme: Resolve configured theme colors
RuntimeTheme->>Tests: Expose colors with concrete opaque alpha values

Loading

Suggested reviewers:jsourcebot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The config, runtime processing, and tests address Tailwind opacity modifiers for CSS-variable theme colors as requested by #387.
Out of Scope Changes check	✅ Passed	The changelog, config, test, and runtime updates all support the opacity-modifier fix and do not add unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: enabling opacity modifiers for Tailwind theme colors in the web package.

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