Feat 1.x support theme config primary/secondary color

docs/advanced/use-theme.md

@@ -6,9 +6,16 @@ category: 进阶指南
 
 > 该能力需要满足项目依赖的基础组件为 `@alifd/next`，如果依赖的是 `@icedesign/base` 请参考 [这篇文档](https://github.com/alibaba/ice/wiki/0.x-theme)
 
-飞冰（ICE）默认的主题是蓝色系，无法满足所有项目的需求，因此我们通过工程方式支持一键换肤的能力。
+飞冰（ICE）默认的主题是蓝色系，无法满足所有项目的需求，因此我们通过工程方式支持一键换肤的能力。有两种方式配置主题：
 
-## 选择主题包
+- 配置主题包方式
+- 配置变量方式
+
+**注意两种方案不能同时使用，请按需选择其一。**
+
+## 配置主题包方式
+
+### 选择主题包
 
 主题包即一个 npm 包，包里面对应的是一堆主题变量。ICE 官方提供了几套不同颜色的主题包，分别是：
 
@@ -21,7 +28,7 @@ category: 进阶指南
 
 ![](https://img.alicdn.com/tfs/TB1y78lECzqK1RjSZPxXXc4tVXa-1768-702.png)
 
-## 安装主题包
+### 安装主题包
 
 ```bash
 # 项目/模板安装在 dependencies 里
@@ -32,7 +39,7 @@ npm install @icedesign/theme --save-dev
 
 注意区块/组件的主题包仅在开发区块/组件时有效，将区块引入到项目之后，最终以项目配置的主题包为准。
 
-## 配置主题包
+### 配置主题包
 
 在 `package.json` 里配置对应主题包：
 
@@ -45,4 +52,19 @@ npm install @icedesign/theme --save-dev
 }
 ```
 
+然后重新 dev 即可生效。
+
+## 配置变量方式
+
+在 `package.json` 里配置主品牌色：
+
+```json
+// package.json
+{
+  "themeConfig": {
+    "primary-color": "#f60"
+  }
+}
+```
+
 然后重新 dev 即可生效。

tools/ice-skin-loader/lib/designTokens.js

@@ -1,5 +1,6 @@
 // ice-design 主品牌色组件功能色关系映射
 const primaryColorMap = {
+  // 0.x
   '$balloon-primary-color-bg': '$color-brand1-1',
   '$balloon-primary-color-close': '$color-brand1-5',
   '$balloon-primary-color-close-hover': '$color-brand1-7',
@@ -75,6 +76,13 @@ const primaryColorMap = {
   '$tree-switch-hover-border-color': '$color-brand1-6',
   '$tree-switch-hover-icon-color': '$color-brand1-6',
   '$upload-select-card-border-color-hover': '$color-brand1-6',
+
+  // 1.x
+  '$color-link-1': '$color-brand1-6',
+  '$color-link-2': '$color-brand1-6',
+  '$color-link-3': '$color-brand1-9',
+
+  // 兼容
   '$color-b1-1': '$color-brand1-1 !default',
   '$color-b1-2': '$color-brand1-2 !default',
   '$color-b1-3': '$color-brand1-3 !default',

tools/ice-skin-loader/lib/generateVarsByThemeConfig.js

@@ -13,10 +13,9 @@ module.exports = function generateVarsByThemeConfig(themeConfig) {
     .map((key) => {
       const value = themeVars[key];
       return getVariableMappingString(key, value);
-    })
-    .join('\n');
+    });
 
-  return appendVariables;
+  return appendVariables.join('\n');
 };
 
 /**

tools/ice-skin-loader/lib/index.js

@@ -6,12 +6,25 @@ const generateVarsByThemeConfig = require('./generateVarsByThemeConfig');
 
 let themeFileVars = '';
 let themeConfigVars = '';
+let importVarsCode = '';
 
 module.exports = function (source) {
   const options = loaderUtils.getOptions(this);
+
   const { themeFile, themeConfig } = options;
   const modulePath = path.relative(this.rootContext, this.resourcePath);
 
+  // 使用 `@alifd/next` 的项目自动引入 next 变量，业务代码里无需手动 @import
+  if (!importVarsCode) {
+    try {
+      const projectPkgData = require(path.resolve(this.rootContext, 'package.json'));
+      importVarsCode = projectPkgData.dependencies['@alifd/next'] ? `@import '~@alifd/next/lib/core/index.scss';` : ' ';
+    } catch (err) {
+      console.error(chalk.red('\n[Error] 读取 package.json 出错'), err);
+      importVarsCode = ' ';
+    }
+  }
+
   let prefixVars = '';
   if (themeConfig.nextPrefix && /@alifd\/next\/lib\/(.+).scss$/.test(modulePath)) {
     // 将 next 1.x 的 prefix 从 next- 改为自定义前缀，解决 0.x&1.x 混用的问题
@@ -38,7 +51,7 @@ module.exports = function (source) {
   }
 
   // 权重 prefixVars > themeConfigVars > themeFileVars > source
-  return `${themeFileVars}\n${themeConfigVars}\n${prefixVars}\n${source}`;
+  return `${themeFileVars}\n${themeConfigVars}\n${prefixVars}\n${importVarsCode}\n${source}`;
 };
 
 

tools/ice-skin-loader/lib/utils.js

@@ -1,4 +1,5 @@
 const tinycolor = require('tinycolor2');
+
 /**
  * 根据差值计算颜色
  * @param {Color} color