Merge branch dev with rel-10.0 #24491
Conversation
Add LeptonX CSS variables documentation
There was a problem hiding this comment.
Pull request overview
This PR automatically merges the dev branch into rel-10.0, adding new documentation for LeptonX CSS variables. The changes introduce comprehensive documentation explaining how to customize the LeptonX theme using CSS custom properties.
Key Changes:
- Adds new LeptonX CSS Variables documentation with variable reference tables and usage examples
- Updates the documentation navigation to include the new CSS variables guide
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
docs/en/framework/ui/common/leptonx-css-variables.md |
New documentation file explaining LeptonX CSS variables, their purposes, and override patterns |
docs/en/docs-nav.json |
Adds navigation entry for the new LeptonX CSS variables documentation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| | Variable | Description | | ||
| |----------|-------------| | ||
| | `--lpx-brand` | Brand-specific accent color | | ||
| | `--lpx-brand-text` | Text color used on brand-colored backgrounds | |
There was a problem hiding this comment.
The variable --lpx-brand-text is listed in the "Brand & Semantic Colors" table but is never shown in any of the code examples (Global Override, Theme-Scoped Override, or Component/Page-Specific Override). This creates inconsistency in the documentation where a variable is described but never demonstrated, leaving users uncertain about how to use it.
| Applies only when a specific theme class is active (e.g., `.lpx-theme-dark` on `<html>` or `<body>`): | ||
|
|
||
| ```css | ||
| :root .lpx-theme-dark { |
There was a problem hiding this comment.
The CSS selector :root .lpx-theme-dark is incorrect. This selector looks for an element with class lpx-theme-dark that is a descendant of :root, which doesn't make sense since :root is the top-level element. The correct selector should be either .lpx-theme-dark (if the class is applied to <html> or <body>) or :root.lpx-theme-dark (if the class is applied directly to the root element).
| :root .lpx-theme-dark { | |
| .lpx-theme-dark { |
| Applies only when a specific theme class is active (e.g., `.lpx-theme-dark` on `<html>` or `<body>`): | ||
|
|
||
| ```css | ||
| :root .lpx-theme-dark { |
There was a problem hiding this comment.
The documentation states that theme-scoped overrides apply "when a specific theme class is active (e.g., .lpx-theme-dark on <html> or <body>)". However, the CSS selector shown (:root .lpx-theme-dark) does not match this description. The description and the code example are inconsistent. The selector should match the described behavior by using .lpx-theme-dark instead.
| :root .lpx-theme-dark { | |
| .lpx-theme-dark { |
This PR generated automatically to merge dev with rel-10.0. Please review the changed files before merging to prevent any errors that may occur.