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