iov-design 2.15.58 → 2.15.60

package/packages/link/src/main.vue

@@ -4,6 +4,7 @@
       'el-link',
       type ? `el-link--${type}` : '',
       size ? `el-link--${size}` : '',
+      text ? `is-text` : '',
       disabled && 'is-disabled',
       underline && !disabled && 'is-underline'
     ]"
@@ -39,6 +40,7 @@ export default {
     disabled: Boolean,
     href: String,
     icon: String,
+    text: Boolean,
     size: {
       type: String,
       default: 'small'

package/packages/popover/src/main.vue

@@ -15,7 +15,9 @@
         :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
       >
         <div class="el-popover__title" v-if="title" v-text="title"></div>
-        <slot>{{ content }}</slot>
+        <div class="el-popover__content">
+          <slot>{{ content }}</slot>
+        </div>
       </div>
     </transition>
     <span class="el-popover__reference-wrapper" ref="wrapper" >

package/packages/table/src/config.js

@@ -107,7 +107,7 @@ export const cellForced = {
       };
       return (<div class={ classes }
         on-click={callback}>
-        <i class='el-icon el-icon-arrow-right'></i>
+        <i class='el-icon'></i>
       </div>);
     },
     sortable: false,
@@ -138,9 +138,9 @@ export function treeCellPrefix(h, { row, treeNode, store }) {
   }
   if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
     const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
-    let iconClasses = ['el-icon-arrow-right'];
+    let iconClasses = ['el-icon'];
     if (treeNode.loading) {
-      iconClasses = ['el-icon-loading'];
+      iconClasses = ['iov-icon-loading'];
     }
     ele.push(<div class={ expandClasses }
       on-click={ callback }>

package/packages/tag/src/tag.vue

@@ -55,7 +55,7 @@
             { this.icon && <i class={`${this.icon} el-tag-icon`}></i> }
             <span class="el-tag__text">{ this.$slots.default }</span>
             {
-              this.closable && <i class="el-tag__close iov-icon-close" on-click={ this.handleClose }></i>
+              this.closable && <i class="el-tag__close iov-icon-close-mini" on-click={ this.handleClose }></i>
             }
           </span>
         </span>

package/packages/theme-chalk/src/button.scss

@@ -64,7 +64,7 @@
     }
   }
   @include when(ghost) {
-    background: none;
+    background: none !important;
   }
   @include when(block) {
     display: block;
@@ -75,11 +75,11 @@
     &,
     &:hover,
     &:focus {
-      color: $--button-disabled-font-color;
+      color: $--color-text-2;
       cursor: not-allowed;
       background-image: none;
-      background-color: $--button-disabled-background-color;
-      border-color: $--button-disabled-border-color;
+      background-color: $--color-fill-1;
+      border-color: $--color-line-2;
     }
 
     &.el-button--text {
@@ -261,6 +261,78 @@
       border-color: transparent;
     }
   }
+  @include m(text-info) {
+    color: $--color-text-5;
+    &:hover {
+      color: $--color-text-5;
+      border-color: $--color-fill-1;
+      background-color: $--color-fill-1;
+    }
+    &:active {
+      color: $--color-text-5;
+      border-color: $--color-fill-2;
+      background-color: $--color-fill-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-text-2;
+    }
+  }
+  @include m(text-success) {
+    color: $--color-success-6;
+    &:hover {
+      color: $--color-success-6;
+      border-color: $--color-success-1;
+      background-color: $--color-success-1;
+    }
+    &:active {
+      color: $--color-success-6;
+      border-color: $--color-success-2;
+      background-color: $--color-success-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-success-3;
+    }
+  }
+  @include m(text-warning) {
+    color: $--color-warning-6;
+    &:hover {
+      color: $--color-warning-6;
+      border-color: $--color-warning-1;
+      background-color: $--color-warning-1;
+    }
+    &:active {
+      color: $--color-warning-6;
+      border-color: $--color-warning-2;
+      background-color: $--color-warning-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-warning-3;
+    }
+  }
+  @include m(text-danger) {
+    color: $--color-danger-6;
+    &:hover {
+      color: $--color-danger-6;
+      border-color: $--color-danger-1;
+      background-color: $--color-danger-1;
+    }
+    &:active {
+      color: $--color-danger-6;
+      border-color: $--color-danger-2;
+      background-color: $--color-danger-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-danger-3;
+    }
+  }
 }
 
 @include b(button-group) {

package/packages/theme-chalk/src/cascader-panel.scss

@@ -125,7 +125,11 @@
     }
   }
   > .el-radio {
-    margin-right: 8px;
+    opacity: 0;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
     .el-radio__input {
       margin-right: 0;
     }

package/packages/theme-chalk/src/common/popup.scss

@@ -31,8 +31,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: $--popup-modal-opacity;
-  background: $--popup-modal-background-color;
+  opacity: 0.6;
+  background: #000;
 }
 
 @include b(popup-parent) {

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

@@ -70,11 +70,6 @@ $--border-color-extra-light: #F2F6FC !default;
 /// color|1|Background Color|4
 $--background-color-base: #F5F7FA !default;
 
-/* Link
--------------------------- */
-$--link-color: $--color-primary-light-2 !default;
-$--link-hover-color: $--color-primary !default;
-
 /* Border
 -------------------------- */
 $--border-width-base: 1px !default;
@@ -420,9 +415,9 @@ $--button-default-font-color: $--color-text-regular !default;
 $--button-default-border-color: $--color-line-2 !default;
 $--button-default-background-color: $--color-fill-1 !default;
 
-$--button-disabled-font-color: $--color-text-placeholder !default;
+$--button-disabled-font-color: $--color-text-2 !default;
 $--button-disabled-background-color: $--color-white !default;
-$--button-disabled-border-color: $--color-line-1 !default;
+$--button-disabled-border-color: $--color-line-2 !default;
 
 $--button-primary-font-color: $--color-white !default;
 $--button-primary-background-color: $--color-primary-6 !default;
@@ -505,44 +500,6 @@ $--pagination-button-disabled-color: $--color-fill-4 !default;
 $--pagination-button-disabled-background-color: $--color-white !default;
 $--pagination-hover-color: $--color-primary-6 !default;
 
-/* Popup
--------------------------- */
-/// color||Color|0
-$--popup-modal-background-color: $--color-black !default;
-/// opacity||Other|1
-$--popup-modal-opacity: 0.6 !default;
-
-/* Popover
--------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: $--font-size-base !default;
-/// color||Color|0
-$--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
-
-/* Tooltip
--------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
-
 /* Tag
 -------------------------- */
 $--tag-font-size: 13px !default;
@@ -743,22 +700,6 @@ $--backtop-font-color: $--color-primary !default;
 /// color||Color|0
 $--backtop-hover-background-color: $--border-color-extra-light !default;
 
-/* Link
---------------------------*/
-$--link-default-font-color: $--color-text-6 !default;
-$--link-default-active-color: $--color-primary-6 !default;
-$--link-disabled-font-color: $--color-text-1 !default;
-
-$--link-primary-font-color: $--color-primary-6 !default;
-$--link-success-font-color: $--color-success-6 !default;
-$--link-warning-font-color: $--color-warning-6 !default;
-$--link-danger-font-color: $--color-danger-6 !default;
-$--link-gold-font-color: $--color-gold-6 !default;
-$--link-blue-font-color: $--color-blue-6 !default;
-$--link-purple-font-color: $--color-purple-6 !default;
-$--link-pink-font-color: $--color-pink-6 !default;
-$--link-info-font-color: $--color-gray-6 !default;
-
 
 /* Calendar
 --------------------------*/

package/packages/theme-chalk/src/iovfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iovfont';  /* Project id 4466910 */
-  src: url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff2?t=1753354243540') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff?t=1753354243540') format('woff'),
-       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.ttf?t=1753354243540') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4466910_5tg1ozcw3bm.woff2?t=1755252355185') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4466910_5tg1ozcw3bm.woff?t=1755252355185') format('woff'),
+       url('//at.alicdn.com/t/c/font_4466910_5tg1ozcw3bm.ttf?t=1755252355185') format('truetype');
 }
 
 [class^="iov-icon-"], [class*=" iov-icon-"] {
@@ -30,12 +30,38 @@
 }
 .iov-icon-loading {
   &:before {
-    content: "\e6cf";
-    animation: rotating 2s linear infinite;
+    content: "";
+    width: 14px;
+    height: 14px;
+    animation: rotating .45s linear infinite;
     display: inline-block;
+    background-size: contain;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5aSa6Imy5Zu+5qCHL2xvYWRpbmc8L3RpdGxlPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4tMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcGF0dGVyblVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2ltYWdlLTIiPjwvdXNlPgogICAgICAgIDwvcGF0dGVybj4KICAgICAgICA8aW1hZ2UgaWQ9ImltYWdlLTIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBNEFBQUFPQ0FZQUFBQWZTQzNSQUFBQUFYTlNSMElBcnM0YzZRQUFBRVJsV0VsbVRVMEFLZ0FBQUFnQUFZZHBBQVFBQUFBQkFBQUFHZ0FBQUFBQUE2QUJBQU1BQUFBQkFBRUFBS0FDQUFRQUFBQUJBQUFBRHFBREFBUUFBQUFCQUFBQURnQUFBQUM5OERuNkFBQUJqa2xFUVZRb0ZWMlJUVTdjUUJDRlg5c05neERTYkFKU0Z0bGxpVGhOTmx3aVorTU9XYkNQSUNzV2lQQXpEQm1HOGNpRFBNWjJ2dGR5UzBESno5VlZYYS8rT3B5Y0RvTUtTU1d3anVQWitqMThuMEZjVkk4alMrQmcyd2tzdGczYm54RFY0UnlBeFdjSDJzNitUTWpWeHM0K0VvbFBSRjlhY3JYM3BBOUV0K2NLdVcxWDJRSFduK2NjTzRoNjQ5S1o4Mnladkl2UDJhME5KOGh0RSsvbHZGS3NETjI0TXlkcGdlVWJPQUJqZTZtQS9VaUVkRTlzeDZONE5hWnNRcXVuZnFHemNLZ3BJL3pBZDBUTVBzVFVCN0ZsRElQdUlUY2hwTW9yN01kKzBKOWhyYk5ocTRQQ29kSXh3VjlKTWswSnBJa3J6cmlvMFdzdS9rRzZaWlRMMytlcXZwK3EzZ3U2SUptbEFsL0FsQ0w3SG5kT0N6TklkMlM5eGY2NzNlb1JQVno5REExdHo2aHlROHdOdmp0eVBJQzVkN1dBVUVGY2NwNFhiMXFVVGNxT3liSjdyUW82Z2JnSC9Hd3RhQ0xucFlub1o0SmV1bDVWUGRFbXNmaTFyVFp4VjFYWmFSa0tsa2tnWHhlWnFTcUNWanpMbXJXdiswYjE5YS8wdW1reW5xbnBPOVd4NEM1b1FpNC9qdjREYjEyZlh5N0RpNzBBQUFBQVNVVk9SSzVDWUlJPSI+PC9pbWFnZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLmlbDmja7lsZXnpLoiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmlbDmja7lsZXnpLot6KGo5qC8IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzA4LCAtNDUzMCkiPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTMz5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOTQsIDQ0NzIpIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJsb2FkaW5nL+m7mOiupC/lj43nmb3lpIfku70tMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0LCA1OCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJBcnRib2FyZCIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjIzODgsIDEuMjM4OCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02Ljc2MTIyOTMxLDAgQzEwLjQ5NTM1MzIsMCAxMy41MjI0NTg2LDMuMDI3MTA1NDcgMTMuNTIyNDU4Niw2Ljc2MTIyOTMxIEMxMy41MjI0NTg2LDEwLjQ5NTM1MzIgMTAuNDk1MzUzMiwxMy41MjI0NTg2IDYuNzYxMjI5MzEsMTMuNTIyNDU4NiBDMy4wMjcxMDU0NywxMy41MjI0NTg2IDAsMTAuNDk1MzUzMiAwLDYuNzYxMjI5MzEgQzAsMy4wMjcxMDU0NyAzLjAyNzEwNTQ3LDAgNi43NjEyMjkzMSwwIFogTTYuNzYxMjI5MzEsMS45NjY5MDMwNyBDNC4xMTMzOTYwNSwxLjk2NjkwMzA3IDEuOTY2OTAzMDcsNC4xMTMzOTYwNSAxLjk2NjkwMzA3LDYuNzYxMjI5MzEgQzEuOTY2OTAzMDcsOS40MDkwNjI1OCA0LjExMzM5NjA1LDExLjU1NTU1NTYgNi43NjEyMjkzMSwxMS41NTU1NTU2IEM5LjQwOTA2MjU4LDExLjU1NTU1NTYgMTEuNTU1NTU1Niw5LjQwOTA2MjU4IDExLjU1NTU1NTYsNi43NjEyMjkzMSBDMTEuNTU1NTU1Niw0LjExMzM5NjA1IDkuNDA5MDYyNTgsMS45NjY5MDMwNyA2Ljc2MTIyOTMxLDEuOTY2OTAzMDcgWiIgaWQ9IuakreWchuW9oiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNi43NjEyMjkzMSwwIEMxMC40OTUzNTMyLDAgMTMuNTIyNDU4NiwzLjAyNzEwNTQ3IDEzLjUyMjQ1ODYsNi43NjEyMjkzMSBDMTMuNTIyNDU4Niw3LjMwNDM3NDYgMTMuMDgyMTUyNCw3Ljc0NDY4MDg1IDEyLjUzOTAwNzEsNy43NDQ2ODA4NSBDMTEuOTk1ODYxOCw3Ljc0NDY4MDg1IDExLjU1NTU1NTYsNy4zMDQzNzQ2IDExLjU1NTU1NTYsNi43NjEyMjkzMSBDMTEuNTU1NTU1Niw0LjExMzM5NjA1IDkuNDA5MDYyNTgsMS45NjY5MDMwNyA2Ljc2MTIyOTMxLDEuOTY2OTAzMDcgQzQuMTEzMzk2MDUsMS45NjY5MDMwNyAxLjk2NjkwMzA3LDQuMTEzMzk2MDUgMS45NjY5MDMwNyw2Ljc2MTIyOTMxIEMxLjk2NjkwMzA3LDkuNDA5MDYyNTggNC4xMTMzOTYwNSwxMS41NTU1NTU2IDYuNzYxMjI5MzEsMTEuNTU1NTU1NiBDNy4zMDQzNzQ2LDExLjU1NTU1NTYgNy43NDQ2ODA4NSwxMS45OTU4NjE4IDcuNzQ0NjgwODUsMTIuNTM5MDA3MSBDNy43NDQ2ODA4NSwxMy4wODIxNTI0IDcuMzA0Mzc0NiwxMy41MjI0NTg2IDYuNzYxMjI5MzEsMTMuNTIyNDU4NiBDMy4wMjcxMDU0NywxMy41MjI0NTg2IDAsMTAuNDk1MzUzMiAwLDYuNzYxMjI5MzEgQzAsMy4wMjcxMDU0NyAzLjAyNzEwNTQ3LDAgNi43NjEyMjkzMSwwIFoiIGlkPSLot6/lvoQiIGZpbGw9InVybCgjcGF0dGVybi0xKSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
   }
 }
 
+.iov-icon-card:before {
+  content: "\e6ff";
+}
+
+.iov-icon-copy:before {
+  content: "\e700";
+}
+
+.iov-icon-sort:before {
+  content: "\e701";
+}
+
+.iov-icon-authorize:before {
+  content: "\e702";
+}
+
+.iov-icon-authorize-custom:before {
+  content: "\e703";
+}
+
 .iov-icon-bottle:before {
   content: "\e6fe";
 }
@@ -44,7 +70,6 @@
   content: "\e6f8";
 }
 
-
 .iov-icon-sun:before {
   content: "\e6f9";
 }

package/packages/theme-chalk/src/link.scss

@@ -2,15 +2,14 @@
 @import "common/var";
 
 $typeMap: (
-  primary: $--link-primary-font-color,
-  danger: $--link-danger-font-color,
-  success: $--link-success-font-color,
-  warning: $--link-warning-font-color,
-  gold: $--link-gold-font-color,
-  blue: $--link-blue-font-color,
-  purple: $--link-purple-font-color,
-  pink: $--link-pink-font-color,
-  // info: $--link-info-font-color
+  primary: (default: $--color-primary-6, hover: $--color-primary-5, disabled: $--color-primary-2),
+  danger:  (default: $--color-danger-6,  hover: $--color-danger-5,  disabled: $--color-danger-2),
+  success: (default: $--color-success-6, hover: $--color-success-5, disabled: $--color-success-2),
+  warning: (default: $--color-warning-6, hover: $--color-warning-5, disabled: $--color-warning-2),
+  gold:    (default: $--color-gold-6,    hover: $--color-gold-5,    disabled: $--color-gold-2),
+  blue:    (default: $--color-blue-6,    hover: $--color-blue-5,    disabled: $--color-blue-2),
+  purple:  (default: $--color-purple-6,  hover: $--color-purple-5,  disabled: $--color-purple-2),
+  pink:    (default: $--color-pink-6,    hover: $--color-pink-5,    disabled: $--color-pink-2)
 );
 
 @include b(link) {
@@ -28,7 +27,7 @@ $typeMap: (
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid $--link-default-active-color
+      border-bottom: 1px solid $--color-primary-6;
     }
   }
 
@@ -57,33 +56,51 @@ $typeMap: (
 
 
   &.el-link--default  {
-    color: $--link-default-font-color;
+    color: $--color-text-6;
     &:hover {
-      color: $--link-default-active-color
+      color: $--color-primary-6;
     }
     &:after {
-      border-color: $--link-default-active-color
+      border-color: $--color-primary-6;
     }
     @include when(disabled) {
-      color: $--link-disabled-font-color
+      color: $--color-text-1;
+    }
+    &.is-text {
+      color: $--color-text-6;
+      cursor: text;
+      &:hover {
+        color: $--color-text-6;
+      }
     }
   }
 
-  @each $type, $primaryColor in $typeMap {
+  @each $type, $colors in $typeMap {
     &.el-link--#{$type} {
+      $primaryColor: map-get($colors, default);
+      $hoverColor: map-get($colors, hover);
+      $disabledColor: map-get($colors, disabled);
       color: $primaryColor;
       &:hover {
-        color: mix($primaryColor, $--color-white, 80%)
+        color: $hoverColor;
       }
       &:after {
-        border-color: $primaryColor
+        border-color: $primaryColor;
       }
       @include when(disabled) {
-        color: mix($primaryColor, $--color-white, 50%)
+        color: $disabledColor;
       }
       @include when(underline) {
         &:hover:after {
-          border-color: $primaryColor
+          border-color: $primaryColor;
+        }
+      }
+
+      &.is-text {
+        cursor: text;
+        color: $primaryColor;
+        &:hover {
+          color: $primaryColor; // 保持一致
         }
       }
     }

package/packages/theme-chalk/src/popover.scss

@@ -4,28 +4,34 @@
 
 @include b(popover) {
   position: absolute;
-  background: $--popover-background-color;
+  background: #fff;
   min-width: 150px;
   border-radius: 4px;
-  border: 1px solid $--popover-border-color;
-  padding: $--popover-padding;
-  z-index: $--index-popper;
-  color: $--color-text-regular;
-  line-height: 1.4;
+  border: 0.5px solid $--color-line-2;
+  padding: 12px;
+  z-index: 2000;
+  color: $--color-text-5;
   text-align: justify;
-  font-size: $--popover-font-size;
-  box-shadow: $--box-shadow-light;
+  font-size: 12px;
+  box-shadow: 0px 2px 8px 0px rgba(73,75,83,0.12);
   word-break: break-all;
 
   @include m(plain) {
-    padding: $--popover-padding-large;
+    padding: 12px;
   }
 
   @include e(title) {
-    color: $--popover-title-font-color;
-    font-size: $--popover-title-font-size;
+    font-weight: 500;
+    font-size: 13px;
+    color: $--color-text-6;
     line-height: 1;
-    margin-bottom: 12px;
+    margin-bottom: 5px;
+  }
+  @include e(content) {
+    font-weight: 400;
+    font-size: 12px;
+    color: $--color-text-5;
+    line-height: 18px;
   }
 
   @include e(reference) {

package/packages/theme-chalk/src/popper.scss

@@ -13,90 +13,89 @@
   }
 
   .popper__arrow {
-    display: none;
-    border-width: $--popover-arrow-size;
+    border-width: 6px;
     filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
   }
 
   .popper__arrow::after {
     content: " ";
-    border-width: $--popover-arrow-size;
+    border-width: 6px;
   }
 
   &[x-placement^="top"] {
-    margin-bottom: 4px;
+    margin-bottom: 10px;
   }
 
-  // &[x-placement^="top"] .popper__arrow {
-  //   bottom: -$--popover-arrow-size;
-  //   left: 50%;
-  //   margin-right: #{$--tooltip-arrow-size / 2};
-  //   border-top-color: $--popover-border-color;
-  //   border-bottom-width: 0;
+  &[x-placement^="top"] .popper__arrow {
+    bottom: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-color: $--color-line-2;
+    border-bottom-width: 0;
 
-  //   &::after {
-  //     bottom: 1px;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-top-color: $--popover-background-color;
-  //     border-bottom-width: 0;
-  //   }
-  // }
+    &::after {
+      bottom: 0.5px;
+      margin-left: -6px;
+      border-top-color: #fff;
+      border-bottom-width: 0;
+    }
+  }
 
   &[x-placement^="bottom"] {
-    margin-top: 4px;
+    margin-top: 10px;
   }
 
-  // &[x-placement^="bottom"] .popper__arrow {
-  //   top: -$--popover-arrow-size;
-  //   left: 50%;
-  //   margin-right: #{$--tooltip-arrow-size / 2};
-  //   border-top-width: 0;
-  //   border-bottom-color: $--popover-border-color;
+  &[x-placement^="bottom"] .popper__arrow {
+    top: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: $--color-line-2;
 
-  //   &::after {
-  //     top: 1px;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-top-width: 0;
-  //     border-bottom-color: $--popover-background-color;
-  //   }
-  // }
+    &::after {
+      top: 0.5px;
+      margin-left: -6px;
+      border-top-width: 0;
+      border-bottom-color: #fff;
+    }
+  }
 
   &[x-placement^="right"] {
-    margin-left: 4px;
+    margin-left: 10px;
   }
 
-  // &[x-placement^="right"] .popper__arrow {
-  //   top: 50%;
-  //   left: -$--popover-arrow-size;
-  //   margin-bottom: #{$--tooltip-arrow-size / 2};
-  //   border-right-color: $--popover-border-color;
-  //   border-left-width: 0;
+  &[x-placement^="right"] .popper__arrow {
+    top: 50%;
+    left: -6px;
+    margin-bottom: 3px;
+    border-right-color: $--color-line-2;
+    border-left-width: 0;
 
-  //   &::after {
-  //     bottom: -$--popover-arrow-size;
-  //     left: 1px;
-  //     border-right-color: $--popover-background-color;
-  //     border-left-width: 0;
-  //   }
-  // }
+    &::after {
+      bottom: -6px;
+      left: 0.5px;
+      border-right-color: #fff;
+      border-left-width: 0;
+    }
+  }
 
   &[x-placement^="left"] {
-    margin-right: 4px;
+    margin-right: 10px;
   }
 
-  // &[x-placement^="left"] .popper__arrow {
-  //   top: 50%;
-  //   right: -$--popover-arrow-size;
-  //   margin-bottom: #{$--tooltip-arrow-size / 2};
-  //   border-right-width: 0;
-  //   border-left-color: $--popover-border-color;
+  &[x-placement^="left"] .popper__arrow {
+    top: 50%;
+    right: -6px;
+    margin-bottom: 3px;
+    border-right-width: 0;
+    border-left-color: $--color-line-2;
 
-  //   &::after {
-  //     right: 1px;
-  //     bottom: -$--popover-arrow-size;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-right-width: 0;
-  //     border-left-color: $--popover-background-color;
-  //   }
-  // }
+    &::after {
+      right: 0.5px;
+      bottom: -6px;
+      margin-left: -6px;
+      border-right-width: 0;
+      border-left-color: #fff;
+    }
+  }
 }

package/packages/theme-chalk/src/radio.scss

@@ -159,6 +159,7 @@
       .el-radio__label {
         transition: color ease .3s;
         color: $--color-primary-6;
+        font-weight: 500;
       }
       &.is-disabled {
         background-color: $--color-primary-1;