fix(apollo-core): scope base design tokens to :root, :host for shadow DOM [MST-12229] by david-rios-uipath · Pull Request #921 · UiPath/apollo-ui

david-rios-uipath · 2026-07-16T14:40:29Z

Problem

The generated variables.css (raw color palette, font families like --font-mono: inconsolata / --font-title / --font-normal, --radius, …) is scoped to a bare :root {} block. :root only ever matches the document element (<html>); a shadow root is a DocumentFragment, not an element, so none of these base tokens apply inside a shadow root.

Scope: only font tokens are affected.

Shadow-DOM canvas consumers lose --font-mono/--font-title/--font-normal and fall back to Tailwind's generic ui-monospace stack (and get no title/body font at all).
Semantic colors are unaffected because they live in class-scoped body.light / .apollo-design.light blocks that match the theme-class wrapper — only the bare-:root base tokens fall through the gap.

Fix

variables.css is emitted by Style Dictionary's built-in css/variables format, which hardcodes :root { (SD v2.8.3 has no selector option). Add a small css/variables-shadow-host format that delegates to the built-in formatter and rewrites only the selector to :root, :host, then point variables.css at it.

:root still covers light-DOM consumers; :host matches any shadow host that adopts or injects this sheet, so the base tokens apply on the host and inherit through the entire shadow tree — including portaled content — with no .apollo-design wrapper required. In the light DOM :host simply matches nothing.

Demo

Before

After

ap-chat

Screen.Recording.2026-07-16.at.5.59.48.PM.mov

Verification

Generated token body is byte-identical; only the selector changes (:root { → :root, :host {).
Generated source: regenerated variables.css diff is exactly one line — :root { → :root, :host {.
Compiled artifact: rebuilt apollo-react through the full chain — the base-token block (palette + --font-mono:inconsolata + --font-title/--font-normal) is now :root, :host {…}.
Live shadow root: confirmed in a real browser that --font-mono resolves to inconsolata inside the shadow root (traceview WC and ap-chat) — with no wrapper and no runtime selector rewriting — while semantic --color-background/--color-foreground resolve on both the container and the portal.

Downstream, this lets shadow-DOM consumers drop client-side :root → :host rewrite workarounds. ap-chat now adopts variables.css/theme-variables.css raw (commits on this branch).

Alternative considered: :root, .apollo-design, scoping to the documented Pattern-B wrapper class (and working in a light-DOM subtree without touching :root). Chose :root, :host because it needs no wrapper, covers portaled/shadow content mounted outside a wrapper, and lets :host-based consumers (ap-chat) drop their runtime selector rewrites.

github-actions · 2026-07-16T14:40:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 16, 2026, 07:26:22 PM
apollo-docs	🟢 Ready	Preview, Logs	Jul 16, 2026, 07:26:22 PM
apollo-landing	🟢 Ready	Preview, Logs	Jul 16, 2026, 07:26:22 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 16, 2026, 07:26:22 PM

github-actions · 2026-07-16T14:41:19Z

Dependency License Review

✅ 1950 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

Copilot

Pull request overview

Updates Apollo Core’s generated base token CSS (variables.css) so it applies inside Shadow DOM by emitting the selector as :root, :host (instead of only :root), ensuring base tokens like font families/radius/palette inherit correctly in shadow-root consumers.

Changes:

Switch variables.css output to a new custom Style Dictionary format (css/variables-host).
Register css/variables-host format that delegates to css/variables and rewrites the selector to :root, :host.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/apollo-core/src/tokens/config.js	Points `variables.css` generation to the new `css/variables-host` format.
packages/apollo-core/build-tokens.js	Adds a custom Style Dictionary format that rewrites the selector to support Shadow DOM hosts.

github-actions · 2026-07-16T14:46:20Z

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
`@uipath/apollo-core`	9.0%	— (25 untracked)	43.82 MB	57.31 MB	+34 B
`@uipath/apollo-react`	35.7%	—	7.35 MB	27.99 MB	+24 B
`@uipath/apollo-wind`	40.3%	—	395.1 KB	2.57 MB	−9 B
`@uipath/ap-chat`	85.8%	100.0% (4/4)	43.43 MB	55.91 MB	−30 B

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

github-actions · 2026-07-16T15:49:36Z

📦 Dev Packages

🧹 Dev packages cleaned up (label removed).

Dev package publishing is disabled. Add the dev-packages label to re-enable.

Last updated: Jul 16, 2026, 03:07:25 PM PT

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

web-packages/ap-chat/src/ap-chat-element.ts:306

Theme propagation was extended to the Shadow DOM portal container by adding the theme class to portalContainer and updating it on theme changes. The existing unit tests assert theme updates for the React container but don’t assert that the portal container also tracks the theme, which is now required for semantic tokens/popovers to be styled correctly.

    // Create dedicated portal container for tooltips/popovers at Shadow DOM root
    // This prevents clipping in embedded mode while being a real HTMLElement for MUI.
    this.portalContainer = document.createElement('div');
    this.portalContainer.className = `portal-container ${this._theme || 'light'}`;
    this.portalContainer.style.position = 'fixed';
    this.portalContainer.style.top = '0';
    this.portalContainer.style.left = '0';
    this.portalContainer.style.width = '100%';
    this.portalContainer.style.height = '100%';
    this.portalContainer.style.zIndex = '9999';
    this.shadowRoot.appendChild(this.portalContainer);

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

…or shadow DOM The generated variables.css holds the theme-invariant base tokens (raw color palette, font families, radius, …). Style Dictionary's built-in css/variables format scopes them to `:root {}` only, which never matches inside a shadow root (`:root` matches the document element; a shadow root is a DocumentFragment). Shadow-DOM canvas consumers (e.g. web-component embeds) therefore lose --font-mono/--font-title/--font-normal and the raw palette, falling back to Tailwind's generic ui-monospace stack. Add a css/variables-apollo-design format that delegates to the built-in formatter and rewrites only the selector to `:root, .apollo-design`, so the base tokens also apply inside a shadow root via the `apollo-design` theme wrapper Pattern-B consumers add — the same hook theme-variables.css already uses for semantic colors. Generated token body is byte-identical; only the selector changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/tokens/build.js was a stale duplicate of the root build-tokens.js (the script `build:tokens` actually runs) — superseded and never deleted, referenced by nothing but a biome ignore entry. It extends the same config.js, so after adding the css/variables-apollo-design format it would throw an unknown-format error if run directly, while drifting from the real generator. Delete it (and its biome ignore line) to remove the duplication. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Emit variables.css base tokens (palette, fonts, radius) under `:root, :host` instead of `:root, .apollo-design`. `:host` matches any shadow host that adopts or injects the sheet, so base tokens resolve inside a shadow root — and inherit through the whole shadow tree, including portaled content — without requiring an `.apollo-design` wrapper. Light DOM is unaffected: `:root` still applies and `:host` matches nothing there. This fixes shadow-DOM consumers that self-inject the canvas sheet (traceview's web component, ap-chat) losing apollo fonts and falling back to Tailwind's `ui-monospace`, and lets `:host`-based consumers drop their runtime `:root`→`:host` selector rewrites. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Now that apollo-core scopes base tokens to `:root, :host` (the canvas shadow-DOM fix), ap-chat no longer rewrites `:root`→`:host` or `body.<theme>`→`:host(.<theme>) *` at runtime. It adopts variables.css and theme-variables.css raw: - base tokens (fonts/palette/radius) resolve via `:host` on the element and inherit through the whole shadow tree, including the portal; - semantic theme tokens resolve via apollo's existing `:where(.<theme>:not(.react-flow))`, which now matches the portal container too — it gains the theme class alongside the React container. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- ap-chat: add a test that the portal container carries the theme class initially and keeps it in sync when the theme changes, guarding the :where(.light) semantic-token activation the portal subtree relies on. - apollo-core: throw in css/variables-shadow-host if the ':root {' selector isn't found, so a future Style Dictionary reformat can't silently no-op and regenerate variables.css back to bare :root, reintroducing the shadow-DOM token-scoping bug. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.

Copilot AI review requested due to automatic review settings July 16, 2026 14:40

github-actions Bot added pkg:apollo-core size:S 10-29 changed lines. labels Jul 16, 2026

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 14:41 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js Outdated

Copilot AI review requested due to automatic review settings July 16, 2026 14:58

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 14:59 View session

github-actions Bot added size:M 30-99 changed lines. and removed size:S 10-29 changed lines. labels Jul 16, 2026

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js

Copilot AI review requested due to automatic review settings July 16, 2026 15:38

david-rios-uipath force-pushed the fix/canvas-root-host-shadow-dom branch from 02431ec to efbd6bf Compare July 16, 2026 15:38

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 15:39 View session

david-rios-uipath changed the title ~~fix(apollo-core): scope base design tokens to :root, :host for shadow DOM~~ fix(apollo-core): scope base design tokens to :root, .apollo-design for shadow DOM Jul 16, 2026

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js Outdated

david-rios-uipath commented Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/src/tokens/build.js

david-rios-uipath added the dev-packages Adds dev package publishing on pushes to this PR label Jul 16, 2026

Copilot AI review requested due to automatic review settings July 16, 2026 15:49

david-rios-uipath force-pushed the fix/canvas-root-host-shadow-dom branch from efbd6bf to d5c9eba Compare July 16, 2026 15:49

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 15:50 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

david-rios-uipath marked this pull request as ready for review July 16, 2026 16:04

david-rios-uipath changed the title ~~fix(apollo-core): scope base design tokens to :root, .apollo-design for shadow DOM~~ fix(apollo-core): scope base design tokens to :root, :host for shadow DOM [MST-12229] Jul 16, 2026

CalinaCristian reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js

Copilot AI review requested due to automatic review settings July 16, 2026 21:48

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 21:49 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js Outdated

Copilot AI review requested due to automatic review settings July 16, 2026 22:01

github-actions Bot added pkg:ap-chat size:L 100-499 changed lines. and removed size:M 30-99 changed lines. labels Jul 16, 2026

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 22:02 View session

david-rios-uipath removed the dev-packages Adds dev package publishing on pushes to this PR label Jul 16, 2026

github-actions Bot added size:M 30-99 changed lines. and removed size:L 100-499 changed lines. labels Jul 16, 2026

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread web-packages/ap-chat/src/ap-chat-element.ts

Comment thread packages/apollo-core/build-tokens.js Outdated

Copilot AI review requested due to automatic review settings July 16, 2026 22:05

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 22:06 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread packages/apollo-core/build-tokens.js

Comment thread packages/apollo-core/build-tokens.js

Copilot AI review requested due to automatic review settings July 16, 2026 22:51

Copilot started reviewing on behalf of david-rios-uipath July 16, 2026 22:52 View session

github-actions Bot added size:L 100-499 changed lines. and removed size:M 30-99 changed lines. labels Jul 16, 2026

Copilot AI reviewed Jul 16, 2026

david-rios-uipath and others added 6 commits July 16, 2026 22:20

docs(apollo-core): trim the :root, :host formatter comment

9b3ed7e

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings July 17, 2026 02:20

david-rios-uipath force-pushed the fix/canvas-root-host-shadow-dom branch from ab7f4a5 to 54ad6c8 Compare July 17, 2026 02:20

Copilot started reviewing on behalf of david-rios-uipath July 17, 2026 02:21 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

david-rios-uipath requested a review from CalinaCristian July 18, 2026 01:33

Uh oh!

Conversation

david-rios-uipath commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Fix

Demo

Before

After

ap-chat

Verification

Uh oh!

github-actions Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 16, 2026

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

github-actions Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage + size by package

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Dev Packages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

david-rios-uipath commented Jul 16, 2026 •

edited

Loading

github-actions Bot commented Jul 16, 2026 •

edited

Loading

github-actions Bot commented Jul 16, 2026 •

edited

Loading

github-actions Bot commented Jul 16, 2026 •

edited

Loading