风格方案与点缀色

选择风格

ZhaoUI 提供组件与 Token；每个项目可以选择不同的视觉方向。先结合品牌、用户和工作场景选方向，再统一应用到相关页面。用户已认可的风格可继续沿用；新项目或要求换风格时，可以尝试编辑排版、清爽工具、温暖生活等不同方向。这些是设计方向，具体尺寸和配色需要按项目落实。

改版保留原有品牌名、标识、栏目名称与业务流程。业务工具优先让一个页面完成一件主要事情，相关操作跳转到独立页面。关联链接也应进入相同设计体系。

活泼纸感（可选配方）

适合需要清晰、亲和、有一定信息密度的业务系统。这是一份项目配方；组件库现有 data-style 仍为 flat | glass，没有 data-style="paper"。

• 材质：暖白纸面、淡灰底、极轻细颗粒，内容面板保持实色。用边框和浅阴影建立层次，避免大面积模糊、透亮高光和悬浮玻璃球。
• 排版：借鉴瑞士网格的对齐与清晰层级，采用柔和易读的中文无衬线字形；保留项目字体，确需更换时可选有授权的圆润字体。内容标题桌面约 26px、手机约 23px；正文和控件 14–16px。
• 形状：常用圆角 8–14px；控件高度约 40px；侧栏、内容、操作区层级分明。避免重复导航与层层重复的大标题。
• 色彩：以中性纸面为主，小面积点缀珊瑚橙、湖蓝、薄荷绿和暖黄。颜色出现在图标底、栏目标识、标签、局部数字和细线中，同屏以 2–4 组为宜。
• 深度：保持页面之间一致的面板、表格、详情、表单与状态层次；新增页面沿用同样的留白与细节，而不是只换外壳颜色。

下面是该配方的浅色起点。在项目 CSS 中定义一组作用域 Token，组件继续消费这些变量。深色时沿用 ZhaoUI 默认深色面板与下方的深色点缀色；若另做纸感深色方案，需重新核对对比度。

/* 项目作用域；不是新的库主题属性 */
.paper-workbench {
  --zh-radius-sm: 8px;
  --zh-radius-md: 12px;
  --zh-radius-lg: 14px;
  --zh-font-base: 15px;
  --zh-control-h-base: 40px;
  --zh-control-h: max(var(--zh-touch-min, 0px), calc((var(--zh-control-h-base) + var(--zh-density)) * var(--zh-scale)));
  --zh-fs: calc(var(--zh-font-base) * var(--zh-scale));
  font-size: var(--zh-fs);
  --project-page-title: 26px;
}
[data-mode="light"] .paper-workbench {
  --zh-bg: #fffefa;
  --zh-bg-subtle: #f5f4ef;
  --zh-bg-elevated: #fbfaf6;
  --zh-border: #dfded5;
  --zh-border-strong: #cbc9be;
  --zh-shadow-sm: 0 2px 6px rgba(51, 45, 32, .04);
  --zh-shadow-md: 0 8px 22px rgba(51, 45, 32, .06);
}
.paper-workbench .page-title { font-size: var(--project-page-title); }
@media (max-width: 620px) {
  .paper-workbench { --project-page-title: 23px; }
}

将 .paper-workbench 放在 <body> 上，同时重新计算控件高度与字号，使派生尺寸使用项目 Token。品牌色仍通过 data-brand 或 ZhaoUI.setBrand() 设置：保留现有品牌，获准换色后才设置新的品牌色。

六组点缀色

所有模式均提供 --zh-accent-{名称}-text、--zh-accent-{名称}-bg、--zh-accent-{名称}-border，随 data-mode 切换。无需额外风格包。

这些是分类与装饰配色。成功、警告、失败等业务状态继续使用 success / warning / danger / info 对应的语义 Token，同时提供文字或图标。普通正文维持 --zh-text，主操作仍由品牌色承担。

文字使用 -text，柔和底色使用 -bg。-border 用于装饰边框，不承担输入框、选中状态或焦点环等必要识别；这些继续使用组件自带样式。已有 --zh-accent-a/b/c 是品牌派生的大字与渐变装饰色，含义保持原样。

搭配示例

纸感工具可用 coral + sky + mint + sun；清爽资料站可用 sky + lime；协作空间可用 rose + sky + sun。其他项目可以选择自己的组合，不必每页用齐六色。

<span class="topic-label">机构资料</span>

.topic-label {
  display: inline-flex;
  padding: var(--zh-space-1) var(--zh-space-2);
  border: 1px solid var(--zh-accent-sky-border);
  border-radius: var(--zh-radius-sm);
  color: var(--zh-accent-sky-text);
  background: var(--zh-accent-sky-bg);
}

小面积颜色应帮助用户辨认栏目和内容类型；保持主按钮、正文与状态的优先级。核对浅色和深色的文字可读性，并在窄屏检查标题、表格、表单与跨页链接。