element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/theme-chalk/src/slider.scss

@@ -16,7 +16,7 @@
     width: 100%;
     height: var(--el-slider-height);
     margin: var(--el-slider-margin);
-    background-color: var(--el-slider-runway-background-color);
+    background-color: var(--el-slider-runway-bg-color);
     border-radius: var(--el-slider-border-radius);
     position: relative;
     cursor: pointer;
@@ -88,7 +88,7 @@
 
   @include e(bar) {
     height: var(--el-slider-height);
-    background-color: var(--el-slider-main-background-color);
+    background-color: var(--el-slider-main-bg-color);
     border-top-left-radius: var(--el-slider-border-radius);
     border-bottom-left-radius: var(--el-slider-border-radius);
     position: absolute;
@@ -123,7 +123,7 @@
     width: var(--el-slider-button-size);
     height: var(--el-slider-button-size);
     vertical-align: middle;
-    border: solid 2px var(--el-slider-main-background-color);
+    border: solid 2px var(--el-slider-main-bg-color);
     background-color: var(--el-color-white);
     border-radius: 50%;
     box-sizing: border-box;
@@ -151,7 +151,7 @@
     height: var(--el-slider-height);
     width: var(--el-slider-height);
     border-radius: var(--el-border-radius-circle);
-    background-color: var(--el-slider-stop-background-color);
+    background-color: var(--el-slider-stop-bg-color);
     transform: translateX(-50%);
   }
 

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

@@ -70,7 +70,7 @@
       }
 
       &.is-disabled {
-        color: $disabled-color-base;
+        color: var(--el-disabled-text-color);
         cursor: not-allowed;
       }
     }

package/theme-chalk/src/table.scss

@@ -13,11 +13,11 @@
   height: fit-content;
   width: 100%;
   max-width: 100%;
-  background-color: var(--el-table-background-color);
+  background-color: var(--el-table-bg-color);
   font-size: 14px;
-  color: var(--el-table-font-color);
+  color: var(--el-table-text-color);
 
-  // 数据为空
+  // when data is empty
   @include e(empty-block) {
     min-height: 60px;
     text-align: center;
@@ -35,7 +35,7 @@
     color: var(--el-text-color-secondary);
   }
 
-  // 展开行
+  // expand the row
   @include e(expand-column) {
     .cell {
       padding: 0;
@@ -61,9 +61,9 @@
   }
 
   @include e(expanded-cell) {
-    background-color: var(--el-table-expanded-cell-background-color);
+    background-color: var(--el-table-expanded-cell-bg-color);
 
-    // 纯属为了增加权重
+    // increase the weight purely
     &[class*='cell'] {
       padding: 20px 50px;
     }
@@ -79,7 +79,7 @@
   }
 
   @include e(append-wrapper) {
-    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+    // avoid overlapping margin https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
     overflow: hidden;
   }
 
@@ -105,12 +105,12 @@
   }
 
   thead {
-    color: var(--el-table-header-font-color);
+    color: var(--el-table-header-text-color);
     font-weight: 500;
 
     &.is-group {
       th.#{$namespace}-table__cell {
-        background: var(--el-background-color-base);
+        background: var(--el-bg-color-base);
       }
     }
   }
@@ -167,7 +167,7 @@
   }
 
   tr {
-    background-color: var(--el-table-tr-background-color);
+    background-color: var(--el-table-tr-bg-color);
 
     input[type='checkbox'] {
       margin: 0;
@@ -186,7 +186,7 @@
   th.#{$namespace}-table__cell {
     overflow: hidden;
     user-select: none;
-    background-color: var(--el-table-header-background-color);
+    background-color: var(--el-table-header-bg-color);
 
     > .cell {
       display: inline-block;
@@ -324,7 +324,7 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: var(--el-table-header-background-color);
+    background-color: var(--el-table-header-bg-color);
     border-bottom: var(--el-table-border);
   }
 
@@ -356,8 +356,8 @@
 
     & tbody td.#{$namespace}-table__cell {
       border-top: var(--el-table-border);
-      background-color: var(--el-table-row-hover-background-color);
-      color: var(--el-table-font-color);
+      background-color: var(--el-table-row-hover-bg-color);
+      color: var(--el-table-text-color);
     }
   }
 
@@ -389,8 +389,8 @@
     overflow: hidden;
 
     & tbody td.#{$namespace}-table__cell {
-      background-color: var(--el-table-row-hover-background-color);
-      color: var(--el-table-font-color);
+      background-color: var(--el-table-row-hover-bg-color);
+      color: var(--el-table-text-color);
     }
   }
 
@@ -484,7 +484,7 @@
         }
 
         &.current-row td.#{$namespace}-table__cell {
-          background-color: var(--el-table-current-row-background-color);
+          background-color: var(--el-table-current-row-bg-color);
         }
       }
     }
@@ -497,14 +497,14 @@
         &,
         &.current-row {
           > td.#{$namespace}-table__cell {
-            background-color: var(--el-table-row-hover-background-color);
+            background-color: var(--el-table-row-hover-bg-color);
           }
         }
       }
     }
 
     tr.current-row > td.#{$namespace}-table__cell {
-      background-color: var(--el-table-current-row-background-color);
+      background-color: var(--el-table-current-row-bg-color);
     }
   }
 
@@ -538,7 +538,7 @@
 
   @include m(enable-row-hover) {
     .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
-      background-color: var(--el-table-row-hover-background-color);
+      background-color: var(--el-table-row-hover-bg-color);
     }
   }
 

package/theme-chalk/src/tabs.scss

@@ -147,7 +147,7 @@
     }
 
     @include when(disabled) {
-      color: $disabled-color-base;
+      color: var(--el-disabled-text-color);
       cursor: default;
     }
   }
@@ -258,7 +258,7 @@
         color: var(--el-color-primary);
       }
       &.is-disabled {
-        color: $disabled-color-base;
+        color: var(--el-disabled-text-color);
       }
     }
 

package/theme-chalk/src/tag.scss

@@ -11,10 +11,10 @@
 @mixin genTheme(
   $backgroundColorWeight,
   $borderColorWeight,
-  $fontColorWeight,
+  $textColorWeight,
   $hoverColorWeight
 ) {
-  --el-tag-background-color: #{mix(
+  --el-tag-bg-color: #{mix(
       map.get($tag-color, 'primary'),
       $color-white,
       $backgroundColorWeight
@@ -24,10 +24,10 @@
       $color-white,
       $borderColorWeight
     )};
-  --el-tag-font-color: #{mix(
+  --el-tag-text-color: #{mix(
       map.get($tag-color, 'primary'),
       $color-white,
-      $fontColorWeight
+      $textColorWeight
     )};
   --el-tag-hover-color: #{mix(
       map.get($tag-color, 'primary'),
@@ -35,16 +35,16 @@
       $hoverColorWeight
     )};
 
-  background-color: var(--el-tag-background-color);
+  background-color: var(--el-tag-bg-color);
   border-color: var(--el-tag-border-color);
-  color: var(--el-tag-font-color);
+  color: var(--el-tag-text-color);
 
   @include when(hit) {
     border-color: map.get($tag-color, 'primary');
   }
 
   .#{$namespace}-tag__close {
-    color: var(--el-tag-font-color);
+    color: var(--el-tag-text-color);
     &:hover {
       color: var(--el-color-white);
       background-color: var(--el-tag-hover-color);
@@ -53,7 +53,7 @@
 
   @each $type in $types {
     &.#{$namespace}-tag--#{$type} {
-      --el-tag-background-color: #{mix(
+      --el-tag-bg-color: #{mix(
           map.get($tag-color, $type),
           $color-white,
           $backgroundColorWeight
@@ -63,10 +63,10 @@
           $color-white,
           $borderColorWeight
         )};
-      --el-tag-font-color: #{mix(
+      --el-tag-text-color: #{mix(
           map.get($tag-color, $type),
           $color-white,
-          $fontColorWeight
+          $textColorWeight
         )};
       --el-tag-hover-color: #{mix(
           map.get($tag-color, $type),

package/theme-chalk/src/transfer.scss

@@ -140,7 +140,7 @@
   .#{$namespace}-transfer-panel__header {
     height: var(--el-transfer-panel-header-height);
     line-height: var(--el-transfer-panel-header-height);
-    background: var(--el-transfer-panel-header-background-color);
+    background: var(--el-transfer-panel-header-bg-color);
     margin: 0;
     padding-left: 15px;
     border-bottom: 1px solid var(--el-transfer-border-color);

package/theme-chalk/src/tree.scss

@@ -11,7 +11,7 @@
   position: relative;
   cursor: default;
   background: var(--el-color-white);
-  color: var(--el-tree-font-color);
+  color: var(--el-tree-text-color);
 
   @include e(empty-block) {
     position: relative;
@@ -45,7 +45,7 @@
   &:focus {
     /* focus */
     > .#{$namespace}-tree-node__content {
-      background-color: var(--el-tree-node-hover-background-color);
+      background-color: var(--el-tree-node-hover-bg-color);
     }
   }
 
@@ -69,7 +69,7 @@
       margin-right: 8px;
     }
     &:hover {
-      background-color: var(--el-tree-node-hover-background-color);
+      background-color: var(--el-tree-node-hover-bg-color);
     }
 
     .#{$namespace}-tree.is-dragging & {

package/theme-chalk/src/var.scss

@@ -24,18 +24,8 @@
     @include set-css-color-type($type);
   }
 
-  // --el-text-color-#{$type}
-  @each $type in (primary, regular, secondary, placeholder) {
-    @include set-css-var-type('text-color', $type, $text-color);
-  }
-
-  // --el-border-color-#{$type}
-  @each $type in (base, light, lighter, extra-light) {
-    @include set-css-var-type('border-color', $type, $border-color);
-  }
-
   // Background
-  --el-background-color-base: #{$background-color-base};
+  --el-bg-color-base: #{$background-color-base};
 
   // Border
   --el-border-width-base: #{$border-width-base};
@@ -44,17 +34,6 @@
   --el-border-base: var(--el-border-width-base) var(--el-border-style-base)
     var(--el-border-color-base);
 
-  // --el-border-radius-#{$type}
-  @each $type in (base, small, round, circle) {
-    @include set-css-var-type('border-radius', $type, $border-radius);
-  }
-
-  // Box-shadow
-  // --el-box-shadow-#{$type}
-  @each $type in (base, light) {
-    @include set-css-var-type('box-shadow', $type, $box-shadow);
-  }
-
   // Svg
   --el-svg-monochrome-grey: #dcdde0;
 
@@ -62,23 +41,28 @@
   --el-fill-base: var(--el-color-white);
 
   // Typography
-  @each $type in (extra-large, large, medium, base, small, extra-small) {
-    @include set-css-var-type('font-size', $type, $font-size);
-  }
+  @include set-component-css-var('font-size', $font-size);
 
   --el-font-weight-primary: 500;
   --el-font-line-height-primary: 24px;
-  --el-font-color-disabled-base: #bbb;
+  --el-text-color-disabled-base: #bbb;
 
   // z-index
   --el-index-normal: 1;
   --el-index-top: 1000;
   --el-index-popper: 2000;
 
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+  // Box-shadow
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
   // Disable base
-  --el-disabled-fill-base: var(--el-background-color-base);
-  --el-disabled-color-base: var(--el-text-color-placeholder);
-  --el-disabled-border-base: var(--el-border-color-light);
+  @include set-component-css-var('disabled', $disabled);
 
   /* Transition
 -------------------------- */