@delon/theme 17.3.0 → 18.0.0-beta.0

package/layout-blank/style/index.less

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

package/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;

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

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

package/layout-default/style/_layout.less

@@ -35,7 +35,7 @@ body {
   }
 
   &__content {
-    margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding;
+    margin: 0 @alain-default-content-padding @alain-default-content-padding;
     .router-ant();
 
     &-title {
@@ -52,18 +52,19 @@ body {
       background-color: @alain-default-content-heading-bg;
       border-bottom: 1px solid @alain-default-content-heading-border;
 
-      > h1 {
+      >h1 {
         margin-bottom: 0;
         font-size: 18px;
         font-weight: normal;
 
-        > small {
+        >small {
           display: block;
           font-size: 12px;
           color: @muted-color;
         }
       }
     }
+
     // fix width
     nz-input-group {
       width: auto;
@@ -89,6 +90,7 @@ body {
   @{alain-default-prefix}__content {
     margin-left: (@alain-default-aside-wd + @alain-default-content-padding);
   }
+
   @{alain-default-prefix}__collapsed {
     @{alain-default-prefix} {
       &__sidebar {
@@ -109,6 +111,7 @@ body {
         margin-right: (@alain-default-aside-wd + @alain-default-content-padding);
         margin-left: 0;
       }
+
       @{alain-default-prefix}__collapsed {
         @{alain-default-prefix} {
           &__content {
@@ -120,4 +123,5 @@ body {
     }
   }
 }
+
 .layout-default-rtl-mixin(@rtl-enabled);

package/layout-default/style/fix/_reuse-tab.less

@@ -2,7 +2,7 @@
 @alain-default-aside-collapsed-width: @alain-default-aside-collapsed-wd + @alain-default-content-padding;
 
 @{reuse-tab-prefix} {
-  margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
+  margin: 0 -@alain-default-content-padding;
 }
 
 @{alain-default-prefix}__fixed {
@@ -36,7 +36,7 @@
 @media (min-width: @mobile-min) {
   @{alain-default-prefix}__fixed {
     @{reuse-tab-prefix} {
-      + router-outlet {
+      +router-outlet {
         display: block;
         height: @reuse-tab-height;
       }
@@ -71,4 +71,5 @@
     }
   }
 }
+
 .layout-default-reuse-tab-rtl-mixin(@rtl-enabled);

package/layout-default/style/index.less

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

package/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})';

package/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;

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

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

package/mixins.less

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delon/theme",
-  "version": "17.3.0",
+  "version": "18.0.0-beta.0",
   "author": "cipchk<cipchk@qq.com>",
   "license": "MIT",
   "repository": {
@@ -21,11 +21,11 @@
     "component"
   ],
   "dependencies": {
-    "ng-zorro-antd": "^17.3.0",
-    "@delon/acl": "^17.3.0",
-    "@delon/abc": "^17.3.0",
-    "@delon/form": "^17.3.0",
-    "@delon/util": "^17.3.0",
+    "ng-zorro-antd": "^18.0.1",
+    "@delon/acl": "^18.0.0-beta.0",
+    "@delon/abc": "^18.0.0-beta.0",
+    "@delon/form": "^18.0.0-beta.0",
+    "@delon/util": "^18.0.0-beta.0",
     "tslib": "^2.3.0"
   },
   "module": "fesm2022/theme.mjs",

package/src/locale/languages/ar-SA.d.ts

@@ -0,0 +1,3 @@
+import { FullLocaleData } from '../locale.types';
+declare const _default: FullLocaleData;
+export default _default;

package/src/locale/public_api.d.ts

@@ -16,3 +16,4 @@ export { default as fr_FR } from './languages/fr-FR';
 export { default as es_ES } from './languages/es-ES';
 export { default as it_IT } from './languages/it-IT';
 export { default as vi_VI } from './languages/vi-VI';
+export { default as ar_SA } from './languages/ar-SA';

package/src/services/http/http.client.d.ts

@@ -156,7 +156,7 @@ export declare class _HttpClient {
      */
     post<T>(url: string, body?: any, params?: any, options?: {
         headers?: _HttpHeaders;
-        observe: 'response';
+        observe: 'body' | 'response';
         reportProgress?: boolean;
         responseType?: 'json';
         withCredentials?: boolean;

package/system/entry.less

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

package/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';

package/system/mixins/_freak.js

@@ -0,0 +1,49 @@
+module.exports = {
+  install: function (less, pluginManager, functions) {
+    functions.add('genComment', function (value, ...comments) {
+      return (
+        '/* AUTOGENERATE: ' +
+        comments
+          .map(c => c.value)
+          .join('|SPLIT|')
+          .replace(/(\{0\})/g, '"' + value.value + '"') +
+        '*/'
+      );
+    });
+    functions.add('genCommentColor', function (color, ...comments) {
+      var imgColor = ' ![Color](https://dummyimage.com/20x20/' + color.value.substring(1) + '/fff.png&text=+)';
+      return (
+        '/* AUTOGENERATE: ' +
+        comments
+          .map(c => c.value + imgColor)
+          .join('|SPLIT|')
+          .replace(/(\{0\})/g, '"' + color.value + '"') +
+        '*/'
+      );
+    });
+    functions.add('genCommentTypeColor', function (type, color) {
+      var comments = [];
+      switch (type.value) {
+        case 'text':
+          comments = ['Set the text color to {0}', '设置文本颜色为 {0}'];
+          break;
+        case 'background':
+          comments = ['Set the background light color to {0}', '设置背景颜色为 {0}'];
+          break;
+        case 'hoverBackground':
+          comments = ['Set the hover background color to {0}', '设置悬停时背景颜色为 {0}'];
+          break;
+      }
+      if (comments.length === 0) return '';
+      var imgColor = ' ![Color](https://dummyimage.com/20x20/' + color.value.substring(1) + '/fff.png&text=+)';
+      return (
+        '/* AUTOGENERATE: ' +
+        comments
+          .map(c => c + imgColor)
+          .join('|SPLIT|')
+          .replace(/(\{0\})/g, '"' + color.value + '"') +
+        '*/'
+      );
+    });
+  }
+};

package/system/mixins/_freak.less

@@ -1,57 +1 @@
-.freakMixin() {
-  @functions: ~`(function() {
-    function toColorList(list) {
-      list = list.slice(1, list.length - 1).split(',');
-      var ret = [];
-      for (var i = 0, c = list.length; i < c; i++) {
-          ret.push(list[i].trim().split(' '));
-      }
-      return ret;
-    }
-
-    var catchColors;
-    function _initColor(list) {
-      if (!catchColors) catchColors = toColorList(list);
-    }
-
-    this.getColor = function(list, name, position) {
-      _initColor(list);
-      var ret = '';
-      for (var i = 0, c = catchColors.length; i < c; i++) {
-        if (catchColors[i][0] === name) {
-          ret = catchColors[i][position - 1];
-          break;
-        }
-      }
-      return ret;
-    }
-
-    this.genComment = function(value, ...comments) {
-      return '/* AUTOGENERATE: ' + comments.join('|SPLIT|').replace(/(\{0\})/g, '"' + value + '"') + '*/';
-    }
-
-    this.genCommentColor = function(color, ...comments) {
-      var imgColor = ' ![Color](https://dummyimage.com/20x20/' + color.substring(1) + '/fff.png&text=+)';
-      return '/* AUTOGENERATE: ' + comments.map(c => c + imgColor).join('|SPLIT|').replace(/(\{0\})/g, '"' + color + '"') + '*/';
-    }
-
-    this.genCommentTypeColor = function(type, color) {
-      var comments = [];
-      switch (type) {
-        case 'text':
-          comments = ['Set the text color to {0}', '设置文本颜色为 {0}'];
-          break;
-        case 'background':
-          comments = ['Set the background light color to {0}', '设置背景颜色为 {0}'];
-          break;
-        case 'hoverBackground':
-          comments = ['Set the hover background color to {0}', '设置悬停时背景颜色为 {0}'];
-          break;
-      }
-      if (comments.length === 0) return '';
-      var imgColor = ' ![Color](https://dummyimage.com/20x20/' + color.substring(1) + '/fff.png&text=+)';
-      return '/* AUTOGENERATE: ' + comments.map(c => c + imgColor).join('|SPLIT|').replace(/(\{0\})/g, '"' + color + '"') + '*/';
-    }
-  })()`;
-}
-.freakMixin();
+@plugin "./_freak";

package/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;

package/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);

package/system/utils/_border.less

@@ -12,35 +12,42 @@
 }
 
 @border-width-list: 0, 1;
+
 .for(@border-width-list, {
   .border-css-mixin(@i) when(@i > 0) {
     @css-value-comment: ~'1px';
     @css-value: ~'@{i}px solid @{border-color}';
   }
+
   .border-css-mixin(@i) when(default()) {
     @css-value-comment: ~'0px';
     @css-value: 0;
   }
+
   .border-css-mixin(@adIndex);
 
   .border-@{adIndex} {
-    e(~`genComment('@{css-value-comment}', 'Set the border size to {0}', '设置边框大小为 {0}')`);
+    genComment('@{css-value-comment}', 'Set the border size to {0}', '设置边框大小为 {0}');
     border: @css-value !important;
   }
+
   .border-top-@{adIndex} {
-    e(~`genComment('@{css-value-comment}', 'Set the top border size to {0}', '设置上边框大小为 {0}')`);
+    genComment('@{css-value-comment}', 'Set the top border size to {0}', '设置上边框大小为 {0}');
     border-top: @css-value !important;
   }
+
   .border-right-@{adIndex} {
-    e(~`genComment('@{css-value-comment}', 'Set the right border size to {0}', '设置右边框大小为 {0}')`);
+    genComment('@{css-value-comment}', 'Set the right border size to {0}', '设置右边框大小为 {0}');
     border-right: @css-value !important;
   }
+
   .border-bottom-@{adIndex} {
-    e(~`genComment('@{css-value-comment}', 'Set the bottom border size to {0}', '设置下边框大小为 {0}')`);
+    genComment('@{css-value-comment}', 'Set the bottom border size to {0}', '设置下边框大小为 {0}');
     border-bottom: @css-value !important;
   }
+
   .border-left-@{adIndex} {
-    e(~`genComment('@{css-value-comment}', 'Set the left border size to {0}', '设置左边框大小为 {0}')`);
+    genComment('@{css-value-comment}', 'Set the left border size to {0}', '设置左边框大小为 {0}');
     border-left: @css-value !important;
   }
 });
@@ -49,14 +56,14 @@
 .for-each(@colors, {
   .border-@{adKey} {
     @border-colors-color: extract(@adItem, @color-basic-position);
-    e(~`genCommentColor('@{border-colors-color}', 'Set the border color to {0}', '设置边框颜色为 {0}')`);
+    genCommentColor('@{border-colors-color}', 'Set the border color to {0}', '设置边框颜色为 {0}');
     border-color: @border-colors-color !important;
   }
 });
 
 .for-each(@aliasColors, {
   .border-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border color to {0}', '设置边框颜色为 {0}')`);
+    genComment('@{adValue}', 'Set the border color to {0}', '设置边框颜色为 {0}');
     border-color: @adValue !important;
   }
 });
@@ -64,23 +71,27 @@
 // Border-radius
 .for-each(@border-grids, {
   .rounded-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border radius to {0}', '设置边框圆角为 {0}')`);
+    genComment('@{adValue}', 'Set the border radius to {0}', '设置边框圆角为 {0}');
     border-radius: @adValue;
   }
+
   .rounded-top-left-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border top-left corner to {0}', '设置左上角边框圆角为 {0}')`);
+    genComment('@{adValue}', 'Set the border top-left corner to {0}', '设置左上角边框圆角为 {0}');
     border-top-left-radius: @adValue;
   }
+
   .rounded-top-right-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border top-right corner to {0}', '设置右上角边框圆角为 {0}')`);
+    genComment('@{adValue}', 'Set the border top-right corner to {0}', '设置右上角边框圆角为 {0}');
     border-top-right-radius: @adValue;
   }
+
   .rounded-bottom-left-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border bottom-left corner to {0}', '设置左下角边框圆角为 {0}')`);
+    genComment('@{adValue}', 'Set the border bottom-left corner to {0}', '设置左下角边框圆角为 {0}');
     border-bottom-left-radius: @adValue;
   }
+
   .rounded-bottom-right-@{adKey} {
-    e(~`genComment('@{adValue}', 'Set the border bottom-right corner to {0}', '设置右下角边框圆角为 {0}')`);
+    genComment('@{adValue}', 'Set the border bottom-right corner to {0}', '设置右下角边框圆角为 {0}');
     border-bottom-right-radius: @adValue;
   }
 });
@@ -117,11 +128,13 @@
  */
 .rotate-loop(@i) when (@i > 0) {
   @num: @i * 15;
+
   .rotate-@{num} {
-    e(~`genComment('@{num}', 'Element transform to {0} degree', '元素旋转 {0} 度')`);
+    genComment('@{num}', 'Element transform to {0} degree', '元素旋转 {0} 度');
     transform: rotate(~'@{num}deg');
   }
+
   .rotate-loop(@i - 1);
 }
 
-.rotate-loop(@rotate-count);
+.rotate-loop(@rotate-count);