Skip to content
On this page

色彩

品牌颜色是界面的主要颜色,是品牌的反映,尽管有辅助颜色是可选的。按主色和副色划分,它们主要用于UI操作(按钮、链接)或突出显示活动状态。

主色

Color Value

使用规则

等级默认分为7个等级 lightest, lighter, light, base, dark, darker, darkestbase类名与参数不需要添加名称直接使用,如:.os-text-primary

样式类名使用方法“前缀(背景/文字)+类型+级别”,样式参数val(“前缀+类型+级别”)

html
<span 
  class="preview-span
  os-background-primary
  "></span>

<style>
  .preview-span {
    background-color: var(--os-background-primary);
  }
</style>

Primary

ColorLevelBackground ClassText ClassCSS 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
ColorLevelBackground ClassText ClassCSS 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
ColorLevelBackground ClassText ClassCSS 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
ColorLevelBackground ClassText ClassCSS 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
ColorLevelBackground ClassText ClassCSS 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

Released under the MIT License.