mirror of https://github.com/abpframework/abp.git
İsmail ÇAĞDAŞ
1 month ago
committed by
GitHub
GitHub
2 changed files with 123 additions and 0 deletions
@ -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; |
||||
|
} |
||||
|
``` |
||||
Loading…
Reference in new issue