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:
: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>):
: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:
.my-custom-page {
--lpx-brand: #e91e63;
--lpx-card-bg: #1a1a2e;
}
