element-plus 2.5.3 → 2.5.4

package/theme-chalk/src/check-tag.scss

@@ -18,10 +18,15 @@
   }
 
   @include when(checked) {
-    background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary');
-    &:hover {
-      background-color: getCssVar('color', 'primary', 'light-7');
+    @each $type in $types {
+      &.#{bem('check-tag', '', $type)} {
+        background-color: getCssVar('color', $type, 'light-8');
+        color: getCssVar('color', $type);
+
+        &:hover {
+          background-color: getCssVar('color', $type, 'light-7');
+        }
+      }
     }
   }
 }

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

@@ -516,11 +516,13 @@ $messagebox: map.merge(
     'title-color': getCssVar('text-color-primary'),
     'width': 420px,
     'border-radius': 4px,
+    'box-shadow': getCssVar('box-shadow'),
     'font-size': getCssVar('font-size-large'),
     'content-font-size': getCssVar('font-size-base'),
     'content-color': getCssVar('text-color-regular'),
     'error-font-size': 12px,
-    'padding-primary': 15px,
+    'padding-primary': 12px,
+    'font-line-height': getCssVar('font-line-height-primary'),
   ),
   $messagebox
 );
@@ -786,7 +788,7 @@ $dialog: map.merge(
     'title-font-size': getCssVar('font-size-large'),
     'content-font-size': 14px,
     'font-line-height': getCssVar('font-line-height-primary'),
-    'padding-primary': 20px,
+    'padding-primary': 16px,
     'border-radius': getCssVar('border-radius-small'),
   ),
   $dialog
@@ -798,16 +800,16 @@ $tour: () !default;
 $tour: map.merge(
   (
     'width': 520px,
-    'padding-primary': 16px,
+    'padding-primary': 12px,
     'font-line-height': getCssVar('font-line-height-primary'),
     'title-font-size': 16px,
     'title-text-color': getCssVar('text-color-primary'),
     'title-font-weight': 400,
+    'close-color': getCssVar('color-info'),
     'font-size': 14px,
     'color': getCssVar('text-color-primary'),
     'bg-color': getCssVar('bg-color'),
     'border-radius': 4px,
-    'border-color': getCssVar('border-color-lighter'),
   ),
   $tour
 );

package/theme-chalk/src/dialog.scss

@@ -15,7 +15,9 @@
   border-radius: getCssVar('dialog', 'border-radius');
   box-shadow: getCssVar('dialog', 'box-shadow');
   box-sizing: border-box;
+  padding: getCssVar('dialog', 'padding-primary');
   width: var(#{getCssVarName('dialog-width')}, 50%);
+  overflow-wrap: break-word;
 
   &:focus {
     outline: none !important;
@@ -52,18 +54,23 @@
   }
 
   @include e(header) {
-    padding: getCssVar('dialog', 'padding-primary');
-    padding-bottom: 10px;
-    margin-right: 16px;
+    padding-bottom: getCssVar('dialog', 'padding-primary');
+
+    &.show-close {
+      padding-right: calc(getCssVar('dialog', 'padding-primary') + var(
+              #{getCssVarName('message-close-size')},
+              map.get($message, 'close-size')
+      ));
+    }
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: 6px;
+    top: 0;
     right: 0;
     padding: 0;
-    width: 54px;
-    height: 54px;
+    width: 48px;
+    height: 48px;
     background: transparent;
     border: none;
     outline: none;
@@ -93,15 +100,12 @@
   }
 
   @include e(body) {
-    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
-      getCssVar('dialog-padding-primary');
     color: getCssVar('text-color', 'regular');
     font-size: getCssVar('dialog-content-font-size');
   }
 
   @include e(footer) {
-    padding: getCssVar('dialog-padding-primary');
-    padding-top: 10px;
+    padding-top: getCssVar('dialog', 'padding-primary');
     text-align: right;
     box-sizing: border-box;
   }
@@ -112,7 +116,6 @@
 
     @include e(body) {
       text-align: initial;
-      padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
     }
 
     @include e(footer) {

package/theme-chalk/src/message-box.scss

@@ -11,20 +11,21 @@
 
 @include b(message-box) {
   display: inline-block;
+  position: relative;
   max-width: getCssVar('messagebox-width');
   width: 100%;
-  padding-bottom: 10px;
+  padding: getCssVar('messagebox-padding-primary');
   vertical-align: middle;
   background-color: getCssVar('bg-color');
   border-radius: getCssVar('messagebox-border-radius');
-  border: 1px solid getCssVar('border-color-lighter');
   font-size: getCssVar('messagebox-font-size');
-  box-shadow: getCssVar('box-shadow-light');
+  box-shadow: getCssVar('messagebox-box-shadow');
   text-align: left;
   overflow: hidden;
   backface-visibility: hidden;
   // To avoid small screen overflowing, see #11919
   box-sizing: border-box;
+  overflow-wrap: break-word;
 
   &:focus {
     outline: none !important;
@@ -59,24 +60,29 @@
   }
 
   @include e(header) {
-    position: relative;
-    padding: getCssVar('messagebox-padding-primary');
-    padding-bottom: 10px;
+    padding-bottom: getCssVar('messagebox-padding-primary');
+
+    &.show-close {
+      padding-right: calc(getCssVar('messagebox-padding-primary') + var(
+              #{getCssVarName('message-close-size')},
+              map.get($message, 'close-size')
+      ));
+    }
   }
 
   @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
     font-size: getCssVar('messagebox-font-size');
-    line-height: 1;
+    line-height: getCssVar('messagebox-font-line-height');
     color: getCssVar('messagebox-title-color');
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: getCssVar('messagebox-padding-primary');
-    right: getCssVar('messagebox-padding-primary');
+    top: 0;
+    right: 0;
     padding: 0;
+    width: 40px;
+    height: 40px;
     border: none;
     outline: none;
     background: transparent;
@@ -100,17 +106,18 @@
   }
 
   @include e(content) {
-    padding: 10px getCssVar('messagebox-padding-primary');
     color: getCssVar('messagebox-content-color');
     font-size: getCssVar('messagebox-content-font-size');
   }
 
   @include e(container) {
-    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
   }
 
   @include e(input) {
-    padding-top: 15px;
+    padding-top: 12px;
 
     & div.invalid > input {
       border-color: getCssVar('color-error');
@@ -122,26 +129,7 @@
   }
 
   @include e(status) {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px !important;
-
-    &::before {
-      // 防止图标切割
-      padding-left: 1px;
-    }
-
-    &.#{$namespace}-icon {
-      // 防止 el-icon 的position样式覆盖
-      position: absolute;
-    }
-
-    + .#{$namespace}-message-box__message {
-      padding-left: 36px;
-      padding-right: 12px;
-      overflow-wrap: break-word;
-    }
+    font-size: 24px;
 
     @each $type in (success, info, warning, error) {
       &.#{$namespace}-message-box-icon--#{$type} {
@@ -156,67 +144,43 @@
 
     & p {
       margin: 0;
-      line-height: 24px;
+      line-height: getCssVar('messagebox-font-line-height');
     }
   }
 
   @include e(errormsg) {
     color: getCssVar('color-error');
     font-size: getCssVar('messagebox-error-font-size');
-    min-height: 18px;
-    margin-top: 2px;
+    line-height: getCssVar('messagebox-font-line-height');
   }
 
   @include e(btns) {
-    padding: 5px 15px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
-
-    & button:nth-child(2) {
-      margin-left: 10px;
-    }
-  }
-
-  @include e(btns-reverse) {
-    flex-direction: row-reverse;
+    padding-top: getCssVar('messagebox-padding-primary');
   }
 
   // centerAlign 布局
   @include m(center) {
     @include e(title) {
-      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
+      gap: 6px;
     }
 
     @include e(status) {
-      position: relative;
-      top: auto;
-      padding-right: 5px;
-      text-align: center;
-      transform: translateY(-1px);
-    }
-
-    @include e(message) {
-      margin-left: 0;
+      font-size: inherit;
     }
 
     @include e(btns) {
       justify-content: center;
     }
 
-    @include e(content) {
-      $padding-horizontal: calc(
-        #{getCssVar('messagebox', 'padding-primary')} + 12px
-      );
-
-      padding-left: $padding-horizontal;
-      padding-right: $padding-horizontal;
-
-      text-align: center;
+    @include e(container) {
+      justify-content: center;
     }
   }
 }

package/theme-chalk/src/tag.scss

@@ -63,7 +63,6 @@ $tag-icon-span-gap: map.merge(
 @include b(tag) {
   @include genTheme('light-9', 'light-8', '');
 
-  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
   @each $type in $types {
     &.#{bem('tag', '', $type)} {
       @include css-var-from-global(('tag', 'text-color'), ('color', $type));

package/theme-chalk/src/tour.scss

@@ -12,13 +12,13 @@
   }
 
   @include e(content) {
-    padding: 0;
     border-radius: getCssVar('tour-border-radius');
-    border: 1px solid getCssVar('tour-border-color');
     width: var(#{getCssVarName('tour-width')});
+    padding: getCssVar('tour-padding-primary');
     background: getCssVar('tour-bg-color');
     box-shadow: getCssVar('box-shadow-light');
     box-sizing: border-box;
+    overflow-wrap: break-word;
 
     $content-selector: &;
 
@@ -32,7 +32,6 @@
     @include e(arrow) {
       position: absolute;
       background: getCssVar('tour-bg-color');
-      border: 1px solid getCssVar('tour-border-color');
       width: 10px;
       height: 10px;
       pointer-events: none;
@@ -63,11 +62,11 @@
 
     @include e(closebtn) {
       position: absolute;
-      top: 6px;
+      top: 0;
       right: 0;
       padding: 0;
-      width: 44px;
-      height: 44px;
+      width: 40px;
+      height: 40px;
       background: transparent;
       border: none;
       outline: none;
@@ -78,7 +77,7 @@
       );
 
       .#{$namespace}-tour__close {
-        color: getCssVar('tour-title-text-color');
+        color: getCssVar('tour-close-color');
         font-size: inherit;
       }
 
@@ -91,9 +90,14 @@
     }
 
     @include e(header) {
-      padding: getCssVar('tour', 'padding-primary');
-      padding-bottom: 10px;
-      margin-right: 16px;
+      padding-bottom: getCssVar('tour-padding-primary');
+
+      &.show-close {
+        padding-right: calc(getCssVar('tour-padding-primary') + var(
+                #{getCssVarName('message-close-size')},
+                map.get($message, 'close-size')
+        ));
+      }
     }
 
     @include e(title) {
@@ -104,7 +108,6 @@
     }
 
     @include e(body) {
-      padding: 0 getCssVar('tour-padding-primary');
       color: getCssVar('tour-text-color');
       font-size: getCssVar('tour-font-size');
       img,
@@ -114,8 +117,7 @@
     }
 
     @include e(footer) {
-      padding: getCssVar('tour-padding-primary');
-      padding-top: 10px;
+      padding-top: getCssVar('tour-padding-primary');
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
@@ -144,6 +146,7 @@
     @include set-css-var-value('tour-title-text-color', #fff);
     @include set-css-var-value('tour-text-color', #fff);
     @include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
+    @include set-css-var-value('tour-close-color', #fff);
 
     .#{$namespace}-tour__closebtn {
       &:focus,