From 58aa4857f3da6e7e0eb3caf415d70fac1b551957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Muhammed=20Ali=20=C3=96ZKAYA?= Date: Thu, 25 Dec 2025 16:18:08 +0300 Subject: [PATCH] Add LeptonX CSS variables documentation --- docs/en/docs-nav.json | 4 + .../ui/common/leptonx-css-variables.md | 119 ++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 docs/en/framework/ui/common/leptonx-css-variables.md diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index ffcaf9b805..b59620e72b 100644 --- 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": [ diff --git a/docs/en/framework/ui/common/leptonx-css-variables.md b/docs/en/framework/ui/common/leptonx-css-variables.md new file mode 100644 index 0000000000..193246a420 --- /dev/null +++ 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 `` or ``): + +```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; +} +``` \ No newline at end of file