@alauda/ui 6.1.5-beta.9 → 6.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.1.5-beta.9",
+  "version": "6.1.5",
   "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

@@ -1,51 +1,35 @@
 @use "sass:string";
 
-@function use-var($name) {
+@function get-size($name) {
   @return var(--aui-#{$name});
 }
 
-@function use-rgb($name: primary, $level: none) {
+@function get-color($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 use-rgba($name, $opacity) {
-  @return rgba(var(--aui-color-#{$name}), $opacity);
-}
-
-@function use-text-color($level: main) {
+@function get-text-color($level: main) {
   @if $level == main {
-    @return use-rgb(n-1);
+    @return get-color(n-1);
   } @else if $level == secondary {
-    @return use-rgb(n-2);
+    @return get-color(n-2);
   } @else if $level == help {
-    @return use-rgb(n-4);
+    @return get-color(n-4);
   } @else if $level == disabled or $level == placeholder {
-    @return use-rgb(n-6);
+    @return get-color(n-6);
   } @else {
-    @return use-rgb($level);
+    @return get-color($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 use-rgba($name, $opacity);
+  @return rgba(var(--aui-color-#{$name}), $opacity);
 }
 
-$divider-line: 1px solid use-rgb(n-8);
+$divider-line: 1px solid get-color(n-8);
 
 /**
  ******************************
@@ -113,13 +97,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: 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-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-disabled-bg: use-rgb(n-8);
+$color-disabled-bg: get-color(n-8);
 
 // Font
 $font-size-extra-large: 20px;

package/theme/_mixin.scss

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

package/theme/_pattern.scss

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

package/theme/_var.scss

@@ -159,28 +159,28 @@ $alerts-wrapper-right: 0;
 // Input
 $input-size: (
   large: (
-    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),
+    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),
   ),
   medium: (
-    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),
+    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),
   ),
   small: (
-    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),
+    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),
   ),
   mini: (
-    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),
+    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),
   ),
 );
 
@@ -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: use-rgb(n-9);
+$tab-header-type-card-bg-color: get-color(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,6 +45,7 @@
   --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;
@@ -55,8 +56,6 @@
   --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);
 }
 
 html[aui-color-mode=light] {
@@ -90,6 +89,7 @@ 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,99 +100,95 @@ 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);
 }
 
 @media (prefers-color-scheme: dark) {
   html[aui-color-mode=auto] {
-    --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-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;
   }
 }
 html[aui-color-mode=dark] {
-  --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-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 {