feat(theme): support css variable (#1785)

package.json

@@ -38,7 +38,7 @@
     "build_artifacts": "bash scripts/ci/build-artifacts.sh",
     "analyze": "npm run ng-high-memory build -- --source-map",
     "analyze:view": "source-map-explorer src/dist/browser/*.js",
-    "site:gen": "node scripts/site/main init && ng-alain-plugin-theme -t=themeCss && ng-alain-plugin-theme -t=colorLess",
+    "site:gen": "node scripts/site/main init && ng-alain-plugin-theme -t=themeCss",
     "site:build": "npm run site:gen && ng b site && npm run site:ngsw && npm run site:minify && npm run site:sitemap && npm run site:helper",
     "site:helper": "bash scripts/ci/helper.sh",
     "site:minify": "node scripts/build/minify.js",

packages/abc/avatar-list/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @avatar-list-prefix: ~'.avatar-list';
 
 @{avatar-list-prefix} {

packages/abc/cell/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @cell-prefix: ~'.cell';
 
 @{cell-prefix} {

packages/abc/down-file/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @down-file-prefix: ~'.down-file';
 
 @{down-file-prefix} {

packages/abc/ellipsis/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @ellipsis-prefix: ~'.ellipsis';
 
 ellipsis {

packages/abc/error-collect/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @error-collect-prefix: ~'.error-collect';
 
 @{error-collect-prefix} {

packages/abc/exception/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @exception-prefix: ~'.exception';
 
 @{exception-prefix} {

packages/abc/footer-toolbar/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @footer-toolbar-prefix: ~'.footer-toolbar';
 
 @{footer-toolbar-prefix} {

packages/abc/full-content/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @full-content-prefix: ~'.full-content';
 
 @{full-content-prefix} {

packages/abc/global-footer/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @global-footer-prefix: ~'.global-footer';
 
 @{global-footer-prefix} {

packages/abc/loading/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @loading-prefix: ~'.loading';
 
 @{loading-prefix} {

packages/abc/notice-icon/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @notice-icon-prefix: ~'.notice-icon';
 
 @{notice-icon-prefix} {

packages/abc/onboarding/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @onboarding-prefix: ~'.onboarding';
 
 @{onboarding-prefix} {
@@ -10,7 +9,6 @@
     position: fixed;
     z-index: @onboarding-zindex - 1;
     inset: 0;
-    opacity: @onboarding-mask-opacity;
     background-color: @onboarding-mask-background-color;
   }
 
@@ -26,7 +24,6 @@
     animation: @onboarding-light-ant;
 
     &-el {
-      // position: relative;
       z-index: @onboarding-zindex + 1 !important;
     }
 

packages/abc/page-header/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @page-header-prefix: ~'.page-header';
 
 @{page-header-prefix} {

packages/abc/pdf/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @pdf-prefix: ~'.pdf';
 
 @{pdf-prefix} {

packages/abc/quick-menu/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @quick-menu-prefix: ~'.quick-menu';
 
 @{quick-menu-prefix} {

packages/abc/result/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @result-prefix: ~'.result';
 
 @{result-prefix} {

packages/abc/reuse-tab/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @reuse-tab-prefix: ~'.reuse-tab';
 
 @{reuse-tab-prefix} {

packages/abc/se/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @se-prefix: ~'.se';
 
 @{se-prefix} {

packages/abc/st/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @st-prefix: ~'.st';
 
 @{st-prefix} {

packages/abc/sv/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @sv-prefix: ~'.sv';
 
 @{sv-prefix} {
@@ -11,7 +10,7 @@
   &__container {
     display: block;
 
-    // offset the padding-bottom of last row
+    /** offset the padding-bottom of last row */
     .@{ant-prefix}-row {
       overflow: hidden;
       margin-bottom: -@sv-bottom;
@@ -52,7 +51,6 @@
 
   &__label {
     display: table-cell;
-    // margin-right: 8px;
     padding-bottom: @sv-bottom;
     line-height: 22px;
     color: @sv-label-color;
@@ -82,7 +80,7 @@
   }
 
   &__detail {
-    // contents 对 ie, edge 不支持，但对于子组件的支持会更友好
+    /** contents 对 ie, edge 不支持，但对于子组件的支持会更友好 */
     display: table-cell;
     width: 100%;
     padding-bottom: @sv-bottom;
@@ -160,7 +158,6 @@
     }
 
     &-text {
-      // font-weight: 700;
       font-size: @sv-value-default-value-font-size;
     }
 

packages/abc/tag-select/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @tag-select-prefix: ~'.tag-select';
 @tag-select-height: @tag-line-height + 2px; // 2px is top & bottom border width
 

packages/abc/theme-dark.less

@@ -39,6 +39,5 @@
 
 // onboarding
 // --
-@onboarding-mask-opacity: 0.5;
 @onboarding-light-background-color: rgba(0, 0, 0, 0.1);
 @onboarding-light-ant-color: @component-background;

packages/abc/theme-default.less

@@ -1,16 +1,16 @@
 // st
 // --
-@st-btn-disabled-color: rgba(0, 0, 0, 0.25);
-@st-title-optional-color: rgba(0, 0, 0, 0.35);
+@st-btn-disabled-color: fade(@black, 25%);
+@st-title-optional-color: fade(@black, 35%);
 @st-resizable-handle-width: 1px;
 @st-resizable-handle-height: 60%;
 @st-resizable-handle-color: @border-color-base;
 @st-no-column-height: 100px;
 
 // sv
 // --
-@sv-label-color: rgba(0, 0, 0, 0.5);
-@sv-label-optional-color: rgba(0, 0, 0, 0.35);
+@sv-label-color: fade(@black, 50%);
+@sv-label-optional-color: fade(@black, 35%);
 @sv-detail-color: @text-color;
 @sv-type-primary-color: @primary-color;
 @sv-type-success-color: @success-color;
@@ -32,7 +32,7 @@
 
 // se
 // --
-@se-label-optional-color: rgba(0, 0, 0, 0.35);
+@se-label-optional-color: fade(@black, 35%);
 @se-compact-bottom: @layout-gutter;
 @se-optional-margin: 2px;
 
@@ -47,7 +47,7 @@
 // footer-toolbar
 // --
 @footer-toolbar-height: 56px;
-@footer-toolbar-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+@footer-toolbar-box-shadow: 0 -1px 2px fade(@black, 3%);
 @footer-toolbar-bg: #fff;
 @footer-toolbar-border-top: 1px solid @border-color-split;
 @footer-toolbar-padding: 0 24px;
@@ -86,15 +86,14 @@
 // loading
 // --
 @loading-zindex: 9999;
-@loading-backdrop-bg: rgba(0, 0, 0, 0.15);
+@loading-backdrop-bg: fade(@black, 15%);
 @loading-icon-color: @primary-color;
 @loading-text-color: @primary-color;
 
 // onboarding
 // --
-@onboarding-mask-opacity: 0.5;
-@onboarding-mask-background-color: #000;
-@onboarding-light-background-color: rgba(255, 255, 255, 0.9);
+@onboarding-mask-background-color: fade(@black, 50%);
+@onboarding-light-background-color: fade(@white, 90%);
 @onboarding-light-ant: 2500ms cubic-bezier(0.55, 0.05, 0.6, 0.2) 0s infinite normal none running onboardingAnt;
 @onboarding-light-ant-color: rgb(255, 255, 255);
 @onboarding-changing-ant: all 0.3s ease-out;

packages/abc/theme-variable.less

@@ -0,0 +1 @@
+@import './theme-default.less';

packages/chart/card/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-card-prefix: ~'.g2-card';
 
 @{g2-card-prefix} {

packages/chart/mini-progress/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-mini-progress-prefix: ~'.g2-mini-progress';
 
 @{g2-mini-progress-prefix} {

packages/chart/number-info/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @number-info-prefix: ~'.number-info';
 
 @{number-info-prefix} {

packages/chart/pie/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-pie-prefix: ~'.g2-pie';
 
 @{g2-pie-prefix} {

packages/chart/radar/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-radar-prefix: ~'.g2-radar';
 
 @{g2-radar-prefix} {

packages/chart/trend/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @trend-prefix: ~'.trend';
 
 @{trend-prefix} {

packages/chart/water-wave/style/index.less

@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-water-wave-prefix: ~'.g2-water-wave';
 
 @{g2-water-wave-prefix} {

packages/theme/layout-blank/style/index.less

@@ -1,3 +1,2 @@
-@import './theme-default.less';
 @import './_layout.less';
 @import './fix/index.less';

packages/theme/layout-blank/style/theme-default.less

@@ -1,6 +1,9 @@
-@alain-blank-prefix: ~'.alain-blank';
-@alain-blank-zindex: @zindex-base;
+@alain-blank-name: 'alain-blank';
+@alain-blank-prefix: ~'.@{alain-blank-name}';
 
+@alain-blank-zindex: @zindex-base;
 @alain-blank-bg: #f5f7fa;
+// @alain-blank-bg: ~'var(--@{alain-blank-name}-bg, #f5f7fa)';
+
 @alain-blank-content-padding-vertical: 0;
 @alain-blank-content-padding-horizontal: @layout-gutter * 2;

packages/theme/layout-blank/style/theme-variable.less

@@ -0,0 +1 @@
+@import './theme-default.less';

packages/theme/layout-default/style/index.less

@@ -1,4 +1,3 @@
-@import './theme-default.less';
 // Layout
 @import './_layout.less';
 @import './_header.less';

packages/theme/layout-default/style/theme-dark.less

@@ -7,4 +7,4 @@
 @alain-default-aside-nav-selected-bg: @component-background;
 @alain-default-content-heading-bg: @component-background;
 @alain-default-content-heading-border: @border-color-split;
-@alain-default-content-bg: @body-background;
+@alain-default-content-bg: ~'var(--@{alain-default-name}-content-bg, @{body-background})';

packages/theme/layout-default/style/theme-default.less

@@ -1,7 +1,8 @@
-@alain-default-prefix: ~'.alain-default';
+@alain-default-name: 'alain-default';
+@alain-default-prefix: ~'.@{alain-default-name}';
 @alain-default-zindex: @zindex-base;
 @alain-default-ease: cubic-bezier(0.25, 0, 0.15, 1);
-@alain-default-header-hg: 64px;
+@alain-default-header-hg: ~'var(--@{alain-default-name}-header-hg, 64px)';
 @alain-default-header-bg: @primary-color;
 @alain-default-header-padding: @layout-gutter * 2;
 @alain-default-header-search-enabled: true;
@@ -13,7 +14,7 @@
 @alain-default-header-top-menu-item-padding: 0 16px;
 
 @alain-default-aside-wd: 200px;
-@alain-default-aside-bg: #fff;
+@alain-default-aside-bg: ~'var(--@{alain-default-name}-aside-bg, #fff)';
 @alain-default-aside-scrollbar-width: 0;
 @alain-default-aside-scrollbar-height: 0;
 @alain-default-aside-scrollbar-track-color: transparent;
@@ -28,7 +29,7 @@
 @alain-default-aside-nav-text-hover-color: @primary-color;
 @alain-default-aside-nav-group-text-color: @text-color-secondary;
 @alain-default-aside-nav-selected-text-color: @primary-color;
-@alain-default-aside-nav-selected-bg: #fcfcfc;
+@alain-default-aside-nav-selected-bg: ~'var(--@{alain-default-name}-aside-nav-selected-bg, #fcfcfc)';
 @alain-default-aside-nav-depth1-padding-left: @layout-gutter * 3;
 @alain-default-aside-nav-depth2-padding-left: @layout-gutter * 4;
 @alain-default-aside-nav-depth3-padding-left: @layout-gutter * 5;
@@ -40,10 +41,10 @@
 @alain-default-aside-collapsed-nav-img-wh: 24px;
 @alain-default-aside-collapsed-padding: (@layout-gutter * 2) 0;
 
-@alain-default-content-heading-bg: #fafbfc;
-@alain-default-content-heading-border: #efe3e5;
+@alain-default-content-heading-bg: ~'var(--@{alain-default-name}-heading-bg, #fafbfc)';
+@alain-default-content-heading-border: ~'var(--@{alain-default-name}-heading-border, #efe3e5)';
 @alain-default-content-padding: @layout-gutter * 3;
-@alain-default-content-bg: #f5f7fa;
+@alain-default-content-bg: ~'var(--@{alain-default-name}-content-bg, #f5f7fa)';
 
 @alain-default-widget-app-icons-enabled: true;
 @alain-default-aside-user-enabled: true;

packages/theme/layout-default/style/theme-variable.less

@@ -0,0 +1 @@
+@import './theme-default.less';

packages/theme/mixins.less

@@ -0,0 +1,2 @@
+@import 'ng-zorro-antd/src/style/mixins/index.less';
+@import './system/mixins/index.less';

packages/theme/system/entry.less

@@ -1,5 +1,3 @@
-@import './theme-default.less';
-
 // Angular
 @import './ng/index.less';
 

packages/theme/system/index.less

@@ -1,6 +1,9 @@
-// antd: base
+/** antd: base */
 @import 'ng-zorro-antd/style/entry.less';
-// antd: all components
+
+/** antd: all components */
 @import 'ng-zorro-antd/components.less';
-// system
+
+/** system */
+@import './mixins/index.less';
 @import './entry.less';