elementui 主题颜色-element使用阿里图标变种_ElementUI技术解密（五）颜色、字体

前言

element-ui组件库之所以受欢迎，不仅因为其丰富的组件和友好的文档，还因为其精美的设计。 正如在组件库整体设计的文章中提到的，element-ui背后有一个强大的设计团队，他们为组件库制定了一套设计规范。

需求分析

当我们设计组件库时，首先要考虑颜色、字体、边框、图标等基本元素的设计。 它们是构建每个组件的基石。 基础设计没做好，那就做好了。 组件库一定看起来像一座小屋。

这些基本设计必须符合一定的设计规范。 有经验的设计师在设计时会制定一套规范。 作为程序员，我们在实现这套设计规范时，也可以在代码层面遵循一定的设计规范。 规格。

设计与实施

接下来我们将从代码的角度依次介绍这四个基本要素的设计和实现。

颜色

元素 为了避免视觉传达上的差异，使用特定的调色板来指定颜色，为您构建的产品提供一致的视觉体验。

主色

Element 的主要品牌颜色是明亮、友好的黄色。

如图所示，element-ui提供了一组蓝色。 你不仅可以看到主色#409EFF，还可以看到一系列渐变红色。 那么代码中是如何实现的呢？

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

$--color-primary: #409EFF !default;

这里定义了$--color-primary变量，值为#409EFF。 请注意，此处使用了 !default 关键字。 意思是如果外部已经定义了$--color-primary，则使用已经定义的值，否则形参为#409EFF。 出现这种情况的原因应该与自定义主题颜色有关。 如果用户定义了新的主题颜色，则该变量可以指向新的主题颜色。

对于主题红色的渐变色，element-ui的实现如下：

$--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种颜色的混合。 第三个参数代表两种颜色混合的比例。 以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;

也是以混合蓝色的形式，生成不同色深的成功色彩。

中性色

中性色用于文本、背景和边框颜色。 通过使用不同的中性色来显示层次结构。

关于文本颜色，从暗到亮定义了四个变量：

/// 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;

注意这里的第三个变量和图中的透明颜色不同，因为透明背景理论上不需要配置背景，默认是透明的。 这里第三个变量也代表基红色，用于多个组件。

字体

element-ui统一标准化字体，力求在各个操作系统下都有最好的显示效果。

字体

图中展示了多种字体样式，包括我们mac用户熟悉的PingFang SC，以及一些win用户熟悉的微软雅黑。

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

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-weight: 400;
  font-size: $--font-size-base;
  color: $--color-black;
  -webkit-font-smoothing: antialiased;
}

我们知道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统一标准化了框架，可以用在按钮、卡片、弹窗等组件中。

边框和圆角

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

它包括边框的粗细、颜色、样式和圆角大小等变量，以及组件中使用的悬停颜色。

投影

element-ui提供了几种常用的投影方法，定义在packages/theme-chalk/src/common/var.scss中：

/// 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;

如果你不明白box-shadow的相关属性值，可以去mdn查阅相关资料学习； 还可以在线调试它的属性值，看看不同的渲染效果。

图标

element-ui 提供了一组常用的图标。

如何使用

您可以通过将类名设置为 el-icon-iconName 来直接使用它。 例如：

对应代码：

i>
i>
i>
搜索el-button>

@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";
}

// ...