ts-element系列之色彩、字体、边框与图标

[webVueBlog]

ts-element系列之色彩、字体、边框与图标

element-ui 关于颜色的定义在 packages/theme-chalk/src/common/var.scss 中：

这里定义了 $--color-primary 变量，值为#409EFF,注意这里用了 !default 关键字，它在这里的含义是如果外面已经定义了 $--color-primary，那么就用已经定义的值，否则赋值为 #409EFF。这么做的原因应该是和自定义主题色相关，如果用户定义了新的主题色，该变量就可以指向新的主题颜色。

$--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 */

这里定义了 9 个变量，都使用了 mix 函数，mix 函数是 sass 中内置的函数，它表示 2 种颜色的混合，第三个参数表示 2 种颜色混合各自占的比例，以 mix($--color-white, $--color-primary, 10%) 为例，表示 $--color-white（白色）占比 10%，而 $--color-primary（主色）占比 90%。

通过这种方式，element-ui 轻松实现了不同颜色深度的主色。

辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

$--color-success: #67C23A !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;

也是通过 mix 混入白色的方式，生成不同颜色深度的成功色。

中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;

/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

/// color|1|Background Color|4
$--color-black: #000000 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;

字体

在 packages/theme-chalk/src/reset.scss 中定义了全局的字体样式：

font-family 可以指定一个字体列表，属性值用逗号隔开，浏览器会选择列表中第一个该计算机上有安装的字体。

字号

element-ui 定义了 6 种大小的字体，它们的定义在 packages/theme-chalk/src/common/var.scss 中：

/// fontSize|1|Font Size|0
$--font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$--font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$--font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$--font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$--font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$--font-size-extra-small: 12px !default;

其中最小是 12px，最大是 20px。通常在设计是不建议出现小于 12px 大小的字体的，太小的字体会对视力不好的人群是不友好的。

行高

通常我们在遇到多行文字的时候，设置不同的 line-height 会有不同的渲染效果，一般设置至少为 1.5。这将有助于改善低可视条件下的体验，也对认知阻碍者（如阅读困难者）有帮助。

element-ui 在 packages/theme-chalk/src/common/var.scss 中只定义了 2 种行高：

/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-secondary: 16px !default;

element-ui 在大部分组件的实现中直接写死了行高的大小，不过通常更好的方式是使用无单位的值而不是具体的大小，因为一旦你更改了字体大小，如果用无单位值就不需要再手动改行高了。另外一特定场景是如果文字的大小要随页面的缩放而变化，使用无单位的值可以确保行高也会等比例缩放。

边框和圆角

element-ui 提供了一系列关于边框的圆角样式的定义，在 packages/theme-chalk/src/common/var.scss 中：

/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$--border-radius-zero: 0 !default;s



/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

图标

element-ui 提供的图标是利用 IconFont 技术实现的，在 packages/theme-chalk/src/icon.scss 中

@font-face {
  font-family: 'element-icons';
  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-display: $--font-display;
  font-style: normal;
}

[class^="el-icon-"], [class*=" el-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-edit:before {
  content: "\e78c";
}

// ...

首先，利用 @font-face 定义了自定义字体，它的来源是 packages/theme-chalk/src/fonts/ 目录中定义的字体图标文件。
其次，利用属性选择器筛选了以 el-icon- 开头或者是带有 el-icon- 的类名的元素，它们对应的 font-family 就是自定义字体 element-icons。