Theme
主题与设计 Token
瑚琏的一切视觉都由设计 token 驱动，分三层：原始、语义、预设。消费方只需全局引入两个 CSS 文件，组件、明暗、断点便全部就位。
三层 Token 架构
改下层影响上层；组件永远只碰最上面的语义色和工具类。
- 01
原始层 Primitives
@hulianui/tokens/primitives.cssOKLCH 原始色板。明暗共用，不随主题变化，只是一张调色盘。
- 02
语义层 Semantic
@hulianui/tokens/semantic.css按用途命名原始色。明暗模式只换值、不换结构，组件只消费这一层。
- 03
预设层 Preset
@hulianui/tokens/preset.cssTailwind CSS v4 主题把语义 token 映射成工具类，并声明暗色变体、断点和圆角。
如何消费
任意 React 项目只需全局引入一次。
/* app/globals.css */ @import "@hulianui/tokens/tokens.css"; /* 原始色和语义色 */ @import "@hulianui/tokens/preset.css"; /* Tailwind CSS v4 和工具类 */