Semantic Structure

TechUI's theme system follows a strict semantic Schema (data structure). Regardless of how the theme's visual style changes (light, dark, or high contrast), the underlying data structure remains consistent.

This standardized design ensures:

1. Component Universality: Components only need to reference semantic variables (e.g., button.bg_hov) to display correctly under any theme.
2. Replacement Safety: Developers can switch themes with confidence, without worrying about missing fields causing errors.

Naming Conventions

Before diving into the structure, please understand the common abbreviations and naming habits used in TechUI themes:

Attribute Prefixes

• bg: Background Color
• bd: Border Color
• fc: Font Color
• hlite: Highlight Color

Status Suffixes

• _hov: Hover state
• _act: Active/Pressed state
• _foc: Focus state
• _dis: Disabled state

Hierarchy Suffixes

For color scale configurations, there are typically 7 levels: weakest < weaker < weak < base (Baseline) < strong < stronger < strongest

Root Node Structure

A standard theme object contains the following primary categories:

const themeData = {
  name: "lightBlue", // Theme Name
  common: {},        // Common base colors
  font: {},          // Font color scales
  tone: {},          // Neutral color scales
  
  // Interactive Components
  button: {},        // Buttons
  input: {},         // Input boxes
  menu: {},          // Dropdown menus/Overlays
  
  // Functional Status Colors
  primary: {},       // Primary color
  success: {},       // Success
  warning: {},       // Warning
  danger: {},        // Danger
  info: {},          // Information
  emphasis: {},      // Emphasis
  
  // Layout and Special Components
  sider: {},         // Sidebar
  background: {},    // Global background strategy
  scroll: {},        // Scrollbar
  prominent: {},     // Prominent display blocks
  
  // Advanced Visuals
  scifi: {},         // Sci-Fi/Decorative components
  chart: {}          // Chart coloring
}

Detailed Field Analysis

Common Base (Common)

Defines the hierarchy colors of the page, used to build "bottom-up" visual depth.

Field Name	Description	CSS Variable Example
bg_root / bd_root	The lowest root background and border (usually the body color).	--common-bg-root
bg_frame / bd_frame	Layout framework layer, located above the root background.	--common-bg-frame
bg_layer / bd_layer	Content container layer, such as cards and panels.	--common-bg-layer
bg / bd	The most basic common background and border.	--common-bg

Typography System (Font & Tone)

• font: Specifically used for text colors.
• tone: Used for non-text neutral elements (e.g., dividers, placeholder backgrounds, skeleton screens).

Both contain a 7-level color scale from weakest to strongest.

• base: Body text/Default color.
• weak: Auxiliary text/Secondary information.
• weakest: Placeholder/Disabled text.
• strong: Title/Emphasized text.

Interactive Components (Button, Input, Menu)

Defines the performance of standard interactive elements in different states.

Taking button as an example:

• bg, bd: Default state.
• bg_hov, bd_hov: Mouse hover.
• bg_act, bd_act: Mouse pressed.
• bg_dis, bd_dis: Disabled state.

Input additionally includes the _foc (Focus) state, and Menu usually refers to dropdown options or bubble cards.

Functional Color Scales (Functional Colors)

Includes primary (Primary color), success, warning, danger, info, and emphasis. Each category contains a full 7-level color scale:

• base: Standard color (e.g., Standard Red).
• weakest / weaker: Commonly used for light backgrounds (e.g., background of an Alert box).
• strong: Commonly used for Hover states or text on dark backgrounds.

Layout Specifics (Layout Specifics)

• sider: Dedicated configuration for the sidebar.
  • grad_pri, grad_sec, grad_thi: Used to generate the gradient background of the sidebar.
  • focus: Color for selected menu items.
• background: Global background strategy.
  • view_grad: Array of gradient colors for the view area.
  • view_svgfill: Fill color for SVG textures in the view area.
  • root_svgfill: Fill color for SVG textures in the root background.
• scroll: Scrollbar coloring.
  • track: Track color.
  • thumb: Slider/Thumb color.

Advanced Visuals (Scifi & Chart)

This is the characteristic part of TechUI that distinguishes it from ordinary UI libraries.

Scifi (Sci-Fi/Decorative Style)

Used for components with a sense of technological decoration, such as <ScifiPanel> and <ScifiButton>.

Field Name	Description
thickness	The "thickness" color of decorative lines (often used to create a 3D effect).
hlite	Highlight/Glow color.
focus	Color for the focus/selected part.
bg_alt, fc_alt	Alternate background and alternate foreground colors.

Chart (Chart)

Maps directly to ECharts configuration items.

• line: Axis line color levels (weak, base, strong).
• bubble: Coloring for scatter/bubble charts.
• map: Map area coloring (bg, bd, glow, shadow).
• palette: Palette array (used for automatic coloring of pie and bar charts).
• visual: Visual mapping gradient endpoints.

Extension Suggestions

If you find that existing semantics cannot meet your needs when developing custom components, it is recommended to prioritize reusing variables from primary or common rather than hard-coding color values. This ensures your components maintain visual harmony under any new future themes.