Initial TrueGrowth source import

docs/UI_COLOR_SYSTEM_LESSONS.md

@@ -0,0 +1,40 @@
+# 素材库配色与多选架构经验
+
+更新日期：2026-05-17
+
+这次改造不只是“把颜色调顺眼一点”，而是把素材库的视觉状态、操作入口和全局主题 token 收拢到同一套架构里。
+
+## 问题背景
+
+- 素材库卡片的 hover / selected 反馈偏重，黑灰阴影和白色蒙层会压住图片内容。
+- 同一操作区里有多个橙色主按钮，主次关系不清，视觉也会抢焦点。
+- 多选场景下，顶部工具条和右侧详情栏都想承担“插入/使用”动作，入口重复。
+- AI 编程如果看不到统一 token，很容易继续写局部硬编码颜色。
+
+## 架构变更
+
+1. 主题层统一输出 `--aitu-ui-*` token，组件层优先读 token，不再各自发明颜色。
+2. 素材库卡片状态改成“边框 + 浅底 + 轻 focus ring”，不再用整图蒙层做选中反馈。
+3. 多选操作收敛到右侧 inspector，顶部只保留浏览级操作，避免双主按钮。
+4. 同一区域默认只保留一个品牌橙主按钮，其余动作降级为 outline、text 或 danger。
+5. 颜色规则进入文档后，后续 AI 编程可以直接按规范生成，减少风格漂移。
+
+## 落地经验
+
+- 选中态必须比 hover 更明确，但不要靠压暗内容来实现。
+- 视觉强调优先用边框、浅底、角标和 focus ring，而不是堆阴影。
+- 多选不是纯样式分支，而是产品状态，入口要能显式感知 selection mode。
+- 批量动作最好和摘要信息放在一起，减少用户在不同区域重复找同一个按钮。
+
+## 后续约束
+
+- 新 UI 先查共享 token，再考虑新增颜色。
+- 禁止新增黑色主按钮、重黑遮罩、孤立蓝色 focus。
+- 需要新增 token 时，先说明语义、使用范围和替代方案。
+- 同一区域如果已经有主按钮，就不要再堆第二个品牌主按钮。
+
+## 涉及范围
+
+- `packages/drawnix/src/styles/theme.scss`
+- `packages/drawnix/src/styles/tdesign-theme.scss`
+- `packages/drawnix/src/components/media-library/*`