add color && typo docs

examples/docs/color.md

@@ -0,0 +1,157 @@
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue-light {
+    background-color: #58b7ff;
+  }
+  .bg-blue,
+  .bg-info {
+    background-color: #20a0ff;
+  }
+  .bg-blue-dark {
+    background-color: #1d8ce0;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+
+  .bg-black {
+    background-color: #1f2d3d;
+  }
+  .bg-black-light {
+    background-color: #324057;
+  }
+  .bg-black-lighter {
+    background-color: #475669;
+  }
+
+  .bg-silver {
+    background-color: #8492a6;
+  }
+  .bg-silver-light {
+    background-color: #99a9bf;
+  }
+  .bg-silver-lighter {
+    background-color: #c0ccda;
+  }
+
+  .bg-gray {
+    background-color: #d3dce6;
+  }
+  .bg-gray-light {
+    background-color: #e5e9f2;
+  }
+  .bg-gray-lighter {
+    background-color: #eff2f7;
+  }
+
+  .bg-white-dark {
+    background-color: #f9fafc;
+  }
+
+  .color-gray {
+    color: #5e6d82;
+  }
+</style>
+
+## Color 色彩
+
+Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
+
+### 主色
+
+Element 主要品牌颜色是鲜艳、友好的蓝色。
+
+<el-row :gutter="12">
+  <el-col :span="8">
+    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
+  </el-col>
+  <el-col :span="8">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
+  </el-col>
+  <el-col :span="8">
+    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  </el-col>
+</el-row>
+
+### 辅助色
+
+除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。每种颜色都有较浅和较深两种。
+
+<el-row :gutter="12">
+  <el-col :span="6">
+    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-danger">Danger<div class="value">#ff4949</div></div>
+  </el-col>
+</el-row>
+
+### 中性色
+
+中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+
+<el-row :gutter="12">
+  <el-col :span="6">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-black">Black<div class="value">#1f2d3d</div></div>
+      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
+      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-silver">Silver<div class="value">#8492a6</div></div>
+      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99a9bf</div></div>
+      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#c0ccda</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#d3dce6</div></div>
+      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#e5e9f2</div></div>
+      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#eff2f7</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
+      <div class="demo-color-box color-gray bg-white">Dark White<div class="value">#F9FAFC</div></div>
+      <div class="demo-color-box color-gray bg-white-dark">White<div class="value">#FFFFFF</div></div>
+    </div>
+  </el-col>
+</el-row>

examples/docs/typography.md

@@ -0,0 +1,148 @@
+<style>
+  .demo-typo-box {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border: 1px solid #eaeefb;
+    font-size: 40px;
+    color: #1f2d3d;
+    text-align: center;
+    line-height: 162px;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: 17px;
+
+    .name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 35px;
+      border-top: 1px solid #eaeefb;
+      font-size: 14px;
+      color: #8492a6;
+      line-height: 35px;
+      text-align: left;
+      text-indent: 10px;
+    }
+  }
+  .demo-typo-size {
+    .h1 {
+      font-size: 20px;
+    }
+    .h2 {
+      font-size: 18px;
+    }
+    .h3 {
+      font-size: 16px;
+    }
+    .text-regular {
+      font-size: 14px;
+    }
+    .text-small {
+      font-size: 13px;
+    }
+    .text-smaller {
+      font-size: 12px;
+    }
+    .color-dark-light {
+      color: #99a9bf;
+    }
+  }
+  .typo-PingFang {
+    font-family: 'PingFang SC';
+  }
+  .typo-Hiragino {
+    font-family: 'Hiragino Sans GB';
+  }
+  .typo-Microsoft {
+    font-family: 'Microsoft YaHei';
+  }
+  /* 英文 */
+  .typo-Helvetica-Neue {
+    font-family: 'Helvetica Neue';
+  }
+  .typo-Helvetica {
+    font-family: 'Helvetica';
+  }
+  .typo-Arial {
+    font-family: 'Arial';
+  }
+</style>
+
+## Typography 字体
+
+我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
+
+### 中文字体
+
+<div class="demo-typo-box typo-PingFang">
+  和畅惠风
+  <div class="name">PingFang SC</div>
+</div>
+<div class="demo-typo-box typo-Hiragino">
+  和畅惠风
+  <div class="name">Hiragino Sans GB</div>
+</div>
+<div class="demo-typo-box typo-Microsoft">
+  和畅惠风
+  <div class="name">Microsoft YaHei</div>
+</div>
+
+### 英文／数字字体
+
+<div class="demo-typo-box typo-Helvetica-neue">
+  RGag
+  <div class="name">Helvetica Neue</div>
+</div>
+<div class="demo-typo-box typo-Helvetica">
+  RGag
+  <div class="name">Helvetica</div>
+</div>
+<div class="demo-typo-box typo-Arial">
+  RGag
+  <div class="name">Arial</div>
+</div>
+
+### 字体家族 css 代码：
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
+
+### 字体使用规范：
+
+<table class="demo-typo-size">
+  <tbody>
+    <tr>
+      <td class="h1">主标题</td>
+      <td class="h1">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">20px  Extra large</td>
+    </tr>
+    <tr>
+      <td class="h2">标题</td>
+      <td class="h2">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">18px large</td>
+    </tr>
+    <tr>
+      <td class="h3">小标题</td>
+      <td class="h3">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">16px Medium</td>
+    </tr>
+    <tr>
+      <td class="text-regular">正文</td>
+      <td class="text-regular">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">14px Small</td>
+    </tr>
+    <tr>
+      <td class="text-small">正文（小）</td>
+      <td class="text-small">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">13px Extra Small</td>
+    </tr>
+    <tr>
+      <td class="text-smaller">辅助文字</td>
+      <td class="text-smaller">用 Element 快速搭建页面</td>
+      <td class="color-dark-light">12px Extra Extra Small</td>
+    </tr>
+  </tbody>
+</table>

examples/nav.config.json

@@ -10,6 +10,18 @@
           "title": "Layout 布局",
           "description": ""
         },
+        {
+          "path": "/color",
+          "name": "色彩 (color)",
+          "title": "Color 色彩",
+          "description": ""
+        },
+        {
+          "path": "/typography",
+          "name": "字体 (typography)",
+          "title": "Typography 字体",
+          "description": ""
+        },
         {
           "path": "/icon",
           "name": "图标 (icon)",