@alauda/ui 6.1.4 → 6.1.5-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.1.4",
+  "version": "6.1.5-beta.10",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",
@@ -16,12 +16,12 @@
     "ui"
   ],
   "peerDependencies": {
-    "@angular/animations": "^10.0.0 || ^11.0.0",
-    "@angular/cdk": "^10.2.2 || ^11.0.0",
-    "@angular/common": "^10.0.0 || ^11.0.0",
-    "@angular/core": "^10.0.0 || ^11.0.0",
-    "@angular/forms": "^10.0.0 || ^11.0.0",
-    "@angular/platform-browser": "^10.0.0 || ^11.0.0",
+    "@angular/animations": ">=11.0.0",
+    "@angular/cdk": ">=11.2.0",
+    "@angular/common": ">=11.0.0",
+    "@angular/core": ">=11.0.0",
+    "@angular/forms": ">=11.0.0",
+    "@angular/platform-browser": ">=11.0.0",
     "clipboard-polyfill": "^3.0.0",
     "dayjs": "^1.0.0",
     "rxjs": "^6.0.0"

package/table/table.component.d.ts

@@ -6,7 +6,7 @@ export declare class TableComponent<T> extends CdkTable<T> implements AfterConte
     _placeholderOutlet: TablePlaceholderOutlet;
     _placeholderDef: TablePlaceholderDefDirective;
     protected get stickyCssClass(): string;
-    protected set stickyCssClass(_stickyCssClass: string);
+    protected set stickyCssClass(_: string);
     ngAfterContentInit(): void;
     private _createPlaceholder;
     private _clearPlaceholder;

package/theme/_base-var.scss

@@ -1,35 +1,51 @@
 @use "sass:string";
 
-@function get-size($name) {
+@function use-var($name) {
   @return var(--aui-#{$name});
 }
 
-@function get-color($name: primary, $level: none) {
+@function use-rgb($name: primary, $level: none) {
   @if $level != none {
     @return rgb(var(--aui-color-#{string.slice('#{$name}', 1, 1)}-#{$level}));
   }
   @return rgb(var(--aui-color-#{$name}));
 }
 
-@function get-text-color($level: main) {
+@function use-rgba($name, $opacity) {
+  @return rgba(var(--aui-color-#{$name}), $opacity);
+}
+
+@function use-text-color($level: main) {
   @if $level == main {
-    @return get-color(n-1);
+    @return use-rgb(n-1);
   } @else if $level == secondary {
-    @return get-color(n-2);
+    @return use-rgb(n-2);
   } @else if $level == help {
-    @return get-color(n-4);
+    @return use-rgb(n-4);
   } @else if $level == disabled or $level == placeholder {
-    @return get-color(n-6);
+    @return use-rgb(n-6);
   } @else {
-    @return get-color($level);
+    @return use-rgb($level);
   }
 }
 
+@function get-size($name) {
+  @return use-var($name);
+}
+
+@function get-color($name: primary, $level: none) {
+  @return use-rgb($name, $level);
+}
+
+@function get-text-color($level: main) {
+  @return use-text-color($level);
+}
+
 @function get-rgba($name, $opacity) {
-  @return rgba(var(--aui-color-#{$name}), $opacity);
+  @return use-rgba($name, $opacity);
 }
 
-$divider-line: 1px solid get-color(n-8);
+$divider-line: 1px solid use-rgb(n-8);
 
 /**
  ******************************
@@ -97,13 +113,13 @@ $color-danger-darker: mix($color-black, $color-primary, 20%);
 $color-error-darker: $color-danger-dark;
 $color-info-darker: mix($color-black, $color-primary, 20%);
 
-$color-text-main: get-text-color(main);
-$color-text-secondary: get-text-color(secondary);
-$color-text-help: get-text-color(help);
-$color-text-disabled: get-text-color(disabled);
-$color-text-placeholder: get-text-color(placeholder);
+$color-text-main: use-text-color(main);
+$color-text-secondary: use-text-color(secondary);
+$color-text-help: use-text-color(help);
+$color-text-disabled: use-text-color(disabled);
+$color-text-placeholder: use-text-color(placeholder);
 
-$color-disabled-bg: get-color(n-8);
+$color-disabled-bg: use-rgb(n-8);
 
 // Font
 $font-size-extra-large: 20px;

package/theme/_mixin.scss

@@ -2,66 +2,83 @@
 @import 'var';
 
 @mixin theme-light {
-  :root {
-    @content;
-  }
+  $host: &;
 
-  html[aui-color-mode='light'] {
-    @content;
+  @at-root {
+    :root #{$host} {
+      @content;
+    }
+
+    html[aui-color-mode='light'] #{$host} {
+      @content;
+    }
   }
 }
 
 @mixin theme-dark {
-  @media (prefers-color-scheme: dark) {
-    html[aui-color-mode='auto'] {
-      @content;
+  $host: &;
+
+  @at-root {
+    @media (prefers-color-scheme: dark) {
+      html[aui-color-mode='auto'] #{$host} {
+        @content;
+      }
     }
-  }
 
-  html[aui-color-mode='dark'] {
-    @content;
+    html[aui-color-mode='dark'] #{$host} {
+      @content;
+    }
   }
 }
 
 @mixin text-set($size: m, $color: none) {
-  font-size: get-size(font-size-#{$size});
-  line-height: get-size(line-height-#{$size});
+  font-size: use-var(font-size-#{$size});
+  line-height: use-var(line-height-#{$size});
   @if $color != none {
-    color: get-text-color($color);
+    color: use-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});
+  height: use-var(line-height-#{$size});
+  font-size: use-var(font-size-#{$size});
   @if $color != none {
-    color: get-text-color($color);
+    color: use-text-color($color);
   }
 }
 
 // 使用 box-shadow 模拟带圆角的 outline
 @mixin outline-shadow($color: primary) {
-  box-shadow: 0 0 0 2px get-rgba($color, 0.16);
+  box-shadow: 0 0 0 2px use-rgba($color, 0.16);
 }
 
 @mixin card-shadow() {
-  box-shadow: 0 0 4px 0 get-rgba(n-1, 0.1);
+  @include theme-light {
+    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
+  }
+  @include theme-dark {
+    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
+  }
 }
 
 @mixin popper-shadow() {
-  box-shadow: 0 2px 8px 0 get-rgba(n-1, 0.2);
+  @include theme-light {
+    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+  }
+  @include theme-dark {
+    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
+  }
 }
 
 @mixin modal-shadow() {
-  box-shadow: 0 4px 16px 0 get-rgba(n-1, 0.2);
-}
-@mixin page-header-shadow() {
-  box-shadow: 0 1px 4px 0 get-rgba(n-1, 0.1);
-}
-@mixin page-snackbar-shadow() {
-  box-shadow: 0 -1px 4px 0 get-rgba(n-1, 0.1);
+  @include theme-light {
+    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+  }
+  @include theme-dark {
+    box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
+  }
 }
 
 @mixin transition($target: all) {
@@ -98,16 +115,51 @@
   }
 }
 
+@mixin input-field-indicator() {
+  &__icon-container {
+    display: block;
+    position: relative;
+    color: use-rgb(n-4);
+  }
+
+  &__clear {
+    display: none;
+
+    .aui-icon {
+      @include clear-button;
+    }
+  }
+
+  &.isClearable:not(.isDisabled):hover & {
+    &__indicator {
+      display: none;
+    }
+
+    &__clear {
+      display: flex;
+    }
+  }
+}
+
+@mixin input-error() {
+  border-color: use-rgb(red) !important;
+
+  &:focus,
+  &.isFocused {
+    @include outline-shadow(red);
+  }
+}
+
 @mixin expand-button() {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: get-size(icon-size-m);
-  height: get-size(icon-size-m);
-  font-size: get-size(icon-size-m);
-  line-height: get-size(icon-size-m);
-  color: get-color(primary);
-  background-color: get-color(p-6);
+  width: use-var(icon-size-m);
+  height: use-var(icon-size-m);
+  font-size: use-var(icon-size-m);
+  line-height: use-var(icon-size-m);
+  color: use-rgb(primary);
+  background-color: use-rgb(p-6);
   border-radius: 50%;
   border: none;
   cursor: pointer;
@@ -115,36 +167,36 @@
 
   aui-icon {
     display: block;
-    width: get-size(icon-size-m);
-    height: get-size(icon-size-m);
+    width: use-var(icon-size-m);
+    height: use-var(icon-size-m);
   }
 
   &:hover {
-    background-color: get-color(p-7);
+    background-color: use-rgb(p-7);
   }
 
   &:active {
-    background-color: get-color(p-5);
+    background-color: use-rgb(p-5);
   }
 
   &.isExpanded {
     transform: rotate(90deg);
-    color: get-color(n-10);
-    background-color: get-color(primary);
+    color: use-rgb(n-10);
+    background-color: use-rgb(primary);
 
     &:hover {
-      background-color: get-color(p-1);
+      background-color: use-rgb(p-1);
     }
 
     &:active {
-      background-color: get-color(p-0);
+      background-color: use-rgb(p-0);
     }
   }
 
   &[disabled],
   &.isExpanded[disabled] {
-    background-color: get-color(n-8);
-    color: get-color(n-6);
+    background-color: use-rgb(n-8);
+    color: use-rgb(n-6);
     cursor: not-allowed;
   }
 }
@@ -176,8 +228,8 @@
 @mixin vertical-dashed-line($width: 1px, $color: 'n-7') {
   background: linear-gradient(
     to bottom,
-    get-color($color),
-    get-color($color) 8px,
+    use-rgb($color),
+    use-rgb($color) 8px,
     transparent 6px,
     transparent
   );

package/theme/_pattern.scss

@@ -2,26 +2,26 @@
 @import 'mixin';
 
 @mixin shadow-0 {
-  border-radius: get-size(border-radius-m);
-  background-color: get-color(n-10);
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(n-10);
 }
 
 @mixin shadow-2 {
-  border-radius: get-size(border-radius-m);
-  background-color: get-color(n-10);
-  box-shadow: 0 0 2px 0 get-rgba(n-1, 0.24);
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(n-10);
+  box-shadow: 0 0 2px 0 use-rgba(n-1, 0.24);
 }
 
 @mixin shadow-8 {
-  border-radius: get-size(border-radius-m);
-  background-color: get-color(n-10);
-  box-shadow: 0 2px 8px 0 get-rgba(n-1, 0.16);
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(n-10);
+  box-shadow: 0 2px 8px 0 use-rgba(n-1, 0.16);
 }
 
 @mixin shadow-16 {
-  border-radius: get-size(border-radius-m);
-  background-color: get-color(n-10);
-  box-shadow: 0 4px 16px 0 get-rgba(n-1, 0.16);
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(n-10);
+  box-shadow: 0 4px 16px 0 use-rgba(n-1, 0.16);
 }
 
 @mixin zh-form-label-width($parent) {
@@ -46,12 +46,12 @@
     min-height: $table-row-min-height + 2px;
     @include text-set(m, placeholder);
 
-    background-color: get-color(n-10);
-    border: solid 1px get-color(n-8);
-    border-radius: get-size(border-radius-l);
+    background-color: use-rgb(n-10);
+    border: solid 1px use-rgb(n-8);
+    border-radius: use-var(border-radius-l);
 
     > aui-icon:first-child {
-      margin-right: get-size(spacing-m);
+      margin-right: use-var(spacing-m);
     }
   }
 

package/theme/_var.scss

@@ -159,28 +159,28 @@ $alerts-wrapper-right: 0;
 // Input
 $input-size: (
   large: (
-    height: get-size(inline-height-l),
-    font-size: get-size(font-size-l),
-    line-height: get-size(line-height-l),
-    icon-size: get-size(icon-size-l),
+    height: use-var(inline-height-l),
+    font-size: use-var(font-size-l),
+    line-height: use-var(line-height-l),
+    icon-size: use-var(icon-size-l),
   ),
   medium: (
-    height: get-size(inline-height-m),
-    font-size: get-size(font-size-m),
-    line-height: get-size(line-height-m),
-    icon-size: get-size(icon-size-m),
+    height: use-var(inline-height-m),
+    font-size: use-var(font-size-m),
+    line-height: use-var(line-height-m),
+    icon-size: use-var(icon-size-m),
   ),
   small: (
-    height: get-size(inline-height-s),
-    font-size: get-size(font-size-m),
-    line-height: get-size(line-height-m),
-    icon-size: get-size(icon-size-m),
+    height: use-var(inline-height-s),
+    font-size: use-var(font-size-m),
+    line-height: use-var(line-height-m),
+    icon-size: use-var(icon-size-m),
   ),
   mini: (
-    height: get-size(inline-height-xs),
-    font-size: get-size(font-size-s),
-    line-height: get-size(line-height-s),
-    icon-size: get-size(icon-size-s),
+    height: use-var(inline-height-xs),
+    font-size: use-var(font-size-s),
+    line-height: use-var(line-height-s),
+    icon-size: use-var(icon-size-s),
   ),
 );
 
@@ -310,7 +310,7 @@ $tab-label-font-size-large: $font-size-larger;
 $tab-label-font-size-medium: $font-size-large;
 $tab-label-font-size-small: $font-size-regular;
 $tab-border: $border-width $border-style #ededed;
-$tab-header-type-card-bg-color: get-color(n-9);
+$tab-header-type-card-bg-color: use-rgb(n-9);
 $tab-header-indicator-color: $color-primary;
 $tab-scroll-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 $tab-pagination-button-z-index: 3;

package/theme/style.css

@@ -45,7 +45,6 @@
   --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;
@@ -56,6 +55,9 @@
   --aui-color-n-8: 237, 239, 242;
   --aui-color-n-9: 247, 249, 252;
   --aui-color-n-10: 255, 255, 255;
+  --aui-color-main-bg: var(--aui-color-n-9);
+  --aui-color-popper-bg: var(--aui-color-n-10);
+  --aui-color-origin-shadow: var(--aui-color-n-1);
 }
 
 html[aui-color-mode=light] {
@@ -89,7 +91,6 @@ html[aui-color-mode=light] {
   --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;
@@ -100,95 +101,102 @@ html[aui-color-mode=light] {
   --aui-color-n-8: 237, 239, 242;
   --aui-color-n-9: 247, 249, 252;
   --aui-color-n-10: 255, 255, 255;
+  --aui-color-main-bg: var(--aui-color-n-9);
+  --aui-color-popper-bg: var(--aui-color-n-10);
+  --aui-color-origin-shadow: var(--aui-color-n-1);
 }
 
 @media (prefers-color-scheme: dark) {
   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;
-    --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;
+    --aui-color-blue: 61, 142, 255;
+    --aui-color-b-0: 54, 116, 206;
+    --aui-color-b-1: 109, 170, 255;
+    --aui-color-b-2: 52, 111, 196;
+    --aui-color-b-3: 50, 101, 177;
+    --aui-color-b-4: 46, 87, 147;
+    --aui-color-b-5: 38, 56, 88;
+    --aui-color-b-6: 41, 66, 108;
+    --aui-color-b-7: 43, 76, 127;
+    --aui-color-green: 17, 182, 113;
+    --aui-color-g-0: 21, 146, 99;
+    --aui-color-g-1: 76, 200, 148;
+    --aui-color-g-2: 21, 139, 96;
+    --aui-color-g-4: 26, 105, 82;
+    --aui-color-g-6: 30, 76, 72;
+    --aui-color-g-7: 27, 90, 77;
+    --aui-color-yellow: 237, 172, 44;
+    --aui-color-y-0: 186, 138, 47;
+    --aui-color-y-1: 241, 192, 96;
+    --aui-color-y-2: 175, 132, 48;
+    --aui-color-y-4: 125, 100, 51;
+    --aui-color-y-6: 85, 74, 55;
+    --aui-color-y-7: 104, 87, 53;
+    --aui-color-red: 226, 50, 79;
+    --aui-color-r-0: 178, 47, 74;
+    --aui-color-r-1: 233, 101, 123;
+    --aui-color-r-2: 167, 46, 73;
+    --aui-color-r-4: 120, 45, 67;
+    --aui-color-r-6: 82, 43, 63;
+    --aui-color-r-7: 100, 44, 65;
+    --aui-color-n-1: 240, 241, 246;
+    --aui-color-n-2: 196, 198, 204;
+    --aui-color-n-3: 180, 183, 192;
+    --aui-color-n-4: 144, 149, 163;
+    --aui-color-n-5: 140, 145, 159;
+    --aui-color-n-6: 116, 121, 135;
+    --aui-color-n-7: 86, 93, 111;
+    --aui-color-n-8: 63, 70, 88;
+    --aui-color-n-9: 52, 59, 77;
+    --aui-color-n-10: 38, 45, 63;
+    --aui-color-main-bg: 22, 29, 47;
+    --aui-color-popper-bg: var(--aui-color-n-9);
+    --aui-color-origin-shadow: var(--aui-color-main-bg);
   }
 }
 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;
+  --aui-color-blue: 61, 142, 255;
+  --aui-color-b-0: 54, 116, 206;
+  --aui-color-b-1: 109, 170, 255;
+  --aui-color-b-2: 52, 111, 196;
+  --aui-color-b-3: 50, 101, 177;
+  --aui-color-b-4: 46, 87, 147;
+  --aui-color-b-5: 38, 56, 88;
+  --aui-color-b-6: 41, 66, 108;
+  --aui-color-b-7: 43, 76, 127;
+  --aui-color-green: 17, 182, 113;
+  --aui-color-g-0: 21, 146, 99;
+  --aui-color-g-1: 76, 200, 148;
+  --aui-color-g-2: 21, 139, 96;
+  --aui-color-g-4: 26, 105, 82;
+  --aui-color-g-6: 30, 76, 72;
+  --aui-color-g-7: 27, 90, 77;
+  --aui-color-yellow: 237, 172, 44;
+  --aui-color-y-0: 186, 138, 47;
+  --aui-color-y-1: 241, 192, 96;
+  --aui-color-y-2: 175, 132, 48;
+  --aui-color-y-4: 125, 100, 51;
+  --aui-color-y-6: 85, 74, 55;
+  --aui-color-y-7: 104, 87, 53;
+  --aui-color-red: 226, 50, 79;
+  --aui-color-r-0: 178, 47, 74;
+  --aui-color-r-1: 233, 101, 123;
+  --aui-color-r-2: 167, 46, 73;
+  --aui-color-r-4: 120, 45, 67;
+  --aui-color-r-6: 82, 43, 63;
+  --aui-color-r-7: 100, 44, 65;
+  --aui-color-n-1: 240, 241, 246;
+  --aui-color-n-2: 196, 198, 204;
+  --aui-color-n-3: 180, 183, 192;
+  --aui-color-n-4: 144, 149, 163;
+  --aui-color-n-5: 140, 145, 159;
+  --aui-color-n-6: 116, 121, 135;
+  --aui-color-n-7: 86, 93, 111;
+  --aui-color-n-8: 63, 70, 88;
+  --aui-color-n-9: 52, 59, 77;
+  --aui-color-n-10: 38, 45, 63;
+  --aui-color-main-bg: 22, 29, 47;
+  --aui-color-popper-bg: var(--aui-color-n-9);
+  --aui-color-origin-shadow: var(--aui-color-main-bg);
 }
 
 :root {