ZUI 3

Appearance

颜色 ​

ZUI 的颜色体系基于 TailwindCSS 调色板 实现，主要包含语义化调色板、界面颜色和特殊颜色。下面分别进行介绍。

语义化调色板 ​

ZUI 内置了 8 种语义化调色板，每种类型都来自 TailwindCSS 内置的调色板，你可以根据产品中的需要来更换现有调色板。

PRIMARY — 主要
品牌、主题、可交互、正常
--color-primary-50
50
--color-primary-100
100
--color-primary-200
200
--color-primary-300
300
--color-primary-400
400
--color-primary-500
500
--color-primary-600
600
--color-primary-700
700
--color-primary-800
800
--color-primary-900
900
--color-primary-950
950
SECONDARY — 次要
品牌、主题、次级、常态的
--color-secondary-50
50
--color-secondary-100
100
--color-secondary-200
200
--color-secondary-300
300
--color-secondary-400
400
--color-secondary-500
500
--color-secondary-600
600
--color-secondary-700
700
--color-secondary-800
800
--color-secondary-900
900
--color-secondary-950
950
SUCCESS — 成功
完成、积极
--color-success-50
50
--color-success-100
100
--color-success-200
200
--color-success-300
300
--color-success-400
400
--color-success-500
500
--color-success-600
600
--color-success-700
700
--color-success-800
800
--color-success-900
900
--color-success-950
950
WARNING — 关注
提示、重点
--color-warning-50
50
--color-warning-100
100
--color-warning-200
200
--color-warning-300
300
--color-warning-400
400
--color-warning-500
500
--color-warning-600
600
--color-warning-700
700
--color-warning-800
800
--color-warning-900
900
--color-warning-950
950
DANGER — 警告
提示、异常、警醒
--color-danger-50
50
--color-danger-100
100
--color-danger-200
200
--color-danger-300
300
--color-danger-400
400
--color-danger-500
500
--color-danger-600
600
--color-danger-700
700
--color-danger-800
800
--color-danger-900
900
--color-danger-950
950
IMPORTANT — 重要
优先
--color-important-50
50
--color-important-100
100
--color-important-200
200
--color-important-300
300
--color-important-400
400
--color-important-500
500
--color-important-600
600
--color-important-700
700
--color-important-800
800
--color-important-900
900
--color-important-950
950
SPECIAL — 特殊
触动、激情
--color-special-50
50
--color-special-100
100
--color-special-200
200
--color-special-300
300
--color-special-400
400
--color-special-500
500
--color-special-600
600
--color-special-700
700
--color-special-800
800
--color-special-900
900
--color-special-950
950
GRAY — 灰色
中立、背景、边界
--color-gray-50
50
--color-gray-100
100
--color-gray-200
200
--color-gray-300
300
--color-gray-400
400
--color-gray-500
500
--color-gray-600
600
--color-gray-700
700
--color-gray-800
800
--color-gray-900
900
--color-gray-950
950

提示

点击调色板中的颜色，可以复制颜色变量名称方便在代码中使用。

界面颜色 ​

在 ZUI 中，界面上公共的颜色已被精心梳理和定义，尽可能使用更少的颜色来定义大部分界面元素上可能用到的颜色。界面颜色都应该来自语义化调色板，你可以根据产品中的需要来更换其他调色板。下面是这些颜色的定义：

--color-canvas
CANVAS — 画布颜色
通常用于页面背景、组件背景等，在浅色主题中为白色，在深色主题中为深黑色。
--color-inverse
INVERSE — 画布反色
通常用于界面突出部分的背景或文字颜色，例如工具提示背景等，在浅色主题中为黑色，在深色主题中为白色。
--color-surface-light
SURFACE-LIGHT — 轻量的控件背景
轻量的控件的背景颜色
--color-surface
SURFACE — 控件背景
用于控件的背景颜色，例如按钮背景、可交互面板背景等，在浅色主题中为浅灰色，在深色主题中为深黑色。
--color-surface-strong
SURFACE-STRONG — 加重的控件背景
加重的控件的背景颜色
--color-fore
FORE — 文本颜色
默认的文本颜色，在浅色主题中为深黑色，在深色主题中为浅灰色。
--color-focus
FOCUS — 焦点颜色
可聚焦控件的焦点状态指示颜色，例如按钮获得焦点的轮廓颜色。
--color-link
LINK — 链接颜色
链接的颜色，例如超链接、按钮链接等，通常与主题色保持一致。
--color-link-hover
LINK-HOVER — 链接悬停颜色
链接的在鼠标悬停状态时的颜色
--color-link-visited
LINK-VISITED — 链接访问后的颜色
链接的在点击访问后的颜色
--color-placeholder
PLACEHOLDER — 占位文本颜色
通常用于输入框的占位文本颜色
--color-border
BORDER — 边框颜色
控件的边框颜色
--color-border-strong
BORDER-STRONG — 加重的边框颜色
加重的控件的边框颜色
--color-border-light
BORDER-LIGHT — 轻量的边框颜色
轻量的控件的边框颜色

特殊颜色 ​

在 ZUI 中会用到一些特殊颜色，这些颜色的定义是固定的，不会因为更换主题或调色板而改变。下面是这些颜色的定义：

--color-white
WHITE — 白色
永远为纯白色 #FFFFFF，不会受主题影响
--color-black
BLACK — 黑色
永远为纯黑色 #000000，不会受主题影响
--color-transparent
TRANSPARENT — 透明色
Alpha 通道永远为 0，不会受主题影响
--color-inherit
INHERIT — 继承色
继承父元素同属性的颜色值，由 CSS color 属性值 inherit 提供。
--color-current
CURRENT — 当前色
继承父元素文本颜色属性的值，由 CSS color 属性值 currentColor 提供。

额外的颜色定义 ​

除了 ZUI 中已经定义的界面颜色和特殊颜色，有时还需要用到其他颜色，这时应该通过自定义调色板来实现。例如为了让图表上的图形更有区分度，可以定义一系列额外的调色板，例如 Chart1、Chart2....，然后在图表中按需使用。推荐使用 Tailwind CSS Color Generator 等工具来生成调色板。

使用颜色 ​

你拥有多种方式来使用颜色，下面分别进行介绍。

通过 CSS 变量 ​

每种语义化颜色都被定义为 CSS 变量，变量名称拥有相同的格式，都以 --color- 开头，然后通过 - 连接颜色名称得到。例如 CSS 变量 --color-primary-500 可以引用 Primary 调色板上的第 500 号颜色。下面为一个在 HTML 代码中使用的例子：

这是一段使用 Primary 调色板上的第 500 号颜色的文本

html
<h4 style="color: var(--color-primary-500)">
  这是一段使用 Primary 调色板上的第 500 号颜色的文本
</h4>

使用 CSS 工具类 ​

在 ZUI 中提供了大量 CSS 工具类，大部分定义与 TailwindCSS 的工具类一致。在这些工具类中为你提供了大量的颜色相关的工具类，你可以通过这些工具类来使用颜色。下面为使用 CSS 工具类的例子：

这是一段使用 Primary 调色板上的第 500 号颜色的文本

html
<h4 class="text-primary">
  这是一段使用 Primary 调色板上的第 500 号颜色的文本
</h4>

更多用法和例子参考 CSS 工具类 文档。

在设计中使用 ​

为了实现统一流程的交互体验，应该在设计时使用 ZUI 的颜色体系，下面为一些具体的建议：

  • 在设计中使用 ZUI 的颜色体系，而不是使用设计工具自带的颜色体系；
  • 在设计工具中为颜色进行命名，命名方式与 ZUI 中的颜色名称一致，例如 color-primary-500；
  • 如果需要实现不同风格，推荐定义新的调色板实现，而不是只修改调色板中的某一个颜色；
  • 因为界面颜色来自调色版，不建议手动进行修改，除非主题需要实现对比度更明显的风格；
  • 任何时候都不建议修改特殊颜色的定义。

自定义配色 ​

通过自定义配色可以实现不通的主题风格。你可以在页面中通过定义新的颜色变量来覆盖默认的颜色定义，从而实现自定义配色。下面为一个例子：

css
/* 覆盖主要调色板的定义 */
:root {
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: #d8b4fe;
  --color-primary-400: #c084fc;
  --color-primary-500: #a855f7;
  --color-primary-600: #9333ea;
  --color-primary-700: #7e22ce;
  --color-primary-800: #6b21a8;
  --color-primary-900: #581c87;
  --color-primary-950: #3b0764;
  --color-primary-50-rgb: 250, 245, 255;
  --color-primary-100-rgb: 243, 233, 255;
  --color-primary-200-rgb: 233, 214, 254;
  --color-primary-300-rgb: 216, 182, 252;
  --color-primary-400-rgb: 191, 136, 249;
  --color-primary-500-rgb: 167, 92, 244;
  --color-primary-600-rgb: 146, 62, 231;
  --color-primary-700-rgb: 125, 46, 203;
  --color-primary-800-rgb: 106, 41, 166;
  --color-primary-900-rgb: 88, 34, 133;
  --color-primary-950-rgb: 59, 14, 99;
}

提示

在定义 CSS 变量覆盖调色板时，除了定义 50~950 的十六进制颜色外，还需要定义对应的 RGB 颜色，这是为了在一些特殊场景下通过改变透明度来实现颜色的变化。

注意

如果你需要自定义配色，建议只通过修改调色板来实现，不建议修改界面颜色，除非主题需要实现对比度更明显的风格，任何时候都不应该修改特殊颜色的定义。

更多关于主题的内容参考 主题 文档。