forgetest5
/
react-components-docs
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity
react-components-docs/组件库主题规范.md

4.1 KiB
Raw Permalink Blame History

组件库主题规范

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;

如何按照新主题来修改一个组件的样式提取。

image