element-pe 2.0.6 → 2.0.9

package/theme-chalk/src/autocomplete.scss

@@ -10,15 +10,15 @@
 
   @include e(popper) {
     @include picker-popper(
-      $color-white,
-      1px solid var(--el-border-color-light),
-      var(--el-box-shadow-light)
+      getCssVar('bg-color', 'overlay'),
+      1px solid getCssVar('border-color', 'light'),
+      getCssVar('box-shadow', 'light')
     );
   }
 }
 
 @include b(autocomplete-suggestion) {
-  border-radius: var(--el-border-radius-base);
+  border-radius: getCssVar('border-radius', 'base');
   box-sizing: border-box;
 
   @include e(wrap) {
@@ -37,8 +37,8 @@
     margin: 0;
     line-height: 34px;
     cursor: pointer;
-    color: var(--el-text-color-regular);
-    font-size: var(--el-font-size-base);
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('font-size', 'base');
     list-style: none;
     text-align: left;
     white-space: nowrap;
@@ -55,7 +55,7 @@
 
     &.divider {
       margin-top: 6px;
-      border-top: 1px solid var(--el-color-black);
+      border-top: 1px solid getCssVar('color', 'black');
     }
 
     &.divider:last-child {
@@ -69,11 +69,11 @@
       height: 100px;
       line-height: 100px;
       font-size: 20px;
-      color: var(--el-text-color-secondary);
+      color: getCssVar('text-color', 'secondary');
       @include utils-vertical-center;
 
       &:hover {
-        background-color: var(--el-color-white);
+        background-color: getCssVar('bg-color', 'overlay');
       }
     }
 

package/theme-chalk/src/badge.scss

@@ -13,22 +13,24 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: var(--el-badge-bg-color);
-    border-radius: var(--el-badge-radius);
-    color: var(--el-color-white);
-    display: inline-block;
-    font-size: var(--el-badge-font-size);
-    height: var(--el-badge-size);
-    line-height: var(--el-badge-size);
-    padding: 0 var(--el-badge-padding);
-    text-align: center;
+    background-color: getCssVar('badge', 'bg-color');
+    border-radius: getCssVar('badge', 'radius');
+    color: getCssVar('color', 'white');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: getCssVar('badge', 'font-size');
+    height: getCssVar('badge', 'size');
+    padding: 0 getCssVar('badge', 'padding');
     white-space: nowrap;
-    border: 1px solid var(--el-color-white);
+    border: 1px solid getCssVar('bg-color');
 
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: calc(1px + var(--el-badge-size) / 2);
+      right: calc(1px + #{getCssVar('badge', 'size')} / 2);
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {
@@ -46,7 +48,7 @@
 
     @each $type in (primary, success, warning, info, danger) {
       @include m($type) {
-        background-color: var(--el-color-#{$type});
+        background-color: getCssVar('color', $type);
       }
     }
   }

package/theme-chalk/src/cascader.scss

@@ -14,7 +14,7 @@
   outline: none;
 
   &:not(.is-disabled):hover {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       cursor: pointer;
       box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
     }
@@ -25,15 +25,7 @@
 
     .#{$namespace}-input__inner {
       text-overflow: ellipsis;
-
-      &:focus {
-        box-shadow: 0 0 0 1px
-          var(
-            --el-input-focus-border-color,
-            map.get($input, 'focus-border-color')
-          )
-          inset;
-      }
+      cursor: pointer;
     }
 
     .#{$namespace}-input__suffix-inner {
@@ -63,7 +55,7 @@
     }
 
     @include when(focus) {
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         box-shadow: 0 0 0 1px
           var(
             --el-input-focus-border-color,
@@ -212,13 +204,16 @@
     min-width: 60px;
     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
-    color: var(--el-cascader-menu-text-color);
+    color: getCssVar('cascader', 'menu-text-color');
     border: none;
     outline: none;
     box-sizing: border-box;
 
+    background: transparent;
+
     &::placeholder {
-      color: var(--el-text-color-placeholder);
+      // two input overlap
+      color: transparent;
     }
   }
 }

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

@@ -5,14 +5,14 @@
 
 @include b(check-tag) {
   background-color: getCssVar('color', 'info', 'light-9');
-  border-radius: var(--el-border-radius-base);
-  color: var(--el-color-info);
+  border-radius: getCssVar('border-radius', 'base');
+  color: getCssVar('color', 'info');
   cursor: pointer;
   display: inline-block;
-  font-size: var(--el-font-size-base);
-  line-height: var(--el-font-size-base);
+  font-size: getCssVar('font-size', 'base');
+  line-height: getCssVar('font-size', 'base');
   padding: 7px 15px;
-  transition: var(--el-transition-all);
+  transition: getCssVar('transition', 'all');
   font-weight: bold;
 
   &:hover {
@@ -21,7 +21,7 @@
 
   @include when(checked) {
     background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary', 'light-1');
+    color: getCssVar('color', 'primary');
     &:hover {
       background-color: getCssVar('color', 'primary', 'light-7');
     }

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

@@ -21,9 +21,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   z-index: 1;
 }
 
-@mixin bar-background {
+@mixin bar-background($side: right) {
   background: linear-gradient(
-    to right,
+    to $side,
     #f00 0%,
     #ff0 17%,
     #0f0 33%,
@@ -98,7 +98,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     padding: 2px 0;
 
     .#{$namespace}-color-hue-slider__bar {
-      @include bar-background;
+      @include bar-background(bottom);
     }
 
     .#{$namespace}-color-hue-slider__thumb {
@@ -146,19 +146,44 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 }
 
+@mixin alpha-bg {
+  background-image: linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+
 @include b(color-alpha-slider) {
   position: relative;
   box-sizing: border-box;
   width: 280px;
   height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  @include alpha-bg;
 
   @include e(bar) {
     position: relative;
     background: linear-gradient(
       to right,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
+      getCssVar('bg-color') 100%
     );
     height: 100%;
   }
@@ -288,7 +313,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     text-align: center;
 
     @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+      @include alpha-bg;
+      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
     }
   }
 
@@ -326,3 +352,16 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 }
+
+.#{bem('color-picker')},
+.#{bem('color-picker', 'panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker')},
+  .#{bem('color-picker', 'panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}

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

@@ -1235,7 +1235,6 @@ $avatar-size: map.merge(
 );
 
 // Empty
-
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
 $empty: map.merge(
@@ -1259,7 +1258,6 @@ $empty: map.merge(
 );
 
 // Descriptions
-
 // css3 var in packages/theme-chalk/src/descriptions.scss
 $descriptions: () !default;
 $descriptions: map.merge(

package/theme-chalk/src/dark/css-vars.scss

@@ -35,3 +35,7 @@ html.dark {
 @include dark(card) {
   @include set-component-css-var('card', $card);
 }
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}

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

@@ -167,3 +167,22 @@ $card: map.merge(
   ),
   $card
 );
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a,
+  ),
+  $empty
+);

package/theme-chalk/src/date-picker/picker.scss

@@ -23,6 +23,18 @@
   display: inline-block;
   text-align: left;
 
+  &.#{$namespace}-input__inner {
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
+
+    &:hover {
+      @include inset-input-border(var(--el-input-hover-border-color));
+    }
+  }
+
   &.#{$namespace}-input,
   &.#{$namespace}-input__inner {
     width: var(--el-date-editor-width);

package/theme-chalk/src/date-picker/time-picker.scss

@@ -28,8 +28,6 @@
       box-sizing: border-box;
       padding-top: 6px;
       text-align: left;
-      border-top: 1px solid var(--el-border-color-light);
-      border-bottom: 1px solid var(--el-border-color-light);
     }
 
     &::after {
@@ -42,6 +40,8 @@
       padding-left: 50%;
       margin-right: 12%;
       margin-left: 12%;
+      border-top: 1px solid var(--el-border-color-light);
+      border-bottom: 1px solid var(--el-border-color-light);
     }
 
     &.has-seconds {

package/theme-chalk/src/date-picker/time-spinner.scss

@@ -30,7 +30,7 @@
       }
 
       .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
-        background: $color-white;
+        background: getCssVar('fill-color', 'light');
         cursor: default;
       }
     }

package/theme-chalk/src/date-picker/year-table.scss

@@ -7,7 +7,7 @@
   border-collapse: collapse;
 
   .#{$namespace}-icon {
-    color: var(--el-datepicker-icon-color);
+    color: getCssVar('datepicker', 'icon-color');
   }
 
   td {
@@ -17,7 +17,7 @@
 
     &.today {
       .cell {
-        color: var(--el-color-primary);
+        color: getCssVar('color', 'primary');
         font-weight: bold;
       }
     }

package/theme-chalk/src/form.scss

@@ -200,16 +200,18 @@ $form-item-label-top-margin-bottom: map.merge(
 
   @include when(error) {
     .#{$namespace}-select-v2__wrapper,
-    .#{$namespace}-input__inner,
     .#{$namespace}-textarea__inner {
       &,
       &:focus {
         box-shadow: 0 0 0 1px var(--el-color-danger) inset;
       }
     }
+    .#{$namespace}-input__wrapper {
+      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+    }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         box-shadow: 0 0 0 1px transparent inset;
       }
     }

package/theme-chalk/src/icon.scss

@@ -43,6 +43,5 @@
   svg {
     height: 1em;
     width: 1em;
-    vertical-align: top;
   }
 }

package/theme-chalk/src/index.scss

@@ -82,6 +82,7 @@
 @use './tab-pane.scss';
 @use './table-column.scss';
 @use './table.scss';
+@use './table-v2.scss';
 @use './tabs.scss';
 @use './tag.scss';
 @use './time-picker.scss';

package/theme-chalk/src/input-number.scss

@@ -11,7 +11,10 @@
   line-height: #{map.get($input-height, 'default') - 2};
 
   .#{$namespace}-input {
-    display: block;
+    &__wrapper {
+      padding-left: #{map.get($input-height, 'default') + 10};
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
 
     &__inner {
       -webkit-appearance: none;
@@ -21,8 +24,6 @@
         margin: 0;
         -webkit-appearance: none;
       }
-      padding-left: #{map.get($input-height, 'default') + 10};
-      padding-right: #{map.get($input-height, 'default') + 10};
       text-align: center;
     }
   }
@@ -48,7 +49,7 @@
     &:hover {
       color: var(--el-color-primary);
 
-      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
+      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input_wrapper {
         box-shadow: 0 0 0 1px
           var(
             --el-input-focus-border-color,
@@ -98,7 +99,7 @@
         font-size: map.get($input-font-size, $size);
       }
 
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         padding-left: #{map.get($input-height, $size) + 7};
         padding-right: #{map.get($input-height, $size) + 7};
       }
@@ -114,14 +115,14 @@
   }
 
   @include when(without-controls) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       padding-left: 15px;
       padding-right: 15px;
     }
   }
 
   @include when(controls-right) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       padding-left: 15px;
       padding-right: #{map.get($input-height, 'default') + 10};
     }