Theme
主题与设计 Token
瑚琏的一切视觉都由设计 token 驱动，分三层：原始 → 语义 → 预设。消费方只需全局引入两个 CSS 文件，组件、明暗、断点便全部就位。
三层 Token 架构
改下层影响上层；组件永远只碰最上面的语义/工具类。
- 01
原始层 Primitives
@hulianui/tokens/primitives.cssOKLCH 原始色板（gray-50…950、brand/danger/success/warning）。明暗共用，不随主题变，只是「调色盘」。
- 02
语义层 Semantic
@hulianui/tokens/semantic.css把原始色按用途命名（color-bg / color-primary / color-danger…）。明暗在此切换——只换值不换结构。组件只消费这一层。
- 03
预设层 Preset
@hulianui/tokens/preset.cssTailwind v4 @theme：把语义 token 映射成工具类，并把 dark variant 绑到 [data-theme]。断点、radius 也在此声明为 SSOT。
如何消费
任意 React 项目，全局引一次即可。
/* app/globals.css */ @import "@hulianui/tokens/tokens.css"; /* 原始 + 语义 */ @import "@hulianui/tokens/preset.css"; /* Tailwind v4 + 工具类 */