颜色
两层颜色系统
库中使用了两种类型的配色方案：私有和语义。这两种配色方案（或称为调色板）在结构和目的上有所不同。私有调色板为所有主题的所有颜色深浅和色调分配 RGBA 值，而语义调色板则使用私有颜色作为值，并将其应用于特定的 UI 元素。
私有颜色
是设计系统中的基础颜色层。它们不应直接在组件中使用。相反，它们作为语义变量的值，这些语义变量已在组件中使用。私有变量的值是 RGBA/RGB 颜色。
此调色板包含每个主题的每种颜色的所有色调，包括带 Alpha 通道和不带 Alpha 通道的，前缀为 Solid。
带 Alpha 通道的颜色
Alpha 颜色仅适用于索引为 500 及以下的数值。它们与背景色混合，以提高可读性和对比度。建议您使用它们：
- 用于浅色（从 50 到 300）
- 在与排版相关的项目中，文本可以显示在任何颜色的背景之上，因为使用 Alpha 通道可以防止对比度损失。
纯色
当两个对象可能重叠，并且您希望防止重叠处的颜色混合时，请使用纯色。纯色根据主题的主要背景色进行选择。由于纯色可以显示在任何颜色的底层之上，因此应仔细考虑其使用。
每当更改主要或次要背景色时，都应重新生成深浅，以保持纯色和 Alpha 通道颜色之间的视觉一致性。
如何创建色调
色调是从尺度的中间创建的，在本例中是索引为 550 的颜色。它是生成饱和度较低和饱和度较高的色调的主要颜色。例外情况是黑色和白色，它们位于尺度的极端，可以创建更多的色调和带 Alpha 通道的值。
索引从 50 到 500 的颜色是通过降低基础颜色（550）的不透明度来创建的。带 Alpha 通道的颜色只能在此范围内找到，而纯色则可以在整个尺度上具有值。
索引为 600 到 1000 的颜色是通过与所选主题的主要颜色形成对比的背景色进行混合来创建的。例如，浅色主题的主要背景色是白色，对比色是深色主题的背景色。因此，这种对比背景色将与颜色混合以创建更深的色调。
在深色主题中，主要背景是深色的，对比背景是浅色主题的背景，即白色。因此，白色将与颜色混合以创建高索引的色调。
一个脚本可以帮助您快速生成颜色调色板，以便进行开发交接。
语义颜色
此颜色组中的变量被分组，然后根据其含义在组件中使用。它们的配置值会针对每个主题使用私有变量进行配置。某些语义变量有时可以用作其他变量的值，但这必须谨慎进行，以避免递归。
按类型分类
在 Figma 中，变量被组织成组以便于导航，如下所示。而在代码中，结构更直接。品牌色不放在单独的类别中，只有一个基础变量组。Figma 和代码在变量名称、结构和含义方面是等效的，除非名称是为了提高可读性或理解性而进行了优化。
-
品牌
来自所有类别的品牌特定变量的集合。这些是基础颜色，可让您快速应用样式并查看结果。此组仅在 Figma 中可用。它不包含在代码中，颜色会按其自身类别进行分组。
-
文本
用于文本和图标颜色的变量组。由于文本和图标经常一起显示，因此保持其视觉一致性是有意义的。
-
基础
用于底层、填充和背景的颜色组。
-
基础语义
带有信息、成功、警告、危险和杂项着色的底层颜色。有正常和悬停状态的值。可能适用于某些类型的图表，但并非全部。此组仅在 Figma 中可用。在代码中，它是基础组的一部分。
-
浮动基础
悬浮在页面主要背景之上的元素的底层颜色。此组仅在 Figma 中可用。在代码中，它是基础组的一部分。
-
线条
描边、线条、分隔线、框架以及任何其他细小元素的颜色。
-
效果
用于加深文本、应用阴影等的颜色。
-
杂项
用于滚动条、图表轴和图表工具提示背景的技术颜色组。
有关每个变量的更多信息，请参阅 Figma 颜色样式说明或 Storybook。
按含义分类
每个组中的变量可能有自己的含义，这些含义由组的应用原则决定。例如，对于文本，使用“主要”和“附加”等类别是有意义的。但是，它们不能应用于任何其他类型的内容。
以下是不同类别共享的含义示例：
- success (成功)
- dangerous (危险)
- warning (警告)
- neutral (中性)
- etc. (等等)
变量和颜色样式
您可以使用 Figma 的本地变量界面来处理颜色值。要访问它，请打开包含库的文件，确保页面上没有选择任何内容（可以通过单击画布的空白背景来完成），然后在右侧面板中选择“本地变量”。
虽然变量尚未进入 Beta 版，但设计系统仍使用颜色样式来直接定义对象的颜色。请注意，颜色样式中的值由相应的变量表示。这意味着：
-
要更改颜色样式的颜色，您需要更改相应变量的颜色。
-
颜色样式继承变量的属性，特别是对颜色主题的支持。因此，应用了颜色样式的对象可以使用 Figma 的功能仅更改主题。
主题
Gravity-UI 支持四种主题：浅色、深色以及它们的对比版本。当前的行业标准至少需要两种：浅色和深色。考虑到用户偏好的多样性，有时很难选择最佳方案。
对比度增强的主题是为了解决常规主题中对比度不足的问题，这可能是由于设备特性（如显示器校准、设置的亮度、矩阵类型和颜色渲染（尤其是在电视上））或房间照明引起的。目前，这些主题并未提供解决可访问性问题的方案。