@element-plus/nightly 0.0.20220320 → 0.0.20220321

package/theme-chalk/src/button.scss

@@ -113,7 +113,10 @@ $button-icon-span-gap: map.merge(
       )};
 
     --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-hover-bg-color: getCssVar('fill-color', 'blank');
+    @include css-var-from-global(
+      ('button', 'hover-bg-color'),
+      ('fill-color', 'blank')
+    );
     --el-button-hover-border-color: var(--el-color-primary);
   }
 

package/theme-chalk/src/calendar.scss

@@ -15,7 +15,7 @@
   }
 
   @include e(title) {
-    color: #000000;
+    color: getCssVar('color-black');
     align-self: center;
   }
 

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

@@ -79,7 +79,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     height: 100%;
     border-radius: 1px;
     background: #fff;
-    border: 1px solid #f0f0f0;
+    border: 1px solid getCssVar('border-color', 'lighter');
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
     z-index: 1;
   }
@@ -174,7 +174,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     height: 100%;
     border-radius: 1px;
     background: #fff;
-    border: 1px solid #f0f0f0;
+    border: 1px solid getCssVar('border-color', 'lighter');
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
     z-index: 1;
   }
@@ -282,7 +282,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     height: map.get($color-picker-size, 'default');
     width: map.get($color-picker-size, 'default');
     padding: 4px;
-    border: 1px solid #e6e6e6;
+    border: 1px solid getCssVar('border-color');
     border-radius: 4px;
     font-size: 0;
     position: relative;

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

@@ -255,7 +255,7 @@ $checkbox: map.merge(
     'bg-color': getCssVar('fill-color', 'blank'),
     'input-border': var(--el-border),
     'disabled-border-color': getCssVar('border-color'),
-    'disabled-input-fill': #edf2fc,
+    'disabled-input-fill': getCssVar('fill-color', 'light'),
     'disabled-icon-color': var(--el-text-color-placeholder),
     'disabled-checked-input-fill': var(--el-border-color-extra-light),
     'disabled-checked-input-border-color': getCssVar('border-color'),
@@ -477,7 +477,7 @@ $message: () !default;
 $message: map.merge(
   (
     'min-width': 380px,
-    'bg-color': #edf2fc,
+    'bg-color': getCssVar('color', 'info', 'light-9'),
     'border-color': var(--el-border-color-lighter),
     'padding': 15px 15px 15px 20px,
     'close-size': 16px,
@@ -596,7 +596,7 @@ $cascader: map.merge(
     'node-background-hover': getCssVar('fill-color', 'light'),
     'node-color-disabled': var(--el-text-color-placeholder),
     'color-empty': var(--el-text-color-placeholder),
-    'tag-background': #f0f2f5,
+    'tag-background': getCssVar('fill-color'),
   ),
   $cascader
 );
@@ -838,8 +838,8 @@ $popper: map.merge(
 $skeleton: () !default;
 $skeleton: map.merge(
   (
-    'color': #f2f2f2,
-    'to-color': #e6e6e6,
+    'color': getCssVar('fill-color'),
+    'to-color': getCssVar('fill-color', 'darker'),
   ),
   $skeleton
 );
@@ -1168,7 +1168,7 @@ $calendar: map.merge(
   (
     'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
     'header-border-bottom': var(--el-calendar-border),
-    'selected-bg-color': #f2f8fe,
+    'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
     'cell-width': 85px,
   ),
   $calendar
@@ -1190,8 +1190,8 @@ $form: map.merge(
 $avatar: () !default;
 $avatar: map.merge(
   (
-    'text-color': #fff,
-    'bg-color': #c0c4cc,
+    'text-color': getCssVar('color-white'),
+    'bg-color': getCssVar('text-color', 'disabled'),
     'text-size': 14px,
     'icon-size': 18px,
     'border-radius': var(--el-border-radius-base),
@@ -1240,7 +1240,7 @@ $descriptions: () !default;
 $descriptions: map.merge(
   (
     'table-border': 1px solid var(--el-border-color-lighter),
-    'item-bordered-label-background': #f5f7fa,
+    'item-bordered-label-background': getCssVar('fill-color', 'light'),
   ),
   $descriptions
 );

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

@@ -3,14 +3,14 @@
 
 @include b(picker-panel) {
   color: var(--el-text-color-regular);
-  background: $color-white;
+  background: getCssVar('color-white');
   border-radius: var(--el-border-radius-base);
   line-height: 30px;
 
   .#{$namespace}-time-panel {
     margin: 5px 0;
     border: solid 1px var(--el-datepicker-border-color);
-    background-color: $color-white;
+    background-color: getCssVar('color-white');
     box-shadow: var(--el-box-shadow-light);
   }
 
@@ -31,7 +31,7 @@
     border-top: 1px solid var(--el-datepicker-inner-border-color);
     padding: 4px 12px;
     text-align: right;
-    background-color: $color-white;
+    background-color: getCssVar('color-white');
     position: relative;
     font-size: 0;
   }
@@ -60,7 +60,7 @@
   }
 
   @include e(btn) {
-    border: 1px solid #dcdcdc;
+    border: 1px solid getCssVar('fill-color', 'darker');
     color: var(--el-text-color-primary);
     line-height: 24px;
     border-radius: 2px;
@@ -71,7 +71,7 @@
     font-size: 12px;
 
     &[disabled] {
-      color: #cccccc;
+      color: getCssVar('text-color', 'disabled');
       cursor: not-allowed;
     }
   }
@@ -116,7 +116,7 @@
   border-right: 1px solid var(--el-datepicker-inner-border-color);
   box-sizing: border-box;
   padding-top: 6px;
-  background-color: $color-white;
+  background-color: getCssVar('color-white');
   overflow: auto;
 }
 

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

@@ -20,8 +20,8 @@
 
 // Scrollbar
 @mixin scroll-bar {
-  $scrollbar-thumb-background: #b4bccc;
-  $scrollbar-track-background: #fff;
+  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
+  $scrollbar-track-background: getCssVar('fill-color', 'blank');
 
   &::-webkit-scrollbar {
     z-index: 11;

package/theme-chalk/src/reset.scss

@@ -88,5 +88,5 @@ hr {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 0;
-  border-top: 1px solid getCssVar('border-color');
+  border-top: 1px solid getCssVar('border-color', 'lighter');
 }

package/theme-chalk/src/select-v2.scss

@@ -258,7 +258,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
 
   @include e(wrapper) {
     background-color: #fff;
-    border: 1px solid #d9d9d9;
+    border: 1px solid getCssVar('border-color');
     border-radius: var(--el-border-radius-base);
     position: relative;
     transition: all var(--el-transition-duration)
@@ -299,7 +299,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     box-sizing: border-box;
     border-color: transparent;
     margin: 2px 0 2px 6px;
-    background-color: #f0f2f5;
+    background-color: getCssVar('fill-color');
 
     .#{$namespace}-icon-close {
       background-color: var(--el-text-color-placeholder);

package/theme-chalk/src/select.scss

@@ -199,7 +199,7 @@
       }
     }
     .#{$namespace}-tag--info {
-      background-color: #f0f2f5;
+      background-color: getCssVar('fill-color');
     }
   }
 }

package/theme-chalk/src/spinner.scss

@@ -15,7 +15,7 @@
   height: 50px;
 
   & .path {
-    stroke: #ececec;
+    stroke: getCssVar('border-color', 'lighter');
     stroke-linecap: round;
     animation: dash 1.5s ease-in-out infinite;
   }

package/theme-chalk/src/table.scss

@@ -517,7 +517,7 @@
     & .#{$namespace}-table__body {
       & tr.#{$namespace}-table__row--striped {
         td.#{$namespace}-table__cell {
-          background: #fafafa;
+          background: getCssVar('fill-color', 'lighter');
         }
 
         &.current-row td.#{$namespace}-table__cell {

package/theme-chalk/src/tabs.scss

@@ -25,7 +25,7 @@
     align-items: center;
     justify-content: center;
     float: right;
-    border: 1px solid #d3dce6;
+    border: 1px solid getCssVar('border-color');
     height: 20px;
     width: 20px;
     line-height: 20px;
@@ -447,7 +447,7 @@
 
     &.#{$namespace}-tabs--border-card {
       .#{$namespace}-tabs__header.is-left {
-        border-right: 1px solid #dfe4ed;
+        border-right: 1px solid getCssVar('border-color');
       }
       .#{$namespace}-tabs__item.is-left {
         border: 1px solid transparent;
@@ -514,7 +514,7 @@
     }
     &.#{$namespace}-tabs--border-card {
       .#{$namespace}-tabs__header.is-right {
-        border-left: 1px solid #dfe4ed;
+        border-left: 1px solid getCssVar('border-color');
       }
       .#{$namespace}-tabs__item.is-right {
         border: 1px solid transparent;

package/theme-chalk/src/upload.scss

@@ -30,8 +30,8 @@
   @include m(picture-card) {
     @include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
 
-    background-color: #fbfdff;
-    border: 1px dashed #c0ccda;
+    background-color: getCssVar('fill-color', 'lighter');
+    border: 1px dashed getCssVar('border-color', 'darker');
     border-radius: 6px;
     box-sizing: border-box;
     width: getCssVar('upload', 'picture-card', 'size');
@@ -43,7 +43,7 @@
 
     i {
       font-size: 28px;
-      color: #8c939d;
+      color: getCssVar('text-color', 'secondary');
     }
 
     &:hover {
@@ -63,8 +63,8 @@
 }
 
 @include b(upload-dragger) {
-  background-color: #fff;
-  border: 1px dashed #d9d9d9;
+  background-color: getCssVar('fill-color', 'blank');
+  border: 1px dashed getCssVar('border-color');
   border-radius: 6px;
   box-sizing: border-box;
   width: 360px;
@@ -107,7 +107,7 @@
   }
 
   @include when(dragover) {
-    background-color: rgba(32, 159, 255, 0.06);
+    background-color: getCssVar('color', 'primary', 'light-9');
     border: 2px dashed var(--el-color-primary);
   }
 }
@@ -296,7 +296,7 @@
 
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
-      background-color: #fff;
+      background-color: getCssVar('fill-color', 'blank');
       border: 1px solid #c0ccda;
       border-radius: 6px;
       box-sizing: border-box;
@@ -415,7 +415,7 @@
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
       z-index: 0;
-      background-color: #fff;
+      background-color: getCssVar('fill-color', 'blank');
       border: 1px solid #c0ccda;
       border-radius: 6px;
       box-sizing: border-box;

package/theme-chalk/src/var.scss

@@ -11,10 +11,9 @@
 :root {
   color-scheme: light;
 
-  --el-color-white: #{$color-white};
-  --el-color-black: #{$color-black};
-
-  --el-color-primary: #{$color-primary};
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
+  @include set-css-var-value('color-primary', $color-primary);
 
   // get rgb
   @each $type in (primary, success, warning, danger, error, info) {
@@ -24,7 +23,10 @@
   @for $i from 1 through 9 {
     @include set-css-color-type-light('primary', $i);
   }
-  --el-color-primary-dark-2: #{map.get($colors, 'primary', 'dark-2')};
+  @include set-css-var-value(
+    ('color-primary', 'dark-2'),
+    map.get($colors, 'primary', 'dark-2')
+  );
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}
@@ -56,17 +58,19 @@
   @include set-component-css-var('index', $z-index);
 
   // Border
-  --el-border-width: #{$border-width};
-  --el-border-style: #{$border-style};
-  --el-border-color-hover: #{$border-color-hover};
-  --el-border: var(--el-border-width) var(--el-border-style)
-    var(--el-border-color);
+  @include set-css-var-value('border-width', $border-width);
+  @include set-css-var-value('border-style', $border-style);
+  @include set-css-var-value('border-color-hover', $border-color-hover);
+  @include set-css-var-value(
+    'border',
+    #{var(--el-border-width) var(--el-border-style) var(--el-border-color)}
+  );
 
   // Svg
-  --el-svg-monochrome-grey: #dcdde0;
+  @include css-var-from-global('svg-monochrome-grey', 'border-color');
 
-  --el-font-weight-primary: 500;
-  --el-font-line-height-primary: 24px;
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
 
   // z-index