Color 色彩
了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。
主色
默认的主题色是明亮、友好的蓝色。
primary
#409eff
辅助色
除了主颜色外,您需要在不同的场景中使用不同的场景颜色 (例如,危险的颜色表示危险的操作)
success
#67c23a
warning
#e6a23c
danger
#f56c6c
info
#909399
其他颜色变量&其他变量
中性色用于文本、背景和边框颜色。 通过运用不同的中性色,来表现层次结构。
#303133
text-color-primary
#606266
text-color-regular
#909399
text-color-secondary
#a8abb2
text-color-placeholder
#c0c4cc
text-color-disabled
12px
font-size-extra-small
13px
font-size-small
14px
font-size-base
16px
ont-size-medium
18px
font-size-large
20px
font-size-extra-large
500
font-weight-primary
24px
font-line-height-primary
#dcdfe6
border-color
#e4e7ed
border-color-light
#ebeef5
border-color-lighter
#f2f6fc
border-color-extra-light
#d4d7de
border-color-dark
#cdd0d6
border-color-darker
0px 0px 12px rgba(0, 0, 0, 0.12)
box-shadow-light
#f0f2f5
fill-color
#f5f7fa
fill-color-light
#fafafa
fill-color-lighter
#fafcff
fill-color-extra-light
#ebedf0
fill-color-dark
#e6e8eb
fill-color-darker
#ffffff
fill-color-blank
#ffffff
color-white
#000000
color-black
#ffffff
bg-color
#f2f3f5
bg-color-page
#ffffff
bg-color-overlay
border-width = 1px
border-style = solid
border-color-hover = text-color-disabled
border = border-width border-style border-color
border-radius-base = 4px
border-radius-small = 2px
border-radius-round = 20px
border-radius-circle = 100px
disabled-bg-color = fill-color-light
disabled-text-color = text-color-placeholder
disabled-border-color = border-color-light
transition-duration = 0.3s
transition-duration-fast = 0.2s
component-size-large = 40px
component-size = 32px
component-size-small = 24px