element-plus 2.1.8 → 2.1.11

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

@@ -2,12 +2,19 @@
 
 // CSS3 var
 @use './var' as *;
-@use '../mixins/var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
 
 html.dark {
   color-scheme: dark;
 
-  // todo dark.scss
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
 
   // color-scheme
   // Background --el-bg-color-#{$type}
@@ -18,4 +25,17 @@ html.dark {
   @include set-component-css-var('border-color', $border-color);
   // Fill --el-fill-color-#{$type}
   @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@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

@@ -1,6 +1,54 @@
 @use 'sass:map';
+@use 'sass:math';
 
-// dark-mode
+@use '../common/var.scss' as common;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base'),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          mix(
+            $mix-color,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
 
 // Background
 $bg-color: () !default;
@@ -13,6 +61,16 @@ $bg-color: map.merge(
   $bg-color
 );
 
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
 // border
 $border-color-base: #f5f8ff;
 $border-color: () !default;
@@ -28,6 +86,29 @@ $border-color: map.merge(
   $border-color
 );
 
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000,
+    ),
+  ),
+  $box-shadow
+);
+
 // fill
 $fill-color-base: #fafcff;
 $fill-color: () !default;
@@ -57,3 +138,51 @@ $text-color: map.merge(
   ),
   $text-color
 );
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3),
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5),
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay'),
+  ),
+  $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/date-picker.scss

@@ -41,7 +41,7 @@
     position: relative;
     border-bottom: 1px solid var(--el-datepicker-inner-border-color);
     font-size: 12px;
-    padding: 8px 5px 5px 5px;
+    padding: 8px 5px 5px;
     display: table;
     width: 100%;
     box-sizing: border-box;

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

@@ -8,7 +8,7 @@
 
   td {
     text-align: center;
-    padding: 8px 0px;
+    padding: 8px 0;
     cursor: pointer;
     & div {
       height: 48px;

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

@@ -3,7 +3,7 @@
 
 @include b(picker-panel) {
   color: var(--el-text-color-regular);
-  background: getCssVar('color-white');
+  background: getCssVar('bg-color', 'overlay');
   border-radius: var(--el-border-radius-base);
   line-height: 30px;
 
@@ -31,7 +31,7 @@
     border-top: 1px solid var(--el-datepicker-inner-border-color);
     padding: 4px 12px;
     text-align: right;
-    background-color: getCssVar('color-white');
+    background-color: getCssVar('bg-color', 'overlay');
     position: relative;
     font-size: 0;
   }
@@ -116,7 +116,7 @@
   border-right: 1px solid var(--el-datepicker-inner-border-color);
   box-sizing: border-box;
   padding-top: 6px;
-  background-color: getCssVar('color-white');
+  background-color: getCssVar('bg-color', 'overlay');
   overflow: auto;
 }
 

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

@@ -9,9 +9,9 @@
   @include e(popper) {
     @include set-css-var-type('datepicker', 'border-color', $datepicker);
     @include picker-popper(
-      var(--el-color-white),
-      1px solid var(--el-datepicker-border-color),
-      var(--el-box-shadow-light)
+      getCssVar('bg-color', 'overlay'),
+      1px solid getCssVar('datepicker', 'border-color'),
+      getCssVar('box-shadow', 'light')
     );
   }
 }
@@ -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);
@@ -91,6 +103,7 @@
     text-align: center;
     font-size: var(--el-font-size-base);
     color: var(--el-text-color-regular);
+    background-color: transparent;
 
     &::placeholder {
       color: var(--el-text-color-placeholder);

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/descriptions.scss

@@ -75,7 +75,7 @@ $descriptions-cell-font-size: map.merge(
   }
 
   @include e(body) {
-    background-color: $color-white;
+    background-color: getCssVar('fill-color', 'blank');
 
     .#{$namespace}-descriptions__table {
       border-collapse: collapse;

package/theme-chalk/src/dialog.scss

@@ -11,9 +11,9 @@
 
   position: relative;
   margin: var(--el-dialog-margin-top, 15vh) auto 50px;
-  background: var(--el-dialog-bg-color);
-  border-radius: var(--el-dialog-border-radius);
-  box-shadow: var(--el-dialog-box-shadow);
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
   box-sizing: border-box;
   width: var(--el-dialog-width, 50%);
 
@@ -43,7 +43,7 @@
   }
 
   @include e(header) {
-    padding: var(--el-dialog-padding-primary);
+    padding: getCssVar('dialog', 'padding-primary');
     padding-bottom: 10px;
     margin-right: 16px;
     word-break: break-all;
@@ -63,14 +63,14 @@
     font-size: var(--el-message-close-size, map.get($message, 'close-size'));
 
     .#{$namespace}-dialog__close {
-      color: var(--el-color-info);
+      color: getCssVar('color', 'info');
       font-size: inherit;
     }
 
     &:focus,
     &:hover {
       .#{$namespace}-dialog__close {
-        color: var(--el-color-primary);
+        color: getCssVar('color', 'primary');
       }
     }
   }

package/theme-chalk/src/divider.scss

@@ -24,7 +24,7 @@
 
   @include e(text) {
     position: absolute;
-    background-color: $color-white;
+    background-color: getCssVar('bg-color');
     padding: 0 20px;
     font-weight: 500;
     color: var(--el-text-color-primary);

package/theme-chalk/src/drawer.scss

@@ -11,7 +11,7 @@ $directions: rtl, ltr, ttb, btt;
 @include b(drawer) {
   position: absolute;
   box-sizing: border-box;
-  background-color: var(--el-drawer-bg-color);
+  background-color: getCssVar('drawer', 'bg-color');
   display: flex;
   flex-direction: column;
   box-shadow: getCssVar('box-shadow', 'dark');

package/theme-chalk/src/dropdown.scss

@@ -60,7 +60,7 @@ $dropdown-divider-width: 1px !default;
     // using attributes selector to override
 
     @include picker-popper(
-      $color-white,
+      getCssVar('bg-color', 'overlay'),
       1px solid var(--el-border-color-light),
       var(--el-dropdown-menu-box-shadow)
     );
@@ -160,7 +160,7 @@ $dropdown-menu-padding-vertical: map.merge(
   z-index: var(--el-dropdown-menu-index);
   padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
   margin: 0;
-  background-color: $color-white;
+  background-color: getCssVar('bg-color', 'overlay');
   border: none;
   border-radius: var(--el-border-radius-base);
   box-shadow: none;

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/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,
@@ -59,7 +60,7 @@
     }
 
     &.is-disabled {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: not-allowed;
     }
   }
@@ -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};
     }