refactor(alert): replace all css var (#2545)

packages/theme-chalk/src/alert.scss

@@ -1,14 +1,32 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-alert-padding: 8px 16px;
+  --el-alert-border-radius-base: var(--el-border-radius-base);
+  --el-alert-title-font-size: 13px;
+  --el-alert-description-font-size: 12px;
+  --el-alert-close-font-size: 12px;
+  --el-alert-close-customed-font-size: 13px;
+
+  --el-alert-icon-size: 16px;
+  --el-alert-icon-large-size: 28px;
+
+  @each $type in (success, info, warning, danger) {
+    --el-alert-#{$type}-color: #{map.get($--colors, $type, 'lighter')};
+  }
+}
+
 @include b(alert) {
   width: 100%;
-  padding: $--alert-padding;
+  padding: var(--el-alert-padding);
   margin: 0;
   box-sizing: border-box;
-  border-radius: $--alert-border-radius;
+  border-radius: var(--el-alert-border-radius);
   position: relative;
-  background-color: $--color-white;
+  background-color: var(--el-color-white);
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -17,16 +35,16 @@
 
   @include when(light) {
     .#{$namespace}-alert__closebtn {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
   }
 
   @include when(dark) {
     .#{$namespace}-alert__closebtn {
-      color: $--color-white;
+      color: var(--el-color-white);
     }
     .#{$namespace}-alert__description {
-      color: $--color-white;
+      color: var(--el-color-white);
     }
   }
 
@@ -34,68 +52,27 @@
     justify-content: center;
   }
 
-  @include m(success) {
+  @each $type in (success, info, warning, error) {
-    &.is-light {
+    @include m($type) {
-      background-color: $--alert-success-color;
+      // compatiable for danger
-      color: $--color-success;
+      @if $type == error {
-
+        $type: danger;
-      .#{$namespace}-alert__description {
-        color: $--color-success;
       }
-    }
 
-    &.is-dark {
+      &.is-light {
-      background-color: $--color-success;
+        background-color: var(--el-alert-#{$type}-color);
-      color: $--color-white;
+        color: var(--el-color-#{$type});
-    }
-  }
 
-  @include m(info) {
+        .#{$namespace}-alert__description {
-    &.is-light {
+          color: var(--el-color-#{$type});
-      background-color: $--alert-info-color;
+        }
-      color: $--color-info;
-    }
-
-    &.is-dark {
-      background-color: $--color-info;
-      color: $--color-white;
-    }
-
-    .#{$namespace}-alert__description {
-      color: $--color-info;
-    }
-  }
-
-  @include m(warning) {
-    &.is-light {
-      background-color: $--alert-warning-color;
-      color: $--color-warning;
-
-      .#{$namespace}-alert__description {
-        color: $--color-warning;
       }
-    }
 
-    &.is-dark {
+      &.is-dark {
-      background-color: $--color-warning;
+        background-color: var(--el-color-#{$type});
-      color: $--color-white;
+        color: var(--el-color-white);
-    }
-  }
-
-  @include m(error) {
-    &.is-light {
-      background-color: $--alert-danger-color;
-      color: $--color-danger;
-
-      .#{$namespace}-alert__description {
-        color: $--color-danger;
       }
     }
-
-    &.is-dark {
-      background-color: $--color-danger;
-      color: $--color-white;
-    }
   }
 
   @include e(content) {
@@ -104,16 +81,16 @@
   }
 
   @include e(icon) {
-    font-size: $--alert-icon-size;
+    font-size: var(--el-alert-icon-size);
-    width: $--alert-icon-size;
+    width: var(--el-alert-icon-size);
     @include when(big) {
-      font-size: $--alert-icon-large-size;
+      font-size: var(--el-alert-icon-large-size);
-      width: $--alert-icon-large-size;
+      width: var(--el-alert-icon-large-size);
     }
   }
 
   @include e(title) {
-    font-size: $--alert-title-font-size;
+    font-size: var(--el-alert-title-font-size);
     line-height: 18px;
     @include when(bold) {
       font-weight: bold;
@@ -121,12 +98,12 @@
   }
 
   & .#{$namespace}-alert__description {
-    font-size: $--alert-description-font-size;
+    font-size: var(--el-alert-description-font-size);
     margin: 5px 0 0 0;
   }
 
   @include e(closebtn) {
-    font-size: $--alert-close-font-size;
+    font-size: var(--el-alert-close-font-size);
     opacity: 1;
     position: absolute;
     top: 12px;
@@ -135,7 +112,7 @@
 
     @include when(customed) {
       font-style: normal;
-      font-size: $--alert-close-customed-font-size;
+      font-size: var(--el-alert-close-customed-font-size);
       top: 9px;
     }
   }

packages/theme-chalk/src/common/var.scss

@@ -189,6 +189,7 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
 -------------------------- */
 
 // Checkbox
+// refactor with css3 var
 // See packages/theme-chalk/src/checkbox.scss
 
 /* Radio
@@ -301,27 +302,8 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
 
 /* Alert
 -------------------------- */
-$--alert-padding: 8px 16px !default;
+// refactor with css3 var
-/// borderRadius||Border|2
+// See packages/theme-chalk/src/alert.scss
-$--alert-border-radius: $--border-radius-base !default;
-/// fontSize||Font|1
-$--alert-title-font-size: 13px !default;
-/// fontSize||Font|1
-$--alert-description-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-customed-font-size: 13px !default;
-
-$--alert-success-color: map.get($--colors, 'success', 'lighter') !default;
-$--alert-info-color: map.get($--colors, 'info', 'lighter') !default;
-$--alert-warning-color: map.get($--colors, 'warning', 'lighter') !default;
-$--alert-danger-color: map.get($--colors, 'danger', 'lighter') !default;
-
-/// height||Other|4
-$--alert-icon-size: 16px !default;
-/// height||Other|4
-$--alert-icon-large-size: 28px !default;
 
 /* MessageBox
 -------------------------- */