Theme: releasing all variables

build/bin/version.js

 var fs = require('fs');
 var path = require('path');
 var version = process.env.VERSION || require('../../package.json').version;
-var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' };
+var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.9': '1.4' };
 if (!content[version]) content[version] = '2.0';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

examples/docs/en-US/custom-theme.md

@@ -28,33 +28,14 @@ import './element-variables.scss'
 Vue.use(Element)
 ```
 
-Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way:
-
-| Variable | Description | Default value |
-| ------ | ---- | ------ |
-| $--sm | `sm` breakpoint for responsive layout | 768px |
-| $--md | `md` breakpoint for responsive layout | 992px |
-| $--lg | `lg` breakpoint for responsive layout | 1200px |
-| $--xl | `xl` breakpoint for responsive layout | 1920px |
-| $--color-primary | theme color | #409EFF |
-| $--color-success | color for success | #67C23A |
-| $--color-warning | color for warning | #EB9E05 |
-| $--color-danger | color for danger | #FA5555 |
-| $--color-info | color for info | #878D99 |
-| $--color-text-primary | color for primary texts | #2D2F33 |
-| $--color-text-regular | color for regular texts | #5A5E66 |
-| $--color-text-secondary | color for secondary texts | #878D99 |
-| $--color-text-placeholder | color for placeholder texts | #B4BCCC |
-| $--border-color-base | base border color | #D8DCE5 |
-| $--border-color-light | light border color | #DFE4ED |
-| $--border-color-lighter | lighter border color | #E6EBF5 |
-| $--border-color-extra-light | extra light border color | #EDF2FC |
-| $--font-path | icon font file path | 'fonts' |
-
-### More customizations
-If you need more customization than just changing the theme color, please follow these steps:
-
-#### <strong>Install related tool</strong>
+:::tip
+Note that it is required to override icon font path to the relative path of Element's font files.
+:::
+
+### CLI theme tool
+If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
+
+#### <strong>Install</strong>
 First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
 ```shell
 npm i element-theme -g
@@ -78,23 +59,25 @@ et -i [custom output file]
 > ✔ Generator variables file
 ```
 
-In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format:
+In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
 ```css
 $--color-primary: #409EFF !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
 $--color-success: #67c23a !default;
 $--color-warning: #eb9e05 !default;
 $--color-danger: #fa5555 !default;
 $--color-info: #878d99 !default;
+
+...
 ```
 
 #### <strong>Modify variables</strong>

examples/docs/en-US/form.md

@@ -324,6 +324,13 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
 ```
 :::
 
+:::tip
+[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
+> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
+
+To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.
+  :::
+
 ### Inline form
 
 When the vertical space is limited and the form is relatively simple, you can put it in one line.

examples/docs/en-US/installation.md

@@ -17,6 +17,10 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
+:::tip
+We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
+:::
+
 ### Hello world
 If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
 

examples/docs/zh-CN/custom-theme.md

@@ -27,31 +27,12 @@ import './element-variables.scss'
 Vue.use(Element)
 ```
 
-需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。使用这种方式可以自定义的变量为：
-
-| 变量名 | 含义 | 默认值 |
-| ------ | ---- | ------ |
-| $--sm | 响应式布局中 `sm` 的断点值 | 768px |
-| $--md | 响应式布局中 `md` 的断点值 | 992px |
-| $--lg | 响应式布局中 `lg` 的断点值 | 1200px |
-| $--xl | 响应式布局中 `xl` 的断点值 | 1920px |
-| $--color-primary | 主题色 | #409EFF |
-| $--color-success | 表示「成功」的状态色 | #67C23A |
-| $--color-warning | 表示「警告」的状态色 | #EB9E05 |
-| $--color-danger | 表示「危险」的状态色 | #FA5555 |
-| $--color-info | 表示「信息」的状态色 | #878D99 |
-| $--color-text-primary | 主要文字色 | #2D2F33 |
-| $--color-text-regular | 常规文字色 | #5A5E66 |
-| $--color-text-secondary | 次要文字色 | #878D99 |
-| $--color-text-placeholder | 占位文字色 | #B4BCCC |
-| $--border-color-base | 一级边框 | #D8DCE5 |
-| $--border-color-light | 二级边框 | #DFE4ED |
-| $--border-color-lighter | 三级边框 | #E6EBF5 |
-| $--border-color-extra-light | 四级边框 | #EDF2FC |
-| $--font-path | icon 字体图标路径 | 'fonts' |
-
-### 深层次的定制
-如果仅仅改变以上变量不能满足你的需求，请按以下步骤进行更深层次的主题定制：
+:::tip
+需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
+:::
+
+### 命令行主题工具
+如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
 
 #### <strong>安装工具</strong>
 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
@@ -80,20 +61,22 @@ et -i [可以自定义变量文件]
 如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
 ```css
 $--color-primary: #409EFF !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
 $--color-success: #67c23a !default;
 $--color-warning: #eb9e05 !default;
 $--color-danger: #fa5555 !default;
 $--color-info: #878d99 !default;
+
+...
 ```
 
 #### <strong>修改变量</strong>

examples/docs/zh-CN/form.md

@@ -318,6 +318,13 @@
 ```
 :::
 
+:::tip
+W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：
+> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
+
+即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。
+:::
+
 ### 行内表单
 
 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

examples/docs/zh-CN/installation.md

@@ -17,6 +17,10 @@ npm i element-ui -S
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
+:::tip
+我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
+:::
+
 ### Hello world
 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
 

packages/theme-chalk/src/select.scss

@@ -133,18 +133,4 @@
       }
     }
   }
-
-  @include e(tag) {
-    display: inline-block;
-    height: $--select-tag-height;
-    line-height: $--select-tag-height;
-    font-size: $--select-font-size;
-    border-radius: $--border-radius-base;
-    color: $--select-tag-color;
-    background-color: $--select-tag-background;
-
-    & .el-icon-close {
-      font-size: $--select-input-font-size;
-    }
-  }
 }