个人前端规范系列--颜色语义化,变化标准化[要变你们一块儿变]

目标

1.设计改变一下主题色,全套页面和组件皆变色
2.定义尽可能统一一套颜色变量表 后期改色直接把表给改了
3.因为有些颜色常常用语义化以后就很好使用了,好比border色

颜色语义化变量化

为何要把颜色语义化,变量化？
实现复用和一处修改到处改变
写过程序的人都知道变量是程序最伟大之处,而颜色无非就是个色值。而一个app颜色上的变化无非就是全部组件上的色值变化。当咱们把颜色语义变量化后,第一利于使用,咱们更容易感知一个颜色的用处。第二全部用到同一变量的组件均可以共用这个统一的色值。后期咱们无非就是改变一个主题色,固然咱们也可开放更多的组件色变量。这里固然不能继续手写css，咱们将使用sass来编写咱们的css，由于没有sass的加持咱们该方案将步履维艰。

难点:须要全部用到颜色的地方都带入这个色值变量，这是比较头疼的问题特别是第三方库，明显能够看到上图仍是有些组件没有适配到，因此这里强烈推荐使用能够改变主题色的第三方UI库，而本身写的页面基本上能够变化

这里前端实现的方案是选用能够定制主题色的第三方库,本身写的页面所有用变量来写色。

主题色

$generalColor {
 theme: '#2d8cf0'
}

辅助色

辅助色是具备表明性的颜色,经常使用于信息提示,好比成功,警告和失败。这是一套基本不变的色系。

$generalColor: (
  info: '#2d8cf0',
  success: '#19be6b',
  warning: '#ff9900',
  error: '#ed3f14'
);

中性色

又一个一旦定义好终身使用的色系
包括背景,边框,分割线,主标，副标,表格头,中性色在落地时是按造透明度的方式实现的,另外为了适应深色背景和浅色背景顾设置两套中性色。

$generalColor: (
  title: opacity(#000,85%),
  primary_text: opacity(#000,65%),
  secondary_text: opacity(#000,45%),
  disable: opacity(#000,25%),
  border: opacity(#000,15%),
  divider: opacity(#000,9%),
  background : opacity(#000,4%),
  table_header : opacity(#000,2%)，
  title_dark: opacity(#fff,100%),
  primary_text_dark: opacity(#fff,85%),
  secondary_text_dark: opacity(#fff,65%),
  disable_dark: opacity(#fff,45%),
  border_dark: opacity(#fff,25%),
  divider_dark: opacity(#fff,15%),
  background_dark : opacity(#fff,9%),
  tableHeader_dark : opacity(#fff,4%)
);

变化标准化

能够量化的还有颜色的变化反馈
好比点击色，通过色[通常为原色加深百分比]
例如 按钮点击态 前端实现以下 大体意思既是主题色加深10%

.btn_active{
    color:darken(map-get($generalColor,theme),10%)
}

使用sass循环输出本身想用class

//定制一套颜色class
//语义抽象话
$generalColr: (
        primary:#2d8cf0,
        lightPrimary:#5cadff,
        darkPrimary :#2b85e4,
        info:#2d8cf0,
        success:#19be6b,
        warning:#ff9900,
        error:#ed3f14,
        danger : #ed3f14,
        title:#1c2438,
        content:#19be6b,
        subColor:#80848f,
        disabled:#bbbec4,
        border:#dddee1,
        divider:#e9eaec,
        background:#f8f8f9,
        white : #fff,
        black : #000,
        yellow : yellow,
        th : #eef1f6
);
@each $key, $color in $generalColr {
  .f_c_#{$key} {
    color: $color!important;
  }
  .bg_c_#{$key} {
    background: $color!important;
  }
}

如此这般你能够快速使用这些class

<div class="f_c_title bg_c_theme">主题色按钮,title色字体</div>

<div class="f_c_disable bg_c_error">成功色按钮,error色字体</div>

总结

有了上面这套变量,之后给组件定义颜色就是信手拈来之事
例如如下的标签:

@import 'scss/_var.scss'
.btn-label{
    color:map-get($generalColor,error)；
}

@import 'scss/_var.scss'
.btn-label{
    color:map-get($generalColor,warning)；
}

在以后设计或者产品经理对颜色不满意了,修改也将是分分钟的事!
只需修改_var.scss 该变量文件,全局既会生效!