mzohaibqc / antd-theme-generator Goto Github PK

SyntaxError: Inline JavaScript is not enabled. Is it set in your options?
in color.less on line 123, column 1:

122// ant-design/ant-motion#44
123.bezierEasingMixin();

can you please help me to implement live theme capability for my application with antd component library

My project uses antd and antd-mobile at the same time，so，does this module support at the same time?

When I set themeVariables to ['@body-background'] or ['@component-background'].

It will report a bug in Developer Tools.

When I use @body-background, color.less file will contain @body-backgroundbe6.

When I use @component-background, color.less file will contain @component-backgroundbe6

Why does datepicker have borders?（为什么checkbox不显示√,datepicker有边框?）

Describe the bug

error [LessError: error evaluating function `darken`: color.toHSL is not a function] {
  stack: undefined,
  type: 'Runtime',
  filename: 'input',
  index: 357348,
  line: 15700,
  column: 32,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    "@table-header-sort-active-bg: ~'darken(@table-header-bg, 3%)';",
    '@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);',
    '@table-selection-column-width: 60px;'
  ]
}

Show your code

// color.js
const path = require('path');
const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/ant-design-vue'),
  stylesDir: path.join(__dirname, './src'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less'),
}

generateTheme(options)
  .then((less) => {
    console.log(less);
    console.log('Theme generated successfully');
  })
  .catch((error) => {
    console.log('Error', error);
  });

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      },
    ],
  ],
};

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      /* https://github.com/webpack-contrib/less-loader */
      less: {
        lessOptions: {
          // modifyVars: {
          //   'primary-color': '#7c6dc5',
          // },
          javascriptEnabled: true,
        },
      },
    },
  },
};

Screenshots

Version

"ant-design-vue": "^2.0.0-rc.2",
"antd-theme-generator": "^1.2.8",
"core-js": "^3.6.5",
"less-loader": "^7.1.0",
"vue": "^3.0.0"

Describe the bug
antDir hasn't set default value, but call slice

Show your code

const nodeModulesPath = path.join(
antDir.slice(0, antDir.indexOf("node_modules")),
"./node_modules"
);

Screenshots

Version
should set default value

variables.less

@import "../../../../../node_modules/antd/lib/style/themes/default";
@primary-color: #ff2a00;
@btn-primary-bg: #ff2a00;// Same as primary-color

color.less

...
a {
  color: @btn-primary-bg;
  background-color: transparent;
}
...

Sory,my English is poor.
I think you may warn developers notify this.Tell them not set same color value.

Ie11 doesn't work, but Firefox and chrome do

For Example: the below variables are not in the mappings:
'@border-color-base',
'@background-color-light',
'@border-color-split',
'@input-placeholder-color',
So you can not use less.modifyVars to change theme instantly.

Theme switching cannot modify colors using fade method

ant-design/ant-design#20079

Describe the bug
Describe your bug in English language

Show your code
Show your config-overrides.js file and styles folder structure

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help

themeVariables: [
'@primary-color',
"@text-color",
"@heading-color",
"@text-color-secondary",
"@disabled-color",
"@body-background",
]

Describe the bug
I have been noticing that the colors in the production version of my app is affected when I have a local version running. For example, if I change a variable on localhost, my tab that is on [domain].com is also modified.

Show your code
Configs...

const options = {
  antDir: antDir,
  stylesDir: path.join(__dirname, "./styles"),
  varFile: path.join(__dirname, "./styles/theme.less"),
  themeVariables: ["@primary-color", "@border-radius-base"],
  outputFilePath: path.join(__dirname, "./public/color.less"),
};

Function where I set the theme

  if (theme && typeof window != "undefined") {
    (window as any).less.modifyVars(theme);
  }

Screenshots
Not applicable

Version
1.2.4

Stack
Next.JS 9.5.1
Antd 4.4.1

I hope to improve CSS Specificity when using Dynamic Import.

The Dynamic Import of vendor.chunk.css will overwrite my color.less.

<html>
 <head> 
  <link rel="stylesheet" href="/umi.css" /> 
  <meta charset="utf-8" /> 
  <title>zero code</title> 
  <link rel="stylesheet/less" type="text/css" href="/color.less" /> 
  <script>
    window.less = {
      async: false,
      env: 'production'
    };
  </script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="/vendors.chunk.css" />
  <script charset="utf-8" src="/vendors.async.js"></script>
  <link rel="stylesheet" type="text/css" href="/0.chunk.css" />
  <script charset="utf-8" src="/0.async.js"></script>
 </head>
 <body></body>
</html>

antd Input antd Select 聚焦后box-shadow颜色不会随修改色改变

Before the issue, thanks for this amazing snippet!

I am creating two different stylesheets based on the same style directory. One for dark theme and another for the light theme. The only difference they have is the theme variables and output directory. However, I cannot call the function again and generate a new less stylesheet since it returns the old cssCache because the styles folder routes have not changed. That is why it would be good to include a themeVariables for cache to avoid this.

let content = `${JSON.stringify(themeVariables)} `;
   styles.forEach(filePath => {
     content += fs.readFileSync(filePath).toString();
  });  

P.S. What exactly is the license of this repository and are we allowed to use this code commercially? I would love it if it could be an OSS to create contributions.

The options:

const options = {
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  antdStylesDir: path.join(__dirname, './node_modules/antd/es/button'),
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src/styles'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false,
  lessUrl: 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js',
  publicPath: '',
}

The antdStylesDir here is ./node_modules/antd/es/button'. So the entry is just ./node_modules/antd/es/button/style/index.less'

I just rewrite the ./node_modules/antd/es/button/style/index.less' to be:

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

//ant-btn
@btn-prefix-cls: ~'@{ant-prefix}-btn';
// Button styles
// -----------------------------
.caonidie{
  // line-height: @line-height-base;
  // // .btntest;
  // border:1px solid red
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  touch-action: manipulation;
}

Then I do (NOTE the param options is the one above):

generateTheme(options)
  .then(css => {
    console.log('css', css)
    fs.writeFile('test.less', css, err => {
      if (err) throw err
      console.log('file saved.')
    })
  })
  .catch(err => {
    // callback(err);
  })

The output test.less is:

...

.caonidie {
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
}
...

You will see some properties in .caonidie like position, display, font-weight are missing. I don't know why.

https://github.com/mzohaibqc/antd-theme-generator/blob/master/index.js#L340

error Error: ENOENT: no such file or directory, open '/Users/cipchk/Desktop/work/delon/node_modules/ng-zorro-antd/dist/antd.less'

For antd for angular version antd.less should be ng-zorro-antd.less.

When I set the color of layout-header-background in variables.less，then window.less.modifyVars({'@layout-header-background':'#124fff'}) didn't work. The same thing happened at @text-color.

cnpm中自动添加‘\9‘导致Chrome中报错

I try to replace @primary-1，in Antd it shows like

@primary-1: color(~`colorPalette('@{primary-color}', 1) `);

i try to replace it to #111, so i set

customColorRegexArray: [/^color\(.*\)$/]

and

window.less.modifyVars({
  '@primary-1': '#111',
  '@primary-color': '#eee',
  ...
})

but this color doesn't change.
Other normal color like @primary-color changes.

AntTheme.js run
window.less.modifyVars(vars)
http://gwmaster.byethost32.com/starterProject/

https://bitbucket.org/gwmaster_gwm/multiprojectstarter/src/master/

I tried to use this on vue project, but it doesn't work.

Describe the bug
When I set themeVariables as all variables in dark.less, some values are unexcepted.

Using the code below, the ant-tag-xxx got the unexcepted value(backgroundcolor).
(Each run will have a different random unexcepted value of ant-tag-xxx)

Such as

.ant-tag-lime {color: #a0d911;background: color(~`colorPalette("@{table-header-filter-active-bg}", 1)`);border-color: #eaff8f;}

Show your code

const fs = require('fs');
const path = require('path');
const { generateTheme, getLessVars, isValidColor } = require('antd-theme-generator');

var themes = {};
const files = fs.readdirSync(path.join(__dirname, './node_modules/antd/lib', 'style/themes'));
const reg = /(.*)\.less/;
files.map((file) => {
  const res = reg.exec(file);
  if (!!res && res[1] !== 'index') {
    const name = res[1];
    const filepath = path.join(__dirname, './node_modules/antd/lib', 'style/themes', file);
    themes[name] = getLessVars(filepath);
  }
});

const keys = Object.keys(themes.dark).filter((key) => {
  if (!isValidColor(themes.dark[key])) return false;
  console.log(themes.default[key], '\t', themes.dark[key]);
  return themes.default[key] != themes.dark[key];
});
console.log(keys);

args = {
  antDir: path.join(__dirname, './node_modules/antd'),
  antdStylesDir: undefined,
  stylesDir: path.join(__dirname, './theme'),
  //   varFile: path.join(__dirname, './theme/vars.less'),
  outputFilePath: path.join(__dirname, './color.less'),
  cssModules: false,
  themeVariables: keys,
  customColorRegexArray: [],
};
console.log(args);
generateTheme(args);

Version
1.2.4

Bug body =>

//error [LessError: error evaluating function `ceil`: argument must be a number] 
{
  stack: undefined,
  type: 'Argument',
  filename: '/Users/devloops/Desktop/maple/retail/maple/node_modules/antd/lib/style/themes/default.less',
  index: 2696,
  line: 68,
  column: 17,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    '@font-size-sm: 12px;',
    '@heading-1-size: ceil(@font-size-base * 2.71);',
    '@heading-2-size: ceil(@font-size-base * 2.14);'
  ]
}

Desing =>

const path = require("path");
const { generateTheme, getLessVars } = require("antd-theme-generator");
const colorVars = getLessVars("./style/colors.less");
const vars = getLessVars("./style/antd-variables.less");

console.log("colorVars", colorVars);
const options = {
  antDir: path.join(__dirname, "./node_modules/antd"),
  antdStylesDir: undefined,
  varFile: path.join(__dirname, "./style/antd-variables.less"),
  stylesDir: path.join(__dirname, "./style"),
  mainLessFile: path.join(__dirname, "./style/overrides.less"),
  themeVariables: [...Object.keys(colorVars), ...Object.keys(vars)],
  cssModules: false,
  outputFilePath: path.join(__dirname, "./static/color.less"),
  customColorRegexArray: [],
};

const generateThemeLessFile = () => {
  generateTheme(options)
    .then((less) => {
      console.log("Theme generated successfully");
      console.log("less", less);
    })
    .catch((error) => {
      console.log("Error", error);
    });
};
module.exports = generateThemeLessFile;

For webpack result (config the image resource to outputDir), the compile result will be 'background:url(outputDir/image/test.svg)' & webpack will copy the image resource to the outputDir, it will work well.
But for 'antd-theme-generator', its result will be 'background:url(image/test.svg)' , but the test.svg be put in outPutDir by webpack, so this url will work wrong.
I think if is better to ignore this situation when background is a url resource? Briefly, once antd-theme-generator find the background is a url, just ignore, don't generator this part?

It produces an ".ant-back-top-icon" with a background whose last characters are 1% no-repeat instead of 100%/100% no-repeat

Describe the bug
I can use antd-theme-generator in vue2.x & [email protected]
but it dosent'work on vue3.0 & [email protected]
Show your code

it works

"scripts": {
    "serve": "node color && vue-cli-service serve --mode dev",
    "build": "node color && vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^1.6.5",
    "antd-theme-generator": "^1.2.6",
    "core-js": "^3.6.5",
    "less": "^2.7.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^2.7.3",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },

not work

"scripts": {
    "start": "node color && vite",
    "dev": "node color && vite",
    "build": "vite build"
  },
"dependencies": {
    "ant-design-vue": "^2.0.0-beta.10",
    "vue": "^3.0.0-rc.1",
    "vue-i18n": "^9.0.0-beta.4",
    "vue-router": "^4.0.0-beta.2",
    "vuex": "^4.0.0-beta.4"
  },
  "devDependencies": {
    "antd-theme-generator": "^1.2.6",
    "@intlify/vite-plugin-vue-i18n": "^1.0.0-alpha.2",
    "@vue/compiler-sfc": "^3.0.0-rc.1",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.2",
    "typescript": "^4.0.3",
    "vite": "^1.0.0-rc.1",
    "less": "^2.7.3",
    "less-loader": "^5.0.0"
  }

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help

Describe the bug
color.less Compile the linear gradient property, and the second color value is the variable value, which is expected to be a variable. The error version is 1.2.4

Show your code
ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
background: linear-gradient(to right, @prompt-text-color, @prompt-text-color);
}

Screenshots

Version
1.2.4

The fact it console.log Theme generated successfully breaks stats.json as the first line of stats.json becomes "Theme generated successfully" which makes the JSON invalid.

{
  "name": "xxx",
  "version": "0.0.1",
  "scripts": {
    "postinstall": "umi g tmp",
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "npm run color && umi build",
    "color": "node color.js",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx --format=pretty ./src",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "start": "umi dev",
    "dev": "npm run start:dev",
    "pre": "npm run start:pre",
    "start:dev": "npm run color && cross-env PORT=9000 REACT_APP_ENV=dev MOCK=none UMI_UI=none umi dev",
    "start:pre": "cross-env PORT=9000 REACT_APP_ENV=pre MOCK=none UMI_UI=none umi dev"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.1.0",
    "@ant-design/pro-layout": "^5.0.12",
    "antd": "4.2.5",
    "antd-img-crop": "^3.2.0",
    "antd-theme-generator": "^1.2.3",
    "classnames": "^2.2.6",
    "intro.js": "^2.9.3",
    "intro.js-react": "^0.2.0",
    "lodash.isequal": "^4.5.0",
    "moment": "^2.26.0",
    "omit.js": "^1.0.2",
    "path-to-regexp": "^6.1.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "react": "^16.13.1",
    "react-color": "^2.18.1",
    "react-dom": "^16.13.1",
    "react-helmet-async": "^1.0.6",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "umi": "^3.2.2",
    "umi-request": "^1.3.3",
    "use-merge-value": "^1.0.1"
  },
  "devDependencies": {
    "@umijs/fabric": "^2.0.8",
    "@umijs/preset-ant-design-pro": "^1.2.2",
    "@umijs/preset-react": "^1.5.5",
    "@umijs/preset-ui": "^2.1.14",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.6",
    "mockjs": "^1.1.0",
    "prettier": "^2.0.5",
    "stylelint": "^13.5.0"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}

color.js

const path = require('path');
const {generateTheme, getLessVars} = require('antd-theme-generator');

const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
    '@border-color-base',
    '@white'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'),
  customColorRegexArray: [/^fade\(.*\)$/]
};

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
}).catch(error => {
  console.log('Error', error);
});

variables.less

// This file will contain all varibales, our custom varibales and
//those from Ant Design which we want to override.
@import '~antd/es/style/themes/default.less';

:root {
  --PC: @primary-color; //color.less中加入css原生变量：--PC
}

@secondry-color: #dddddd;
@primary-color: #00375B;
@text-color: #000000;
@text-color-secondary: #eb2f96;
// @heading-color: #ccccdd;
@secondary-color: fade(@primary-color, 20%);
@layout-header-background: #9e8989;
@btn-primary-bg: #397dcc;
@bg-color: #dddddd;
@border-color-base: #ff0000;
@white: #eeeeee;

But, the color.less file it generates is a literal not a variable.

.ant-btn-primary {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

I hop it looks like

.ant-btn-primary {
  color: #fff;
  background-color: @primary-color;
  border-color: @primary-color;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

This is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>My Ant Design Pro</title>
    <link rel="icon" href="/favicon.png" type="image/x-icon" />
    <link rel="stylesheet/less" type="text/css" href="/color.less" />
    <script>
      window.less = {
        async: false,
        env: 'production'
      };
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
  </head>
  <body>
    <noscript>Sorry, we need js to run correctly!</noscript>
    <div id="root">
      <style>
        html,
        body,
        #root {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        .page-loading-warp {
          padding: 98px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .ant-spin {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5;
          list-style: none;
          -webkit-font-feature-settings: 'tnum';
          font-feature-settings: 'tnum';
          position: absolute;
          display: none;
          color: #1890ff;
          text-align: center;
          vertical-align: middle;
          opacity: 0;
          -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
            -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        }

        .ant-spin-spinning {
          position: static;
          display: inline-block;
          opacity: 1;
        }

        .ant-spin-dot {
          position: relative;
          display: inline-block;
          font-size: 20px;
          width: 20px;
          height: 20px;
        }

        .ant-spin-dot-item {
          position: absolute;
          display: block;
          width: 9px;
          height: 9px;
          background-color: #1890ff;
          border-radius: 100%;
          -webkit-transform: scale(0.75);
          -ms-transform: scale(0.75);
          transform: scale(0.75);
          -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          opacity: 0.3;
          -webkit-animation: antSpinMove 1s infinite linear alternate;
          animation: antSpinMove 1s infinite linear alternate;
        }

        .ant-spin-dot-item:nth-child(1) {
          top: 0;
          left: 0;
        }

        .ant-spin-dot-item:nth-child(2) {
          top: 0;
          right: 0;
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }

        .ant-spin-dot-item:nth-child(3) {
          right: 0;
          bottom: 0;
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }

        .ant-spin-dot-item:nth-child(4) {
          bottom: 0;
          left: 0;
          -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }

        .ant-spin-dot-spin {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-animation: antRotate 1.2s infinite linear;
          animation: antRotate 1.2s infinite linear;
        }

        .ant-spin-lg .ant-spin-dot {
          font-size: 32px;
          width: 32px;
          height: 32px;
        }

        .ant-spin-lg .ant-spin-dot i {
          width: 14px;
          height: 14px;
        }

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .ant-spin-blur {
            background: #fff;
            opacity: 0.5;
          }
        }

        @-webkit-keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }

        @keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }

        @-webkit-keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }

        @keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }
      </style>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          min-height: 420px;
          height: 100%;
        "
      >
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin">
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Where did I use it wrong?

I defined some variables [ '@primary-color',
'@text-color',
'@label-color',
'@component-background',
'@border-color-base',
'@item-active-bg',
'@tabs-card-head-background',
'@tabs-card-active-color'] in options to change;
and also defined in variables.less.

when Theme generated, I found that most components like Select‘s style also changed。

I find some unintelligible thing in color.less

.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
  background-color: color(~`colorPalette("@{tabs-card-active-color}", 1)`);
}

I think '@tabs-card-active-color' should not be here， '@select-item-active-bg' is expected

if someone else had this problem ?

Looking forward to your reply

最新版本会产生以下错误：

Error: Cannot find module 'less-bundle-promise'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/usr/src/app/node_modules/antd-theme-generator/index.js:6:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

另：建议提供简单的版本日志。

I want to pass themeVariables as object with values instead of array in options of generateTheme. It is allow to me use CSS variables from JS (as CSS-IN-JS, for example) .

今天遇到一个问题,在color.js的themeVariables注册@layout-header-background之后,输出color.less发现layout-header-background的样式不依赖@layout-header-background,而是依赖@menu-dark-highlight-color(也注册在themeVariables中),用的版本是1.1.7

git clone [email protected]:ant-design/ant-design.git
cd ant-design
npm i
npm run color-less

> [email protected] color-less /Users/afc163/Projects/ant-design
> node ./scripts/generate-color-less

🔩 less render start!
error TypeError: Cannot read property 'slice' of undefined
    at generateTheme (/Users/afc163/Projects/ant-design/node_modules/antd-theme-generator/index.js:337:46)
    at Object.<anonymous> (/Users/afc163/Projects/ant-design/scripts/generate-color-less.js:49:1)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11
[LessError: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'] {
  message: "JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'",
  stack: undefined,
  type: 'Syntax',
  filename: '/Users/afc163/Projects/ant-design/node_modules/antd-pro-merge-less/.temp/pro.less',
  index: 561955,
  line: 26146,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    '// ========================== Tree ==========================',
    '.antTreeFn(@select-tree-prefix-cls);',
    ''
  ]
}

1.2.2 works fine.

Describe the bug
i want to chante @font-family variable too but my variable is gotten override.

Show your code
Show your config-overrides.js file and styles folder structure

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help
latest verison is installed

This is the outputFile.

And this is the original.

Is it a problem?

I want to generate theme.css after use this cool utility (for deploy my app without less).

Describe the bug
Borders are showing on Button type="link" when it shouldn't. As shown in screenshots
This happened when I upgraded the antd-theme-webpack-plugin to 1.3.7.
I tried to revert the package version of the plugin to 1.3.6 but reinstalling the package using npm/yarn installed the 1.2.7 of antd-theme-generator.
I had to revert my yarn.lock to use the previous version and it worked just fine.
I openned the issue here, since it concerns more to the generator than the plugin I suppose.

Show your code

Screenshots

Version
1.2.7

mainLessFile是文件路径字符串，那generateColorMap(mainLessFile)不会返回什么，生成不了自定义ColorMap。

"mainLessFile" is just a path string, So generateColorMap(mainLessFile) would not return the colorMap of your own variables.less

Describe the bug
Describe your bug in English language

Show your code
Show your config-overrides.js file and styles folder structure

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help

Describe the bug
Describe your bug in English language
Why is it invalid to use CSS custom variables
Show your code
Show your config-overrides.js file and styles folder structure

// variables.less
@import "~antd/lib/style/themes/default.less";

@link-color: #313653;
@primary-color: #313653;

:root {
--PC: @primary-color;
}

//other.less

.add {
color: var(--PC);
}

why invalid？？？

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help

Describe the bug
Describe your bug in English language

Show your code
Show your config-overrides.js file and styles folder structure

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Which version is installed in your application? Try using the latest version, that may help