颜色库

CabinX 颜色源于DMALL设计语言的颜色调色板，延续了公司面向企业客户品牌的颜色体系。基础色板有9种主题色，每种主色划分了10个梯度，形成了90个颜色。这些颜色分为：主题色、中性色、语义色、交互状态色和遮罩色。 每种颜色有默认和亮色两个主色，用于不同场景下区分信息层级，比如：蓝色，他的默认主色Primary是Blue50，亮色Primarylight是Bule 00；他们各自拥有不同的状态颜色，但有的颜色可能相同，这可以让界面颜色更丰富，从而提供不同的视觉反馈；

主题色

主题色也称品牌色，一般与品牌色相关联，是一个产品的代表颜色。CabinX调色版中，默认使用50作为主色。 主题颜色通常也是强调颜色，常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。

语义色

语义颜色代表了重要的信息以及状态，比如：出错、成功、失败、提醒、链接等。CabinX语义颜色的选取遵守用户日常色彩的基本认知。比如：红色代表警示、错误负面情绪，绿色代表成功、通过、正面情绪； 注意：在同一个产品体系下，语义颜色需要保持一致，否则会干扰用户的认知体验。

中性色

中性色主要应用在界面的文字、背景、边框、分割线等场景中。中性色通常在用户界面中颜色占比最高，这使用户可以更专注于内容。实际界面应用中性色需要考虑深色背景以及浅色背景的差异，区分内容层次同时要充分保证内容的可识别性，我们参考了WCAG 2.0 标准建立了中性色版。

令牌是CabinX实现颜色的方法。每个令牌对应于页面上的特定元素层级，并且与CabinX的任何其他令牌完全一样使用。根据元素在页面上的使用位置而变化指定不同的令牌。这对于构建跨层工作的可重用组件非常有用。 下拉菜单：文字颜色（洋红色）、背景颜色（紫色）

交互状态色

根据使用场景和动作行为不同，不同颜色衍生出了不同状态的颜色，通常包含：Default默认、Hover悬停、Active点击、Slected选中、Focus聚焦、Disabed禁用6种状态颜色。

悬停Hover

悬停状态在当鼠标光标在交互元素上移动时会出现，悬停状态令牌是取CabinX调色板两个相邻颜色值，无论是默认主色还是高亮主色，悬停状态都要暗一个度。 例如：在下拉选择列表中，❶默认背景颜色为白色--cx-background-default值为whtie；❷悬停时背景变为--cx-background-hover值为Gray10；

点击Active

点击状态用于指示click、tap或向下按的动作,点击状态值是比默认颜色更暗，也可能和悬停状态共享相同值，例如，Blue 50点击状态是Blue 60，悬停状态也是Blue 60； 例如：下拉菜单按钮，❶默认背景颜色为Blue 50--cx-background-primary；❷点时背景变为--cx-background-primary-hover；

选中Slected

选中状态表示用户选择的项目或选项。通常会用高亮颜色提示用户已选中，选中状态的令牌由在基本令牌名称后添加的-selected来标识。 主题色为蓝色时，在白色背景上，高亮蓝色Primary Light是默认选中颜色--cx-background-primary-hover，值为Blue00。

聚焦Focus

当使用键盘操作时，聚焦状态会引起人们对页面上活动元素的注意。在CabinX中，元素的焦点通常由元素周围的2px边框表示。为了便于在页面上识别和定位，大多数焦点状态每个主题仅使用一种颜色，通过$focus颜色令牌控制。 按钮的描边：

• 默认的颜色--cx-border-color-default值为Gray20；
• 聚焦时的颜色--cx-border-color-focus值为Blue10；

主题

CabinX具备主题拓展能力，可根据产品特定业务特色、本地化用户喜好自定义主题。

目前有默认主题和海外两个主题。主题实现请参考：主题化