114 lines
4.1 KiB
Markdown
114 lines
4.1 KiB
Markdown
## 组件库主题规范
|
||
|
||
### tinper-bee 主题变量
|
||
```
|
||
/* 全局样式 */
|
||
$default-color // 默认色（不暴露给用户）
|
||
$primary-color // 主题色（#F53C32）
|
||
$font-family-primary // 字体
|
||
$font-size-base // 字号
|
||
$text-color-base // 字体颜色
|
||
$border-radius // 圆角
|
||
$border-color // 边框色（#a5adba）
|
||
$item-hover-bg-color-base //条目hover背景色
|
||
$item-selected-bg-color-base //条目selected背景色
|
||
|
||
/* 按钮细化样式 */
|
||
$secondary-color // 次按钮背景色
|
||
$button-secondary-text-color // 次按钮字体色
|
||
|
||
/*表格细化样式*/
|
||
$table-header-background-color // 表头背景色
|
||
$table-header-text-color // 表头文字颜色
|
||
$table-border-color-base // 表格分割线颜色
|
||
$table-row-hover-bg-color // 表格行hover背景色
|
||
$table-head-font-weight // 表头字体的粗细
|
||
```
|
||
|
||
|
||
### tinper-bee-core 全局样式文件简介
|
||
- minxin-variables 【组件直接调用文件】， 定义各组件中抽离出来的默认变量
|
||
如下：
|
||
- 默认字体
|
||
- 默认颜色
|
||
- 字体大小和粗细
|
||
- 波纹效果
|
||
- 贝塞尔曲线动画
|
||
- 阴影
|
||
- 常用z-index值设定
|
||
- UI组件的预设
|
||
|
||
- minxin-mixins
|
||
该文件定义了很多可复用的功能模块，比如说border-radius和box-shadow等。
|
||
|
||
- minxin-palette
|
||
1. 设置根据minxin-colors的颜色生成背景颜色和字体颜色
|
||
2. 一般在组件的Demo 示例中使用该文件中的定义。
|
||
|
||
- minxin-themeColors
|
||
为了方便定制，将一些样式变量提取了出来，放在 minxin-themeColors.scss 文件中。设置主色、辅色等 tinper-bee 中最常用的通用变量，即主题定制时可供用户配置的样式变量。
|
||
|
||
|
||
### tinper-bee-core 调用关系图
|
||
|
||
|
||
|
||
|
||
### minxin-themeColors.scss文件
|
||
- $primary-color 变量是用户定制的主题色，其值 $palette-blue-600 取自色板文件（minxin-colors.scss）
|
||
- 组件的样式变量最终指向以下这些属性，就能保证自定义主题文件后，组件样式随之改变
|
||
```
|
||
@import "minxin-colors";
|
||
|
||
// 默认色
|
||
$default-color: $palette-blue-grey-50;
|
||
$default-color-dark: "223,225,230";
|
||
$default-color-light: "223,225,230";
|
||
|
||
// 主题色
|
||
$primary-color: "245, 60, 50" !default;
|
||
$primary-color-dark: "230, 0, 18" !default;
|
||
$primary-color-light: "230, 0, 18" !default;
|
||
|
||
// 字体
|
||
$font-family-primary: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif !default;
|
||
// 主字号
|
||
$font-size-base: 14px !default;
|
||
// 主按钮文本色
|
||
$text-color-base: $color-dark-contrast !default;
|
||
|
||
// 圆角，包括：button、select等
|
||
$border-radius: 3px !default;
|
||
// 边框色，包括button、select、bee-form-control、cascader、timepicker、datepicker、upload、badge、autocomplete、pagination、tooltip、bee-input-number、bee-city-select
|
||
$border-color: "165, 173, 186" !default;
|
||
// 条目hover背景色，包括：select、dropdown、table、datepicker、tree、menu、calendar、autocomplete
|
||
$item-hover-bg-color-base: "235, 236, 240" !default;
|
||
// 条目selected背景色，包括：select、menu等
|
||
$item-selected-bg-color-base: "255, 247, 231" !default;
|
||
|
||
// Button 细化样式变量:
|
||
// 次按钮背景色
|
||
$secondary-color: $palette-blue-grey-50 !default;
|
||
$secondary-color-dark: "223,225,230" !default;
|
||
$secondary-color-light: "223,225,230" !default;
|
||
// 次按钮文本色
|
||
$button-secondary-text-color: $palette-grey-900 !default;
|
||
|
||
// Table 细化样式变量：
|
||
// 表头背景色
|
||
$table-header-background-color: "241, 242, 245";
|
||
// 表头文字颜色
|
||
$table-header-text-color: "33, 33, 33";
|
||
// 表格分割线颜色
|
||
$table-border-color-base: "193, 199, 208";
|
||
// 表格行hover背景色
|
||
$table-row-hover-bg-color: "235, 236, 240";
|
||
// 表头字体的粗细
|
||
$table-head-font-weight: normal;
|
||
|
||
|
||
```
|
||
|
||
### 如何按照新主题来修改一个组件的样式提取。
|
||
|