(Lit) Style widgets using CSS variables.#1079
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
ditman
force-pushed
the
core-styling-all-widgets
branch
3 times, most recently
from
903d6c6 to
3edb33b
Compare
ditman
changed the title
|
I'll address Gemini comments next |
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.
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
force-pushed
the
core-styling-all-widgets
branch
from
c1ebcb5 to
2dcc0ca
Compare
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request re-styles the v0_9 catalog components in the Lit renderer to utilize a new default theme provided by web_core. This involved introducing a new injectBasicCatalogStyles function in web_core that defines CSS variables for theming, including light/dark mode support. All v0_9 Lit components were updated to use static styles = css blocks and connectedCallback to inject these new styles, replacing previous inline styling and redundant div wrappers. The package.json and package-lock.json files were updated to reflect version bumps and new peer dependencies, and the CHANGELOG.md files were also updated. Review comments noted a breaking change in the Icon component's class name, an invalid CSS border property in CheckBox, a potential visual bug with the Divider component's content, an inconsistent hover color for the primary button, and an unidiomatic Lit pattern in the Image component.
| background-color: var(--a2ui-color-secondary-hover, #ddd); | ||
| } | ||
| .a2ui-button.a2ui-button-primary:hover { | ||
| background-color: var(--a2ui-color-primary-hover, #fbd); |
There was a problem hiding this comment.
The fallback color #fbd (pink) for the primary button hover state is inconsistent with the primary blue theme (#17e). Consider using a color that aligns with the theme, such as a darker or lighter shade of blue.
| background-color: var(--a2ui-color-primary-hover, #fbd); | |
| background-color: var(--a2ui-color-primary-hover, #35f); |
…, li, blockquote and pre
|
|
||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| injectBasicCatalogStyles(); |
There was a problem hiding this comment.
I like how each component injects these styles individually. So you could make a catalog that combines two other existing catalogs, and they could each be using a separate default style sheet happily.
| } | ||
| } | ||
|
|
||
| updated(changedProperties: Map<PropertyKey, unknown>) { |
There was a problem hiding this comment.
FMI: I thought that 'render' gets called again automatically when props change. Why is this needed also?
There was a problem hiding this comment.
OK, I added this so all A2UI Lit Elements could handle the "weight" prop automagically without having to do it on an element-by-element basis, but this is wrong, because "weight" is part of the basic catalog, and not the spec itself.
In order to do this properly, I need a base class for the basic catalog components to group the common behavior.
I had already thought of adding the class to handle the CSS styling, so I'll give it a shot.
2 participants
Description
This PR adds styling based on CSS variables to the components of the basic catalog of the Lit renderer.
The PR uses the base styles defined in web_core, and adds per-component overrides that can be used to customize the appearance of each component further.
This PR continues #1057.
Pre-launch Checklist
If you need help, consider asking for advice on the discussion board.