UI 组件库 - 颜色系统

不同的 UI 租组件库采用了不同的样式构建系统。 我们熟知的:

• Bootstarp 采用的 SCSS 预处理器
• Antd 采用的是 Less 预处理器
• Tailwindcss 则是采用 postcss 进行处理。

我们这里以组件库为以主要，暂不讨论 css 原子。

版本：

• Bootstrap: 4.3.1

Bootstrap 颜色系统

灰度变化

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

10种彩色系统

$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

主题颜色

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

颜色系统的扩展

彩色颜色系统中，使用 scss 的混合黑白色，将每一种彩色颜色，分成 9 个层次！

// 混合白色以及以及层次
@function tint-color($color, $level) {
  @return mix(white, $color, $level * $theme-color-interval);
}
// 混合黑色以及以及层次
@function shade-color($color, $level) {
  @return mix(black, $color, $level * $theme-color-interval);
}

• 100 - 400之间是混合白色
• 600-900之间四混合黑色
• 500 是给定值

ElementUI 颜色系统

element-ui 的颜色系统，相对没有 Bootstarp 辅助

• 品牌色
• 黑白色
• 品牌色的9个色阶，使用白色混合
• 功能色
  • success（light, lighter,相对版本）
  • warning（light, lighter,相对版本）
  • danger（light, lighter,相对版本）
  • info（light, lighter,相对版本）
• 字体色
  • primary
  • regular
  • secondary
  • placeholder
  • base
  • light
  • lighter
  • extra-light
• 背景色
  • background-color-base
• 链接色
  • link-color
  • link-hover-color

Vuetify

Vuetify 使用 scss 管理颜色变量，使用 map 数据结构获取数据的 key-value

Vuetify 的彩色颜色系统也是分为阶梯的：

• base 基础值
• lighten（1-5）
• darken（1-4）
• accent （1-4）

一种彩色对应了 14 中颜色，说明 Vuetify 的颜色系统是非常丰富的。

vant

vant 采用 less 作为预处理器，vant 颜色系统比较简单：

• 黑白
• 灰度系统
• 红色
• 蓝色
• 橙色
• 橙黑色
• 橙亮色
• 绿色
• 渐变色
• 组件配色系统

// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: #fafafa;

vant 的颜色异同有一个优点就是，使用了 CSS 变量作为首选，我们可以方便的修改 CSS 变量，来修改样式。如果不支持 CSS 变量，我们就退回使用 less 的变量。

NutUI 2

// ---- color ----
$primary-color: #F0250F !default;
$normal-color: #848484 !default;
$link-color: $primary-color !default;
$link-hover-color: mix($link-color, #000, 80%) !default;
$title-color: #2D2D2D !default;
$text-color: #848484 !default;
$light-color: #F6F6F6 !default;
$dark-color: #DADADA !default;

小结

1. 主流主要使用 less 和 scss 来管理自己的颜色系统。因为主流的预处理都有丰富的颜色函数。
2. 彩色系统颜色每一种颜色都有不同的层级，一般是九个层级，使用预处理器哈数，或自定义算法混合白色实现。
3. 对渐变色的支持较为薄弱
4. bootstrap 对scss的细节考虑的最为完整。包括

• color
• hover:color
• border:color
• outline:color
• background:color