個人前端規範系列--顏色語義化,變化標準化[要變你們一塊兒變]

目標

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 該變量文件,全局既會生效!