色彩
品牌颜色是界面的主要颜色,是品牌的反映,尽管有辅助颜色是可选的。按主色和副色划分,它们主要用于UI操作(按钮、链接)或突出显示活动状态。
主色
Color Value
使用规则
等级默认分为7个等级 lightest
, lighter
, light
, base
, dark
, darker
, darkest
,base
类名与参数不需要添加名称直接使用,如:.os-text-primary
样式类名使用方法“前缀(背景/文字)+类型+级别”,样式参数val(“前缀+类型+级别”)
html
<span
class="preview-span
os-background-primary
"></span>
<style>
.preview-span {
background-color: var(--os-background-primary);
}
</style>
Primary
Color | Level | Background Class | Text Class | CSS Variable |
---|---|---|---|---|
lightest | .os-background-primary-lightest | .os-text-primary-lightest | --os-color-primary-lightest | |
lighter | .os-background-primary-lighter | .os-text-primary-lighter | --os-color-primary-lighter | |
light | .os-background-primary-light | .os-text-primary-light | --os-color-primary-light | |
base | .os-background-primary | .os-text-primary | --os-color-primary | |
dark | .os-background-primary-dark | .os-text-primary-dark | --os-color-primary-dark | |
darker | .os-background-primary-darker | .os-text-primary-darker | --os-color-primary-darker | |
darkest | .os-background-primary-darkest | .os-text-primary-darkest | --os-color-primary-darkest |
辅助色
除了主颜色外,您需要在不同的场景中使用不同的场景颜色 (例如,危险的颜色表示危险的操作)
Success
Color Value
Color | Level | Background Class | Text Class | CSS Variable |
---|---|---|---|---|
lightest | .os-background-success-lightest | .os-text-success-lightest | --os-color-success-lightest | |
lighter | .os-background-success-lighter | .os-text-success-lighter | --os-color-success-lighter | |
light | .os-background-success-light | .os-text-success-light | --os-color-success-light | |
base | .os-background-success | .os-text-success | --os-color-success | |
dark | .os-background-success-dark | .os-text-success-dark | --os-color-success-dark | |
darker | .os-background-success-darker | .os-text-success-darker | --os-color-success-darker | |
darkest | .os-background-success-darkest | .os-text-success-darkest | --os-color-success-darkest |
Warning
Color Value
Color | Level | Background Class | Text Class | CSS Variable |
---|---|---|---|---|
lightest | .os-background-warning-lightest | .os-text-warning-lightest | --os-color-warning-lightest | |
lighter | .os-background-warning-lighter | .os-text-warning-lighter | --os-color-warning-lighter | |
light | .os-background-warning-light | .os-text-warning-light | --os-color-warning-light | |
base | .os-background-warning | .os-text-warning | --os-color-warning | |
dark | .os-background-warning-dark | .os-text-warning-dark | --os-color-warning-dark | |
darker | .os-background-warning-darker | .os-text-warning-darker | --os-color-warning-darker | |
darkest | .os-background-warning-darkest | .os-text-warning-darkest | --os-color-warning-darkest |
Danger
Color Value
Color | Level | Background Class | Text Class | CSS Variable |
---|---|---|---|---|
lightest | .os-background-danger-lightest | .os-text-danger-lightest | --os-color-danger-lightest | |
lighter | .os-background-danger-lighter | .os-text-danger-lighter | --os-color-danger-lighter | |
light | .os-background-danger-light | .os-text-danger-light | --os-color-danger-light | |
base | .os-background-danger | .os-text-danger | --os-color-danger | |
dark | .os-background-danger-dark | .os-text-danger-dark | --os-color-danger-dark | |
darker | .os-background-danger-darker | .os-text-danger-darker | --os-color-danger-darker | |
darkest | .os-background-danger-darkest | .os-text-danger-darkest | --os-color-danger-darkest |
中性色
用于文本、边框、背景和阴影。
Color Value
Color | Level | Background Class | Text Class | CSS Variable |
---|---|---|---|---|
0 | .os-background-neutral-0 | .os-text-neutral-0 | --os-color-neutral-0 | |
1 | .os-background-neutral-1 | .os-text-neutral-1 | --os-color-neutral-1 | |
2 | .os-background-neutral-2 | .os-text-neutral-2 | --os-color-neutral-2 | |
3 | .os-background-neutral-3 | .os-text-neutral-3 | --os-color-neutral-3 | |
4 | .os-background-neutral-4 | .os-text-neutral-4 | --os-color-neutral-4 | |
5 | .os-background-neutral-5 | .os-text-neutral-5 | --os-color-neutral-5 | |
6 | .os-background-neutral-6 | .os-text-neutral-6 | --os-color-neutral-6 | |
7 | .os-background-neutral-7 | .os-text-neutral-7 | --os-color-neutral-7 | |
8 | .os-background-neutral-8 | .os-text-neutral-8 | --os-color-neutral-8 | |
9 | .os-background-neutral-9 | .os-text-neutral-9 | --os-color-neutral-9 | |
10 | .os-background-neutral-10 | .os-text-neutral-10 | --os-color-neutral-10 |