跳到主要内容

社区版(Community)

企业版主题是一套基于企业级设计规范的主题,包含了企业级设计规范中的色彩、字体、图标、布局等规范。 目前,我们首先提供了该主题的颜色规范,后续会逐步提供其他规范。

企业版主题包含了两种色彩模式:lightdark,分别对应明亮模式和暗色模式。

主题色

每个主题都有其主题色,炎凰企业版的主题色为橙色(#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

Base
Container
Content
Base
Container
Content

注意: 以上命名规则为工程开发这边的命名规则,设计师在设计时可能对Container和Content有自己的定义。

边框

按钮

系统中按钮大约分为:主按钮、常规按钮、文字按钮、危险按钮等。主按钮用于突出重点和强调,常规按钮用于普通的操作,危险按钮用于危险操作。

主按钮通常使用主题色,常规按钮使用中性色,危险按钮使用危险色。而当鼠标移到常规按钮时,按钮的前景色(字体和边框)将会使用主题色进行高亮,以提示用户该按钮为可点击状态。

主按钮和常规按钮:

链接

图标