feat: support compact theme (#4972)

docs/customize-theme.en-US.md

@@ -122,25 +122,31 @@ You can get more information about custom-webpack builder following the articles
 
 All less vars can be checked [here](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less) is a sample of theme define file.
 
-## Use dark theme
+## Official Themes
+
+We have some official themes, try them out and give us some feedback!
+
+- 🌑 Dark Theme (supported in 9+)
+- 📦 Compact Theme (supported in 9+)
 
 ### Method 1
 
-include `ng-zorro-antd/style/dark.less` in the style file to override theme variables.
+include `ng-zorro-antd/style/dark.less` or `ng-zorro-antd/style/compact.less` in the style file to override theme variables.
 
 ```less
-/* ng-zorro-antd styles */
-@import "~ng-zorro-antd/style/dark.less";
+@import "ng-zorro-antd/ng-zorro-antd.less";
+@import "~ng-zorro-antd/style/dark.less";    // Introduce the official dark less style file
+@import "~ng-zorro-antd/style/compact.less"; // Introduce the official compact less style file
 ```
 
 ### Method 2
 
-If the project does not use Less, you can include `ng-zorro-antd.dark.css` in the CSS file or add to the `angular.json` config.
+If the project does not use Less, you can include `ng-zorro-antd.dark.css` or `ng-zorro-antd.compact.css` in the CSS file or add to the `angular.json` config.
 
 CSS file：
 
 ```css
-@import "~ng-zorro-antd/ng-zorro-antd.dark.min.css";
+@import "~ng-zorro-antd/ng-zorro-antd.dark.css";
 ```
 
 angular.json
@@ -150,7 +156,7 @@ angular.json
   "build": {
     "options": {
       "styles": [
-        "node_modules/ng-zorro-antd/ng-zorro-antd.dark.min.css"
+        "node_modules/ng-zorro-antd/ng-zorro-antd.dark.css"
       ]
     }
   }
@@ -163,6 +169,7 @@ using less-loader in webpack to introduce as needed.
 
 ```javascript
 const darkThemeVars = require('ng-zorro-antd/dark-theme');
+const compactThemeVars = require('ng-zorro-antd/compact-theme');
 module.exports = {
   module: {
     rules: [
@@ -172,7 +179,8 @@ module.exports = {
         options: {
           modifyVars: {
           'hack': `true;@import "${require.resolve('ng-zorro-antd/style/color/colorPalette.less')}";`,
-            ...darkThemeVars
+            ...darkThemeVars,
+            ...compactThemeVars
           },
           javascriptEnabled: true
         }

docs/customize-theme.zh-CN.md

@@ -122,25 +122,31 @@ module.exports = {
 
 全部可被自定义 less 变量可以参考 [这里](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less)。
 
-## 使用暗色主题
+## 官方主题
+
+我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。
+
+- 🌑 暗黑主题（9+ 支持）
+- 📦 紧凑主题（9+ 支持）
 
 ### 方式一
 
-是在样式文件引入 `ng-zorro-antd/style/dark.less` 覆盖主题变量。
+是在样式文件引入 `ng-zorro-antd/style/dark.less` 或 `ng-zorro-antd/style/compact.less` 覆盖主题变量。
 
 ```less
-/* ng-zorro-antd 全量样式或者单组件样式 */
-@import "~ng-zorro-antd/style/dark.less";
+@import "ng-zorro-antd/ng-zorro-antd.less";
+@import "~ng-zorro-antd/style/dark.less";    // 引入官方提供的暗色 less 样式文件
+@import "~ng-zorro-antd/style/compact.less"; // 引入官方提供的紧凑 less 样式文件
 ```
 
 ### 方式二
 
-如果项目不使用 Less，可在 CSS 文件或者 `angular.json` 的 `styles` 字段中，全量引入 `ng-zorro-antd.dark.css`。
+如果项目不使用 Less，可在 CSS 文件或者 `angular.json` 的 `styles` 字段中，全量引入 `ng-zorro-antd.dark.css` 或者 `ng-zorro-antd.compact.css`。
 
 样式文件中：
 
 ```css
-@import "~ng-zorro-antd/ng-zorro-antd.dark.min.css";
+@import "~ng-zorro-antd/ng-zorro-antd.dark.css";
 ```
 
 angular.json 中
@@ -150,7 +156,7 @@ angular.json 中
   "build": {
     "options": {
       "styles": [
-        "node_modules/ng-zorro-antd/ng-zorro-antd.dark.min.css"
+        "node_modules/ng-zorro-antd/ng-zorro-antd.dark.css"
       ]
     }
   }
@@ -164,6 +170,7 @@ angular.json 中
 
 ```javascript
 const darkThemeVars = require('ng-zorro-antd/dark-theme');
+const compactThemeVars = require('ng-zorro-antd/compact-theme');
 module.exports = {
   module: {
     rules: [
@@ -173,7 +180,8 @@ module.exports = {
         options: {
           modifyVars: {
           'hack': `true;@import "${require.resolve('ng-zorro-antd/style/color/colorPalette.less')}";`,
-            ...darkThemeVars
+            ...darkThemeVars,
+            ...compactThemeVars
           },
           javascriptEnabled: true
         }

package.json

@@ -91,6 +91,7 @@
     "less": "^3.10.3",
     "less-plugin-clean-css": "^1.5.1",
     "less-plugin-npm-import": "^2.1.0",
+    "less-vars-to-js": "^1.3.0",
     "lint-staged": "^9.2.3",
     "lodash.debounce": "^4.0.8",
     "marked": "^0.7.0",

scripts/build/compact-vars.ts

@@ -0,0 +1,14 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import { buildConfig } from '../build-config';
+
+// tslint:disable-next-line:no-any
+const lessToJs = require('less-vars-to-js') as any;
+
+const stylePath = path.join(buildConfig.componentsDir, 'style');
+const compactLess = fs.readFileSync(path.join(stylePath, 'themes', 'compact.less'), 'utf8');
+
+export const compactPaletteLess = lessToJs(`${compactLess}`, {
+  stripPrefix: true,
+  resolveVariables: false
+});

scripts/build/compile-styles.ts

@@ -84,6 +84,12 @@ export function compile(): Promise<void | Less.RenderOutput[]> {
   promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.css'), false));
   promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.min.css'), true));
 
+  // Compile the compact theme less file to CSS file.
+  const compactLessContent = `@import "${path.posix.join(targetPath, 'style', 'compact.less')}";
+  @import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
+  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.css'), false));
+  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.min.css'), true));
+
   // Compile css file that doesn't have component-specific styles.
   const cssIndexPath = path.join(sourcePath, 'style', 'entry.less');
   const cssIndex = fs.readFileSync(cssIndexPath, { encoding: 'utf8' });

scripts/build/dark-vars.ts

@@ -0,0 +1,16 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import { buildConfig } from '../build-config';
+
+// tslint:disable-next-line:no-any
+const lessToJs = require('less-vars-to-js') as any;
+
+const stylePath = path.join(buildConfig.componentsDir, 'style');
+const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
+const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
+const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
+
+export const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
+  stripPrefix: true,
+  resolveVariables: false
+});

scripts/build/generate-less-vars.ts

@@ -0,0 +1,11 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import { buildConfig } from '../build-config';
+import { compactPaletteLess } from './compact-vars';
+import { darkPaletteLess } from './dark-vars';
+
+export function generateLessVars(): void {
+  const dist = buildConfig.publishDir;
+  fs.writeFileSync(path.join(dist, 'dark-theme.js'), `module.exports = ${JSON.stringify(darkPaletteLess)}`, 'utf8');
+  fs.writeFileSync(path.join(dist, 'compact-theme.js'), `module.exports = ${JSON.stringify(compactPaletteLess)}`, 'utf8');
+}

scripts/gulp/tasks/library.ts

@@ -2,6 +2,7 @@ import { dest, parallel, series, src, task } from 'gulp';
 import { join } from 'path';
 import { buildConfig } from '../../build-config';
 import { compile as compileLess } from '../../build/compile-styles';
+import { generateLessVars } from '../../build/generate-less-vars';
 import { copyStylesToSrc } from '../../build/migration-styles';
 import { execNodeTask } from '../util/task-helpers';
 
@@ -16,9 +17,15 @@ task('library:compile-less', done => {
   });
 });
 
+// Compile less to the public directory.
+task('library:generate-less-vars', done => {
+  generateLessVars();
+  done();
+});
+
 // Copies README.md file to the public directory.
 task('library:copy-resources', () => {
-  return src([join(buildConfig.projectDir, 'README.md'), join(buildConfig.componentsDir, 'dark-theme.js')]).pipe(
+  return src([join(buildConfig.projectDir, 'README.md'), join(buildConfig.componentsDir)]).pipe(
     dest(join(buildConfig.publishDir))
   );
 });
@@ -30,4 +37,13 @@ task('library:copy-libs', () => {
   );
 });
 
-task('build:library', series('library:build-zorro', parallel('library:compile-less', 'library:copy-resources', 'build:schematics', 'library:copy-libs')));
+task('build:library', series(
+  'library:build-zorro',
+  parallel(
+    'library:compile-less',
+    'library:copy-resources',
+    'library:generate-less-vars',
+    'build:schematics',
+    'library:copy-libs'
+  )
+));

scripts/site/_site/doc/app/app.component.ts

@@ -32,7 +32,7 @@ interface DocPageMeta {
   zh: string;
 }
 
-type SiteTheme = 'default' | 'dark';
+type SiteTheme = 'default' | 'dark' | 'compact';
 
 @Component({
   selector: 'app-root',
@@ -89,20 +89,19 @@ export class AppComponent implements OnInit, AfterContentInit {
     this.theme = theme;
     this.appService.theme$.next(theme);
     this.renderer.setAttribute(document.body, 'data-theme', theme);
-    if (theme !== 'dark') {
-      const dom = document.getElementById('dark-theme');
-      if (dom) {
-        dom.remove();
-      }
-      localStorage.removeItem('site-theme');
-    } else {
+    const dom = document.getElementById('site-theme');
+    if (dom) {
+      dom.remove();
+    }
+    localStorage.removeItem('site-theme');
+    if (theme !== 'default') {
       const style = document.createElement('link');
       style.type = 'text/css';
       style.rel = 'stylesheet';
-      style.id = 'dark-theme';
-      style.href = 'assets/dark.css';
+      style.id = 'site-theme';
+      style.href = `assets/${theme}.css`;
 
-      localStorage.setItem('site-theme', 'dark');
+      localStorage.setItem('site-theme', theme);
       document.body.append(style);
     }
   }
@@ -169,9 +168,9 @@ export class AppComponent implements OnInit, AfterContentInit {
         }
         this.setPage(this.router.url);
         this.language = this.router.url
-        .split('/')
+          .split('/')
           [this.router.url.split('/').length - 1].split('#')[0]
-        .split('?')[0];
+          .split('?')[0];
         this.appService.language$.next(this.language);
         this.nzI18nService.setLocale(this.language === 'en' ? en_US : zh_CN);
         this.updateDocMetaAndLocale();
@@ -286,14 +285,14 @@ export class AppComponent implements OnInit, AfterContentInit {
     }
     const changeColor = () => {
       (window as any).less
-      .modifyVars({
-        '@primary-color': res.color.hex
-      })
-      .then(() => {
-        this.msg.success(`应用成功`);
-        this.color = res.color.hex;
-        window.scrollTo(0, 0);
-      });
+        .modifyVars({
+          '@primary-color': res.color.hex
+        })
+        .then(() => {
+          this.msg.success(`应用成功`);
+          this.color = res.color.hex;
+          window.scrollTo(0, 0);
+        });
     };
 
     const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js';
@@ -329,18 +328,18 @@ export class AppComponent implements OnInit, AfterContentInit {
     }
     this.ngZone.runOutsideAngular(() => {
       fromEvent(window, 'resize')
-      .pipe(
-        startWith(true),
-        debounceTime(50),
-        map(() => window.innerWidth)
-      )
-      .subscribe(width => {
-        this.windowWidth = width;
-        const showDrawer = width <= 768;
-        if (this.showDrawer !== showDrawer) {
-          this.showDrawer = showDrawer;
-        }
-      });
+        .pipe(
+          startWith(true),
+          debounceTime(50),
+          map(() => window.innerWidth)
+        )
+        .subscribe(width => {
+          this.windowWidth = width;
+          const showDrawer = width <= 768;
+          if (this.showDrawer !== showDrawer) {
+            this.showDrawer = showDrawer;
+          }
+        });
     });
   }
 

scripts/site/_site/doc/app/share/fixed-widgets/fixed-widgets.component.ts

@@ -3,32 +3,35 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'app-fixed-widgets',
   template: `
-    <div class="fixed-widgets"
-         nz-tooltip
-         [nzTooltipTitle]="theme === 'dark' ?
-         (language === 'zh' ? '切换浅色模式' : 'Switch default mode') :
-         (language === 'zh' ? '切换暗黑模式' : 'Switch dark mode') ">
+    <div class="fixed-widgets">
       <div class="ant-avatar ant-avatar-circle ant-avatar-icon fixed-widgets-avatar"
            style="width: 44px; height: 44px; line-height: 44px; font-size: 22px;"
-           [class.fixed-widgets-avatar-dark]="theme === 'dark'"
-           [class.fixed-widgets-avatar-default]="theme === 'default'"
-      >
-        <theme-default-icon *ngIf="theme === 'default'"></theme-default-icon>
-        <theme-dark-icon *ngIf="theme === 'dark'"></theme-dark-icon>
+           nz-dropdown
+           nzPlacement="topCenter"
+           [nzDropdownMenu]="menu">
+        <theming-icon></theming-icon>
+        <nz-dropdown-menu #menu="nzDropdownMenu">
+          <ul nz-menu nzSelectable>
+            <li nz-menu-item (click)="onThemeChange('default')">{{language === 'zh' ? '默认主题' : 'Default' }}</li>
+            <li nz-menu-item (click)="onThemeChange('dark')">{{language === 'zh' ? '暗黑主题' : 'Dark Theme' }}</li>
+            <li nz-menu-item (click)="onThemeChange('compact')">{{language === 'zh' ? '紧凑主题' : 'Compact Theme' }}</li>
+          </ul>
+        </nz-dropdown-menu>
       </div>
     </div>
-  `,
-  host: {
-    '(click)': 'onClick()'
-  }
+  `
 })
 export class FixedWidgetsComponent {
 
+  compact = false;
   @Input() theme: string = 'default';
-  @Input() language: string = 'zh'
-  @Output() themeChange = new EventEmitter<string>()
+  @Input() language: string = 'zh';
+  @Output() readonly themeChange = new EventEmitter<string>();
+
+  onThemeChange(theme: string): void {
+    this.theme = theme;
+    this.themeChange.emit(theme)
 
-  onClick(): void {
-    this.themeChange.emit(this.theme === 'dark' ? 'default' : 'dark')
   }
+
 }