@alauda/ui 5.7.7-beta.28 → 5.7.7-beta.31

package/icon/icon.component.d.ts

@@ -1,18 +1,20 @@
 import { Bem } from '../utils';
 import { IconRegisterService } from './icon-register.service';
 export declare class IconComponent {
-    private readonly iconRegistryService;
+    private readonly iconRegisterService;
     icon: string;
+    light: string;
+    dark: string;
     link: string;
     margin: 'left' | 'right';
     size: string;
     color: string;
     bem: Bem;
     id: number;
-    constructor(iconRegistryService: IconRegisterService);
+    constructor(iconRegisterService: IconRegisterService);
     private parseIcon;
     getWidth(): string | false;
     getHeight(): string | false;
-    getIconId(): string;
-    getClass(): string;
+    getIconId(icon: string): string;
+    getClass(id: string): string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "5.7.7-beta.28",
+  "version": "5.7.7-beta.31",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",

package/theme/_base-var.scss

@@ -20,6 +20,8 @@
     @return get-color(n-4);
   } @else if $level == disabled or $level == placeholder {
     @return get-color(n-6);
+  } @else {
+    @return get-color($level);
   }
 }
 

package/theme/_mixin.scss

@@ -1,10 +1,44 @@
 @import 'base-var';
 @import 'var';
 
-@mixin text-set($size: m, $color: main) {
+@mixin theme-light {
+  :root {
+    @content;
+  }
+
+  html[aui-color-mode='light'] {
+    @content;
+  }
+}
+
+@mixin theme-dark {
+  @media (prefers-color-scheme: dark) {
+    html[aui-color-mode='auto'] {
+      @content;
+    }
+  }
+
+  html[aui-color-mode='dark'] {
+    @content;
+  }
+}
+
+@mixin text-set($size: m, $color: none) {
   font-size: get-size(font-size-#{$size});
   line-height: get-size(line-height-#{$size});
-  color: get-text-color($color);
+  @if $color != none {
+    color: get-text-color($color);
+  }
+}
+
+@mixin icon-set($size: m, $color: none) {
+  display: inline-flex;
+  align-items: center;
+  height: get-size(line-height-#{$size});
+  font-size: get-size(font-size-#{$size});
+  @if $color != none {
+    color: get-text-color($color);
+  }
 }
 
 // 使用 box-shadow 模拟带圆角的 outline

package/theme/_pattern.scss

@@ -95,16 +95,15 @@
       }
       &.aui-table__cell {
         width: 100%;
-        padding: 0;
         flex-shrink: 0;
         flex-basis: 100%;
+        padding: 0 calc(#{get-size(table-cell-padding-lr)} / 2);
         overflow: hidden;
-        margin: get-size(table-header-cell-padding-tb) 0
-          get-neg-size(table-header-cell-padding-tb) 0;
-        background-color: get-color(n-9);
-        border-width: 0 calc(var(--aui-table-cell-padding-lr) / 2);
-        border-style: solid;
-        border-color: get-color(n-10);
+        .aui-table__cell-expand-detail {
+          background-color: get-color(n-9);
+          margin-top: get-size(table-cell-padding-tb-m);
+          padding: get-size(table-cell-padding-tb-m);
+        }
       }
     }
   }
@@ -119,6 +118,13 @@
           var(--aui-table-cell-padding-lr) / 2 + var(--aui-font-size-l)
         );
         padding-right: 0;
+        /* stylelint-disable function-calc-no-unspaced-operator */
+        line-height: calc(
+          #{get-size(table-row-min-height-m)} - 2 * #{get-size(
+              table-cell-padding-tb-m
+            )}
+        );
+        /* stylelint-enable function-calc-no-unspaced-operator */
 
         .aui-table__cell-expand-button {
           width: get-size(font-size-l);

package/theme/public-api.d.ts

@@ -1 +1,4 @@
+export * from './theme.pipe';
+export * from './theme.module';
 export * from './theme.service';
+export * from './theme.types';

package/theme/style.css

@@ -15,63 +15,6 @@
  ******************************
  */
 :root {
-  --aui-inline-height-l: 40px;
-  --aui-inline-height-m: 32px;
-  --aui-inline-height-s: 28px;
-  --aui-inline-height-xs: 24px;
-  --aui-inline-padding-l: 19px;
-  --aui-inline-padding-m: 15px;
-  --aui-inline-padding-s: 11px;
-  --aui-inline-padding-xs: 7px;
-  --aui-inline-padding-xxs: 5px;
-  --aui-spacing-xxxxxl: 40px;
-  --aui-spacing-xxxxl: 32px;
-  --aui-spacing-xxxl: 24px;
-  --aui-spacing-xxl: 20px;
-  --aui-spacing-xl: 16px;
-  --aui-spacing-l: 12px;
-  --aui-spacing-m: 8px;
-  --aui-spacing-s: 4px;
-  --aui-spacing-xs: 2px;
-  --aui-font-weight-bold: 500;
-  --aui-font-weight-normal: 400;
-  --aui-font-size-xxl: 20px;
-  --aui-font-size-xl: 18px;
-  --aui-font-size-l: 16px;
-  --aui-font-size-m: 14px;
-  --aui-font-size-s: 12px;
-  --aui-line-height-xxxl: 32px;
-  --aui-line-height-xxl: 28px;
-  --aui-line-height-xl: 24px;
-  --aui-line-height-l: 22px;
-  --aui-line-height-m: 20px;
-  --aui-line-height-s: 16px;
-  --aui-icon-size-xxl: 24px;
-  --aui-icon-size-xl: 24px;
-  --aui-icon-size-l: 16px;
-  --aui-icon-size-m: 16px;
-  --aui-icon-size-s: 12px;
-  --aui-border-radius-l: 4px;
-  --aui-border-radius-m: 2px;
-  --aui-page-header-height: 60px;
-  --aui-page-toolbar-height: 44px;
-  --aui-page-snackbar-height: 60px;
-  --aui-page-sider-width: 260px;
-  --aui-page-padding-m: 20px;
-  --aui-page-padding-s: 16px;
-  --aui-form-item-width-l: 732px;
-  --aui-form-item-width-m: 436px;
-  --aui-form-item-width-s: 140px;
-  --aui-border-m: 1px;
-  --aui-table-margin: 12px;
-  --aui-table-cell-padding-lr: 20px;
-  --aui-table-cell-padding-tb-s: 16px;
-  --aui-table-cell-padding-tb-m: 20px;
-  --aui-table-header-cell-padding-tb: 12px;
-  --aui-table-header-height: 44px;
-  --aui-table-border-width: 1px;
-  --aui-select-width: 100%;
-  --aui-select-options-padding: 8px;
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -113,19 +56,54 @@
   --aui-color-n-8: 237, 239, 242;
   --aui-color-n-9: 247, 249, 252;
   --aui-color-n-10: 255, 255, 255;
-  --aui-color-primary: var(--aui-color-blue);
-  --aui-color-p-0: var(--aui-color-b-0);
-  --aui-color-p-1: var(--aui-color-b-1);
-  --aui-color-p-2: var(--aui-color-b-2);
-  --aui-color-p-3: var(--aui-color-b-3);
-  --aui-color-p-4: var(--aui-color-b-4);
-  --aui-color-p-5: var(--aui-color-b-5);
-  --aui-color-p-6: var(--aui-color-b-6);
-  --aui-color-p-7: var(--aui-color-b-7);
+}
+
+html[aui-color-mode=light] {
+  --aui-color-blue: 0, 122, 245;
+  --aui-color-b-0: 0, 103, 208;
+  --aui-color-b-1: 38, 141, 246;
+  --aui-color-b-2: 77, 162, 248;
+  --aui-color-b-3: 102, 175, 249;
+  --aui-color-b-4: 179, 215, 252;
+  --aui-color-b-5: 204, 228, 253;
+  --aui-color-b-6: 229, 241, 254;
+  --aui-color-b-7: 242, 248, 254;
+  --aui-color-green: 0, 194, 97;
+  --aui-color-g-0: 0, 165, 82;
+  --aui-color-g-1: 38, 203, 120;
+  --aui-color-g-2: 76, 212, 144;
+  --aui-color-g-4: 179, 236, 207;
+  --aui-color-g-6: 230, 249, 239;
+  --aui-color-g-7: 242, 251, 246;
+  --aui-color-yellow: 245, 163, 0;
+  --aui-color-y-0: 220, 146, 0;
+  --aui-color-y-1: 246, 176, 38;
+  --aui-color-y-2: 248, 190, 77;
+  --aui-color-y-4: 252, 227, 179;
+  --aui-color-y-6: 254, 245, 230;
+  --aui-color-y-7: 254, 250, 243;
+  --aui-color-red: 235, 0, 39;
+  --aui-color-r-0: 199, 0, 33;
+  --aui-color-r-1: 237, 38, 71;
+  --aui-color-r-2: 241, 76, 103;
+  --aui-color-r-4: 249, 179, 190;
+  --aui-color-r-6: 253, 230, 233;
+  --aui-color-r-7: 254, 243, 244;
+  --aui-color-n-0: 0, 0, 0;
+  --aui-color-n-1: 50, 52, 55;
+  --aui-color-n-2: 100, 102, 105;
+  --aui-color-n-3: 124, 126, 129;
+  --aui-color-n-4: 150, 152, 155;
+  --aui-color-n-5: 174, 176, 179;
+  --aui-color-n-6: 200, 202, 205;
+  --aui-color-n-7: 212, 214, 217;
+  --aui-color-n-8: 237, 239, 242;
+  --aui-color-n-9: 247, 249, 252;
+  --aui-color-n-10: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
-  [aui-color-mode=auto] {
+  html[aui-color-mode=auto] {
     --aui-color-blue: 0, 122, 245;
     --aui-color-b-0: 0, 103, 208;
     --aui-color-b-1: 38, 141, 246;
@@ -169,7 +147,7 @@
     --aui-color-n-10: 255, 255, 255;
   }
 }
-html[aui-color-mode=light] {
+html[aui-color-mode=dark] {
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -213,48 +191,75 @@ html[aui-color-mode=light] {
   --aui-color-n-10: 255, 255, 255;
 }
 
-html[aui-color-mode=dark] {
-  --aui-color-blue: 0, 122, 245;
-  --aui-color-b-0: 0, 103, 208;
-  --aui-color-b-1: 38, 141, 246;
-  --aui-color-b-2: 77, 162, 248;
-  --aui-color-b-3: 102, 175, 249;
-  --aui-color-b-4: 179, 215, 252;
-  --aui-color-b-5: 204, 228, 253;
-  --aui-color-b-6: 229, 241, 254;
-  --aui-color-b-7: 242, 248, 254;
-  --aui-color-green: 0, 194, 97;
-  --aui-color-g-0: 0, 165, 82;
-  --aui-color-g-1: 38, 203, 120;
-  --aui-color-g-2: 76, 212, 144;
-  --aui-color-g-4: 179, 236, 207;
-  --aui-color-g-6: 230, 249, 239;
-  --aui-color-g-7: 242, 251, 246;
-  --aui-color-yellow: 245, 163, 0;
-  --aui-color-y-0: 220, 146, 0;
-  --aui-color-y-1: 246, 176, 38;
-  --aui-color-y-2: 248, 190, 77;
-  --aui-color-y-4: 252, 227, 179;
-  --aui-color-y-6: 254, 245, 230;
-  --aui-color-y-7: 254, 250, 243;
-  --aui-color-red: 235, 0, 39;
-  --aui-color-r-0: 199, 0, 33;
-  --aui-color-r-1: 237, 38, 71;
-  --aui-color-r-2: 241, 76, 103;
-  --aui-color-r-4: 249, 179, 190;
-  --aui-color-r-6: 253, 230, 233;
-  --aui-color-r-7: 254, 243, 244;
-  --aui-color-n-0: 0, 0, 0;
-  --aui-color-n-1: 50, 52, 55;
-  --aui-color-n-2: 100, 102, 105;
-  --aui-color-n-3: 124, 126, 129;
-  --aui-color-n-4: 150, 152, 155;
-  --aui-color-n-5: 174, 176, 179;
-  --aui-color-n-6: 200, 202, 205;
-  --aui-color-n-7: 212, 214, 217;
-  --aui-color-n-8: 237, 239, 242;
-  --aui-color-n-9: 247, 249, 252;
-  --aui-color-n-10: 255, 255, 255;
+:root {
+  --aui-inline-height-l: 40px;
+  --aui-inline-height-m: 32px;
+  --aui-inline-height-s: 28px;
+  --aui-inline-height-xs: 24px;
+  --aui-inline-padding-l: 19px;
+  --aui-inline-padding-m: 15px;
+  --aui-inline-padding-s: 11px;
+  --aui-inline-padding-xs: 7px;
+  --aui-inline-padding-xxs: 5px;
+  --aui-spacing-xxxxxl: 40px;
+  --aui-spacing-xxxxl: 32px;
+  --aui-spacing-xxxl: 24px;
+  --aui-spacing-xxl: 20px;
+  --aui-spacing-xl: 16px;
+  --aui-spacing-l: 12px;
+  --aui-spacing-m: 8px;
+  --aui-spacing-s: 4px;
+  --aui-spacing-xs: 2px;
+  --aui-font-weight-bold: 500;
+  --aui-font-weight-normal: 400;
+  --aui-font-size-xxl: 20px;
+  --aui-font-size-xl: 18px;
+  --aui-font-size-l: 16px;
+  --aui-font-size-m: 14px;
+  --aui-font-size-s: 12px;
+  --aui-line-height-xxxl: 32px;
+  --aui-line-height-xxl: 28px;
+  --aui-line-height-xl: 24px;
+  --aui-line-height-l: 22px;
+  --aui-line-height-m: 20px;
+  --aui-line-height-s: 16px;
+  --aui-icon-size-xxl: 24px;
+  --aui-icon-size-xl: 24px;
+  --aui-icon-size-l: 16px;
+  --aui-icon-size-m: 16px;
+  --aui-icon-size-s: 12px;
+  --aui-border-radius-l: 4px;
+  --aui-border-radius-m: 2px;
+  --aui-page-header-height: 60px;
+  --aui-page-toolbar-height: 44px;
+  --aui-page-snackbar-height: 60px;
+  --aui-page-sider-width: 260px;
+  --aui-page-padding-m: 20px;
+  --aui-page-padding-s: 16px;
+  --aui-form-item-width-l: 732px;
+  --aui-form-item-width-m: 436px;
+  --aui-form-item-width-s: 140px;
+  --aui-border-m: 1px;
+  --aui-table-margin: 12px;
+  --aui-table-cell-padding-lr: 20px;
+  --aui-table-cell-padding-tb-s: 12px;
+  --aui-table-cell-padding-tb-m: 16px;
+  --aui-table-row-min-height-s: 52px;
+  --aui-table-row-min-height-m: 60px;
+  --aui-table-header-cell-padding-tb: 12px;
+  --aui-table-header-height: 44px;
+  --aui-table-border-width: 1px;
+  --aui-select-width: 100%;
+  --aui-select-options-padding: 8px;
+  --aui-color-primary: var(--aui-color-blue);
+  --aui-color-p-0: var(--aui-color-b-0);
+  --aui-color-p-1: var(--aui-color-b-1);
+  --aui-color-p-2: var(--aui-color-b-2);
+  --aui-color-p-3: var(--aui-color-b-3);
+  --aui-color-p-4: var(--aui-color-b-4);
+  --aui-color-p-5: var(--aui-color-b-5);
+  --aui-color-p-6: var(--aui-color-b-6);
+  --aui-color-p-7: var(--aui-color-b-7);
 }
 
 body {
@@ -268,7 +273,11 @@ a {
   color: rgb(var(--aui-color-primary));
   text-decoration: none;
 }
-a:hover, a:active, a:focus {
+a:hover {
+  color: rgb(var(--aui-color-p-1));
+  text-decoration: underline;
+}
+a:active, a:focus {
   color: rgb(var(--aui-color-p-0));
   text-decoration: underline;
 }

package/theme/theme.module.d.ts

@@ -0,0 +1,2 @@
+export declare class ThemeModule {
+}

package/theme/theme.module.ngfactory.d.ts

@@ -0,0 +1,3 @@
+import * as i0 from '@angular/core';
+import * as i1 from './theme.module';
+export declare const ThemeModuleNgFactory: i0.NgModuleFactory<i1.ThemeModule>;

package/theme/theme.pipe.d.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectorRef, OnDestroy, PipeTransform } from '@angular/core';
+import { ThemeService } from './theme.service';
+import { ThemeSet } from './theme.types';
+export declare class ThemePipe<T> implements PipeTransform, OnDestroy {
+    private currentTheme;
+    private readonly destroy$$;
+    constructor(themeService: ThemeService, cdr: ChangeDetectorRef);
+    transform(v: ThemeSet<T>): T;
+    ngOnDestroy(): void;
+}

package/theme/theme.service.d.ts

@@ -1,5 +1,12 @@
+import { Theme, ThemeMode } from './theme.types';
 export declare class ThemeService {
-    getCurrentColorMode(): ColorMode;
-    setColorMode(mode: ColorMode): void;
+    private readonly htmlEl;
+    private browserTheme;
+    private themeMode;
+    private readonly currentAppTheme$$;
+    currentAppTheme$: import("rxjs").Observable<Theme>;
+    constructor();
+    setThemeMode(mode: ThemeMode): void;
+    getAppTheme(): Theme;
+    private themeChanged;
 }
-export declare type ColorMode = 'auto' | 'light' | 'dark';

package/theme/theme.types.d.ts

@@ -0,0 +1,3 @@
+export declare type Theme = 'light' | 'dark';
+export declare type ThemeMode = 'auto' | 'light' | 'dark';
+export declare type ThemeSet<T> = Record<Theme, T> | ((theme: Theme) => T);