noob-components/.trellis/spec/plugs-config-store-i18n/styles.md

# Config Styles

> Theme style classes using CSS custom properties pattern.

---

## Overview

Theme styles define the visual appearance of the application. Each theme is a class with properties for colors, backgrounds, and visual styling that map to CSS custom properties.

---

## Theme Hierarchy

All themes inherit from the base `Plain` class:

```
Plain (base class)
├── Light
├── Dark
├── Plainb
└── ZhuBeiDong
```

---

## Base Plain Class

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/plain.ts`

```typescript
export default class Plain {
  name = 'plain'; // 总体样式名称
  icon = 'Sunset'; // 图标样式
  i18n = 'styles.0'; // 样式提示i18n配置

  bodyBg = light[7]; // 全局背景颜色
  titleColor = light[0]; // 标题颜色
  subTitleColor = dark[9]; // 二级标题颜色
  color = '#4e5969'; // 全局字体颜色
  selectionBg = '#3367d1'; // 全局文字选中后背景
  selectionColor = '#fff'; // 全局文字选中后背景

  headBg = '#40c9c6'; // 头部背景颜色

  menuBg = '#323e4d'; // 菜单背景颜色
  menuActiveBg = '#28323e'; // 菜单激活背景颜色
  menuColor = light[7]; // 菜单文字颜色
  menuActiveColor = '#409eff'; // 激活菜单文字颜色
  menuDefaultIcon = 'Minus'; // 菜单默认图标

  mainShadowColor = light[4]; // 主窗口阴影颜色

  searchRowBg = light[8];
  itemBg = light[2];
  itemSelectColor = '#409eff';

  tableBg = light[1]; // 表格背景颜色
  tableHeadBg = light[2]; // 表头行背景颜色
  tableCurBg = light[3]; // 当前行背景颜色
  tableColor = dark[0]; // 表格字体颜色
  tableBorderColor = light[9]; // 行底部边框颜色
  tableChildBg = '#f0f9eb'; // 树型表格子行背景颜色
}
```

### Plain Properties

| Property | Type | Description |
|----------|------|-------------|
| `name` | string | Theme identifier |
| `icon` | string | Icon style name |
| `i18n` | string | i18n key for theme name |
| `bodyBg` | string | Global background color |
| `titleColor` | string | Title text color |
| `subTitleColor` | string | Secondary title color |
| `color` | string | Global font color |
| `selectionBg` | string | Text selection background |
| `headBg` | string | Header background |
| `menuBg` | string | Menu background |
| `menuActiveBg` | string | Active menu background |
| `menuColor` | string | Menu text color |
| `menuActiveColor` | string | Active menu text color |
| `tableBg` | string | Table background |
| `tableHeadBg` | string | Table header background |
| `tableCurBg` | string | Current table row background |
| `tableColor` | string | Table text color |
| `tableBorderColor` | string | Table row border color |

---

## Theme Variants

### Light Theme

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/light.ts`

```typescript
export default class Light extends Plain {
  name = 'light';
  icon = 'Sunny';
  i18n = 'styles.1';
  bodyBg = light[0];
  titleColor = dark[0];
  subTitleColor = dark[3];

  headBg = light[0];
  menuBg = light[0];
  menuActiveBg = light[1];
  menuColor = dark[0];
  menuActiveColor = '#4f5dfd';

  tableBg = light[0];
  tableHeadBg = light[0];
  tableCurBg = light[2];
  tableColor = dark[0];
  tableBorderColor = light[9];
}
```

### Dark Theme

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/dark.ts`

```typescript
export default class Dark extends Plain {
  name = 'dark';
  icon = 'MoonNight';
  i18n = 'styles.2';
  bodyBg = dark[3];
  titleColor = light[0];
  subTitleColor = light[4];
  color = grey[5];
  selectionBg = '#0438a2';

  headBg = dark[2];
  menuBg = dark[2];
  menuActiveBg = dark[6];
  menuColor = light[0];
  menuActiveColor = '#328ae3';

  mainShadowColor = light[8];

  tableBg = dark[2];
  tableHeadBg = dark[4];
  tableCurBg = dark[5];
  tableColor = light[0];
  tableBorderColor = dark[7];
  tableChildBg = dark[3];
}
```

### Plainb Theme

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/plainb.ts`

```typescript
export default class Plainb extends Plain {
  name = 'plainb';
  i18n = 'styles.3';
  bodyBg = light[0];
  titleColor = light[3];
  subTitleColor = '#424242';
  color = grey[0];
  selectionBg = '#9255f4';

  headBg = '#6200ee';
  menuBg = '#ebebeb';
}
```

### ZhuBeiDong Theme

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/zhuBeiDong.ts`

```typescript
export default class ZhuBeiDong extends Plain {
  name = 'zhuBeiDong';
  i18n = 'styles.4';
  bodyBg = light[0];
  titleColor = dark[0];
  subTitleColor = dark[3];

  headBg = light[0];

  tableBg = light[0];
  tableHeadBg = light[0];
  tableCurBg = light[2];
  tableColor = dark[0];
  tableBorderColor = light[9];
}
```

---

## Color Palette

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/color.ts`

```typescript
export const light = [
  '#ffffff',  // 0
  '#F2F6FC',  // 1
  '#F5F7FA',  // 2
  '#F2F3F5',  // 3
  '#F0F2F5',  // 4
  '#EBEDF0',  // 5
  '#efefef',  // 6
  '#E5EAF3',  // 7
  '#E6E8EB',  // 8
  '#e5e6eb',  // 9
];

export const dark = [
  '#000000',  // 0
  '#121213',  // 1
  '#232324',  // 2
  '#2a2a2b',  // 3
  '#303133',  // 4
  '#373739',  // 5
  '#414142',  // 6
  '#484849',  // 7
  '#585860',  // 8
  '#606266',  // 9
];

export const grey = [
  '#909399',  // 0
  '#9b9b9d',  // 1
  '#A0A0A0',  // 2
  '#A8ABB2',  // 3
  '#b6b6b6',  // 4
  '#bdbdbe',  // 5
  '#C0C4CC',  // 6
  '#CDD0D6',  // 7
  '#D4D7DE',  // 8
  '#DCDFE6',  // 9
];
```

---

## Exports

**File**: `/home/hechang27/Documents/sprt/noob-components/plugs/config/styles/index.ts`

```typescript
import Plain from './plain';
import Plainb from './plainb';
import Light from './light';
import Dark from './dark';
import ZhuBeidong from './zhuBeiDong';

export const plain = new Plain();
export const plainb = new Plainb();
export const light = new Light();
export const dark = new Dark();
export const zhuBeiDong = new ZhuBeidong();
```

---

## Usage Pattern

```typescript
import { Styles } from '../config';

// Access current style
const currentStyle = state.style; // State.style is of type Styles.plain

// Style properties are used to set CSS custom properties
element.style.setProperty('--body-bg', currentStyle.bodyBg);
element.style.setProperty('--menu-bg', currentStyle.menuBg);
```

---

## Anti-Patterns

1. **Do not modify theme properties at runtime** - Themes are designed to be immutable configurations
2. **Do not create new themes without extending Plain** - Incomplete themes will lack required properties
3. **Do not use hardcoded colors** - Always use theme properties for consistent styling

---

**Language**: English