# 变量引用规则（读变量）

## 1. 规则继承与数据来源

- **规则继承**：本规范定义在页面 HTML 中引用已有设计系统变量 (`variable.json`) 的规则；基础 HTML/Tailwind 转译规范继承 `page-generate.md`。
- **数据来源**：变量由 `get_library_assets` 工具返回，仅允许使用用户已确认白名单中的变量 `name`，禁止跨库或臆造路径。

## 2. 变量优先匹配原则（硬约束）

1. **先检索后使用（变量优先）**：在编写任何背景色（`bg-[...]`）、文本色（`text-[...]`）、边框色（`border-[...]`）、间距（`p-[...]` / `gap-[...]`）、圆角（`rounded-[...]`）、字号（`style="font: var(...)"`）之前，**必须先检索 `variable.json` 中的变量清单**。
2. **禁止写死 HEX / 纯数字（当存在变量时）**：凡能在 `variable.json` 中找到相近语义或数值的变量（如 `背景色/主体`、`文本色/首选`、`文本色/常规`、`标题_index_0/标题-20`），**绝对禁止在 HTML 中直接硬编码 `#HEX` 颜色或 `px` 尺寸**，必须统一输出 `var(变量名)`。
3. **严格回退条件（禁止编造变量名）**：仅在 `variable.json` 中 **100% 缺失** 相关语义变量时，才允许回退使用 Tailwind 字面量（如 `bg-[#1677FF]`、`p-[12px]`）。**绝对禁止编造不存在的变量名**（例如严禁编造 `var(未定义颜色)`）。

## 3. Tailwind 属性引用语法全集

| 属性类型 | Tailwind 任意值语法 / Inline Style 规范 | 典型示例 |
| :--- | :--- | :--- |
| **背景色** | `bg-[var(变量名)]` | `bg-[var(色彩/填充/容器)]` |
| **文本色 / 图标色** | `text-[var(变量名)]` | `text-[var(色彩/文本/主)]` |
| **边框色** | `border-[var(变量名)]` | `border-[var(色彩/边框/默认)]` |
| **原子文字** | `text-[var(...)]` / `leading-[var(...)]` / `font-[var(...)]` | `text-[var(文字/正文/14)] leading-[var(行高/正文/1.5)]` |
| **复合文本样式** | **必须使用 inline style** `style="font: var(变量名)"` | `style="font: var(字号_index_0/12-常规); color: var(色彩/文本/主)"` |
| **间距 (Gap / Padding)** | `gap-[var(...)]` / `p-[var(...)]` / `px-[var(...)]` / `py-[var(...)]` | `gap-[var(间距/sm)] p-[var(间距/md)]` |
| **圆角** | `rounded-[var(变量名)]` | `rounded-[var(圆角/md)]` |
| **阴影** | `shadow-[var(变量名)]` | `shadow-[var(阴影/卡片/默认)]` |

> ⚠️ **复合文本样式注意**：使用 `style="font: var(...)"` 时，禁止再拆写字号/行高/字重 class；如需改颜色，只需额外写颜色变量类（`text-[var(...)]`）或 `color: var(...)`。

## 4. 参考范式

```html
<!-- 示例：完整应用团队库变量 (间距、背景、圆角、文字样式、颜色变量) -->
<div 
  data-name="filter-wrap" 
  class="flex flex-row justify-start items-center gap-[var(间距/sm)] p-[var(间距/md)] bg-[var(背景色/内容区)] rounded-[var(圆角/md)] border-[1px] border-[var(边框色/常规)]"
>
  <span 
    data-name="filter-label" 
    style="font: var(标题_index_0/标题-14)"
    class="text-[var(文本色/首选)] text-left"
  >筛选条件</span>
  <span 
    data-name="filter-value" 
    style="font: var(字号_index_0/12-常规)"
    class="text-[var(文本色/次要)] text-left"
  >已启用</span>
</div>
```