feat(theme): extract theme-js file for supprt mixin theme (#22934)

.antd-tools.config.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const packageInfo = require('./package.json');
+const defaultVars = require('./scripts/default-vars');
 const darkVars = require('./scripts/dark-vars');
 const compactVars = require('./scripts/compact-vars');
 
@@ -80,6 +81,7 @@ function finalizeDist() {
     );
     // eslint-disable-next-line no-console
     console.log('Built a entry less file to dist/antd.less');
+    buildThemeFile('default', defaultVars);
     buildThemeFile('dark', darkVars);
     buildThemeFile('compact', compactVars);
   }

scripts/compact-vars.js

@@ -3,11 +3,9 @@ const path = require('path');
 const lessToJs = require('less-vars-to-js');
 
 const stylePath = path.join(__dirname, '..', 'components', 'style');
-const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
-const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
 const compactLess = fs.readFileSync(path.join(stylePath, 'themes', 'compact.less'), 'utf8');
 
-const compactPaletteLess = lessToJs(`${colorLess}${defaultLess}${compactLess}`, {
+const compactPaletteLess = lessToJs(compactLess, {
   stripPrefix: true,
   resolveVariables: false,
 });

scripts/dark-vars.js

@@ -8,11 +8,9 @@ const path = require('path');
 const lessToJs = require('less-vars-to-js');
 
 const stylePath = path.join(__dirname, '..', 'components', 'style');
-const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
-const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
 const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
 
-const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
+const darkPaletteLess = lessToJs(darkLess, {
   stripPrefix: true,
   resolveVariables: false,
 });

scripts/default-vars.js

@@ -0,0 +1,19 @@
+/**
+ * convert default.less into js vars
+ *
+ * const darkVars = require('./default-vars');
+ */
+const fs = require('fs');
+const path = require('path');
+const lessToJs = require('less-vars-to-js');
+
+const stylePath = path.join(__dirname, '..', 'components', 'style');
+const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
+const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
+
+const defaultPaletteLess = lessToJs(`${colorLess}${defaultLess}`, {
+  stripPrefix: true,
+  resolveVariables: false,
+});
+
+module.exports = defaultPaletteLess;

scripts/generateColorLess.js

@@ -2,6 +2,7 @@
 const path = require('path');
 const { generateTheme } = require('antd-theme-generator');
 const genCss = require('antd-pro-merge-less');
+const defaultVar = require('./default-vars');
 const dark = require('./dark-vars');
 const compact = require('./compact-vars');
 
@@ -12,6 +13,7 @@ genCss(
       theme: 'dark',
       fileName: './_site/dark.css',
       modifyVars: {
+        ...defaultVar,
         ...dark,
         '@site-text-color': '@heading-color',
         '@site-markdown-code-bg': '@input-bg',
@@ -21,6 +23,7 @@ genCss(
       theme: 'compact',
       fileName: './_site/compact.css',
       modifyVars: {
+        ...defaultVar,
         ...compact,
       },
     },