feat: Support append theme less file with less-variable (#16118)

* add override

* add override support

* update doc

components/affix/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 
 .@{ant-prefix}-affix {
   position: fixed;

components/alert/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @alert-prefix-cls: ~'@{ant-prefix}-alert';

components/anchor/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @anchor-border-width: 2px;

components/auto-complete/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/avatar/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @avatar-prefix-cls: ~'@{ant-prefix}-avatar';

components/back-top/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @backtop-prefix-cls: ~'@{ant-prefix}-back-top';

components/badge/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @badge-prefix-cls: ~'@{ant-prefix}-badge';

components/breadcrumb/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';

components/button/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin';
 

components/calendar/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';

components/card/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @card-prefix-cls: ~'@{ant-prefix}-card';

components/carousel/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 .@{ant-prefix}-carousel {

components/cascader/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/checkbox/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import './mixin';
 
 .antCheckboxFn();

components/collapse/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @collapse-prefix-cls: ~'@{ant-prefix}-collapse';

components/comment/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @comment-prefix-cls: ~'@{ant-prefix}-comment';

components/config-provider/style/index.less

@@ -1,2 +1,2 @@
 // placeholder
-@import '../../style/themes/default';
+@import '../../style/themes/index';

components/date-picker/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 @import '../../button/style/mixin';

components/divider/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @divider-prefix-cls: ~'@{ant-prefix}-divider';

components/drawer/style/drawer.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 
 // Preserve the typo for compatibility
 // https://github.com/ant-design/ant-design/issues/14628

components/drawer/style/index.less

@@ -1,3 +1,3 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './drawer';

components/dropdown/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

components/empty/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @empty-prefix-cls: ~'@{ant-prefix}-empty';

components/form/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 @import '../../button/style/mixin';

components/grid/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin';
 

components/icon/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @icon-prefix-cls: ~'@{ant-prefix}-icon';

components/input-number/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/input/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin';
 

components/input/style/mixin.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @input-affix-width: 19px;

components/input/style/search-input.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../button/style/mixin';
 @import './mixin';

components/layout/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @layout-prefix-cls: ~'@{ant-prefix}-layout';

components/list/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @list-prefix-cls: ~'@{ant-prefix}-list';

components/locale-provider/style/index.less

@@ -1,2 +1,2 @@
 // placeholder
-@import '../../style/themes/default';
+@import '../../style/themes/index';

components/mention/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/menu/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @menu-prefix-cls: ~'@{ant-prefix}-menu';

components/message/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @message-prefix-cls: ~'@{ant-prefix}-message';

components/modal/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './modal';
 @import './confirm';

components/notification/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @notification-prefix-cls: ~'@{ant-prefix}-notification';

components/page-header/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

components/pagination/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/popover/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @popover-prefix-cls: ~'@{ant-prefix}-popover';

components/progress/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @progress-prefix-cls: ~'@{ant-prefix}-progress';

components/radio/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @radio-prefix-cls: ~'@{ant-prefix}-radio';

components/rate/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @rate-prefix-cls: ~'@{ant-prefix}-rate';

components/select/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/skeleton/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';

components/slider/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @slider-prefix-cls: ~'@{ant-prefix}-slider';

components/spin/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @spin-prefix-cls: ~'@{ant-prefix}-spin';

components/statistic/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @statistic-prefix-cls: ~'@{ant-prefix}-statistic';

components/steps/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @steps-prefix-cls: ~'@{ant-prefix}-steps';

components/style/core/iconfont.less

@@ -1,4 +1,4 @@
-@import '../themes/default';
+@import '../themes/index';
 @import '../mixins/iconfont';
 
 .@{iconfont-css-prefix} {

components/style/index.less

@@ -1,2 +1,2 @@
-@import './themes/default';
+@import './themes/index';
 @import './core/index';

components/style/mixins/motion.less

@@ -1,4 +1,4 @@
-@import '../themes/default';
+@import '../themes/index';
 
 .motion-common(@duration: @animation-duration-base) {
   animation-duration: @duration;

components/style/mixins/reset.less

@@ -1,4 +1,4 @@
-@import '../themes/default';
+@import '../themes/index';
 
 .reset-component() {
   box-sizing: border-box;

components/style/themes/index.less

@@ -0,0 +1,4 @@
+@import './default.less';
+
+@ant-theme-file: ~'./override.less';
+@import '@{ant-theme-file}';

components/style/themes/override.less

@@ -0,0 +1 @@
+// Placeholder, it's used for user to customize the theme variable by less file.

components/switch/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @switch-prefix-cls: ~'@{ant-prefix}-switch';

components/table/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @table-prefix-cls: ~'@{ant-prefix}-table';

components/tabs/style/card-style.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @tab-prefix-cls: ~'@{ant-prefix}-tabs';

components/tabs/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './card-style';
 

components/tag/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @tag-prefix-cls: ~'@{ant-prefix}-tag';

components/time-picker/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 

components/timeline/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @timeline-prefix-cls: ~'@{ant-prefix}-timeline';

components/tooltip/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';

components/transfer/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../checkbox/style/mixin';
 

components/tree-select/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../tree/style/mixin';
 @import '../../checkbox/style/mixin';

components/tree/style/directory.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
 

components/tree/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../checkbox/style/mixin';
 @import './mixin';

components/typography/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @typography-prefix-cls: ~'@{ant-prefix}-typography';

components/upload/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @upload-prefix-cls: ~'@{ant-prefix}-upload';

docs/react/customize-theme.en-US.md

@@ -55,6 +55,8 @@ module.exports = {
 +         'primary-color': '#1DA57A',
 +         'link-color': '#1DA57A',
 +         'border-radius-base': '2px',
++         // or
++         'ant-theme-file': "~'your-less-file-path.less'", // Override with less file
 +       },
 +       javascriptEnabled: true,
 +     },

docs/react/customize-theme.zh-CN.md

@@ -55,6 +55,8 @@ module.exports = {
 +         'primary-color': '#1DA57A',
 +         'link-color': '#1DA57A',
 +         'border-radius-base': '2px',
++         // or
++         'ant-theme-file': "~'your-less-file-path.less'", // Override with less file
 +       },
 +       javascriptEnabled: true,
 +     },