English
Global CSS Variables
About 607 wordsAbout 2 min
2026-04-13
This page documents the global CSS variables available for web custom components so styles can stay consistent across page enhancement, custom pages, and shared component development.
Scope
- Web custom components
- Styling in page enhancement scenarios
- Display-oriented components that need to align with host application styles
Recommendations
- Prefer global CSS variables over hardcoded values for colors, radii, and shadows
- Reuse existing variables first when building new display components
- Add local custom styles only when existing variables cannot cover the requirement
Usage
.demo-card {
color: var(--fx-text-color, #333);
background: var(--fx-fill-color, #fff);
border-radius: var(--fx-border-radius, 4px);
}If a variable may be absent in some host environments, use var(--token, fallback) to provide a fallback value.
Variable List
The following list summarizes currently available theme-level and app-level variables.
Primary Color Variables
| Variable | Description | Typical Usage | Default/Notes |
|---|---|---|---|
--color-primary00 | Lightest primary shade | Backgrounds, light hint areas | #fffbf0 |
--color-primary01 | Light primary shade | Light backgrounds, weak emphasis | #FFF7E6 |
--color-primary02 | Light primary shade | Hover background, auxiliary base color | #FFDDA3 |
--color-primary03 | Mid-light primary shade | Auxiliary accent color | #FFCA7A |
--color-primary04 | Mid primary shade | Emphasis background, decoration | #FFB452 |
--color-primary05 | Mid primary shade | Buttons, tags, emphasis | #FF9B29 |
--color-primary06 | Brand primary color | Primary buttons, links, key actions | #FF8000 |
--color-primary07 | Dark primary shade | Active state, pressed state | #D96500 |
--color-primary08 | Dark primary shade | Dark accents, borders | #B34D00 |
--color-primary09 | Deeper primary shade | Strong emphasis, dark text | #8C3800 |
--color-primary10 | Deepest primary shade | Dark titles, high-contrast scenes | #662500 |
Primary Color RGB Variables
| Variable | Description | Typical Usage | Default/Notes |
|---|---|---|---|
--color-primary00-rgb | RGB value of --color-primary00 | rgba() transparency scenarios | 255, 251, 240 |
--color-primary01-rgb | RGB value of --color-primary01 | rgba() transparency scenarios | 255, 247, 230 |
--color-primary02-rgb | RGB value of --color-primary02 | rgba() transparency scenarios | 255, 221, 163 |
--color-primary03-rgb | RGB value of --color-primary03 | rgba() transparency scenarios | 255, 202, 122 |
--color-primary04-rgb | RGB value of --color-primary04 | rgba() transparency scenarios | 255, 180, 82 |
--color-primary05-rgb | RGB value of --color-primary05 | rgba() transparency scenarios | 255, 155, 41 |
--color-primary06-rgb | RGB value of --color-primary06 | rgba() transparency scenarios | 255, 128, 0 |
--color-primary07-rgb | RGB value of --color-primary07 | rgba() transparency scenarios | 217, 101, 0 |
--color-primary08-rgb | RGB value of --color-primary08 | rgba() transparency scenarios | 179, 77, 0 |
--color-primary09-rgb | RGB value of --color-primary09 | rgba() transparency scenarios | 140, 56, 0 |
--color-primary10-rgb | RGB value of --color-primary10 | rgba() transparency scenarios | 102, 37, 0 |
Application-Level Variables
| Variable | Description | Typical Usage | Default/Notes |
|---|---|---|---|
--fx-company-main-nav-fore-color | Main navigation foreground color | Top nav text and icons | #181c25 |
--fx-company-main-menu-selected-bg-color | Main menu selected background | Nav menu selected state background | 255, 255, 255; use with rgb() or host definition as needed |
--fx-company-main-bg | Application main background color | Page background, container base | #EFF1F3 |
--fx-company-main-detail-bg | Detail area background color | Detail pages, card areas | #EFF1F3 |
--fx-nheader-width | Header width placeholder | Layout calculation, content offset | 0px |
--app-content-height | App content area height | Layout calculation, full-height content area | -- |
Example
.welcome-banner {
color: var(--fx-company-main-nav-fore-color, #181c25);
background: var(--color-primary00, #fffbf0);
}
.welcome-banner--active {
background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.08);
border: 1px solid var(--color-primary06, #FF8000);
}Maintenance Guidelines
- Prefer semantic names over business-specific names when adding new variables
- Organize variables by category (colors, text, borders, spacing, etc.)
- Include purpose, scope, and fallback suggestions in variable descriptions
