forked from forgetest5/react-components-docs
Create 组件库主题规范.md
This commit is contained in:
yangchch6
GitHub
parent
7734b26b7d
commit
92432b5a72
|
|
@ -0,0 +1,113 @@
|
|||
## 组件库主题规范
|
||||
|
||||
### 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;
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 如何按照新主题来修改一个组件的样式提取。
|
||||
|
||||
Loading…
Reference in New Issue