Skip to content

feat(a2ui): refactor theme#2674

Merged
HuJean merged 1 commit into
mainfrom
p/a2ui-theme-refactor
May 20, 2026
Merged

feat(a2ui): refactor theme#2674
HuJean merged 1 commit into
mainfrom
p/a2ui-theme-refactor

Conversation

@HuJean
Copy link
Copy Markdown
Collaborator

@HuJean HuJean commented May 20, 2026

Summary by CodeRabbit

  • Documentation

    • Added guidance for organizing multi-theme styling tokens and for route-alias behavior so legacy and new routes resolve to the same catalog pages.
  • New Features

    • Added a catalog tab to the playground with unified route aliases; preview now respects selected theme.
    • Renamed a Tabs example label.
  • Chores

    • Added TypeScript compilation to the package build.
  • Style

    • Broad visual and layout refinements across catalog components (buttons, cards, icons, text, forms, modals, grids).

Review Change Stack

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
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

⚠️ No Changeset found

Latest commit: e743c6d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 20, 2026

📝 Walkthrough

Walkthrough

Adds a catalog tab and routing aliases, remaps playground theme overrides to color-focused A2UI tokens, updates many catalog component CSS files to fixed pixel spacing and explicit color tokens, adjusts catalog playground layout and examples, and adds a catalog build step plus maintenance instructions.

Changes

A2UI Playground & Catalog Changes

Layer / File(s) Summary
Build script and catalog instructions
.github/a2ui-catalog.instructions.md, packages/genui/a2ui/package.json
Add build:catalog script and run tsc before catalog extraction; document multi-theme token placement and route alias guidance.
Theme token mapping
packages/genui/a2ui-playground/lynx-src/a2ui/index.css
Replace broad override block with a color-focused mapping to Luna variables; add input error tokens, overlay, icon font-family and icon colors; remove many non-color tokens from this override.
App routing & AIChat theme plumbing
packages/genui/a2ui-playground/src/App.tsx, packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
Add catalog tab option and navigation entry, accept components/catalog hash aliases, add page switch handling; pass theme into AIChat preview and iframe init.
Catalog examples
packages/genui/a2ui-playground/src/catalog/a2ui.ts
Rename Tabs example label from “Detailed” → “Default” and remove the duplicate “Three tabs” example.
Catalog page UI
packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx, packages/genui/a2ui-playground/src/pages/ComponentsPage.css
Introduce catalog hero/split layout, sidebar group/all links, pre-group catalog items by category, route component cards to .../catalog/{name}, and remove breadcrumb rendering.
Demos & Playback page updates
packages/genui/a2ui-playground/src/pages/DemosListPage.tsx, packages/genui/a2ui-playground/src/pages/DemosPage.css, packages/genui/a2ui-playground/src/pages/PlaybackPage.{tsx,css}
New examples header layout and CSS; playback header wrapper/title/subtitle markup and related CSS adjustments.
Renderer tweak
packages/genui/a2ui/src/react/A2UIRenderer.tsx
Set DefaultLoading borderRadius to fixed 4px.
Layout & spacing adjustments
packages/genui/a2ui/styles/catalog/Card.css, .../Column.css, .../Row.css, .../List.css
Switch from spacing variables to fixed pixel gaps/paddings and explicit border/padding in card/column/row/list variants.
Form controls
packages/genui/a2ui/styles/catalog/CheckBox.css, RadioGroup.css, TextField.css
Increase control sizes, add inset shadows, set explicit typography, and standardize error typography and spacing.
Interactive components
packages/genui/a2ui/styles/catalog/Button.css, Tabs.css, Slider.css
Button colors/transitions updated; Tabs use border-bottom active indicator; Slider sizes increased and thumb-dot shadow added.
Typography & visual elements
packages/genui/a2ui/styles/catalog/Text.css, Modal.css, Divider.css, Icon.css, Image.css
Text headings/bodies set to explicit px/line-height; Modal padding/border/shadow updated; Divider opacity adjusted; Icon and Image sizes fixed with explicit token-driven backgrounds/borders/shadows.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested labels

framework:React

Suggested reviewers

  • PupilTong
  • Sherry-hue
  • gaoachao
  • fzx2666-fz

Poem

🐇 I hopped through tokens, tidy and bright,
I nudged the tabs to land just right,
Cards and icons dressed in fixed-size cheer,
Catalog routes and build steps now appear,
A little rabbit claps — the UI's in sight.

🚥 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 'feat(a2ui): refactor theme' accurately summarizes the main change - a comprehensive refactor of A2UI's theme system, replacing theme variables with fixed values across CSS files and updating theme token mappings.
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-refactor

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
Copy link
Copy Markdown

codecov Bot commented May 20, 2026

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!

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 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 `@packages/genui/a2ui/package.json`:
- Line 111: The "build" script in package.json currently chains "build:catalog"
as a shell command which will fail; update the "build" script entry so it
invokes the package script correctly by using the package runner (e.g., change
the invocation to use "pnpm run build:catalog") so that the "build" script runs
"tsc --build" then runs the "build:catalog" script via pnpm rather than
expecting a system executable.

In `@packages/genui/a2ui/styles/catalog/Button.css`:
- Around line 25-27: The .button.ui-active rule currently forces
background-color: var(--a2ui-color-secondary-hover) for all buttons; restrict
this so primary buttons keep their primary pressed color by scoping the rule to
non-primary buttons (e.g., change the selector from .button.ui-active to
.button:not(.primary).ui-active) and add a separate .button.primary.ui-active
rule that preserves or adjusts the primary button's active background (using the
primary hover variable) instead of inheriting the secondary hover color.

In `@packages/genui/a2ui/styles/catalog/Modal.css`:
- Line 20: Replace the hardcoded backdrop color in Modal.css (background-color:
rgba(15, 23, 42, 0.28)) with a theme token so themes can override it; use the
existing token var(--a2ui-color-overlay) or introduce a new token like
--a2ui-modal-backdrop and reference that here (background-color:
var(--a2ui-modal-backdrop)); if you add a new token, also add default values in
the theme/variables place where other --a2ui- tokens are defined and update any
light/dark theme overrides to set the new token.

In `@packages/genui/a2ui/styles/catalog/RadioGroup.css`:
- Around line 72-77: The `.label` rule is currently global and should be scoped
to the radio group component to avoid leaking styles; update the selector in
RadioGroup.css to target the radio-group root (e.g., prefix with the component
root like `.a2ui-radio-group .label` or `.radio-group .label`) so only labels
inside the radio group are affected, and adjust any related markup/class names
in the RadioGroup component if needed to match the new scoped selector.

In `@packages/genui/a2ui/styles/catalog/Tabs.css`:
- Around line 35-36: Replace the foreground token used by .tabs-header-active:
it currently sets color to --a2ui-color-on-secondary while the header background
is transparent; change that to use --a2ui-color-on-surface instead. Update the
CSS rule for .tabs-header-active to reference --a2ui-color-on-surface (and leave
border-bottom-color using --a2ui-color-primary unchanged) so the text color
matches transparent/surface contexts per the design system.
🪄 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: 847d499f-4155-4b94-b5fe-f9ad26b8f77b

📥 Commits

Reviewing files that changed from the base of the PR and between bf08205 and 4da3244.

📒 Files selected for processing (21)
  • .github/a2ui-catalog.instructions.md
  • packages/genui/a2ui-playground/lynx-src/a2ui/index.css
  • packages/genui/a2ui-playground/src/catalog/a2ui.ts
  • packages/genui/a2ui/package.json
  • packages/genui/a2ui/src/react/A2UIRenderer.tsx
  • packages/genui/a2ui/styles/catalog/Button.css
  • packages/genui/a2ui/styles/catalog/Card.css
  • packages/genui/a2ui/styles/catalog/CheckBox.css
  • packages/genui/a2ui/styles/catalog/Column.css
  • packages/genui/a2ui/styles/catalog/Divider.css
  • packages/genui/a2ui/styles/catalog/Icon.css
  • packages/genui/a2ui/styles/catalog/Image.css
  • packages/genui/a2ui/styles/catalog/List.css
  • packages/genui/a2ui/styles/catalog/Modal.css
  • packages/genui/a2ui/styles/catalog/RadioGroup.css
  • packages/genui/a2ui/styles/catalog/Row.css
  • packages/genui/a2ui/styles/catalog/Slider.css
  • packages/genui/a2ui/styles/catalog/Tabs.css
  • packages/genui/a2ui/styles/catalog/Text.css
  • packages/genui/a2ui/styles/catalog/TextField.css
  • packages/genui/a2ui/styles/theme.css

Comment thread packages/genui/a2ui/package.json Outdated
Comment thread packages/genui/a2ui/styles/catalog/Button.css
Comment thread packages/genui/a2ui/styles/catalog/Modal.css
Comment thread packages/genui/a2ui/styles/catalog/RadioGroup.css
Comment thread packages/genui/a2ui/styles/catalog/Tabs.css
@HuJean HuJean force-pushed the p/a2ui-theme-refactor branch from 4da3244 to 4201b68 Compare May 20, 2026 06:17
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@packages/genui/a2ui-playground/src/pages/DemosPage.css`:
- Around line 22-27: The .examplePageHeader rule uses width: 100% plus padding
which can cause horizontal overflow; update the .examplePageHeader CSS to avoid
overflow by applying box-sizing: border-box to that selector (or remove the
explicit width: 100%) so the padding is included in the element’s width; modify
the .examplePageHeader style accordingly.

In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx`:
- Around line 322-330: The scenario <select> (className
'playbackScenarioSelect', value scenarioId, onChange handleSelectScenario) lacks
a programmatic label; add an accessible name by either adding an explicit
aria-label (e.g. aria-label="Scenario") on the <select> or by creating a <label>
element tied to the <select> via id/htmlFor and using that visible label text,
ensuring the selector for ALL_SCENARIOS options remains unchanged and the change
is applied where the select is rendered.
🪄 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: 2a19de0e-b040-424d-a753-c0eabb1e56ff

📥 Commits

Reviewing files that changed from the base of the PR and between 4da3244 and 4201b68.

📒 Files selected for processing (28)
  • .github/a2ui-catalog.instructions.md
  • packages/genui/a2ui-playground/lynx-src/a2ui/index.css
  • packages/genui/a2ui-playground/src/App.tsx
  • packages/genui/a2ui-playground/src/catalog/a2ui.ts
  • packages/genui/a2ui-playground/src/pages/ComponentsPage.css
  • packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
  • packages/genui/a2ui-playground/src/pages/DemosListPage.tsx
  • packages/genui/a2ui-playground/src/pages/DemosPage.css
  • packages/genui/a2ui-playground/src/pages/PlaybackPage.css
  • packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
  • packages/genui/a2ui/package.json
  • packages/genui/a2ui/src/react/A2UIRenderer.tsx
  • packages/genui/a2ui/styles/catalog/Button.css
  • packages/genui/a2ui/styles/catalog/Card.css
  • packages/genui/a2ui/styles/catalog/CheckBox.css
  • packages/genui/a2ui/styles/catalog/Column.css
  • packages/genui/a2ui/styles/catalog/Divider.css
  • packages/genui/a2ui/styles/catalog/Icon.css
  • packages/genui/a2ui/styles/catalog/Image.css
  • packages/genui/a2ui/styles/catalog/List.css
  • packages/genui/a2ui/styles/catalog/Modal.css
  • packages/genui/a2ui/styles/catalog/RadioGroup.css
  • packages/genui/a2ui/styles/catalog/Row.css
  • packages/genui/a2ui/styles/catalog/Slider.css
  • packages/genui/a2ui/styles/catalog/Tabs.css
  • packages/genui/a2ui/styles/catalog/Text.css
  • packages/genui/a2ui/styles/catalog/TextField.css
  • packages/genui/a2ui/styles/theme.css
✅ Files skipped from review due to trivial changes (4)
  • packages/genui/a2ui-playground/src/pages/DemosListPage.tsx
  • packages/genui/a2ui/styles/catalog/List.css
  • packages/genui/a2ui/src/react/A2UIRenderer.tsx
  • .github/a2ui-catalog.instructions.md

Comment thread packages/genui/a2ui-playground/src/pages/DemosPage.css
Comment thread packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
@HuJean HuJean force-pushed the p/a2ui-theme-refactor branch from 4201b68 to e743c6d Compare May 20, 2026 06:28
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx (1)

564-592: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Theme toggle does not refresh an already-mounted preview iframe.

theme is included in initData, but preview updates are only pushed when publishPreviewMessages is invoked by message generation/load paths. Changing theme alone can leave the existing preview in the previous theme.

💡 Proposed fix
   const publishPreviewMessages = useCallback(
     (nextMessages: unknown[]) => {
       if (nextMessages.length === 0) return;
@@
     [baseUrl, protocol, theme],
   );

+  useEffect(() => {
+    if (latestPreviewMessagesRef.current.length === 0) return;
+    publishPreviewMessages(latestPreviewMessagesRef.current);
+  }, [theme, publishPreviewMessages]);
+
   const handlePreviewLoad = useCallback(() => {
     publishPreviewMessages(latestPreviewMessagesRef.current);
   }, [publishPreviewMessages]);
🤖 Prompt for 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.

In `@packages/genui/a2ui-playground/src/pages/AIChatPage.tsx` around lines 564 -
592, The preview iframe doesn't update when only theme changes; add a useEffect
that watches theme (and protocol/baseUrl if needed) and, when an existing
preview is mounted (check renderUrl/current and
latestPreviewMessagesRef.current), build the same initData used in
publishPreviewMessages (use protocol, DEFAULT_A2UI_DEMO_URL, messages from
latestPreviewMessagesRef.current, theme, instant: true, liveAction:
!!threadIdRef.current) and postMessage { type: 'INIT_LYNX_VIEW', data: initData
} to previewFrameRef.current.contentWindow so the already-mounted iframe
refreshes its theme without needing new messages or remounting.
♻️ Duplicate comments (2)
packages/genui/a2ui/styles/catalog/Button.css (1)

25-27: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Preserve primary pressed color in the shared active rule.

Line 26 still applies a secondary active background to all buttons, so primary buttons can lose their primary pressed state.

Proposed minimal fix
-.button.ui-active {
-  background-color: var(--a2ui-color-secondary-hover);
+.button:not(.button-primary).ui-active {
+  background-color: var(--a2ui-color-secondary-hover);
   transform: translateY(1px);
 }
+
+.button-primary.ui-active {
+  background-color: var(--a2ui-color-primary-hover);
+}
🤖 Prompt for 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.

In `@packages/genui/a2ui/styles/catalog/Button.css` around lines 25 - 27, The
shared rule .button.ui-active currently forces a secondary active background for
all buttons; change the stylesheet so the generic .button.ui-active only handles
shared properties (e.g., transform) and move or override background-color into
specific selectors like .button.ui-secondary.ui-active (set the secondary hover
color) and .button.ui-primary.ui-active (set the primary pressed color) so
primary buttons keep their primary pressed state while secondary buttons keep
the secondary color.
packages/genui/a2ui/styles/catalog/Tabs.css (1)

34-36: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use a surface-context foreground token for active tab text.

Line 35 uses --a2ui-color-on-secondary even though the tab header is transparent; this should use a surface-context foreground token.

Proposed minimal fix
 .tabs-header-active {
-  color: var(--a2ui-color-on-secondary);
+  color: var(--a2ui-color-on-surface);
   border-bottom-color: var(--a2ui-color-primary);
 }
🤖 Prompt for 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.

In `@packages/genui/a2ui/styles/catalog/Tabs.css` around lines 34 - 36, The active
tab text is using the secondary-context token; update the .tabs-header-active
rule to use the surface-context foreground token instead: replace the color
value var(--a2ui-color-on-secondary) in the .tabs-header-active selector with
the appropriate surface foreground token (e.g. var(--a2ui-color-on-surface) or
your project's surface-context token) so the transparent tab header uses the
correct foreground token for surface context.
🧹 Nitpick comments (2)
packages/genui/a2ui-playground/src/pages/ComponentsPage.css (1)

145-158: ⚡ Quick win

Avoid transition: all on component cards.

Use property-specific transitions (border-color, box-shadow, optionally transform) to avoid unintended animated properties and reduce paint churn.

Proposed diff
 .compGridCard {
   display: block;
   padding: 16px;
   border: 1px solid var(--geist-border);
   border-radius: var(--geist-radius-lg);
   background: var(--geist-background);
   text-decoration: none;
-  transition: all var(--geist-transition);
+  transition:
+    border-color var(--geist-transition),
+    box-shadow var(--geist-transition);
 }
🤖 Prompt for 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.

In `@packages/genui/a2ui-playground/src/pages/ComponentsPage.css` around lines 145
- 158, The .compGridCard rule uses a broad "transition: all" which causes
unnecessary repaints; replace it with property-specific transitions such as
"transition: border-color var(--geist-transition), box-shadow
var(--geist-transition)" (and optionally include "transform
var(--geist-transition)" if you plan to animate transforms) so only
border-color, box-shadow (and transform if needed) are animated; update the
.compGridCard CSS declaration and leave the .compGridCard:hover rules unchanged
so hover effects animate only the intended properties.
packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx (1)

223-230: ⚡ Quick win

Deduplicate category grouping logic.

groupedByCategory is built twice with identical logic. Extract one helper (or compute once in parent and pass down) to prevent drift between sidebar and grid behavior.

Proposed direction
+function buildGroupedByCategory(): Map<string, ComponentDoc[]> {
+  const map = new Map<string, ComponentDoc[]>();
+  for (const cat of CATEGORIES) {
+    const items = COMPONENT_CATALOG.filter((c) => c.category === cat.id);
+    if (items.length > 0) map.set(cat.id, items);
+  }
+  return map;
+}
...
-  const groupedByCategory = useMemo(() => { ... }, []);
+  const groupedByCategory = useMemo(buildGroupedByCategory, []);

Also applies to: 281-288

🤖 Prompt for 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.

In `@packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx` around lines 223
- 230, The category-grouping logic is duplicated (two instances of the
groupedByCategory useMemo); extract a single helper function (e.g.,
buildGroupedByCategory) that accepts COMPONENT_CATALOG and CATEGORIES and
returns a Map<string, ComponentDoc[]>, then replace both useMemo blocks (the
groupedByCategory occurrences) to call that helper (or compute it once in the
parent and pass it down) so sidebar and grid share the same source of truth.
🤖 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.

Outside diff comments:
In `@packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`:
- Around line 564-592: The preview iframe doesn't update when only theme
changes; add a useEffect that watches theme (and protocol/baseUrl if needed)
and, when an existing preview is mounted (check renderUrl/current and
latestPreviewMessagesRef.current), build the same initData used in
publishPreviewMessages (use protocol, DEFAULT_A2UI_DEMO_URL, messages from
latestPreviewMessagesRef.current, theme, instant: true, liveAction:
!!threadIdRef.current) and postMessage { type: 'INIT_LYNX_VIEW', data: initData
} to previewFrameRef.current.contentWindow so the already-mounted iframe
refreshes its theme without needing new messages or remounting.

---

Duplicate comments:
In `@packages/genui/a2ui/styles/catalog/Button.css`:
- Around line 25-27: The shared rule .button.ui-active currently forces a
secondary active background for all buttons; change the stylesheet so the
generic .button.ui-active only handles shared properties (e.g., transform) and
move or override background-color into specific selectors like
.button.ui-secondary.ui-active (set the secondary hover color) and
.button.ui-primary.ui-active (set the primary pressed color) so primary buttons
keep their primary pressed state while secondary buttons keep the secondary
color.

In `@packages/genui/a2ui/styles/catalog/Tabs.css`:
- Around line 34-36: The active tab text is using the secondary-context token;
update the .tabs-header-active rule to use the surface-context foreground token
instead: replace the color value var(--a2ui-color-on-secondary) in the
.tabs-header-active selector with the appropriate surface foreground token (e.g.
var(--a2ui-color-on-surface) or your project's surface-context token) so the
transparent tab header uses the correct foreground token for surface context.

---

Nitpick comments:
In `@packages/genui/a2ui-playground/src/pages/ComponentsPage.css`:
- Around line 145-158: The .compGridCard rule uses a broad "transition: all"
which causes unnecessary repaints; replace it with property-specific transitions
such as "transition: border-color var(--geist-transition), box-shadow
var(--geist-transition)" (and optionally include "transform
var(--geist-transition)" if you plan to animate transforms) so only
border-color, box-shadow (and transform if needed) are animated; update the
.compGridCard CSS declaration and leave the .compGridCard:hover rules unchanged
so hover effects animate only the intended properties.

In `@packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx`:
- Around line 223-230: The category-grouping logic is duplicated (two instances
of the groupedByCategory useMemo); extract a single helper function (e.g.,
buildGroupedByCategory) that accepts COMPONENT_CATALOG and CATEGORIES and
returns a Map<string, ComponentDoc[]>, then replace both useMemo blocks (the
groupedByCategory occurrences) to call that helper (or compute it once in the
parent and pass it down) so sidebar and grid share the same source of truth.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 26957dfa-515f-4366-ab76-36114576b017

📥 Commits

Reviewing files that changed from the base of the PR and between 4201b68 and e743c6d.

📒 Files selected for processing (29)
  • .github/a2ui-catalog.instructions.md
  • packages/genui/a2ui-playground/lynx-src/a2ui/index.css
  • packages/genui/a2ui-playground/src/App.tsx
  • packages/genui/a2ui-playground/src/catalog/a2ui.ts
  • packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
  • packages/genui/a2ui-playground/src/pages/ComponentsPage.css
  • packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
  • packages/genui/a2ui-playground/src/pages/DemosListPage.tsx
  • packages/genui/a2ui-playground/src/pages/DemosPage.css
  • packages/genui/a2ui-playground/src/pages/PlaybackPage.css
  • packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
  • packages/genui/a2ui/package.json
  • packages/genui/a2ui/src/react/A2UIRenderer.tsx
  • packages/genui/a2ui/styles/catalog/Button.css
  • packages/genui/a2ui/styles/catalog/Card.css
  • packages/genui/a2ui/styles/catalog/CheckBox.css
  • packages/genui/a2ui/styles/catalog/Column.css
  • packages/genui/a2ui/styles/catalog/Divider.css
  • packages/genui/a2ui/styles/catalog/Icon.css
  • packages/genui/a2ui/styles/catalog/Image.css
  • packages/genui/a2ui/styles/catalog/List.css
  • packages/genui/a2ui/styles/catalog/Modal.css
  • packages/genui/a2ui/styles/catalog/RadioGroup.css
  • packages/genui/a2ui/styles/catalog/Row.css
  • packages/genui/a2ui/styles/catalog/Slider.css
  • packages/genui/a2ui/styles/catalog/Tabs.css
  • packages/genui/a2ui/styles/catalog/Text.css
  • packages/genui/a2ui/styles/catalog/TextField.css
  • packages/genui/a2ui/styles/theme.css
✅ Files skipped from review due to trivial changes (7)
  • packages/genui/a2ui/src/react/A2UIRenderer.tsx
  • .github/a2ui-catalog.instructions.md
  • packages/genui/a2ui/styles/catalog/Divider.css
  • packages/genui/a2ui/styles/catalog/Row.css
  • packages/genui/a2ui-playground/src/pages/PlaybackPage.css
  • packages/genui/a2ui-playground/src/catalog/a2ui.ts
  • packages/genui/a2ui/styles/catalog/Modal.css

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented May 20, 2026

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks1


Comparing p/a2ui-theme-refactor (e743c6d) with main (3901c96)

Open in CodSpeed

Footnotes

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

@relativeci
Copy link
Copy Markdown

relativeci Bot commented May 20, 2026

React External

#1606 Bundle Size — 697.9KiB (0%).

e743c6d(current) vs 3901c96 main#1601(baseline)

Bundle metrics  no changes
                 Current
#1606
     Baseline
#1601
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 3 3
No change  Modules 17 17
No change  Duplicate Modules 5 5
No change  Duplicate Code 8.59% 8.59%
No change  Packages 0 0
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#1606
     Baseline
#1601
No change  Other 697.9KiB 697.9KiB

Bundle analysis reportBranch p/a2ui-theme-refactorProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link
Copy Markdown

relativeci Bot commented May 20, 2026

React MTF Example

#1623 Bundle Size — 208.69KiB (0%).

e743c6d(current) vs 3901c96 main#1619(baseline)

Bundle metrics  no changes
                 Current
#1623
     Baseline
#1619
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 3 3
No change  Modules 195 195
No change  Duplicate Modules 78 78
No change  Duplicate Code 44.26% 44.26%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#1623
     Baseline
#1619
No change  IMG 111.23KiB 111.23KiB
No change  Other 97.46KiB 97.46KiB

Bundle analysis reportBranch p/a2ui-theme-refactorProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link
Copy Markdown

relativeci Bot commented May 20, 2026

React Example with Element Template

#760 Bundle Size — 204.53KiB (0%).

e743c6d(current) vs 3901c96 main#755(baseline)

Bundle metrics  no changes
                 Current
#760
     Baseline
#755
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 99 99
No change  Duplicate Modules 31 31
No change  Duplicate Code 39.59% 39.59%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#760
     Baseline
#755
No change  IMG 145.76KiB 145.76KiB
No change  Other 58.78KiB 58.78KiB

Bundle analysis reportBranch p/a2ui-theme-refactorProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link
Copy Markdown

relativeci Bot commented May 20, 2026

React Example

#8490 Bundle Size — 237.74KiB (0%).

e743c6d(current) vs 3901c96 main#8486(baseline)

Bundle metrics  no changes
                 Current
#8490
     Baseline
#8486
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 200 200
No change  Duplicate Modules 81 81
No change  Duplicate Code 44.76% 44.76%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#8490
     Baseline
#8486
No change  IMG 145.76KiB 145.76KiB
No change  Other 91.98KiB 91.98KiB

Bundle analysis reportBranch p/a2ui-theme-refactorProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link
Copy Markdown

relativeci Bot commented May 20, 2026

Web Explorer

#10065 Bundle Size — 903.53KiB (0%).

e743c6d(current) vs 3901c96 main#10060(baseline)

Bundle metrics  no changes
                 Current
#10065
     Baseline
#10060
No change  Initial JS 45.06KiB 45.06KiB
No change  Initial CSS 2.22KiB 2.22KiB
No change  Cache Invalidation 0% 0%
No change  Chunks 9 9
No change  Assets 11 11
No change  Modules 231 231
No change  Duplicate Modules 11 11
No change  Duplicate Code 27.12% 27.12%
No change  Packages 10 10
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#10065
     Baseline
#10060
No change  JS 499.15KiB 499.15KiB
No change  Other 402.16KiB 402.16KiB
No change  CSS 2.22KiB 2.22KiB

Bundle analysis reportBranch p/a2ui-theme-refactorProject dashboard


Generated by RelativeCIDocumentationReport issue

@HuJean HuJean merged commit b42a7dc into main May 20, 2026
113 of 117 checks passed
@HuJean HuJean deleted the p/a2ui-theme-refactor branch May 20, 2026 07:49
@coderabbitai coderabbitai Bot mentioned this pull request May 21, 2026
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants