From 19be3b14b29266cdad8caaa5ded44dc848d89d76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Tue, 2 Jul 2024 19:28:42 +0800 Subject: [PATCH] feat(theme): support css variable (#1785) --- package.json | 2 +- packages/abc/avatar-list/style/index.less | 1 - packages/abc/cell/style/index.less | 1 - packages/abc/down-file/style/index.less | 1 - packages/abc/ellipsis/style/index.less | 1 - packages/abc/error-collect/style/index.less | 1 - packages/abc/exception/style/index.less | 1 - packages/abc/footer-toolbar/style/index.less | 1 - packages/abc/full-content/style/index.less | 1 - packages/abc/global-footer/style/index.less | 1 - packages/abc/loading/style/index.less | 1 - packages/abc/notice-icon/style/index.less | 1 - packages/abc/onboarding/style/index.less | 3 - packages/abc/page-header/style/index.less | 1 - packages/abc/pdf/style/index.less | 1 - packages/abc/quick-menu/style/index.less | 1 - packages/abc/result/style/index.less | 1 - packages/abc/reuse-tab/style/index.less | 1 - packages/abc/se/style/index.less | 1 - packages/abc/st/style/index.less | 1 - packages/abc/sv/style/index.less | 7 +- packages/abc/tag-select/style/index.less | 1 - packages/abc/theme-dark.less | 1 - packages/abc/theme-default.less | 19 +++-- packages/abc/theme-variable.less | 1 + packages/chart/card/style/index.less | 1 - packages/chart/mini-progress/style/index.less | 1 - packages/chart/number-info/style/index.less | 1 - packages/chart/pie/style/index.less | 1 - packages/chart/radar/style/index.less | 1 - packages/chart/trend/style/index.less | 1 - packages/chart/water-wave/style/index.less | 1 - packages/theme/layout-blank/style/index.less | 1 - .../layout-blank/style/theme-default.less | 7 +- .../layout-blank/style/theme-variable.less | 1 + .../theme/layout-default/style/index.less | 1 - .../layout-default/style/theme-dark.less | 2 +- .../layout-default/style/theme-default.less | 15 ++-- .../layout-default/style/theme-variable.less | 1 + packages/theme/mixins.less | 2 + packages/theme/system/entry.less | 2 - packages/theme/system/index.less | 9 ++- packages/theme/system/theme-default.less | 36 ++++------ packages/theme/system/theme-variable.less | 34 +++++++++ packages/theme/theme-compact.less | 1 + packages/theme/theme-dark.less | 1 + packages/theme/theme-default.less | 1 + packages/theme/theme-variable.less | 6 ++ packages/theme/variable.less | 6 ++ scripts/build/copy-less.js | 5 +- scripts/build/generate-css.js | 2 +- scripts/ci/build-artifacts.sh | 5 +- src/app/app.config.ts | 5 +- .../components/footer/footer.component.ts | 69 +++---------------- src/styles.less | 6 +- src/styles/index.less | 1 - src/styles/theme.less | 3 +- 57 files changed, 125 insertions(+), 156 deletions(-) create mode 100644 packages/abc/theme-variable.less create mode 100644 packages/theme/layout-blank/style/theme-variable.less create mode 100644 packages/theme/layout-default/style/theme-variable.less create mode 100644 packages/theme/mixins.less create mode 100644 packages/theme/system/theme-variable.less create mode 100644 packages/theme/theme-variable.less create mode 100644 packages/theme/variable.less diff --git a/package.json b/package.json index c8b3d5abe1..6767642fc8 100644 --- a/package.json +++ b/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", diff --git a/packages/abc/avatar-list/style/index.less b/packages/abc/avatar-list/style/index.less index 7a93c5890a..b9fc6f35a4 100644 --- a/packages/abc/avatar-list/style/index.less +++ b/packages/abc/avatar-list/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @avatar-list-prefix: ~'.avatar-list'; @{avatar-list-prefix} { diff --git a/packages/abc/cell/style/index.less b/packages/abc/cell/style/index.less index 96f7c4aa0f..2d24748f27 100644 --- a/packages/abc/cell/style/index.less +++ b/packages/abc/cell/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @cell-prefix: ~'.cell'; @{cell-prefix} { diff --git a/packages/abc/down-file/style/index.less b/packages/abc/down-file/style/index.less index bd93ad92e6..82cd17a82f 100644 --- a/packages/abc/down-file/style/index.less +++ b/packages/abc/down-file/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @down-file-prefix: ~'.down-file'; @{down-file-prefix} { diff --git a/packages/abc/ellipsis/style/index.less b/packages/abc/ellipsis/style/index.less index c0da5482da..5cdda67223 100644 --- a/packages/abc/ellipsis/style/index.less +++ b/packages/abc/ellipsis/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @ellipsis-prefix: ~'.ellipsis'; ellipsis { diff --git a/packages/abc/error-collect/style/index.less b/packages/abc/error-collect/style/index.less index 4d07339645..b9076ada79 100644 --- a/packages/abc/error-collect/style/index.less +++ b/packages/abc/error-collect/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @error-collect-prefix: ~'.error-collect'; @{error-collect-prefix} { diff --git a/packages/abc/exception/style/index.less b/packages/abc/exception/style/index.less index e93535054d..2b16709c93 100644 --- a/packages/abc/exception/style/index.less +++ b/packages/abc/exception/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @exception-prefix: ~'.exception'; @{exception-prefix} { diff --git a/packages/abc/footer-toolbar/style/index.less b/packages/abc/footer-toolbar/style/index.less index 021064b996..d85ed64271 100644 --- a/packages/abc/footer-toolbar/style/index.less +++ b/packages/abc/footer-toolbar/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @footer-toolbar-prefix: ~'.footer-toolbar'; @{footer-toolbar-prefix} { diff --git a/packages/abc/full-content/style/index.less b/packages/abc/full-content/style/index.less index 358b7245df..992087d852 100644 --- a/packages/abc/full-content/style/index.less +++ b/packages/abc/full-content/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @full-content-prefix: ~'.full-content'; @{full-content-prefix} { diff --git a/packages/abc/global-footer/style/index.less b/packages/abc/global-footer/style/index.less index 5b6b07706f..a74d9d85fd 100644 --- a/packages/abc/global-footer/style/index.less +++ b/packages/abc/global-footer/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @global-footer-prefix: ~'.global-footer'; @{global-footer-prefix} { diff --git a/packages/abc/loading/style/index.less b/packages/abc/loading/style/index.less index c417596235..ee322c5ccd 100644 --- a/packages/abc/loading/style/index.less +++ b/packages/abc/loading/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @loading-prefix: ~'.loading'; @{loading-prefix} { diff --git a/packages/abc/notice-icon/style/index.less b/packages/abc/notice-icon/style/index.less index 09669758c2..465ce9bda6 100644 --- a/packages/abc/notice-icon/style/index.less +++ b/packages/abc/notice-icon/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @notice-icon-prefix: ~'.notice-icon'; @{notice-icon-prefix} { diff --git a/packages/abc/onboarding/style/index.less b/packages/abc/onboarding/style/index.less index 5f368e8e23..7bcc4bef82 100644 --- a/packages/abc/onboarding/style/index.less +++ b/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; } diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less index 5f068f291c..837f718113 100644 --- a/packages/abc/page-header/style/index.less +++ b/packages/abc/page-header/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @page-header-prefix: ~'.page-header'; @{page-header-prefix} { diff --git a/packages/abc/pdf/style/index.less b/packages/abc/pdf/style/index.less index 9c57955990..f328ad1933 100644 --- a/packages/abc/pdf/style/index.less +++ b/packages/abc/pdf/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @pdf-prefix: ~'.pdf'; @{pdf-prefix} { diff --git a/packages/abc/quick-menu/style/index.less b/packages/abc/quick-menu/style/index.less index 6c26a3402b..55af9701b4 100644 --- a/packages/abc/quick-menu/style/index.less +++ b/packages/abc/quick-menu/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @quick-menu-prefix: ~'.quick-menu'; @{quick-menu-prefix} { diff --git a/packages/abc/result/style/index.less b/packages/abc/result/style/index.less index 6a5907beb6..f313b4472f 100644 --- a/packages/abc/result/style/index.less +++ b/packages/abc/result/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @result-prefix: ~'.result'; @{result-prefix} { diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less index 0aa1570709..aed523fb33 100644 --- a/packages/abc/reuse-tab/style/index.less +++ b/packages/abc/reuse-tab/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @reuse-tab-prefix: ~'.reuse-tab'; @{reuse-tab-prefix} { diff --git a/packages/abc/se/style/index.less b/packages/abc/se/style/index.less index 7940cadf0e..61bb55b2cf 100644 --- a/packages/abc/se/style/index.less +++ b/packages/abc/se/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @se-prefix: ~'.se'; @{se-prefix} { diff --git a/packages/abc/st/style/index.less b/packages/abc/st/style/index.less index 89fe798974..89edc93d51 100644 --- a/packages/abc/st/style/index.less +++ b/packages/abc/st/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @st-prefix: ~'.st'; @{st-prefix} { diff --git a/packages/abc/sv/style/index.less b/packages/abc/sv/style/index.less index 559883262d..fbd14f7e13 100644 --- a/packages/abc/sv/style/index.less +++ b/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; } diff --git a/packages/abc/tag-select/style/index.less b/packages/abc/tag-select/style/index.less index 1bb35a5cae..e540a41721 100644 --- a/packages/abc/tag-select/style/index.less +++ b/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 diff --git a/packages/abc/theme-dark.less b/packages/abc/theme-dark.less index 4d404f4ff1..1d1140f272 100644 --- a/packages/abc/theme-dark.less +++ b/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; diff --git a/packages/abc/theme-default.less b/packages/abc/theme-default.less index 2cf19fb2bc..0fee9fd49f 100644 --- a/packages/abc/theme-default.less +++ b/packages/abc/theme-default.less @@ -1,7 +1,7 @@ // 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; @@ -9,8 +9,8 @@ // 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; diff --git a/packages/abc/theme-variable.less b/packages/abc/theme-variable.less new file mode 100644 index 0000000000..f8a7cd7a39 --- /dev/null +++ b/packages/abc/theme-variable.less @@ -0,0 +1 @@ +@import './theme-default.less'; diff --git a/packages/chart/card/style/index.less b/packages/chart/card/style/index.less index 1234f2cda3..d038cf13c4 100644 --- a/packages/chart/card/style/index.less +++ b/packages/chart/card/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @g2-card-prefix: ~'.g2-card'; @{g2-card-prefix} { diff --git a/packages/chart/mini-progress/style/index.less b/packages/chart/mini-progress/style/index.less index 5c3bed1718..12fce5c444 100644 --- a/packages/chart/mini-progress/style/index.less +++ b/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} { diff --git a/packages/chart/number-info/style/index.less b/packages/chart/number-info/style/index.less index 16fd91ffac..5ab3a07eb9 100644 --- a/packages/chart/number-info/style/index.less +++ b/packages/chart/number-info/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @number-info-prefix: ~'.number-info'; @{number-info-prefix} { diff --git a/packages/chart/pie/style/index.less b/packages/chart/pie/style/index.less index 7d26205c4f..1a7de1684b 100644 --- a/packages/chart/pie/style/index.less +++ b/packages/chart/pie/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @g2-pie-prefix: ~'.g2-pie'; @{g2-pie-prefix} { diff --git a/packages/chart/radar/style/index.less b/packages/chart/radar/style/index.less index 49ec30edd1..abc0bc2777 100644 --- a/packages/chart/radar/style/index.less +++ b/packages/chart/radar/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @g2-radar-prefix: ~'.g2-radar'; @{g2-radar-prefix} { diff --git a/packages/chart/trend/style/index.less b/packages/chart/trend/style/index.less index 36a528cbf3..4c6bf7545b 100644 --- a/packages/chart/trend/style/index.less +++ b/packages/chart/trend/style/index.less @@ -1,4 +1,3 @@ -@import '../../../theme/theme-default.less'; @trend-prefix: ~'.trend'; @{trend-prefix} { diff --git a/packages/chart/water-wave/style/index.less b/packages/chart/water-wave/style/index.less index 2e2a3e5989..3f6fb0822b 100644 --- a/packages/chart/water-wave/style/index.less +++ b/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} { diff --git a/packages/theme/layout-blank/style/index.less b/packages/theme/layout-blank/style/index.less index 04b2e2408b..81b7e08bb6 100644 --- a/packages/theme/layout-blank/style/index.less +++ b/packages/theme/layout-blank/style/index.less @@ -1,3 +1,2 @@ -@import './theme-default.less'; @import './_layout.less'; @import './fix/index.less'; diff --git a/packages/theme/layout-blank/style/theme-default.less b/packages/theme/layout-blank/style/theme-default.less index e165e220c7..a828bd8e06 100644 --- a/packages/theme/layout-blank/style/theme-default.less +++ b/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; diff --git a/packages/theme/layout-blank/style/theme-variable.less b/packages/theme/layout-blank/style/theme-variable.less new file mode 100644 index 0000000000..f8a7cd7a39 --- /dev/null +++ b/packages/theme/layout-blank/style/theme-variable.less @@ -0,0 +1 @@ +@import './theme-default.less'; diff --git a/packages/theme/layout-default/style/index.less b/packages/theme/layout-default/style/index.less index bb6d629a96..2146f0b7ca 100644 --- a/packages/theme/layout-default/style/index.less +++ b/packages/theme/layout-default/style/index.less @@ -1,4 +1,3 @@ -@import './theme-default.less'; // Layout @import './_layout.less'; @import './_header.less'; diff --git a/packages/theme/layout-default/style/theme-dark.less b/packages/theme/layout-default/style/theme-dark.less index 50abf647b4..7054c90af1 100644 --- a/packages/theme/layout-default/style/theme-dark.less +++ b/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})'; diff --git a/packages/theme/layout-default/style/theme-default.less b/packages/theme/layout-default/style/theme-default.less index 3da8b5c658..f9db4029eb 100644 --- a/packages/theme/layout-default/style/theme-default.less +++ b/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; diff --git a/packages/theme/layout-default/style/theme-variable.less b/packages/theme/layout-default/style/theme-variable.less new file mode 100644 index 0000000000..f8a7cd7a39 --- /dev/null +++ b/packages/theme/layout-default/style/theme-variable.less @@ -0,0 +1 @@ +@import './theme-default.less'; diff --git a/packages/theme/mixins.less b/packages/theme/mixins.less new file mode 100644 index 0000000000..046e54cf1a --- /dev/null +++ b/packages/theme/mixins.less @@ -0,0 +1,2 @@ +@import 'ng-zorro-antd/src/style/mixins/index.less'; +@import './system/mixins/index.less'; diff --git a/packages/theme/system/entry.less b/packages/theme/system/entry.less index 872594edda..0b085d802b 100644 --- a/packages/theme/system/entry.less +++ b/packages/theme/system/entry.less @@ -1,5 +1,3 @@ -@import './theme-default.less'; - // Angular @import './ng/index.less'; diff --git a/packages/theme/system/index.less b/packages/theme/system/index.less index 82e94d57bc..239cfc156a 100644 --- a/packages/theme/system/index.less +++ b/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'; diff --git a/packages/theme/system/theme-default.less b/packages/theme/system/theme-default.less index f25b00397a..7d09a9e20e 100644 --- a/packages/theme/system/theme-default.less +++ b/packages/theme/system/theme-default.less @@ -1,22 +1,19 @@ -@import 'ng-zorro-antd/src/style/mixins/index.less'; -@import './mixins/index.less'; - @root-entry-name: default; -@white: #fff; -@black: #000; - // grey @grey-1: #ffffff; @grey-2: #fafafa; @grey-3: #f5f5f5; -@grey-4: #e8e8e8; +@grey-4: #f0f0f0; @grey-5: #d9d9d9; @grey-6: #bfbfbf; @grey-7: #8c8c8c; @grey-8: #595959; -@grey-9: #262626; -@grey-10: #000000; +@grey-9: #434343; +@grey-10: #262626; +@grey-11: #1f1f1f; +@grey-12: #141414; +@grey-13: #000000; @color-light-index: 5; @color-basic-index: 6; @@ -137,23 +134,18 @@ @muted-color: @grey-7; -// Colors -@white: #fff; -@black: #000; - // scrollbar @scrollbar-enabled: true; @scrollbar-width: 6px; @scrollbar-height: 6px; -@scrollbar-track-color: rgba(0, 0, 0, 0.3); +@scrollbar-track-color: fade(@black, 30%); @scrollbar-thumb-color: transparent; @scrollbar-table-enabled: false; // type // ========== -// font-size -// https://ant.design/docs/spec/font-cn#字号 +/** font-size https://ant.design/docs/spec/font-cn#字号 */ @font-size-large: @font-size-base + 8; // 20px @font-size-small: @font-size-base; // 12px @@ -167,8 +159,8 @@ @enable-all-colors: false; // Code -@code-border-color: #eee; -@code-bg: #f7f7f7; +@code-border-color: @border-color-base; +@code-bg: @tag-default-bg; @drawer-xl: 1200px; @drawer-lg: 900px; @@ -208,22 +200,22 @@ @nz-table-rep-max-width: @mobile-max; @nz-table-rep-min-width: @nz-table-rep-max-width + 1; @nz-table-rep-header-background: @border-color-split; -@nz-table-rep-even-background: #f9f9f9; +@nz-table-rep-even-background: @item-hover-bg; @nz-table-rep-padding-vertical: (@table-padding-vertical / 2); @nz-table-rep-padding-horizontal: (@table-padding-horizontal / 2); @nz-table-rep-column-name-width: 100px; @nz-table-rep-column-name-text-align: right; @nz-table-rep-column-name-padding-right: 8px; -@nz-table-rep-column-name-color: rgba(0, 0, 0, 0.5); +@nz-table-rep-column-name-color: fade(@black, 50%); // Forced to turn off Modal animation @forced-turn-off-nz-modal-animation-enabled: false; @sf-title-text-align: left; -@sf-optional-color: rgba(0, 0, 0, 0.35); +@sf-optional-color: fade(@black, 35%); @sf-optional-margin: 2px; @sf-inline-ant-select-min-width: 100px; -@sf-widget-array-type-card-remove-bg: rgba(0, 0, 0, 0.26); +@sf-widget-array-type-card-remove-bg: fade(@black, 26%); @yn-yes-color: @blue-6; @yn-no-color: @grey-7; diff --git a/packages/theme/system/theme-variable.less b/packages/theme/system/theme-variable.less new file mode 100644 index 0000000000..ed473a3d44 --- /dev/null +++ b/packages/theme/system/theme-variable.less @@ -0,0 +1,34 @@ +@import './theme-default.less'; + +@root-entry-name: variable; + +@{html-selector} { + --grey-1: #fff; + --grey-2: #fafafa; + --grey-3: #f5f5f5; + --grey-4: #f0f0f0; + --grey-5: #d9d9d9; + --grey-6: #bfbfbf; + --grey-7: #8c8c8c; + --grey-8: #595959; + --grey-9: #434343; + --grey-10: #262626; + --grey-11: #1f1f1f; + --grey-12: #141414; + --grey-13: #000; +} + +// grey +@grey-1: var(--grey-1); +@grey-2: var(--grey-2); +@grey-3: var(--grey-3); +@grey-4: var(--grey-4); +@grey-5: var(--grey-5); +@grey-6: var(--grey-6); +@grey-7: var(--grey-7); +@grey-8: var(--grey-8); +@grey-9: var(--grey-9); +@grey-10: var(--grey-10); +@grey-11: var(--grey-11); +@grey-12: var(--grey-12); +@grey-13: var(--grey-13); diff --git a/packages/theme/theme-compact.less b/packages/theme/theme-compact.less index 1aec0a9cee..3d86714bbc 100644 --- a/packages/theme/theme-compact.less +++ b/packages/theme/theme-compact.less @@ -1,3 +1,4 @@ +@import './mixins.less'; @import 'ng-zorro-antd/src/style/themes/compact.less'; @import './system/theme-compact.less'; @import './layout-default/style/theme-compact.less'; diff --git a/packages/theme/theme-dark.less b/packages/theme/theme-dark.less index 92a175d1bd..f02d9dad04 100644 --- a/packages/theme/theme-dark.less +++ b/packages/theme/theme-dark.less @@ -1,3 +1,4 @@ +@import './mixins.less'; @import 'ng-zorro-antd/src/style/themes/dark.less'; @import './system/theme-dark.less'; @import './layout-default/style/theme-dark.less'; diff --git a/packages/theme/theme-default.less b/packages/theme/theme-default.less index bd4d44ac3f..627284fe4f 100644 --- a/packages/theme/theme-default.less +++ b/packages/theme/theme-default.less @@ -1,3 +1,4 @@ +@import './mixins.less'; @import 'ng-zorro-antd/src/style/themes/default.less'; @import './system/theme-default.less'; @import './layout-default/style/theme-default.less'; diff --git a/packages/theme/theme-variable.less b/packages/theme/theme-variable.less new file mode 100644 index 0000000000..760bbd0c0e --- /dev/null +++ b/packages/theme/theme-variable.less @@ -0,0 +1,6 @@ +@import './mixins.less'; +@import 'ng-zorro-antd/src/style/themes/variable.less'; +@import './system/theme-variable.less'; +@import './layout-default/style/theme-variable.less'; +@import './layout-blank/style/theme-variable.less'; +@import '../abc/theme-variable.less'; diff --git a/packages/theme/variable.less b/packages/theme/variable.less new file mode 100644 index 0000000000..04f73b9213 --- /dev/null +++ b/packages/theme/variable.less @@ -0,0 +1,6 @@ +@import './theme-variable.less'; +@import './system/index.less'; +@import './layout-default/style/index.less'; +@import './layout-blank/style/index.less'; +@import '../abc/index.less'; +@import '../chart/index.less'; diff --git a/scripts/build/copy-less.js b/scripts/build/copy-less.js index e221d7c938..8ac4df0b09 100755 --- a/scripts/build/copy-less.js +++ b/scripts/build/copy-less.js @@ -10,7 +10,7 @@ function copyLess(name) { let sourcePath = path.join(root, `packages/${name}`); let targetPath = path.join(root, `dist/@delon/${name}`); // index.less - [`index.less`, `theme-default.less`, `theme-dark.less`, `theme-compact.less`] + [`index.less`, `theme-default.less`, `theme-dark.less`, `theme-compact.less`, `theme-variable.less`] .filter(fileName => fse.existsSync(`${sourcePath}/${fileName}`)) .forEach(fileName => { fse.copySync(`${sourcePath}/${fileName}`, `${targetPath}/${fileName}`); @@ -27,13 +27,16 @@ function copyLess(name) { function copyTheme() { [ 'system', + 'mixins.less', 'index.less', 'default.less', 'dark.less', 'compact.less', + 'variable.less', `theme-default.less`, `theme-dark.less`, `theme-compact.less`, + `theme-variable.less`, ].forEach(fileName => { fse.copySync(path.join(root, `packages/theme/${fileName}`), path.join(root, `dist/@delon/theme/${fileName}`)); }); diff --git a/scripts/build/generate-css.js b/scripts/build/generate-css.js index e7b0e11eab..af69a54388 100755 --- a/scripts/build/generate-css.js +++ b/scripts/build/generate-css.js @@ -33,7 +33,7 @@ async function genCss(name, min) { } function runCss(min) { - ['default', 'dark', 'compact'].forEach(async name => { + ['default', 'dark', 'compact', 'variable'].forEach(async name => { console.log(`开始生成 ${name} ${min ? 'min' : ''}版本`); await genCss(name, min); }); diff --git a/scripts/ci/build-artifacts.sh b/scripts/ci/build-artifacts.sh index fa15ba7639..a25c34026a 100755 --- a/scripts/ci/build-artifacts.sh +++ b/scripts/ci/build-artifacts.sh @@ -92,8 +92,9 @@ echo "https://${ACCESS_TOKEN}:@github.com" > .git/credentials if [[ $(git ls-remote origin "refs/tags/${buildTagName}") ]]; then echo "removed tag because tag is already published" - # git push origin :refs/tags/${buildTagName} git push --delete origin ${buildTagName} + git push origin :refs/tags/${buildTagName} + sleep 5 fi echo "Git configuration has been updated to match the last commit author. Publishing now.." @@ -101,7 +102,7 @@ echo "Git configuration has been updated to match the last commit author. Publis git add -A git commit --allow-empty -m "${buildCommitMessage}" git tag "${buildTagName}" -git push origin ${branchName} --tags +git push origin ${branchName} --tags -f echo "Published package artifacts for ${packageName}#${buildVersionName} into ${branchName}" diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 1025c660b1..369a464b24 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -10,6 +10,7 @@ import { zhCN as dateLang } from 'date-fns/locale'; import { provideTinymce } from 'ngx-tinymce'; import { provideCellWidgets } from '@delon/abc/cell'; +import { ReuseTabMatchMode, provideReuseTabConfig } from '@delon/abc/reuse-tab'; import { provideSTWidgets } from '@delon/abc/st'; import { provideSFConfig } from '@delon/form'; import { withMonacoEditorWidget } from '@delon/form/widgets-third/monaco-editor'; @@ -133,7 +134,7 @@ export const appConfig: ApplicationConfig = { { provide: ErrorHandler, useClass: CustomErrorHandler }, // Elements importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })), - provideElements() - // provideReuseTabConfig({ max: 2 }) + provideElements(), + provideReuseTabConfig({ max: 2, mode: ReuseTabMatchMode.MenuForce }) ] }; diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts index 9abec10f11..9a7f55aa0a 100644 --- a/src/app/shared/components/footer/footer.component.ts +++ b/src/app/shared/components/footer/footer.component.ts @@ -1,4 +1,3 @@ -import { Platform } from '@angular/cdk/platform'; import { NgStyle } from '@angular/common'; import { ChangeDetectionStrategy, @@ -6,18 +5,14 @@ import { Component, Input, NgZone, - OnInit, booleanAttribute, inject } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { LoadingService } from '@delon/abc/loading'; import { ALAIN_I18N_TOKEN, I18nPipe } from '@delon/theme'; import { copy } from '@delon/util/browser'; -import { LazyService } from '@delon/util/other'; import { NzColor, NzColorPickerModule } from 'ng-zorro-antd/color-picker'; -import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzIconService } from 'ng-zorro-antd/icon'; import { NzMessageService } from 'ng-zorro-antd/message'; @@ -34,15 +29,12 @@ import { NzMessageService } from 'ng-zorro-antd/message'; standalone: true, imports: [NzGridModule, NzColorPickerModule, NgStyle, I18nPipe, RouterLink] }) -export class FooterComponent implements OnInit { +export class FooterComponent { readonly i18n = inject(ALAIN_I18N_TOKEN); private readonly msg = inject(NzMessageService); - private readonly loading = inject(LoadingService); - private readonly lazy = inject(LazyService); private readonly iconSrv = inject(NzIconService); private readonly ngZone = inject(NgZone); private readonly cdr = inject(ChangeDetectorRef); - private readonly platform = inject(Platform); color = `#1890ff`; lessLoaded = false; @@ -53,56 +45,15 @@ export class FooterComponent implements OnInit { copy(value).then(() => this.msg.success(this.i18n.fanyi('app.demo.copied'))); } - ngOnInit(): void { - if (!this.platform.isBrowser) { - return; - } - this.initColor(); - } - - // region: color - initColor(): void { - const node = document.createElement('link'); - node.rel = 'stylesheet/less'; - node.type = 'text/css'; - node.href = '/assets/color.less'; - document.getElementsByTagName('head')[0].appendChild(node); - } - changeColor(res: { color: NzColor; format: string }): void { - const changeColor = (): void => { - this.ngZone.runOutsideAngular(() => { - const hex = res.color.toHexString(); - (window as NzSafeAny).less - .modifyVars({ - '@primary-color': hex - }) - .then(() => { - window.scrollTo(0, 0); - this.ngZone.run(() => { - this.color = hex; - this.iconSrv.twoToneColor.primaryColor = this.color; - this.msg.success(this.i18n.fanyi('app.footer.primary-color-changed')); - this.cdr.detectChanges(); - }); - this.loading.close(); - }); - }); - }; - - const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js'; - - this.loading.open({ text: 'Compiling....' }); - if (this.lessLoaded) { - changeColor(); - } else { - this.lazy.loadScript(lessUrl).then(() => { - this.lessLoaded = true; - (window as NzSafeAny).less.options.javascriptEnabled = true; - changeColor(); - }); - } + const hex = res.color.toHexString(); + window.scrollTo(0, 0); + document.documentElement.style.setProperty('--ant-primary-color', hex); + this.ngZone.run(() => { + this.color = hex; + this.iconSrv.twoToneColor.primaryColor = this.color; + this.msg.success(this.i18n.fanyi('app.footer.primary-color-changed')); + this.cdr.detectChanges(); + }); } - - // endregion } diff --git a/src/styles.less b/src/styles.less index 94eeac1441..70ada34382 100644 --- a/src/styles.less +++ b/src/styles.less @@ -1,3 +1,5 @@ +@import './styles/theme.less'; + // 全部引入 @import '../packages/theme/system/index.less'; @import '../packages/abc/index.less'; @@ -7,9 +9,5 @@ // docs @import 'ng-zorro-antd/resizable/style/entry.less'; @import './styles/index.less'; -@import './styles/theme.less'; .scrollbar-mixin(~'.ant-affix'); - -// 可以替换 dark, compact -// @import '../packages/theme/theme-dark.less'; diff --git a/src/styles/index.less b/src/styles/index.less index e054e4a969..2e03d6d536 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,4 +1,3 @@ -@import './theme.less'; @import './_colors.less'; @import './_reset.less'; @import './_common.less'; diff --git a/src/styles/theme.less b/src/styles/theme.less index 2b2a1d960f..39c8e82de5 100644 --- a/src/styles/theme.less +++ b/src/styles/theme.less @@ -1,4 +1,5 @@ -@import '../../packages/theme/theme-default.less'; +// 可以替换 dark, compact, variable +@import '../../packages/theme/theme-variable.less'; @site-heading-color: @heading-color; @site-text-color: @heading-color;