Core styling all widgets by ditman · Pull Request #1079 · google/A2UI

ditman · 2026-04-07T01:04:24Z

Description

This PR continues #1057 by applying the same pattern to the rest of the catalog elements of the Lit renderer.

Pre-launch Checklist

I signed the CLA.
I read the Contributors Guide.
I read the Style Guide.
I have added updates to the CHANGELOG.
I updated/added relevant documentation.
My code changes (if any) have tests.

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

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts

gemini-code-assist

Code Review

This pull request introduces a centralized theme injection system for A2UI components, adding a default style utility for global CSS variables and an injection function. Components across the basic and minimal catalogs are updated to use these variables and call the injection function in their lifecycle. Feedback identifies a missing theme injection in the basic Text component, suggests using internal CSS variables for better color inheritance in buttons, and recommends guarding document access to ensure compatibility with server-side rendering.

gemini-code-assist · 2026-04-07T01:06:53Z

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts

 */

-import { html, nothing } from "lit";
+import { html, nothing, css } from "lit";


The injectDefaultA2uiTheme utility is missing from the imports in this file, which is inconsistent with the other components updated in this pull request.

Suggested change

import { html, nothing, css } from "lit";

import { html, nothing, css } from "lit";

import { injectDefaultA2uiTheme } from "@a2ui/web_core/v0_9";

gemini-code-assist · 2026-04-07T01:06:53Z

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts

+  static styles = css`
+    p, h1, h2, h3, h4, h5, h6 {
+      margin: var(--_a2ui-text-margin, revert);
+    }
+  `;


This component is missing the connectedCallback to inject the default A2UI theme. To ensure consistent styling across all widgets, it should follow the same pattern as the other components in this PR.

Suggested change

static styles = css`

p, h1, h2, h3, h4, h5, h6 {

margin: var(--_a2ui-text-margin, revert);

}

`;

static styles = css`

p, h1, h2, h3, h4, h5, h6 {

margin: var(--_a2ui-text-margin, revert);

}

`;

connectedCallback() {

super.connectedCallback();

injectDefaultA2uiTheme();

}

gemini-code-assist · 2026-04-07T01:06:53Z

renderers/lit/src/v0_9/catalogs/basic/components/Button.ts

+    .a2ui-button {
+      --_a2ui-text-margin: 0;
+      padding: var(--_button-padding);
+      background-color: var(--a2ui-color-secondary, #ddd);
+      color: var(--a2ui-color-on-secondary, #333);
+      border: var(--_button-border);
+      border-radius: var(--_button-border-radius);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .a2ui-button.a2ui-button-primary {
+      border-color: var(--_color-primary);
+      background-color: var(--_color-primary);
+      color: var(--a2ui-color-on-primary, #fff);
+    }


The basic Button component is missing the --_a2ui-text-color variable definition used in the minimal version. Adding this ensures that nested components (like Text) inherit the correct foreground color based on the button's variant.

Suggested change

.a2ui-button {

--_a2ui-text-margin: 0;

padding: var(--_button-padding);

background-color: var(--a2ui-color-secondary, #ddd);

color: var(--a2ui-color-on-secondary, #333);

border: var(--_button-border);

border-radius: var(--_button-border-radius);

cursor: pointer;

display: inline-flex;

align-items: center;

justify-content: center;

}

.a2ui-button.a2ui-button-primary {

border-color: var(--_color-primary);

background-color: var(--_color-primary);

color: var(--a2ui-color-on-primary, #fff);

}

.a2ui-button {

--_a2ui-text-margin: 0;

--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);

padding: var(--_button-padding);

background-color: var(--a2ui-color-secondary, #ddd);

color: var(--_a2ui-text-color);

border: var(--_button-border);

border-radius: var(--_button-border-radius);

cursor: pointer;

display: inline-flex;

align-items: center;

justify-content: center;

}

.a2ui-button.a2ui-button-primary {

--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);

border-color: var(--_color-primary);

background-color: var(--_color-primary);

color: var(--_a2ui-text-color);

}

gemini-code-assist · 2026-04-07T01:06:53Z

renderers/lit/src/v0_9/catalogs/minimal/components/Button.ts

+    .a2ui-button {
+      --_a2ui-text-margin: 0;
+      --_a2ui-text-color: var(--a2ui-color-on-secondary, #333);
+      padding: var(--_button-padding);
+      background-color: var(--a2ui-color-secondary, #ddd);
+      color: var(--a2ui-color-on-secondary, #333);
+      border: var(--_button-border);
+      border-radius: var(--_button-border-radius);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .a2ui-button.a2ui-button-primary {
+      --_a2ui-text-color: var(--a2ui-color-on-primary, #fff);
+      border-color: var(--_color-primary);
+      background-color: var(--_color-primary);
+      color: var(--a2ui-color-on-primary, #fff);
+    }


For better maintainability and consistency, the button's color property should use the internal --_a2ui-text-color variable that was just defined, rather than repeating the global variable lookup.

Suggested change

.a2ui-button {

--_a2ui-text-margin: 0;

--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);

padding: var(--_button-padding);

background-color: var(--a2ui-color-secondary, #ddd);

color: var(--a2ui-color-on-secondary, #333);

border: var(--_button-border);

border-radius: var(--_button-border-radius);

cursor: pointer;

display: inline-flex;

align-items: center;

justify-content: center;

}

.a2ui-button.a2ui-button-primary {

--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);

border-color: var(--_color-primary);

background-color: var(--_color-primary);

color: var(--a2ui-color-on-primary, #fff);

}

.a2ui-button {

--_a2ui-text-margin: 0;

--_a2ui-text-color: var(--a2ui-color-on-secondary, #333);

padding: var(--_button-padding);

background-color: var(--a2ui-color-secondary, #ddd);

color: var(--_a2ui-text-color);

border: var(--_button-border);

border-radius: var(--_button-border-radius);

cursor: pointer;

display: inline-flex;

align-items: center;

justify-content: center;

}

.a2ui-button.a2ui-button-primary {

--_a2ui-text-color: var(--a2ui-color-on-primary, #fff);

border-color: var(--_color-primary);

background-color: var(--_color-primary);

color: var(--_a2ui-text-color);

}

gemini-code-assist · 2026-04-07T01:06:53Z

renderers/web_core/src/v0_9/styles/default.ts

+ * This method ensures the default stylesheet is added to the root document
+ * of the page, if it's not already present.
+ */
+export function injectDefaultA2uiTheme() {


Directly accessing document without a check can cause issues in Server-Side Rendering (SSR) environments. It's safer to guard the theme injection logic.

export function injectDefaultA2uiTheme() { if (typeof document === "undefined") return; const sheet = getDefaultStyleSheet();

ditman · 2026-04-07T01:07:41Z

renderers/lit/src/v0_9/catalogs/minimal/components/Column.ts

+      this.style.flex =
+        props.weight !== undefined ? String(props.weight) : "initial";
+      this.style.justifyContent = mapJustify(props.justify);
+      this.style.alignItems = mapAlign(props.align);


I wonder if it's better to leave the old styleMap object instead of mutating the styles directly on updated

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts

jacobsimionato · 2026-04-07T05:42:06Z

renderers/web_core/src/v0_9/styles/default.ts

Can we move this to within https://github.com/google/A2UI/tree/main/renderers/web_core/src/v0_9/basic_catalog/styles to show that it's just a convenience set of styles that you could use with the basic catalog, but really not a top-level part of the A2UI specification? Or else leave it where it is, but label it "basic" or "example" or something?

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.

github-project-automation bot added this to A2UI Apr 7, 2026

github-project-automation bot moved this to Todo in A2UI Apr 7, 2026

ditman commented Apr 7, 2026

View reviewed changes

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts Show resolved Hide resolved

gemini-code-assist bot reviewed Apr 7, 2026

View reviewed changes

ditman commented Apr 7, 2026

View reviewed changes

renderers/lit/src/v0_9/catalogs/basic/components/Text.ts Show resolved Hide resolved

jacobsimionato reviewed Apr 7, 2026

View reviewed changes

ditman force-pushed the core-styling-all-widgets branch from 6f17781 to 00d299c Compare April 7, 2026 20:56

ditman added 5 commits April 7, 2026 13:59

Export injectDefaultA2uiTheme.

f00a8ba

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.

Do not access document if it does not exist.

1ec1849

Re-style the v0.9 lit renderer using the default CSS.

980b0a8

Fix the lit 09 sample gallery to inject the material icons font

3caf608

package-locks.json

903d6c6

ditman force-pushed the core-styling-all-widgets branch from 00d299c to 903d6c6 Compare April 7, 2026 21:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core styling all widgets#1079

Core styling all widgets#1079
ditman wants to merge 5 commits intogoogle:mainfrom
ditman:core-styling-all-widgets

ditman commented Apr 7, 2026

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 7, 2026

Uh oh!

gemini-code-assist bot Apr 7, 2026

Uh oh!

gemini-code-assist bot Apr 7, 2026

Uh oh!

gemini-code-assist bot Apr 7, 2026

Uh oh!

gemini-code-assist bot Apr 7, 2026

Uh oh!

ditman Apr 7, 2026

Uh oh!

Uh oh!

jacobsimionato Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import { html, nothing, css } from "lit";
	import { html, nothing, css } from "lit";
	import { injectDefaultA2uiTheme } from "@a2ui/web_core/v0_9";

Conversation

ditman commented Apr 7, 2026

Description

Pre-launch Checklist

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

ditman Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jacobsimionato Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants