Fix: Resolve transparent UI issue in Copilot Light Mode

[taeminlee]

Summary

Fixes the transparent UI issue in Copilot Light Mode. This supersedes #2768, which was auto-closed by the stale bot after 7 days of inactivity and can no longer be reopened. Rebased on the latest main.

The bug is still present in the current release (2.11.1) and on main.

Root cause

The light-mode CSS variables are defined under #shadow-root-container, but the shadow root element's actual id is cl-shadow-root:

// libs/copilot/index.tsx
shadowRootElement.id = 'cl-shadow-root';

So in libs/copilot/src/index.css the base/light variables never match, leaving the Copilot UI transparent in light mode. Dark mode happened to work because it was scoped with a bare .dark selector.

Fix

• Change the base variable selector #shadow-root-container → #cl-shadow-root so light-mode variables actually apply.
• Scope theme variants to the shadow root element: .dark → #cl-shadow-root.dark, and add #cl-shadow-root.light.

This is correct because ThemeProvider adds the light/dark class directly onto the shadow root element:

// libs/copilot/src/ThemeProvider.tsx
shadowContainer.classList.remove('light', 'dark');
shadowContainer.classList.add(theme); // shadowContainer === #cl-shadow-root

Notes

• Supersedes Fix: Resolve transparent UI issue in Copilot Light Mode #2768 (same fix, rebased on latest main).

---

Summary by cubic

Fixes the transparent Copilot UI in Light Mode by applying theme CSS variables to the correct shadow root. Updates selectors so light and dark themes render consistently.

• Bug Fixes
  • Changed base selector from #shadow-root-container to #cl-shadow-root so light-mode variables apply.
  • Scoped theme classes on the shadow root: added #cl-shadow-root.light and #cl-shadow-root.dark.

^{Written for commit 71e25cb. Summary will update on new commits.}

[cubic-dev-ai]

No issues found across 1 file

_{Re-trigger cubic}