Merge pull request #24482 from abpframework/pr/2841

Add LeptonX CSS variables documentation
1 month ago · f23f41a923
2 changed files with 123 additions and 0 deletions
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@ -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": [
--- a/docs/en/framework/ui/common/leptonx-css-variables.md
+++ b/docs/en/framework/ui/common/leptonx-css-variables.md
@ -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 |
+
+## 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 {
+  /* 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;
+}
+```