feat(a2ui): refactor theme styles by HuJean · Pull Request #2650 · lynx-family/lynx-stack

HuJean · 2026-05-16T02:20:54Z

Summary by CodeRabbit

New Features
- Preview rendering accepts a theme prop for dynamic theming.
Bug Fixes
- Theme initialization accepts uppercase values.
Style
- Refactored theme/styles for improved dark/light consistency.
- Updated loading text, label styling, layout, buttons, and phone preview visuals.
Documentation
- Updated playground agent docs to reflect iframe preview changes.
Chores
- Added build plugin config and devDependency; changeset entry added.
Tests
- Adjusted template-tree test expectation.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-05-16T02:20:58Z

🦋 Changeset detected

Latest commit: e1da1de

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

coderabbitai · 2026-05-16T02:21:18Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 82d77129-de1c-4993-9475-7a832c59ff22

📥 Commits

Reviewing files that changed from the base of the PR and between 642c31e and e1da1de.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (13)

.changeset/many-pandas-breathe.md
packages/genui/a2ui-playground/AGENTS.md
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/lynx-src/a2ui/index.css
packages/genui/a2ui-playground/lynx.config.ts
packages/genui/a2ui-playground/package.json
packages/genui/a2ui-playground/src/components/MobilePreview.tsx
packages/genui/a2ui-playground/src/pages/DemosPage.css
packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
packages/genui/a2ui-playground/src/styles.css
packages/genui/a2ui/src/react/A2UIRenderer.tsx
packages/genui/a2ui/styles/catalog/Text.css
packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts

💤 Files with no reviewable changes (2)

packages/genui/a2ui-playground/src/components/MobilePreview.tsx
packages/genui/a2ui-playground/src/styles.css

✅ Files skipped from review due to trivial changes (5)

.changeset/many-pandas-breathe.md
packages/genui/a2ui-playground/AGENTS.md
packages/react/runtime/test/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts
packages/genui/a2ui/src/react/A2UIRenderer.tsx
packages/genui/a2ui-playground/src/pages/DemosPage.css

🚧 Files skipped from review as they are similar to previous changes (6)

packages/genui/a2ui-playground/package.json
packages/genui/a2ui/styles/catalog/Text.css
packages/genui/a2ui-playground/lynx.config.ts
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
packages/genui/a2ui-playground/lynx-src/a2ui/index.css

📝 Walkthrough

Walkthrough

Separates Luna page theming from A2UI surface theming, expands CSS token overrides (applied at :root), threads theme through the playback iframe and INIT_LYNX_VIEW message, enables CSS inline variables via plugin config, updates UI styling, and adjusts tests/docs and a changeset for a patch release.

Changes

Theme Architecture and Token System

Layer / File(s)	Summary
Theme class separation and layout restructuring `packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx`, `packages/genui/a2ui-playground/lynx-src/a2ui/index.css`	Theme parsing now accepts capitalized `'Dark'`/`'Light'` and normalizes to lowercase. `themeClassName` applies Luna tokens (`luna-dark`/`luna-light`) at page level; `surfaceThemeClassName` applies A2UI tokens (`a2ui-dark`/`a2ui-light`) to rendered surfaces. Inner wrapper switched to `a2ui-root-container`; root/page padding/background reorganized.
CSS token system and overrides `packages/genui/a2ui-playground/lynx-src/a2ui/index.css`	Token override selector expanded to `:root, .a2ui-light, .a2ui-dark`; overridden variable set expanded (border, button, icon, spacing, typography, color, input, image sizing). `.a2ui-loadingText` uses Luna tokens and muted text color.
Component styling with updated tokens `packages/genui/a2ui/src/react/A2UIRenderer.tsx`, `packages/genui/a2ui/styles/catalog/Text.css`	DefaultLoading uses `--a2ui-color-border`, `--a2ui-border-radius`, and `--a2ui-color-text-muted` with inherited text color. `.text-label` now uses `--a2ui-color-text-muted` and removes uppercase transform.
PlaybackPage theme prop integration `packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx`	PlaybackPage adds `theme: 'light'
UI styling refinements `packages/genui/a2ui-playground/src/pages/DemosPage.css`, `packages/genui/a2ui-playground/src/styles.css`	Dark-theme badge background made transparent; `detailBackButton` refactored to use `color-mix` backgrounds and updated shadows/hover states; phone `.phoneScreen` border-radius removed.
Lynx plugin configuration and dependencies `packages/genui/a2ui-playground/lynx.config.ts`, `packages/genui/a2ui-playground/package.json`	Adds `pluginLynxConfig({ enableCSSInlineVariables: true })` to plugins and adds `@lynx-js/config-rsbuild-plugin` as a devDependency.
Documentation and release tracking `packages/genui/a2ui-playground/AGENTS.md`, `.changeset/many-pandas-breathe.md`	AGENTS.md now references `PreviewViewport.tsx` for the embedded render iframe. Changeset declares a patch release for `@lynx-js/a2ui-reactlynx` with note "refactor theme styles".
Tests `packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts`	Updated expected `root.attributes` to `id: 'spread-id'` for the spread-slot case.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

lynx-family/lynx-stack#2613: Overlaps playback iframe/init message logic and theme propagation for the playback preview.
lynx-family/lynx-stack#2054: Related to enabling pluginLynxConfig({ enableCSSInlineVariables: true }) and merging Lynx config via plugins.
lynx-family/lynx-stack#2562: Also modifies lynx.config.ts plugin configuration and related build settings.

Suggested labels

framework:React

Suggested reviewers

PupilTong
gaoachao
fzx2666-fz

Poem

🐇 I hopped through CSS and theme,

Luna lands and A2UI gleam,
Tokens tuned and surfaces bright,
Playback learns the theme at sight,
Patch in place — the preview beams delight.

🚥 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor theme styles' accurately captures the main change across the pull request, which involves restructuring theme handling and CSS styling throughout the a2ui playground and component library.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 p/a2ui-theme

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

codecov · 2026-05-16T02:23:38Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

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 @.changeset/many-pandas-breathe.md:
- Around line 1-5: The changeset for "`@lynx-js/a2ui-reactlynx`" uses a patch
release but the CSS refactor expands token overrides to :root (while still
keeping .a2ui-light and .a2ui-dark), which changes styling scope and can break
consumer cascade behavior; update the changeset to use a minor bump instead of
patch and update the release note to state that token scope was expanded to
:root so consumers relying on previous specificity or un-themed defaults are
aware.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: da36c70c-f52f-4d5b-bfba-b9fa02227cde

📥 Commits

Reviewing files that changed from the base of the PR and between 353b1b7 and 642c31e.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (12)

.changeset/many-pandas-breathe.md
packages/genui/a2ui-playground/AGENTS.md
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/lynx-src/a2ui/index.css
packages/genui/a2ui-playground/lynx.config.ts
packages/genui/a2ui-playground/package.json
packages/genui/a2ui-playground/src/components/MobilePreview.tsx
packages/genui/a2ui-playground/src/pages/DemosPage.css
packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
packages/genui/a2ui-playground/src/styles.css
packages/genui/a2ui/src/react/A2UIRenderer.tsx
packages/genui/a2ui/styles/catalog/Text.css

💤 Files with no reviewable changes (2)

packages/genui/a2ui-playground/src/components/MobilePreview.tsx
packages/genui/a2ui-playground/src/styles.css

codspeed-hq · 2026-05-16T02:41:24Z

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks¹

_{Comparing p/a2ui-theme (e1da1de) with main (9449860)²}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩
No successful run was found on main (353b1b7) during the generation of this report, so 9449860 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

relativeci · 2026-05-16T02:43:26Z

React Example

#8350 Bundle Size — 237.15KiB (0%).

e1da1de(current) vs 353b1b7 main#8301(baseline)

Bundle metrics no changes

	Current #8350	Baseline #8301
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`197`	`197`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.89%`	`44.89%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8350	Baseline #8301
IMG	`145.76KiB`	`145.76KiB`
Other	`91.39KiB`	`91.39KiB`

Bundle analysis report Branch p/a2ui-theme Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-16T02:43:28Z

React External

#1464 Bundle Size — 695.33KiB (0%).

e1da1de(current) vs 353b1b7 main#1415(baseline)

Bundle metrics no changes

	Current #1464	Baseline #1415
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1464	Baseline #1415
Other	`695.33KiB`	`695.33KiB`

Bundle analysis report Branch p/a2ui-theme Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-16T02:43:29Z

React Example with Element Template

#618 Bundle Size — 199.95KiB (0%).

e1da1de(current) vs 353b1b7 main#569(baseline)

Bundle metrics

2 changes

	Current #618	Baseline #569
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`88`(`-3.3%`)	`91`
Duplicate Modules	`27`	`27`
Duplicate Code	`40.08%`(`+0.12%`)	`40.03%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #618	Baseline #569
IMG	`145.76KiB`	`145.76KiB`
Other	`54.19KiB`	`54.19KiB`

Bundle analysis report Branch p/a2ui-theme Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-16T02:43:29Z

React MTF Example

#1482 Bundle Size — 208.1KiB (0%).

e1da1de(current) vs 353b1b7 main#1434(baseline)

Bundle metrics no changes

	Current #1482	Baseline #1434
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`192`	`192`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.4%`	`44.4%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1482	Baseline #1434
IMG	`111.23KiB`	`111.23KiB`
Other	`96.86KiB`	`96.86KiB`

Bundle analysis report Branch p/a2ui-theme Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-16T02:43:29Z

Web Explorer

#9923 Bundle Size — 901.35KiB (0%).

e1da1de(current) vs 353b1b7 main#9874(baseline)

Bundle metrics

2 changes

	Current #9923	Baseline #9874
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`230`(`+0.44%`)	`229`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.21%`(`-0.04%`)	`27.22%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #9923	Baseline #9874
JS	`497.08KiB`	`497.08KiB`
Other	`402.06KiB`	`402.06KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch p/a2ui-theme Project dashboard

^{Generated by RelativeCI Documentation Report issue}

HuJean requested review from PupilTong, Sherry-hue, fzx2666-fz and gaoachao as code owners May 16, 2026 02:20

coderabbitai Bot reviewed May 16, 2026

View reviewed changes

Comment thread .changeset/many-pandas-breathe.md

HuJean enabled auto-merge (squash) May 16, 2026 02:25

feat(a2ui): refactor theme styles

e1da1de

HuJean force-pushed the p/a2ui-theme branch from 642c31e to e1da1de Compare May 17, 2026 06:27

HuJean requested review from Yradex and hzy as code owners May 17, 2026 06:27

coderabbitai Bot added the framework:React label May 17, 2026

Conversation

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

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq Bot commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

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

Uh oh!

React Example

#8350 Bundle Size — 237.15KiB (0%).

Uh oh!

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

Uh oh!

React External

#1464 Bundle Size — 695.33KiB (0%).

Uh oh!

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

Uh oh!

React Example with Element Template

#618 Bundle Size — 199.95KiB (0%).

Uh oh!

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

Uh oh!

React MTF Example

#1482 Bundle Size — 208.1KiB (0%).

Uh oh!

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

Uh oh!

Web Explorer

#9923 Bundle Size — 901.35KiB (0%).

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

HuJean commented May 16, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 16, 2026 •

edited

Loading

coderabbitai Bot commented May 16, 2026 •

edited

Loading

codecov Bot commented May 16, 2026 •

edited

Loading

codspeed-hq Bot commented May 16, 2026 •

edited

Loading

relativeci Bot commented May 16, 2026 •

edited

Loading

relativeci Bot commented May 16, 2026 •

edited

Loading

relativeci Bot commented May 16, 2026 •

edited

Loading

relativeci Bot commented May 16, 2026 •

edited

Loading

relativeci Bot commented May 16, 2026 •

edited

Loading