社区版(Community)
企业版主题是一套基于企业级设计规范的主题,包含了企业级设计规范中的色彩、字体、图标、布局等规范。 目前,我们首先提供了该主题的颜色规范,后续会逐步提供其他规范。
企业版主题包含了两种色彩模式:light
和 dark
,分别对应明亮模式和暗色模式。
主题色
每个主题都有其主题色,炎凰企业版的主题色为橙色(#FF792C
)。主题色是整个主题的核心色彩,用于突出重点和强调。
主题色会被应用到按钮、链接、图标、边框、背景等元素上。 以按钮为例,主题色会被应用到按钮的背景色、边框色、文字色等:
组件色
文字
Default Text
Secondary Text
Disabled Text
Default Text
Secondary Text
Disabled Text
背景
在系统中,我们对背景色进行了以下一些分类:
Base
系统最大的背景色,用于整个页面的背景色。在容器分层中属于最底层。
Container
当一个组件能够包含其他组件,例如,一个卡片,其中可以包含各种文字,图表。 GridLayout中的一个Grid,其主要功能为对Chart进行一个包装,方便对Chart进行布局。这些组件都可以称为Container。
Container的背景色为 LM: neutral.0; DM: neutral.40。
Content
当一个组件不能容纳其它组件时,例如,一个文字,一个图标,一个按钮,这些组件的背景色时都应使用background.content
, 而非background.container
。
Float
当一个组件或容器,不是嵌入在页面中,而是悬浮在页面上,例如,一个弹出框,一个Popover, 一个Dropdown,一个Drawer等,这些组件的背景色时都应使用background.float
, 而非background.container
。
注意: 以上命名规则为工程开发这边的命名规则,设计师在设计时可能对Container和Content有自己的定义。
边框
按钮
系统中按钮大约分为:主按钮、常规按钮、文字按钮、危险按钮等。主按钮用于突出重点和强调,常规按钮用于普通的操作,危险按钮用于危险操作。
主按钮通常使用主题色,常规按钮使用中性色,危险按钮使用危险色。而当鼠标移到常规按钮时,按钮的前景色(字体和边框)将会使用主题色进行高亮,以提示用户该按钮为可点击状态。
主按钮和常规按钮: