色彩与法律主题

中性表面与文字

System Token	Light	Dark	用途
`--sys-color-canvas`	`#F5F7F9`	`#0D141A`	应用根背景
`--sys-color-surface`	`#FFFFFF`	`#151E26`	默认工作面
`--sys-color-surface-raised`	`#FFFFFF`	`#1B2630`	Popover、Dialog、Sheet
`--sys-color-surface-subtle`	`#EEF2F5`	`#1B2630`	查询区、静默区
`--sys-color-surface-hover`	`#F6F8FA`	`#202C36`	中性 hover
`--sys-color-text-strong`	`#17212B`	`#F2F5F7`	标题与关键数据
`--sys-color-text-default`	`#2D3A47`	`#DCE3E8`	正文
`--sys-color-text-muted`	`#586777`	`#AAB6C1`	辅助信息
`--sys-color-text-inverse`	`#FFFFFF`	`#0D141A`	反色前景
`--sys-color-border-subtle`	`#D4DCE4`	`#3A4855`	分隔和容器边界
`--sys-color-border-control`	`#8795A5`	`#5E6D7A`	输入与必要控件边界

输入框不能只用 border-subtle。必要控件边界必须达到非文本对比目标。

状态色

状态色不随 Brand 变化，避免章红与 Danger、青律与 Success、香槟金与 Warning 混为一义。

Role	Light FG	Light BG	Light Border	Dark FG	Dark BG	Dark Border
Danger	`#A92D38`	`#FFF0F1`	`#E2A2A8`	`#F0A0A7`	`#3B2026`	`#74404A`
Success	`#246745`	`#EDF8F2`	`#9DCDB2`	`#9DD4B4`	`#173126`	`#3E6952`
Warning	`#704A00`	`#FFF7E0`	`#D8B25C`	`#E5C071`	`#372B16`	`#715A2A`
Info	`#205C7A`	`#ECF6FB`	`#9AC6D9`	`#9CC9DC`	`#17303D`	`#3A667B`

命名：--sys-color-status-{danger|success|warning|info}-{fg|bg|border}。

Brand 语义

Role	Light	Dark
Primary action	Brand 700	Brand 300
Primary hover	Brand 800	Brand 200
Primary active	Brand 900	Brand 400
Primary foreground	`#FFFFFF`	`#0D141A`
Link	Brand 700	Brand 300
Focus ring	Brand 500	Brand 400
Selection	Brand 100 / Brand 900	Brand 900 / Brand 100
Navigation background	Brand 500	Brand 700
Navigation active line	Brand 500	Brand 500

primary 只是 shadcn 兼容别名，不承担 Link、Focus、Selection 和 Navigation 的全部语义。

brandOverrides 登记例外

默认 brandMapping 对所有主题一致。个别主题因对比度约束需要偏离默认映射时，在 system.tokens.json 的 brandOverrides 登记：

主题	模式	偏离项	原因
`legal-amber`	Light	focusRing=600，navigationFg 用深色文字	香槟金 500 阶做 focus ring 对比不足，导航前景改深色保证可读
`legal-orange`	Light / Dark	actionPrimaryBg=500（+hover 600/active 700），白字前景	暖橙 700 阶过深失去活力，改用 500 阶做主按钮并配白字，是全表唯一的主动作阶位例外

未登记的主题一律走默认 brandMapping。新增例外必须在此表登记，并附 WCAG 对比度验证结果。

曜灰 fallback

Framework 和通用 Platform 另有行业中立 fallback：enterprise-neutral。它不属于 legalBrandThemeIds，但当前工作台选择器会按固定顺序把它作为“曜灰”选项展示。

#F5F7F9

#E8EDF1

#CFD7DE

#A8B5C0

#788A99

#586B7A

#435563

#334552

#283844

#21303A

#121C23

五套法律主题

衡蓝 · `legal-navy`

稳健、理性、可信；Legal 解决方案默认。

#F2F7FB

#E3EFF7

#C3DDED

#95C0DA

#609BC0

#3477A5

#285F89

#214C70

#203F5C

#1E354C

#102132

香槟金 · `legal-amber`

温暖、商业、传统专业服务；适合高端商事与精品服务品牌。

#FCFAF6

#F8F3E8

#F0E4CB

#E3D2AC

#D4BF91

#C5AD78

#9A7E49

#6D522B

#5D472A

#4D3A25

#2B2015

Light / Dark 的主动作色由 system.tokens.json 的角色映射统一决定：Light 落到品牌 700 阶、Dark 落到 300 阶；主题本身不携带动作色特例。
legal-amber 只有两条品牌覆写：focusRing 提升到 600 阶（500 阶香槟金在焦点环上对比不足），Dark 下导航前景改深色保证可读。
具体色值以 frontend/packages/materials/src/tokens/source/themes/legal-amber.tokens.json 为准（当前 500=#C5AD78、700=#6D522B）；本文不手工复制色板，防止与生成物漂移。
legal-brass 是独立材料强调，不是 Primary 或 Warning。

章红 · `legal-burgundy`

成熟、克制、识别度高；适合精品所和合伙人门户。

#FCF5F6

#F8E7EA

#F0CDD4

#E3A4B0

#CB6B7F

#A93F57

#8E3047

#75263B

#622334

#55212E

#2F0F18

青律 · `legal-jade`

温润、知识性、东方专业；适合知识、合规与仲裁场景。

#F0F8F6

#DCF0EB

#B9DDD5

#86C1B5

#4CA093

#247D72

#1B655C

#185149

#17423D

#153733

#0A201E

暖橙 · `legal-orange`

活力、能源、制造；适合能源、工业与面向活动的品牌。

#FFF8F0

#FFEDD8

#FFD7AD

#FFB970

#FF9B3D

#FA8919

#ED6C00

#C45500

#A84400

#873500

#4D1B00

Light 与 Dark 主动作都使用 Brand 500（#FA8919），白字前景。
这是全表唯一的主按钮阶位例外：其他主题 Light 用 700、Dark 用 300，暖橙因 700 阶过深而改用 500 阶。
Focus ring 用 700 阶，保证在浅色表面的对比度。

组件消费示例

组件实现优先消费 Component Token，让 Brand、Mode 和交互状态由生成器统一解析：

/* 按钮不读取色阶，也不在组件内判断当前主题。 */
.primary-action {
  color: var(--cmp-button-primary-fg);
  background: var(--cmp-button-primary-bg-default);
}

.primary-action:hover {
  background: var(--cmp-button-primary-bg-hover);
}

自定义 Pattern 没有对应 Component Token 时，只能使用 System 语义角色。状态提示不能借用当前品牌的红、绿或橙色阶：

/* 失败提示沿用稳定的 Danger 语义，切换 Brand 时含义不变。 */
.delivery-failure {
  color: var(--sys-color-status-danger-fg);
  background: var(--sys-color-status-danger-bg);
  border: 1px solid var(--sys-color-status-danger-border);
}

视觉基线

衡蓝主题

香槟金主题

章红主题

青律主题