Skip to content

[RFC] Core v0.9 styling#1057

Merged
ditman merged 3 commits intogoogle:mainfrom
ditman:core-styling
Apr 10, 2026
Merged

[RFC] Core v0.9 styling#1057
ditman merged 3 commits intogoogle:mainfrom
ditman:core-styling

Conversation

@ditman
Copy link
Copy Markdown
Collaborator

@ditman ditman commented Apr 2, 2026

Description

This is some initial work for the CSS styling of the v0.9 of the renderers. On this version, only the "Button" component is styled.

The idea is to give global CSS variables that users can control in a more or less granular fashion, and some widget-defined variables.

The only widget I've really touched so far is the Lit Button, as a PoC. It is eyeball tested in the v0.9 gallery sample app for now.

Pre-launch Checklist

If you need help, consider asking for advice on the discussion board.

Comment thread renderers/lit/src/v0_9/catalogs/minimal/components/Button.ts
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces a default theme system for A2UI, including a new theme injection utility and CSS variable definitions. The Button and Text components across the basic and minimal catalogs have been updated to utilize these styles. Feedback points out a critical SSR compatibility issue where the document object is accessed without a check, an inconsistent fallback color for button hovers, and significant code duplication between catalogs that should be refactored into shared utilities or base classes.

Comment thread renderers/web_core/src/v0_9/styles/default.ts Outdated
Comment thread renderers/lit/src/v0_9/catalogs/basic/components/Button.ts Outdated
Comment thread renderers/lit/src/v0_9/catalogs/basic/components/Button.ts Outdated
Comment thread renderers/lit/src/v0_9/catalogs/basic/components/Button.ts Outdated
Comment thread renderers/lit/src/v0_9/catalogs/basic/components/Text.ts Outdated
@ditman ditman force-pushed the core-styling branch 2 times, most recently from cd49d59 to 1ec1849 Compare April 7, 2026 21:01
Copy link
Copy Markdown
Collaborator

@jacobsimionato jacobsimionato left a comment

Choose a reason for hiding this comment

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

LGTM other than this one comment

Comment thread renderers/web_core/src/v0_9/basic_catalog/styles/default.ts
@ditman ditman force-pushed the core-styling branch 3 times, most recently from 0ad9206 to b9ff1e4 Compare April 9, 2026 17:08
@ditman ditman requested a review from jacobsimionato April 9, 2026 17:56
@ditman
Copy link
Copy Markdown
Collaborator Author

ditman commented Apr 9, 2026

PTAL @ava-cassiopeia @jacobsimionato (if you go down the PR chain you can see how this ends up being used!)

}

:where(:root), :where(.a2ui-dark), :where(.a2ui-light) {
--a2ui-color-background: light-dark(#eee, #111);
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Happy with this as a start, but let's figure out how to honor primaryColor in the agent-provided surface theme also.

ditman added 3 commits April 10, 2026 10:04
The function allows basic catalog implementations to inject a shared
stylesheet that contains a set of overridable variables used by the
widgets to keep the styling somewhat consistent.
@ditman
Copy link
Copy Markdown
Collaborator Author

ditman commented Apr 10, 2026

I'm going to land this so I don't have to juggle so many PRs in the air.

@ditman ditman merged commit 01be572 into google:main Apr 10, 2026
12 checks passed
@github-project-automation github-project-automation bot moved this from Todo to Done in A2UI Apr 10, 2026
@ditman ditman deleted the core-styling branch April 10, 2026 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants