我的前端规范系列--颜色语义化,变化标准化[要变大家一起变]

目标

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 该变量文件,全局既会生效!