telecomtheme

简介

本工程覆盖antd3/4组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。

bin\default

• modalWidth.js // 导出的弹窗或抽屉宽度变量，方便统一控制页面弹窗及抽屉宽度
• theme.js // 用于导入到webpack配置文件的lessOptions-->modifyVars实现组件换肤
• theme.less // 针对于使用less的工程项目提供的less变量，在工程内全局引入，并在编写样式时使用其内部变量
• theme.scss // 针对于使用scss的工程项目提供的scss变量，在工程内全局引入，并在编写样式时使用其内部变量

安装配置

先安装本工程包，对应项目的中找到webpack.config.js文件，给antd组件库引入包里的的theme.js,实现组件换肤。这是你应该就能正常使用里面的变量了。

+ import theme from 'telecomtheme/bin/default/theme';

module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: theme,
+         javascriptEnabled: true,
+       },
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

umi3/4工程则直接替换配置的theme即可

+ import theme from 'telecomtheme/bin/default/theme';

// .umirc.js 或 config/config.js
export default {
  theme,
}

如果项目使用的是scss编写样式，则需要全局导入scss/less变量 先安装sass-resources-loader

+ import themeScss from 'telecomtheme/bin/default/theme.scss';

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [themeScss]
          },
        },
      ],
    },
  ],
},

变量使用规则

变量内提供色板，文字大小，移入等效果变量值，需要按规则使用

1. 文字/图标颜色

'heading-color': 标题,
'text-color': 正文,
'text-color-paragraph': 段落,
'text-color-secondary': 说明,
'disabled-color': 禁用文字,

// 反色文字，深色背景中使用
'text-color-inverse': 标题,
'text-color-dark': 正文,
'text-color-paragraph-dark': 段落),
'text-color-secondary-dark': 说明,
'disabled-color-dark': 禁用文字,

// 图标
'icon-color-hover': 移入
'icon-color-secondary': 说明
'icon-color-heading': 标题

2. 行移入或活动颜色

'item-hover-bg': 移入行,
'item-active-bg': 活动行,

3. 背景

'body-background': 页面背景
'component-background': 组件背景
'background-color-base': 深色背景
'background-color-light': 浅色背景
'disabled-bg': 禁用背景
'modal-mask-bg': 遮罩背景

4. 边线

'border-color-base': 控件轮廓线,
'dividing-color': 分割器组件，不同层级的右边线、左边线、下边线,
'border-color-split': 同层信息分隔：选择器、表格、卡片、滑块、大纲、步骤轴、时间轴导线,

5. 内间距与外间距，根据实际情况使用

'padding-lg' 
'padding-md'
'padding-sm'
'padding-xs'
'padding-xxs'
'padding-xxxs'
'margin-lg'
'margin-md'
'margin-sm'
'margin-xs'
'margin-xxs'
'margin-xxxs'

6. 文字大小

'font-size-sm': 小号文字
'font-size-md': 中号文字
'font-size-base': 默认文字(比中号大或相等)
'font-size-lg': 大号文字
'font-weight': 字重(一般是500)
'heading-1-size': 对应H1标签
'heading-2-size': 对应H2标签
'heading-3-size': 对应H3标签
'heading-4-size': 对应H4标签
'heading-5-size': 对应H5标签
'heading-6-size': 对应H6标签

7. 色板使用 提供了色板使用，每个色值分1-10级，可根据需要自行组合使用。需要实现情景内容交互效果，大原则如下： 背景色：xxx-1 移入文字颜色: xxx-5 默认文字颜色: xxx-6 点击文字颜色: xxx-7 如：

.box {
  color: @blue-6;
  background-color: @blue-1;
  &:hover {
    color: @blue-5;
  }
  &:active {
    color: @blue-7;
  }
}

这里只做示例参考，具体选值由UI确定

8. 弹窗宽度 为了方便统一弹窗及抽屉的宽度控制，统一由包引入宽度,如下面使用

import React from 'react';
import { Modal } from 'antd';
+ import modalWidth from 'telecomtheme/bin/default/modalWidth';

const Demo = () => {
  return (
    <Modal title="测试弹窗" width={modalWidth?.md}>111</Modal>
  )
}

9. 包内提供全局样式 包内提供全局样式, 对部分组件样式进行了调整,可以在src下创建global.less/global.scss文件,引入包内的全局样式

@import '~telecomtheme/bin/default/global.less';