Skip to content

Merge branch dev with rel-10.0 #24491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maliming merged 2 commits into from
Dec 29, 2025
Merged

Merge branch dev with rel-10.0 #24491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58aa485
Add LeptonX CSS variables documentation
m-aliozkaya Dec 25, 2025
f23f41a
Merge pull request #24482 from abpframework/pr/2841
ismcagdas Dec 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/en/docs-nav.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1857,6 +1857,10 @@
"text": "Overriding the User Interface",
"path": "framework/architecture/modularity/extending/overriding-user-interface.md"
},
{
"text": "How to Override LeptonX CSS Variables",
"path": "framework/ui/common/leptonx-css-variables.md"
},
{
"text": "Utilities",
"items": [
Expand Down
119 changes: 119 additions & 0 deletions docs/en/framework/ui/common/leptonx-css-variables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# LeptonX CSS Variables Documentation

LeptonX uses CSS custom properties (variables) prefixed with `--lpx-*` to provide a flexible theming system. These variables control colors, spacing, shadows, and component-specific styles throughout the application.

## Brand & Semantic Colors

| Variable | Description |
|----------|-------------|
| `--lpx-brand` | Brand-specific accent color |
| `--lpx-brand-text` | Text color used on brand-colored backgrounds |
Copy link

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.

## Base Colors

| Variable | Description |
|----------|-------------|
| `--lpx-light` | Light shade for subtle backgrounds or text |
| `--lpx-dark` | Dark shade for contrasting elements |

## Layout & Surface Colors

| Variable | Description |
|----------|-------------|
| `--lpx-content-bg` | Main content area background color |
| `--lpx-content-text` | Default text color for content areas |
| `--lpx-card-bg` | Card component background color |
| `--lpx-card-title-text-color` | Card title text color |
| `--lpx-border-color` | Default border color for dividers and outlines |
| `--lpx-shadow` | Box shadow definition for elevated elements |

## Navigation

| Variable | Description |
|----------|-------------|
| `--lpx-navbar-color` | Navbar background color |
| `--lpx-navbar-text-color` | Navbar default text/icon color |
| `--lpx-navbar-active-text-color` | Navbar active/hover text color |
| `--lpx-navbar-active-bg-color` | Navbar active item background color |

## Utility

| Variable | Description |
|----------|-------------|
| `--lpx-radius` | Global border-radius value for rounded corners |

## Global Override

Applies to all themes and pages:

```css
:root {
/* Brand & Semantic */
--lpx-brand: #f72585;

/* Base Colors */
--lpx-light: #f5f7fb;
--lpx-dark: #0b0f19;

/* Layout & Surface */
--lpx-content-bg: #101018;
--lpx-content-text: #cfd6e4;
--lpx-card-bg: #151a2b;
--lpx-card-title-text-color: #ffffff;
--lpx-border-color: #242836;
--lpx-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

/* Navigation */
--lpx-navbar-color: #0d1020;
--lpx-navbar-text-color: #aab2c8;
--lpx-navbar-active-text-color: #ffffff;
--lpx-navbar-active-bg-color: rgba(247, 37, 133, 0.15);

/* Utility */
--lpx-radius: 10px;
}

```

## Theme-Scoped Override

Applies only when a specific theme class is active (e.g., `.lpx-theme-dark` on `<html>` or `<body>`):

```css
:root .lpx-theme-dark {
Copy link

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

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

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

Suggested change
:root .lpx-theme-dark {
.lpx-theme-dark {

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

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

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.

Suggested change
:root .lpx-theme-dark {
.lpx-theme-dark {

Copilot uses AI. Check for mistakes.
/* Brand & Semantic */
--lpx-brand: #4dd0e1;

/* Base Colors */
--lpx-light: #e0f7fa;
--lpx-dark: #020617;

/* Layout & Surface */
--lpx-content-bg: #0b1118;
--lpx-content-text: #c7d0e0;
--lpx-card-bg: #111a24;
--lpx-card-title-text-color: #e6f1ff;
--lpx-border-color: #1e2a3a;
--lpx-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);

/* Navigation */
--lpx-navbar-color: #0f1a22;
--lpx-navbar-text-color: #9fb3c8;
--lpx-navbar-active-text-color: #ffffff;
--lpx-navbar-active-bg-color: rgba(77, 208, 225, 0.18);

/* Utility */
--lpx-radius: 12px;
}
```

## Component/Page-Specific Override

For targeted customizations that should only affect a specific section:

```css
.my-custom-page {
--lpx-brand: #e91e63;
--lpx-card-bg: #1a1a2e;
}
```
Loading