fix(web): apply opacity modifiers to theme colors by divyanshu-iitian · Pull Request #1485 · sourcebot-dev/sourcebot · GitHub

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.

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

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

Comment @coderabbitai help to get the list of available commands.

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

coderabbitai Bot reviewed Jul 23, 2026

View reviewed changes

Comment thread CHANGELOG.md

cursor Bot reviewed Jul 23, 2026

View reviewed changes

Comment thread packages/web/tailwind.config.ts

divyanshu-iitian added 3 commits July 24, 2026 17:29

fix(web): support opacity modifiers for theme colors

57030dc

docs: add opacity fix to changelog

b1e74c1

fix(web): resolve theme colors for runtime consumers

63cdf1f

divyanshu-iitian force-pushed the divyanshu-iitian/fix-tailwind-color-opacity branch from e4633c6 to 63cdf1f Compare July 24, 2026 12:05

fix(web): apply opacity modifiers to theme colors by divyanshu-iitian · Pull Request #1485 · sourcebot-dev/sourcebot · GitHub

Uh oh!

fix(web): apply opacity modifiers to theme colors - #1485

fix(web): apply opacity modifiers to theme colors#1485
divyanshu-iitian wants to merge 3 commits into
sourcebot-dev:mainfrom
divyanshu-iitian:divyanshu-iitian/fix-tailwind-color-opacity

divyanshu-iitian commented Jul 23, 2026 •
edited by coderabbitai Bot
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 23, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix(web): apply opacity modifiers to theme colors by divyanshu-iitian · Pull Request #1485 · sourcebot-dev/sourcebot · GitHub

Uh oh!

fix(web): apply opacity modifiers to theme colors - #1485

Conversation

divyanshu-iitian commented Jul 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

divyanshu-iitian commented Jul 23, 2026 •
edited by coderabbitai Bot
Loading

coderabbitai Bot commented Jul 23, 2026 •
edited
Loading