Colors (色彩)

KunUI 的完整色板:7 个语义色与各自 11 级色阶、由对比度生成的前景(on-color)、正文与次要文字,以及页面/卡片的表面层级。全部基于 OKLCH 感知均匀生成,实心配色在明暗两模式均达 WCAG AA。

语义色 · 实心

每个语义色的实心填充(bg-{color})与配对前景 text-{color}-foreground —— 前景由对比度生成,实心配色在明暗两模式均 ≥ WCAG AA。

色阶

每个色相的 11 级色阶(bg-{color}-{50…950})。基于 OKLCH 感知均匀生成, 同一档在不同色相上明暗一致;暗色模式下整条色阶翻转。

文字

正文用 text-foreground;说明、辅助文字、时间戳、计数等次要文字用 text-foreground-muted。它是介于灰阶两级之间的一个灰(浅色介于 600 与 700、暗色介于 500 与 600),在页面背景、卡片(content1)、叠在二者之上的 bg-default/20(悬停、高亮行)以及 bg-default-100(键帽)上两模式均 ≥ WCAG AA,由生成器校验。text-default-500 在浅色页面背景上只有 3.33:1,不要用作可读文字。

彩色文字

彩色文字(light / bordered / flat 变体、选中的 Tab、链接、错误提示)用 text-{color}-text, 不要直接用填充色 text-{color}:填充色当文字在浅色页面背景上只有 1.75–4.42:1。 {color}-text 取色阶里离填充色最近、且在页面背景、卡片以及该颜色 20% 着色(悬停、键盘焦点、flat) 上两模式均 ≥ WCAG AA 的一级,由生成器校验。

表面 · 层级

中性表面构成层级:页面背景 < 卡片(content1)< 更深的 well。 卡片与输入框靠填充 + 阴影抬升,而非描边。