element-plus 2.1.2 → 2.1.3

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

@@ -779,7 +779,7 @@ $pagination: map.merge(
     'button-height': 32px,
     'button-disabled-color': var(--el-text-color-placeholder),
     'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'button-bg-color': getCssVar('color', 'primary', 'light-9'),
+    'button-bg-color': getCssVar('fill-color'),
     'hover-color': var(--el-color-primary),
     'height-extra-small': 24px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
@@ -904,8 +904,12 @@ $dropdown: map.merge(
 $drawer: () !default;
 $drawer: map.merge(
   (
-    'bg-color': var(--el-dialog-bg-color),
-    'padding-primary': var(--el-dialog-padding-primary, 20px),
+    'bg-color':
+      var(
+        #{getCssVarName('dialog', 'bg-color')},
+        #{getCssVar('color', 'white')}
+      ),
+    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
   ),
   $drawer
 );

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

@@ -4,6 +4,14 @@
 @use 'function' as *;
 @use '../common/var' as *;
 
+// set css var value, because we need translate value to string
+// for example:
+// @include set-css-var-value(('color', 'primary'), red);
+// --el-color-primary: red;
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
 @mixin set-css-color-type-light($type, $i) {
   #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
       $colors,
@@ -37,8 +45,12 @@
 
 @mixin set-css-color-rgb($type) {
   $color: map.get($colors, $type, 'base');
-  #{getCssVarName('color', $type, 'rgb')}: #{red($color)}, #{green($color)},
-    #{blue($color)};
+  @include set-css-var-value(
+    ('color', $type, 'rgb'),
+    #{red($color),
+    green($color),
+    blue($color)}
+  );
 }
 
 // generate css var from existing css var

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

@@ -1,7 +1,9 @@
 @use 'function' as *;
 @use '../common/var' as *;
+// forward mixins
 @forward 'config';
 @forward 'function';
+@forward '_var';
 @use 'config' as *;
 
 // Break-points

package/theme-chalk/src/upload.scss

@@ -28,7 +28,7 @@
 
   /* Picture Card for Wall */
   @include m(picture-card) {
-    #{getCssVarName('upload', 'picture-card', 'size')}: 148px;
+    @include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
 
     background-color: #fbfdff;
     border: 1px dashed #c0ccda;
@@ -288,11 +288,11 @@
 
   // upload-list
   @include m(picture-card) {
+    @include set-css-var-value(('upload-list', 'picture-card', 'size'), 148px);
+
     display: inline-flex;
     flex-wrap: wrap;
-
     margin: 0;
-    #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
 
     .#{bem('upload-list', 'item')} {
       overflow: hidden;