@alauda/ui 5.7.6-beta.8 → 5.7.7-beta.0

package/inline-alert/inline-alert.component.d.ts

@@ -11,6 +11,6 @@ export declare class InlineAlertComponent {
     close: EventEmitter<void>;
     titleRef: InlineAlertTitleDirective;
     visible: boolean;
-    get iconKey(): string;
+    iconMap(type: InlineAlertType): "check_circle_s" | "exclamation_triangle_s" | "exclamation_circle_s" | "info_circle_s";
     closeSelf(): void;
 }

package/inline-alert/inline-alert.types.d.ts

@@ -1,11 +1,9 @@
 import { ValueOf } from '../types';
 export declare const InlineAlertType: {
-    /**
-     * @deprecated use `InlineAlertType.Info` instead
-     */
-    readonly Primary: "info";
+    readonly Primary: "primary";
     readonly Success: "success";
     readonly Warning: "warning";
+    readonly Danger: "danger";
     readonly Error: "error";
     readonly Info: "info";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "5.7.6-beta.8",
+  "version": "5.7.7-beta.0",
   "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,13 +1,50 @@
+@use "sass:string";
+
+@function get-size($name) {
+  @return var(--aui-#{$name});
+}
+
+@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 get-text-color($level: main) {
+  @if $level == main {
+    @return get-color(n-1);
+  } @else if $level == secondary {
+    @return get-color(n-2);
+  } @else if $level == help {
+    @return get-color(n-4);
+  } @else if $level == disabled or $level == placeholder {
+    @return get-color(n-6);
+  }
+}
+
+@function get-rgba($name, $opacity) {
+  @return rgba(var(--aui-color-#{$name}), $opacity);
+}
+
+$divider-line: 1px solid get-color(n-8);
+
+/**
+ ******************************
+ *  以下变量不再推荐使用
+ ******************************
+ */
+
 // Colors
-$color-white: var(--aui-color-white);
-$color-black: var(--aui-color-black);
+$color-white: #fff;
+$color-black: #000;
 
-$color-primary: var(--aui-color-primary);
-$color-success: var(--aui-color-success);
-$color-warning: var(--aui-color-warning);
-$color-danger: var(--aui-color-danger);
-$color-error: var(--aui-color-error);
-$color-info: var(--aui-color-info);
+$color-primary: #007af5;
+$color-success: #00c261;
+$color-warning: #f5a300;
+$color-danger: #eb0027;
+$color-error: $color-danger;
+$color-info: #c8cacd;
 
 $status-color-map: (
   success: $color-success,
@@ -16,54 +53,55 @@ $status-color-map: (
   info: $color-primary,
 );
 
-$color-primary-light: var(--aui-color-primary-light);
-$color-success-light: var(--aui-color-success-light);
-$color-warning-light: var(--aui-color-warning-light);
-$color-error-light: var(--aui-color-error-light);
-$color-danger-light: $color-error-light;
-$color-info-light: var(--aui-color-info-light);
-
-$color-primary-lighter: var(--aui-color-primary-lighter);
-$color-success-lighter: var(--aui-color-success-lighter);
-$color-warning-lighter: var(--aui-color-warning-lighter);
-$color-error-lighter: var(--aui-color-error-lighter);
-$color-danger-lighter: $color-error-lighter;
-$color-info-lighter: var(--aui-color-info-lighter);
-
-$color-primary-extra-light: var(--aui-color-primary-extra-light);
-$color-success-extra-light: var(--aui-color-success-extra-light);
-$color-warning-extra-light: var(--aui-color-warning-extra-light);
-$color-error-extra-light: var(--aui-color-error-extra-light);
-$color-danger-extra-light: $color-error-extra-light;
-$color-info-extra-light: var(--aui-color-info-extra-light);
-
-$color-primary-ultra-light: var(--aui-color-primary-ultra-light);
-$color-success-ultra-light: var(--aui-color-success-ultra-light);
-$color-warning-ultra-light: var(--aui-color-warning-ultra-light);
-$color-error-ultra-light: var(--aui-color-error-ultra-light);
-$color-danger-ultra-light: $color-error-ultra-light;
-$color-info-ultra-light: var(--aui-color-info-ultra-light);
-
-$color-primary-dark: var(--aui-color-primary-dark);
-$color-success-dark: var(--aui-color-success-dark);
-$color-warning-dark: var(--aui-color-warning-dark);
-$color-error-dark: var(--aui-color-error-dark);
-$color-danger-dark: $color-error-dark;
-$color-info-dark: var(--aui-color-info-dark);
-
-$color-primary-darker: var(--aui-color-primary-darker);
-$color-success-darker: var(--aui-color-success-darker);
-$color-warning-darker: var(--aui-color-warning-darker);
-$color-error-darker: var(--aui-color-error-darker);
-$color-danger-darker: $color-error-darker;
-$color-info-darker: var(--aui-color-info-darker);
-
-$color-text-main: var(--aui-color-text-main);
-$color-text-secondary: var(--aui-color-text-secondary);
-$color-text-help: var(--aui-color-text-help);
-$color-text-placeholder: var(--aui-color-text-placeholder);
-
-$color-disabled-bg: var(--aui-color-disabled-bg);
+$color-primary-light: mix($color-white, $color-primary, 60%);
+$color-success-light: mix($color-white, $color-success, 60%);
+$color-warning-light: mix($color-white, $color-warning, 60%);
+$color-danger-light: mix($color-white, $color-danger, 60%);
+$color-error-light: $color-danger-light;
+$color-info-light: mix($color-white, $color-info, 60%);
+
+$color-primary-lighter: mix($color-white, $color-primary, 70%);
+$color-success-lighter: mix($color-white, $color-success, 70%);
+$color-warning-lighter: mix($color-white, $color-warning, 70%);
+$color-danger-lighter: mix($color-white, $color-danger, 70%);
+$color-error-lighter: $color-danger-lighter;
+$color-info-lighter: mix($color-white, $color-info, 70%);
+
+$color-primary-extra-light: mix($color-white, $color-primary, 90%);
+$color-success-extra-light: mix($color-white, $color-success, 90%);
+$color-warning-extra-light: mix($color-white, $color-warning, 90%);
+$color-danger-extra-light: mix($color-white, $color-danger, 90%);
+$color-error-extra-light: $color-danger-extra-light;
+$color-info-extra-light: mix($color-white, $color-info, 90%);
+
+$color-primary-ultra-light: mix($color-white, $color-primary, 95%);
+$color-success-ultra-light: mix($color-white, $color-success, 95%);
+$color-warning-ultra-light: mix($color-white, $color-warning, 95%);
+$color-danger-ultra-light: mix($color-white, $color-danger, 95%);
+$color-error-ultra-light: $color-danger-ultra-light;
+$color-info-ultra-light: mix($color-white, $color-info, 95%);
+
+$color-primary-dark: mix($color-black, $color-primary, 10%);
+$color-success-dark: mix($color-black, $color-primary, 10%);
+$color-warning-dark: mix($color-black, $color-primary, 10%);
+$color-danger-dark: mix($color-black, $color-primary, 10%);
+$color-error-dark: $color-danger-dark;
+$color-info-dark: mix($color-black, $color-primary, 10%);
+
+$color-primary-darker: mix($color-black, $color-primary, 20%);
+$color-success-darker: mix($color-black, $color-primary, 20%);
+$color-warning-darker: mix($color-black, $color-primary, 20%);
+$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-disabled-bg: get-color(n-8);
 
 // Font
 $font-size-extra-large: 20px;
@@ -88,18 +126,17 @@ $height-small: 28px;
 $height-mini: 24px;
 
 // Border
-$border-radius: 0;
+$border-radius: 2px;
 $border-width: 1px;
 $border-style: solid;
 $border-style-dashed: dashed;
 
 // Outline
 $outline-width: 3px;
-$outline-color-primary: var(--aui-color-outline-primary);
-$outline-color-success: var(--aui-color-outline-success);
-$outline-color-warning: var(--aui-color-outline-warning);
-$outline-color-error: var(--aui-color-outline-error);
-$outline-color-info: var(--aui-color-outline-info);
+$outline-color-primary: primary;
+$outline-color-success: green;
+$outline-color-warning: yellow;
+$outline-color-error: red;
 
 // Animation
 $animation-duration: 0.3s;

package/theme/_mixin.scss

@@ -1,16 +1,27 @@
+@import 'base-var';
 @import 'var';
 
+@mixin text-set($size: m, $color: main) {
+  font-size: get-size(font-size-#{$size});
+  line-height: get-size(line-height-#{$size});
+  color: get-text-color($color);
+}
+
 // 使用 box-shadow 模拟带圆角的 outline
-@mixin outline-shadow($color: $outline-color-primary) {
-  box-shadow: 0 0 0 $outline-width $color;
+@mixin outline-shadow($color: primary) {
+  box-shadow: 0 0 0 2px get-rgba($color, 0.16);
+}
+
+@mixin card-shadow() {
+  box-shadow: 0 0 4px 0 get-rgba(n-1, 0.1);
 }
 
 @mixin popper-shadow() {
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 2px 8px 0 get-rgba(n-1, 0.2);
 }
 
-@mixin model-shadow() {
-  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
+@mixin modal-shadow() {
+  box-shadow: 0 4px 16px 0 get-rgba(n-1, 0.2);
 }
 
 @mixin transition($target: all) {

package/theme/_var.scss

@@ -24,102 +24,6 @@ $button-mini-height: $height-mini;
 $button-mini-font-size: $font-size-small;
 $button-mini-padding-hoz: 8px - $button-border-width;
 
-$button-default-content: $color-text-main;
-$button-default-content-hover: $color-primary;
-$button-default-content-active: $color-primary;
-$button-default-content-focus: $color-text-main;
-$button-default-content-disabled: $color-info;
-$button-default-bg: $color-white;
-$button-default-bg-hover: $color-primary-ultra-light;
-$button-default-bg-active: $color-primary-extra-light;
-$button-default-bg-focus: $color-white;
-$button-default-bg-disabled: $color-disabled-bg;
-$button-default-border: $color-info;
-$button-default-border-hover: $color-primary;
-$button-default-border-active: $color-primary;
-$button-default-border-focus: $color-primary;
-$button-default-border-disabled: $color-info;
-
-$button-primary-content: $color-white;
-$button-primary-content-hover: $color-white;
-$button-primary-content-active: $color-white;
-$button-primary-content-focus: $color-white;
-$button-primary-content-disabled: $color-white;
-$button-primary-bg: $color-primary;
-$button-primary-bg-hover: $color-primary-dark;
-$button-primary-bg-active: $color-primary-darker;
-$button-primary-bg-focus: $color-primary;
-$button-primary-bg-disabled: $color-primary-lighter;
-$button-primary-border: $color-primary;
-$button-primary-border-hover: $color-primary-dark;
-$button-primary-border-active: $color-primary-darker;
-$button-primary-border-focus: $color-primary;
-$button-primary-border-disabled: $color-primary-lighter;
-
-$button-success-content: $color-white;
-$button-success-content-hover: $color-white;
-$button-success-content-active: $color-white;
-$button-success-content-focus: $color-white;
-$button-success-content-disabled: $color-white;
-$button-success-bg: $color-success;
-$button-success-bg-hover: $color-success-dark;
-$button-success-bg-active: $color-success-darker;
-$button-success-bg-focus: $color-success;
-$button-success-bg-disabled: $color-success-lighter;
-$button-success-border: $color-success;
-$button-success-border-hover: $color-success-dark;
-$button-success-border-active: $color-success-darker;
-$button-success-border-focus: $color-success;
-$button-success-border-disabled: $color-success-lighter;
-
-$button-warning-content: $color-white;
-$button-warning-content-hover: $color-white;
-$button-warning-content-active: $color-white;
-$button-warning-content-focus: $color-white;
-$button-warning-content-disabled: $color-white;
-$button-warning-bg: $color-warning;
-$button-warning-bg-hover: $color-warning-dark;
-$button-warning-bg-active: $color-warning-darker;
-$button-warning-bg-focus: $color-warning;
-$button-warning-bg-disabled: $color-warning-lighter;
-$button-warning-border: $color-warning;
-$button-warning-border-hover: $color-warning-dark;
-$button-warning-border-active: $color-warning-darker;
-$button-warning-border-focus: $color-warning;
-$button-warning-border-disabled: $color-warning-lighter;
-
-$button-danger-content: $color-white;
-$button-danger-content-hover: $color-white;
-$button-danger-content-active: $color-white;
-$button-danger-content-focus: $color-white;
-$button-danger-content-disabled: $color-white;
-$button-danger-bg: $color-error;
-$button-danger-bg-hover: $color-error-dark;
-$button-danger-bg-active: $color-error-darker;
-$button-danger-bg-focus: $color-error;
-$button-danger-bg-disabled: $color-error-lighter;
-$button-danger-border: $color-error;
-$button-danger-border-hover: $color-error-dark;
-$button-danger-border-active: $color-error-darker;
-$button-danger-border-focus: $color-error;
-$button-danger-border-disabled: $color-error-lighter;
-
-$button-info-content: $color-white;
-$button-info-content-hover: $color-white;
-$button-info-content-active: $color-white;
-$button-info-content-focus: $color-white;
-$button-info-content-disabled: $color-white;
-$button-info-bg: $color-info;
-$button-info-bg-hover: $color-info-dark;
-$button-info-bg-active: $color-info-darker;
-$button-info-bg-focus: $color-info;
-$button-info-bg-disabled: $color-info-lighter;
-$button-info-border: $color-info;
-$button-info-border-hover: $color-info-dark;
-$button-info-border-active: $color-info-darker;
-$button-info-border-focus: $color-info;
-$button-info-border-disabled: $color-info-lighter;
-
 $text-button-padding-hoz: 4px - $button-border-width;
 $text-button-large-height: 24px;
 $text-button-large-font-size: 18px;
@@ -225,29 +129,6 @@ $tooltip-error-text: $color-error;
 $tooltip-info-border: $color-white;
 $tooltip-info-bg: $color-white;
 
-// Dialog
-$dialog-backdrop-color: rgba(0, 0, 0, 0.3);
-$dialog-bg-color: $color-white;
-$dialog-border-radius: $border-radius;
-
-$dialog-small-width: 420px;
-$dialog-medium-width: 600px;
-$dialog-big-width: 800px;
-$dialog-large-width: 960px;
-$dialog-fullscreen-width: 90vw;
-$dialog-fullscreen-height: 90vh;
-
-$dialog-header-font-size: $font-size-extra-large;
-$dialog-header-line-height: $line-height-extra-large;
-$dialog-header-color: $color-text-main;
-
-$dialog-content-min-height: 80px;
-
-$dialog-header-padding: 24px 24px 20px;
-$dialog-content-padding: 24px;
-$dialog-footer-padding: 20px 24px 24px;
-$dialog-bottom-margin: 50px;
-
 // Radio
 $radio-margin: 24px;
 $radio-font-size: $font-size-regular;
@@ -324,9 +205,6 @@ $toast-close-color: #e2e2e2;
 $alerts-wrapper-top: 20px;
 $alerts-wrapper-right: 0;
 
-$messages-wrapper-left: 50%;
-$messages-wrapper-top: 36px;
-
 // Input
 $input-border-radius: $border-radius;
 $input-border-width: $border-width;
@@ -430,26 +308,6 @@ $menu-item-warning-bg: $color-warning-extra-light;
 $menu-item-danger-color: $color-error;
 $menu-item-danger-bg: $color-error-extra-light;
 
-// Inline alert
-$inline-alert-vertical-margin: 16px;
-$inline-alert-border-radius: $border-radius;
-$inline-alert-border-style: $border-style;
-$inline-alert-border-width: $border-width;
-$inline-alert-close-color: $color-text-help;
-$inline-alert-close-color-hover: $color-text-main;
-$inline-alert-padding: (12px - $inline-alert-border-width)
-  (16px - $inline-alert-border-width);
-
-$inline-alert-title-font-size: $font-size-larger;
-$inline-alert-title-line-height: $line-height-larger;
-$inline-alert-content-font-size: $font-size-regular;
-$inline-alert-content-line-height: $line-height-regular;
-
-$inline-alert-primary-color: $color-primary;
-$inline-alert-success-color: $color-success;
-$inline-alert-warning-color: $color-warning;
-$inline-alert-error-color: $color-error;
-
 // Card
 $card-border-color: #ededed;
 $card-border-style: $border-style;
@@ -461,15 +319,6 @@ $section-border-color: $card-border-color;
 $section-border-style: $border-style-dashed;
 $section-border-width: $border-width;
 
-// Message
-$message-padding: 8px 16px;
-$message-border-radius: 3px;
-$message-default-bg: $color-white;
-$message-border-side-radius: 4px;
-$message-margin-bottom: 20px;
-$message-content-margin-left: 8px;
-$message-z-index: 1001;
-
 // Notification
 $notification-margin: 0 20px 10px 0;
 $notification-padding: 16px 20px 16px 16px;