fix(diagram): restore embedded overlay background by ckeller42 · Pull Request #2967 · likec4/likec4

ckeller42 · 2026-05-20T11:08:32Z

Summary

Fixes #2965 by scoping bundled diagram CSS variables into the LikeC4View shadow root again. Expanded embedded views now render with the themed overlay background instead of inheriting transparency from the page behind them.

Root cause: commit cfe6cd11c from #2906 stopped rewriting :root / :host token selectors for the shadow root, so embedded shadow styles were no longer rooted on .likec4-shadow-root.

Visual check

Before	After

Before: transparent overlay body, --colors-likec4-overlay-body empty
After: opaque overlay body, --colors-likec4-overlay-body: #fff

Validation

Added the unit regression first and confirmed it failed before the fix.
Added the Playwright regression and confirmed it failed against a pre-fix packed e2e package, then passed after repacking the fixed source.
npx -y pnpm@10.33.3 --filter @likec4/diagram test -- src/shadowroot/styles.css.spec.ts
npx -y pnpm@10.33.3 --filter @likec4/diagram typecheck
npx -y pnpm@10.33.3 --filter @likec4/diagram build
NODE_ENV=production npx -y pnpm@10.33.3 turbo run pack --filter="@likec4/core" --filter="@likec4/icons" --filter="likec4" --force
npx -y pnpm@10.33.3 --dir e2e install --no-lockfile
npx -y pnpm@10.33.3 --dir e2e exec playwright test webcomponent-overlay.spec.ts --reporter=list
npx -y pnpm@10.33.3 --dir e2e exec playwright test static-navigation.spec.ts manual-layout-views.spec.ts --reporter=list
npx -y pnpm@10.33.3 exec dprint check packages/diagram/src/shadowroot/styles.css.ts packages/diagram/src/shadowroot/styles.css.spec.ts e2e/tests/webcomponent-overlay.spec.ts e2e/playwright.config.ts e2e/.gitignore
git diff --check

changeset-bot · 2026-05-20T11:08:36Z

🦋 Changeset detected

Latest commit: d185919

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@likec4/diagram	Patch
@likec4/playground	Patch
@likec4/spa	Patch
likec4	Patch
@likec4/react	Patch
@likec4/vscode-preview	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
@likec4/log	Patch
@likec4/lsp	Patch
@likec4/mcp	Patch
@likec4/tsconfig	Patch
@likec4/vite-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Kiiv · 2026-05-20T12:21:10Z

Thanks for the quick fix and sorry to have misblamed you !! ;)

ckeller42 · 2026-05-20T12:42:52Z

@coderabbitai review

coderabbitai · 2026-05-20T12:42:58Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-05-20T12:45:24Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 75dca86a-eebc-46e8-9e35-8c7970ab1717

📥 Commits

Reviewing files that changed from the base of the PR and between ff39b60 and d185919.

📒 Files selected for processing (3)

e2e/.gitignore
e2e/playwright.config.ts
e2e/tests/webcomponent-overlay.spec.ts

📝 Walkthrough

Walkthrough

Rewrites global theme and top-level body selectors into a .likec4-shadow-root scope, integrates the scoping into the bundled stylesheet, adds unit tests and an e2e Playwright test to validate the overlay background, and includes a changeset for a patch release.

Changes

Shadow Root CSS Scoping Fix

Layer / File(s)	Summary
CSS scoping implementation `packages/diagram/src/shadowroot/styles.css.ts`, `.changeset/fix-embedded-view-overlay-background.md`	Adds `export function scopeStylesToShadowRoot(styles: string)` that rewrites `:where(:root,:host)` and `:root` to `.likec4-shadow-root`, rewrites top-level `body { }` selectors into `.likec4-overlay-body` where appropriate, integrates the function into `useBundledStyleSheet`, and adds the changeset documenting the patch.
Unit tests for scoping `packages/diagram/src/shadowroot/styles.css.spec.ts`	New Vitest spec verifying rewritten selectors and ensuring media queries, grouped selectors, charset, comments, and descendant `body` rules are handled or left unchanged as expected.
E2E test and Playwright config `e2e/tests/webcomponent-overlay.spec.ts`, `e2e/playwright.config.ts`, `e2e/.gitignore`	Adds Playwright test that loads the webcomponent preview, checks that bundled styles include `:where(.likec4-shadow-root)` and not unscoped `:root/:host`, opens the expanded overlay, asserts a non-transparent computed background and that `--colors-likec4-overlay-body` resolves inside the shadow root; updates Playwright webServer command and ensures the test file is not ignored.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

davydkov

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(diagram): restore embedded overlay background' directly summarizes the main change: restoring the overlay background for embedded views.
Description check	✅ Passed	The description provides a comprehensive summary with root cause analysis, visual validation, and detailed validation steps, though it doesn't explicitly check all template items.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#2965` by restoring scoped CSS variables into the shadow root, fixing the transparent background regression in expanded embedded views.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the overlay background issue: CSS scoping logic, tests, e2e configuration, and test files for validating the fix.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch cgk/fix-embedded-overlay-background

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

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 and usage tips.}

ckeller42 · 2026-05-20T13:02:57Z

Thanks for the quick fix and sorry to have misblamed you !! ;)

@Kiiv no worries. Just told the bot to identify the source of the issue so it understands better what happened.

jvandijk · 2026-05-20T13:14:47Z

Nice! I already saw that as well after the issue was closed. Thank you for fixing!

ckeller42 force-pushed the cgk/fix-embedded-overlay-background branch 5 times, most recently from b49667a to dbc82d2 Compare May 20, 2026 12:14

ckeller42 force-pushed the cgk/fix-embedded-overlay-background branch from dbc82d2 to 52babac Compare May 20, 2026 12:27

fix(diagram): restore embedded overlay background

ff39b60

ckeller42 force-pushed the cgk/fix-embedded-overlay-background branch from 52babac to ff39b60 Compare May 20, 2026 12:36

test(e2e): cover embedded overlay shadow styles

d185919

ckeller42 requested a review from davydkov May 20, 2026 14:31

ckeller42 marked this pull request as ready for review May 20, 2026 14:35

davydkov approved these changes May 21, 2026

View reviewed changes

davydkov merged commit c46e33e into main May 21, 2026
18 checks passed

davydkov deleted the cgk/fix-embedded-overlay-background branch May 21, 2026 19:00

likec4-ci Bot mentioned this pull request May 21, 2026

release: v1.57.0 #2937

Merged

coderabbitai Bot mentioned this pull request May 22, 2026

feat: edit view properties (title, description, tags) #2976

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(diagram): restore embedded overlay background#2967

fix(diagram): restore embedded overlay background#2967
davydkov merged 2 commits into
mainfrom
cgk/fix-embedded-overlay-background

ckeller42 commented May 20, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented May 20, 2026 •

edited

Loading

Uh oh!

Kiiv commented May 20, 2026

Uh oh!

ckeller42 commented May 20, 2026

Uh oh!

coderabbitai Bot commented May 20, 2026

Uh oh!

coderabbitai Bot commented May 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

ckeller42 commented May 20, 2026

Uh oh!

jvandijk commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

ckeller42 commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Visual check

Validation

Uh oh!

changeset-bot Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Kiiv commented May 20, 2026

Uh oh!

ckeller42 commented May 20, 2026

Uh oh!

coderabbitai Bot commented May 20, 2026

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

ckeller42 commented May 20, 2026

Uh oh!

jvandijk commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ckeller42 commented May 20, 2026 •

edited

Loading

changeset-bot Bot commented May 20, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading