element-plus-secondary 0.0.1 → 0.0.4

package/theme-chalk/src/button.scss

@@ -92,19 +92,82 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include when(secondary) {
+    color: getCssVar('text-color-regular');
+    background-color: getCssVar('color-white');
+    border: 1px solid;
+    border-color: getCssVar('text-color-placeholder');
+
+    &:hover,
+    &:focus {
+      background-color: var(--deComBorderColorHover, #f4f4f4);
+    }
+
+    &:active {
+      background-color: getCssVar('color-info-light-8');
+      outline: none;
+    }
+
+    &.is-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--deTextPlaceholder, #f4f4f4);
+        background-color: var(--deWhite, #ffffff);
+        border-color: var(--deComponentStrokeColor, #BBBFC4);
+      }
+    }
+
+    &.is-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
+  }
+
   @include when(plain) {
-    @include css-var-from-global(
-      ('button', 'hover', 'text-color'),
-      ('color', 'primary')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'bg-color'),
-      ('fill-color', 'blank')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'border-color'),
-      ('color', 'primary')
-    );
+    color: getCssVar('color-primary');
+    background-color: var(--deWhite, #ffffff);
+    border: 1px solid;
+    border-color: getCssVar('color-primary');
+
+    &:hover,
+    &:focus {
+      background: getCssVar('color-primary-light-7');
+    }
+
+    &:active {
+      background: getCssVar('color-primary-light-5');
+      outline: none;
+    }
+
+    &.is-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: getCssVar('color-primary');
+        background-color: var(--deWhite, #ffffff);
+        opacity: .6;
+      }
+    }
+
+    &.is-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
   }
 
   @include when(active) {

package/theme-chalk/src/checkbox.scss

@@ -171,9 +171,6 @@ $checkbox-bordered-input-width: map.merge(
         }
       }
 
-      & + .#{$namespace}-checkbox__label {
-        color: getCssVar('checkbox-checked-text-color');
-      }
     }
     @include when(focus) {
       // Visually distinguish when focus
@@ -197,7 +194,7 @@ $checkbox-bordered-input-width: map.merge(
           transform: scale(0.5);
           left: 0;
           right: 0;
-          top: 5px;
+          top: 6px;
         }
 
         &::after {
@@ -227,11 +224,11 @@ $checkbox-bordered-input-width: map.merge(
     &::after {
       box-sizing: content-box;
       content: '';
-      border: 1px solid getCssVar('checkbox-checked-icon-color');
+      border: 2px solid getCssVar('checkbox-checked-icon-color');
       border-left: 0;
       border-top: 0;
       height: 7px;
-      left: 4px;
+      left: 5px;
       position: absolute;
       top: 1px;
       transform: rotate(45deg) scaleY(0);

package/theme-chalk/src/color/index.scss

@@ -15,3 +15,4 @@
 
   @return rgb2hex(rgb($red, $green, $blue));
 }
+

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

@@ -18,19 +18,19 @@ $colors: map.deep-merge(
     'white': #ffffff,
     'black': #000000,
     'primary': (
-      'base': #409eff,
+      'base': #3370FF,
     ),
     'success': (
-      'base': #67c23a,
+      'base': #34C724,
     ),
     'warning': (
-      'base': #e6a23c,
+      'base': #FF8800,
     ),
     'danger': (
-      'base': #f56c6c,
+      'base': #F54A45,
     ),
     'error': (
-      'base': #f56c6c,
+      'base': #F54A45,
     ),
     'info': (
       'base': #909399,
@@ -54,8 +54,9 @@ $color-info: map.get($colors, 'info', 'base') !default;
   $type,
   $number,
   $mode: 'light',
-  $mix-color: $color-white
-) {
+  $mix-color: $color-white,
+  $number10: 10,
+  ) {
   $colors: map.deep-merge(
     (
       $type: (
@@ -63,7 +64,7 @@ $color-info: map.get($colors, 'info', 'base') !default;
           mix(
             $mix-color,
             map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
+            math.percentage(math.div($number, $number10))
           ),
       ),
     ),
@@ -83,8 +84,9 @@ $color-info: map.get($colors, 'info', 'base') !default;
 // 80% d9ecff
 // 90% ecf5ff
 @each $type in $types {
-  @for $i from 1 through 9 {
+  @for $i from 1 through 10 {
     @include set-color-mix-level($type, $i, 'light', $color-white);
+    // @include set-color-mix-level($type, $i + 10, 'light', $color-white, 20);
   }
 }
 
@@ -97,9 +99,10 @@ $text-color: () !default;
 $text-color: map.merge(
   (
     'primary': #303133,
-    'regular': #606266,
+    'regular': #1F2329,
     'secondary': #909399,
-    'placeholder': #a8abb2,
+    'placeholder': #BBBFC4,
+    'ban': #EFF0F1,
     'disabled': #c0c4cc,
   ),
   $text-color
@@ -110,8 +113,8 @@ $border-color: map.merge(
   (
     '': #dcdfe6,
     'light': #e4e7ed,
-    'lighter': #ebeef5,
-    'extra-light': #f2f6fc,
+    'lighter': rgba(31, 35, 41, 0.15),
+    'extra-light': #BBBFC4,
     'dark': #d4d7de,
     'darker': #cdd0d6,
   ),
@@ -233,6 +236,7 @@ $common-component-size: map.merge(
   (
     'large': 40px,
     'default': 32px,
+    'middle': 28px,
     'small': 24px,
   ),
   $common-component-size
@@ -269,8 +273,8 @@ $checkbox: map.merge(
     'font-size': 14px,
     'font-weight': getCssVar('font-weight-primary'),
     'text-color': getCssVar('text-color-regular'),
-    'input-height': 14px,
-    'input-width': 14px,
+    'input-height': 16px,
+    'input-width': 16px,
     'border-radius': getCssVar('border-radius-small'),
     'bg-color': getCssVar('fill-color', 'blank'),
     'input-border': getCssVar('border'),
@@ -279,7 +283,7 @@ $checkbox: map.merge(
     'disabled-icon-color': getCssVar('text-color-placeholder'),
     'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
     'disabled-checked-input-border-color': getCssVar('border-color'),
-    'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
+    'disabled-checked-icon-color': getCssVar('text-color-ban'),
     'checked-text-color': getCssVar('color-primary'),
     'checked-input-border-color': getCssVar('color-primary'),
     'checked-bg-color': getCssVar('color-primary'),
@@ -498,7 +502,7 @@ $message: map.merge(
   (
     'bg-color': getCssVar('color', 'info', 'light-9'),
     'border-color': getCssVar('border-color-lighter'),
-    'padding': 15px 19px,
+    'padding': 16px 20px,
     'close-size': 16px,
     'close-icon-color': getCssVar('text-color-placeholder'),
     'close-hover-color': getCssVar('text-color-secondary'),
@@ -804,10 +808,10 @@ $pagination: map.merge(
     'font-size': 14px,
     'bg-color': getCssVar('fill-color', 'blank'),
     'text-color': getCssVar('text-color-primary'),
-    'border-radius': 2px,
+    'border-radius': 4px,
     'button-color': getCssVar('text-color-primary'),
-    'button-width': 32px,
-    'button-height': 32px,
+    'button-width': 28px,
+    'button-height': 28px,
     'button-disabled-color': getCssVar('text-color-placeholder'),
     'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
     'button-bg-color': getCssVar('fill-color'),
@@ -815,7 +819,7 @@ $pagination: map.merge(
     'font-size-small': 12px,
     'button-width-small': 24px,
     'button-height-small': 24px,
-    'item-gap': 16px,
+    'item-gap': 12px,
   ),
   $pagination
 );
@@ -873,8 +877,8 @@ $skeleton: map.merge(
 $tag: () !default;
 $tag: map.merge(
   (
-    'font-size': 12px,
-    'border-radius': 4px,
+    'font-size': 14px,
+    'border-radius': 2px,
     'border-radius-rounded': 9999px,
   ),
   $tag
@@ -999,8 +1003,8 @@ $menu: map.merge(
     'hover-text-color': getCssVar('color-primary'),
     'bg-color': getCssVar('fill-color', 'blank'),
     'hover-bg-color': getCssVar('color-primary-light-9'),
-    'item-height': 56px,
-    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
+    'item-height': 48px,
+    'sub-item-height': 48px,
     'horizontal-sub-item-height': 36px,
     'item-font-size': getCssVar('font-size-base'),
     'item-hover-fill': getCssVar('color-primary-light-9'),
@@ -1054,7 +1058,7 @@ $date-editor: map.merge(
   (
     'width': 220px,
     'monthrange-width': 300px,
-    'daterange-width': 350px,
+    'daterange-width': 256px,
     'datetimerange-width': 400px,
   ),
   $date-editor
@@ -1154,7 +1158,7 @@ $timeline: map.merge(
 $tabs: () !default;
 $tabs: map.merge(
   (
-    'header-height': 40px,
+    'header-height': 46px,
   ),
   $tabs
 );

package/theme-chalk/src/dialog.scss

@@ -52,19 +52,19 @@
   }
 
   @include e(header) {
-    padding: getCssVar('dialog', 'padding-primary');
-    padding-bottom: 10px;
-    margin-right: 16px;
+    padding: 24px;
+    padding-bottom: 0;
+    margin-right: 24px;
     word-break: break-all;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: 6px;
-    right: 0;
+    top: 25px;
+    right: 25px;
     padding: 0;
-    width: 54px;
-    height: 54px;
+    width: 15px;
+    height: 15px;
     background: transparent;
     border: none;
     outline: none;
@@ -88,22 +88,24 @@
   }
 
   @include e(title) {
-    line-height: getCssVar('dialog-font-line-height');
-    font-size: getCssVar('dialog-title-font-size');
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-color', 'regular');
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
   }
 
   @include e(body) {
-    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
-      getCssVar('dialog-padding-primary');
+    padding: 24px;
     color: getCssVar('text-color', 'regular');
     font-size: getCssVar('dialog-content-font-size');
     word-break: break-all;
   }
 
   @include e(footer) {
-    padding: getCssVar('dialog-padding-primary');
-    padding-top: 10px;
+    padding: 24px;
+    padding-top: 0;
     text-align: right;
     box-sizing: border-box;
   }

package/theme-chalk/src/drawer.scss

@@ -33,9 +33,18 @@ $directions: rtl, ltr, ttb, btt;
     align-items: center;
     color: rgb(114, 118, 123);
     display: flex;
-    margin-bottom: 32px;
-    padding: getCssVar('drawer-padding-primary');
-    padding-bottom: 0;
+    position: relative;
+    padding: 16px 24px;
+    margin: 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--el-text-color-regular, #1f2329);
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
+    border-bottom: 1px solid var(--deComBorderColor50, rgba(187, 191, 196, 0.5));
     & > :first-child {
       flex: 1;
     }
@@ -49,9 +58,17 @@ $directions: rtl, ltr, ttb, btt;
   }
 
   @include e(footer) {
-    padding: getCssVar('drawer-padding-primary');
-    padding-top: 10px;
+    position: absolute;
+    height: 80px;
+    width: 100%;
+    padding: 24px;
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+    box-sizing: border-box;
     text-align: right;
+    background-color: #fff;
+    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
   }
 
   &__close-btn {
@@ -62,18 +79,31 @@ $directions: rtl, ltr, ttb, btt;
     color: inherit;
     background-color: transparent;
     outline: none;
-    &:focus,
+    position: absolute;
+    right: 24px;
+    top: 16px;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     &:hover {
-      i {
-        color: getCssVar('color-primary');
-      }
+      background: #e9e9ea;
+    }
+
+    &:focus {
+      background: #d2d3d4;
     }
   }
 
   &__body {
     flex: 1;
-    padding: getCssVar('drawer-padding-primary');
     overflow: auto;
+    padding: 16px 24px;
+    position: unset;
+    overflow-y: auto;
+    padding-bottom: 80px;
     & > * {
       box-sizing: border-box;
     }

package/theme-chalk/src/form.scss

@@ -9,7 +9,7 @@ $form-item-margin-bottom: () !default;
 $form-item-margin-bottom: map.merge(
   (
     'large': 22px,
-    'default': 18px,
+    'default': 28px,
     'small': 18px,
   ),
   $form-item-margin-bottom

package/theme-chalk/src/input.scss

@@ -59,6 +59,7 @@
     );
     background-image: none;
     -webkit-appearance: none;
+    resize:none;
     @include inset-input-border(
       var(
         #{getCssVarName('input-border-color')},
@@ -276,9 +277,7 @@
           }
         }
       } @else {
-        > :first-child {
-          margin-left: 8px;
-        }
+        
       }
     }
   }
@@ -343,7 +342,7 @@
     }
   }
 
-  @each $size in (large, small) {
+  @each $size in (large, small, middle) {
     @include m($size) {
       @include css-var-from-global('input-height', ('component-size', $size));
 

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

@@ -13,7 +13,7 @@
   display: inline-block;
   max-width: getCssVar('messagebox-width');
   width: 100%;
-  padding-bottom: 10px;
+  padding: 25px;
   vertical-align: middle;
   background-color: getCssVar('bg-color');
   border-radius: getCssVar('messagebox-border-radius');
@@ -58,8 +58,6 @@
 
   @include e(header) {
     position: relative;
-    padding: getCssVar('messagebox-padding-primary');
-    padding-bottom: 10px;
   }
 
   @include e(title) {
@@ -98,7 +96,7 @@
   }
 
   @include e(content) {
-    padding: 10px getCssVar('messagebox-padding-primary');
+    padding: 0 0 24px 0;
     color: getCssVar('messagebox-content-color');
     font-size: getCssVar('messagebox-content-font-size');
   }
@@ -121,9 +119,8 @@
 
   @include e(status) {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px !important;
+    top: 1px;
+    font-size: 22px !important;
 
     &::before {
       // 防止图标切割
@@ -136,9 +133,19 @@
     }
 
     + .#{$namespace}-message-box__message {
-      padding-left: 36px;
-      padding-right: 12px;
+      padding-left: 39px;
       word-break: break-word;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0px;
+      text-align: left;
+      .tip {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+      }
     }
 
     @each $type in (success, info, warning, error) {
@@ -166,14 +173,14 @@
   }
 
   @include e(btns) {
-    padding: 5px 15px 0;
+    padding: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
 
     & button:nth-child(2) {
-      margin-left: 10px;
+      margin-left: 12px;
     }
   }
 

package/theme-chalk/src/message.scss

@@ -15,7 +15,7 @@
   border-radius: getCssVar('border-radius-base');
   border-width: getCssVar('border-width');
   border-style: getCssVar('border-style');
-  border-color: getCssVar('message', 'border-color');
+  border-color: getCssVar('message', 'text-color');
   position: fixed;
   left: 50%;
   top: 20px;
@@ -44,16 +44,22 @@
     @include m($type) {
       @include css-var-from-global(
         ('message', 'bg-color'),
-        ('color', $type, 'light-9')
+        ('color', $type, 'light-21')
       );
       @include css-var-from-global(
         ('message', 'border-color'),
-        ('color', $type, 'light-8')
+        ('color', $type, 'light-21')
       );
       @include css-var-from-global(('message', 'text-color'), ('color', $type));
 
       .#{$namespace}-message__content {
-        color: getCssVar('message', 'text-color');
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0px;
+        text-align: left;
+        color: #1F2329;
         overflow-wrap: anywhere;
       }
     }
@@ -64,7 +70,7 @@
   }
 
   @include e(icon) {
-    margin-right: 10px;
+    margin-right: 8.67px;
   }
 
   .#{$namespace}-message__badge {

package/theme-chalk/src/mixins/_var.scss

@@ -28,6 +28,18 @@
     );
   }
 
+  @include set-css-var-value(
+    ('color', 'success', 'light', 21),
+    '#F0FBEF'
+  );
+
+  @include set-css-var-value(
+    ('color', 'error', 'light', 21),
+    '#FEF1F1'
+  );
+
+
+
   @include set-css-var-value(
     ('color', $type, 'dark-2'),
     map.get($colors, $type, 'dark-2')

package/theme-chalk/src/pagination.scss

@@ -147,6 +147,10 @@
     }
   }
 
+  @include e(classifier) {
+    margin-left: 8px;
+  }
+
   @include b(pager) {
     user-select: none;
     list-style: none;
@@ -173,21 +177,22 @@
     .btn-next,
     .#{$namespace}-pager li {
       margin: 0 4px;
-      background-color: getCssVar('pagination-button-bg-color');
+      border: 1px solid;
+      border-color: getCssVar('text-color-placeholder');
 
       &.is-active {
-        background-color: getCssVar('color-primary');
-        color: getCssVar('color-white');
+        border-color: getCssVar('color-primary');
+        color: getCssVar('color-primary');
       }
 
       &:disabled,
       &.is-disabled {
         color: getCssVar('text-color', 'placeholder');
-        background-color: getCssVar('disabled-bg-color');
+        border-color: getCssVar('disabled-bg-color');
 
         &.is-active {
           color: getCssVar('text-color', 'secondary');
-          background-color: getCssVar('fill-color', 'dark');
+          border-color: getCssVar('fill-color', 'dark');
         }
       }
     }

package/theme-chalk/src/select.scss

@@ -18,7 +18,7 @@
   .#{$namespace}-tag {
     box-sizing: border-box;
     border-color: transparent;
-    margin: 2px 6px 2px 0;
+    margin: 3px 4px 0px 0;
     &:last-child {
       margin-right: 0;
     }

package/theme-chalk/src/table-column.scss

@@ -6,8 +6,8 @@
 @include b(table-column) {
   @include m(selection) {
     .cell {
-      padding-left: 14px;
-      padding-right: 14px;
+      padding-left: 12px;
+      padding-right: 12px;
     }
   }
 }