颜色体系

ZUI 组件库的颜色体系基于现代 UI 设计原则，提供了清晰、一致的色彩方案，确保界面视觉统一且具有良好的可访问性。

基础颜色

默认色

--color-default

hsl(222.2 84% 4.9%)

默认色

--color-default-hover

hsl(240 5.3% 26.1%)

悬停状态

--color-default-active

hsl(215 13.8% 34.1%)

激活状态

--color-default-text-1

hsl(0, 0%, 100%)

默认文本色

主色调

主色调用于突出显示关键交互元素，如按钮、链接和重要信息。

--color-primary

hsl(217.2 91.2% 59.8%)

主要颜色

--color-primary-hover

hsl(213.1 93.9% 67.8%)

悬停状态

--color-primary-active

hsl(211.7 96.4% 78.4%)

激活状态

--color-primary-disabled

hsla(201, 94%, 86%, 0.377)

禁用状态

功能色

功能色用于表示不同的操作状态和信息类型。

成功色

--color-success

hsl(83.7 80.5% 44.3%)

成功状态

--color-success-hover

hsl(82.7 78% 55.5%)

悬停状态

--color-success-active

hsl(82 84.5% 67.1%)

激活状态

警告色

--color-warning

hsl(37.7 92.1% 50.2%)

警告状态

--color-warning-hover

hsl(43.3 96.4% 56.3%)

悬停状态

--color-warning-active

hsl(45.9 96.7% 64.5%)

激活状态

危险色

--color-danger

hsl(0 84.2% 60.2%)

危险状态

--color-danger-hover

hsl(0 90.6% 70.8%)

悬停状态

--color-danger-active

hsl(0 93.5% 81.8%)

激活状态

信息色

--color-info

hsl(270.7 91% 65.1%)

信息状态

--color-info-hover

hsl(270 95.2% 75.3%)

悬停状态

--color-info-active

hsl(269.2 97.4% 85.1%)

激活状态

中性色

中性色用于背景、文本、边框等基础界面元素。

--color-background

#ffffff

背景色

--color-border

#e5e7eb

边框色

--color-text

#333333

主要文本色

--color-text-muted

#6b7280

次要文本色

--color-disabled

#f1f1f1

禁用状态色

暗色模式

在暗色模式下，所有颜色变量会进行相应调整，以确保良好的视觉体验。

暗色模式中性色

--color-background (暗色)

#1a1a1a

背景色

--color-text (暗色)

#f0f0f0

主要文本色

--color-border (暗色)

#374151

边框色

--color-disabled (暗色)

#e0e0e023

禁用状态色

暗色模式功能色

暗色模式下的功能色会调整为更深的色调，以适应暗色背景：

--color-primary (暗色)

#60a5fa

主要颜色

--color-success (暗色)

#34d399

成功状态

--color-warning (暗色)

#fbbf24

警告状态

--color-danger (暗色)

#f87171

危险状态

--color-info (暗色)

#22d3ee

信息状态

使用方法

在组件中使用这些颜色变量时，直接引用 CSS 变量即可：

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-text-1);
}

.button-primary:hover {
  background-color: var(--color-primary-hover);
}

颜色模式会根据用户系统设置或手动切换自动应用，无需额外代码处理。

颜色变量参考表格

默认色

变量名	值	说明
--color-default	hsl(222.2 84% 4.9%)	默认背景色
--color-default-hover	hsl(240 5.3% 26.1%)	悬停状态
--color-default-active	hsl(215 13.8% 34.1%)	激活状态
--color-default-text-1	hsl(0, 0%, 100%)	默认文本色

主色调

变量名	值	说明
--color-primary	hsl(217.2 91.2% 59.8%)	主要颜色
--color-primary-rgb	96, 165, 250	RGB 格式
--color-primary-hover	hsl(213.1 93.9% 67.8%)	悬停状态
--color-primary-active	hsl(211.7 96.4% 78.4%)	激活状态
--color-primary-disabled	hsla(201, 94%, 86%, 0.377)	禁用状态
--color-primary-text-1	hsl(240 10% 3.9%)	文本颜色

成功色

变量名	值	说明
--color-success	hsl(83.7 80.5% 44.3%)	成功状态
--color-success-rgb	52, 211, 153	RGB 格式
--color-success-hover	hsl(82.7 78% 55.5%)	悬停状态
--color-success-active	hsl(82 84.5% 67.1%)	激活状态

警告色

变量名	值	说明
--color-warning	hsl(37.7 92.1% 50.2%)	警告状态
--color-warning-rgb	251, 191, 36	RGB 格式
--color-warning-hover	hsl(43.3 96.4% 56.3%)	悬停状态
--color-warning-active	hsl(45.9 96.7% 64.5%)	激活状态

危险色

变量名	值	说明
--color-danger	hsl(0 84.2% 60.2%)	危险状态
--color-danger-rgb	248, 113, 113	RGB 格式
--color-danger-hover	hsl(0 90.6% 70.8%)	悬停状态
--color-danger-active	hsl(0 93.5% 81.8%)	激活状态

信息色

变量名	值	说明
--color-info	hsl(270.7 91% 65.1%)	信息状态
--color-info-rgb	179, 136, 255	RGB 格式
--color-info-hover	hsl(270 95.2% 75.3%)	悬停状态
--color-info-active	hsl(269.2 97.4% 85.1%)	激活状态

中性色

变量名	值	说明
--color-background	#ffffff	背景色
--color-border	#e5e7eb	边框色
--color-text	#333333	主要文本色
--color-text-muted	#6b7280	次要文本色
--color-disabled	#f1f1f1	禁用状态色

暗色模式中性色

变量名	值	说明
--color-background	#1a1a1a	背景色
--color-text	#f0f0f0	主要文本色
--color-border	#374151	边框色
--color-disabled	#e0e0e023	禁用状态色

暗色模式功能色

变量名	暗色值	说明
--color-primary	#60a5fa	主要颜色
--color-primary-hover	#3b82f6	悬停状态
--color-primary-active	#2563eb	激活状态
--color-success	#34d399	成功状态
--color-warning	#fbbf24	警告状态
--color-danger	#f87171	危险状态
--color-info	#22d3ee	信息状态