From 1faac2ef8f499debc483fca474720ee069bbef72 Mon Sep 17 00:00:00 2001
From: sallerli1 <weskerli@163.com>
Date: Wed, 5 Jan 2022 15:08:37 +0800
Subject: [PATCH] feat(comp:modal): add padding to padding next icon

add title and content color variables

feat(comp:empty): add color variables

BREAKING CHANGE: replaced empty-color variable with more specific ones
BREAKING CHANGE: replace empty-font-size variable with more specific ones
---
 packages/components/empty/style/index.less    |  7 ++-
 .../empty/style/themes/default.variable.less  |  7 ++-
 packages/components/modal/style/index.less    |  9 ++++
 .../modal/style/themes/default.variable.less  |  2 +
 packages/components/style/mixins/size.less    | 54 +++++++++++++++++++
 5 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less
index ee9b18b49..6ecb7a4dc 100644
--- a/packages/components/empty/style/index.less
+++ b/packages/components/empty/style/index.less
@@ -4,10 +4,8 @@
   .reset-component();
 
   text-align: center;
-  font-size: @empty-font-size;
   line-height: @empty-line-height;
   margin: @empty-margin;
-  color: @empty-color;
 
   &-image {
     margin-bottom: @empty-image-margin-bottom;
@@ -19,15 +17,20 @@
     .@{icon-prefix} {
       opacity: @empty-image-icon-opacity;
       font-size: @empty-image-icon-font-size;
+      color: @empty-image-icon-color;
     }
   }
 
   &-description {
     opacity: @empty-description-opacity;
     margin: @empty-description-margin;
+    color: @empty-description-color;
+    font-size: @empty-description-font-size;
   }
 
   &-content {
     margin-top: @empty-content-margin-top;
+    color: @empty-content-color;
+    font-size: @empty-content-font-size;
   }
 }
diff --git a/packages/components/empty/style/themes/default.variable.less b/packages/components/empty/style/themes/default.variable.less
index ddf148d40..d26904648 100644
--- a/packages/components/empty/style/themes/default.variable.less
+++ b/packages/components/empty/style/themes/default.variable.less
@@ -1,13 +1,16 @@
-@empty-font-size: @font-size-md;
 @empty-line-height: @line-height-base;
 @empty-margin: @spacing-lg 0;
-@empty-color: @text-color;
 
 @empty-image-margin-bottom: @spacing-sm;
 @empty-image-icon-opacity: 0.3;
 @empty-image-icon-font-size: 64px;
+@empty-image-icon-color: @text-color;
 
 @empty-description-opacity: 0.6;
 @empty-description-margin: 0;
+@empty-description-color: @text-color;
+@empty-description-font-size: @font-size-md;
 
 @empty-content-margin-top: @spacing-lg;
+@empty-content-color: @text-color;
+@empty-content-font-size: @font-size-md;
diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
index 356562081..5a23efa1d 100644
--- a/packages/components/modal/style/index.less
+++ b/packages/components/modal/style/index.less
@@ -1,4 +1,5 @@
 @import '../../style/mixins/box.less';
+@import '../../style/mixins/size.less';
 @import '../../style/mixins/reset.less';
 @import '../../style/motion/zoom.less';
 
@@ -54,10 +55,12 @@
       font-size: @modal-body-title-font-size;
       font-weight: @modal-body-title-font-weight;
       margin-bottom: @modal-body-title-margin-bottom;
+      color: @modal-body-title-color;
     }
 
     &-content {
       width: 100%;
+      color: @modal-body-content-color;
     }
 
     &-confirm,
@@ -75,6 +78,12 @@
       margin: @modal-body-icon-margin;
     }
 
+    &-icon + &-content {
+      .getSizeMixin();
+
+      margin-right: ~`getmarginleft('@{modal-body-icon-margin}') `;
+    }
+
     &-confirm {
       .@{modal-prefix}-body-icon {
         color: @modal-body-confirm-color;
diff --git a/packages/components/modal/style/themes/default.variable.less b/packages/components/modal/style/themes/default.variable.less
index a41fb0d5d..25eff7373 100644
--- a/packages/components/modal/style/themes/default.variable.less
+++ b/packages/components/modal/style/themes/default.variable.less
@@ -15,6 +15,8 @@
 @modal-body-title-font-size: @font-size-lg;
 @modal-body-title-font-weight: @font-weight-xl;
 @modal-body-title-margin-bottom: @spacing-sm;
+@modal-body-title-color: @text-color;
+@modal-body-content-color: @text-color;
 @modal-body-icon-font-size: 48px;
 @modal-body-icon-margin: 0 @spacing-lg;
 @modal-body-confirm-color: @color-warning;
diff --git a/packages/components/style/mixins/size.less b/packages/components/style/mixins/size.less
index d6482a275..45f8c553a 100644
--- a/packages/components/style/mixins/size.less
+++ b/packages/components/style/mixins/size.less
@@ -6,3 +6,57 @@
 .square(@size) {
   .size(@size; @size);
 }
+
+.getSizeMixin() {
+  @function: ~`(function() {
+    function parsePaddingOrMargin(size) {
+      if (typeof size !== 'string') {
+        return;
+      }
+
+      function filterSizeArr(sizeArr) {
+        return sizeArr.filter(part => !!part).map(part => part.trim().replace(/(\[|\]|\,)/g, ''));
+      }
+
+      if (size.startsWith('[') && size.endsWith(']') && size.indexOf(',') > -1) {
+        return filterSizeArr(size.split(','));
+      }
+
+      return filterSizeArr(size.split(' '));
+    }
+    function getPartAtIdx(padding, idx) {
+      const parts = parsePaddingOrMargin(padding)
+      if (!parts) {
+        return '';
+      }
+
+      if (parts.length === 1) {
+        return parts[0];
+      }
+
+      if (parts.length === 2) {
+        return parts[[0, 2].includes(idx) ? 0 : 1];
+      }
+
+      return parts[idx] ?? '';
+    }
+
+    this.getpaddingtop = function(padding) {
+      return getPartAtIdx(padding, 0);
+    }
+    this.getpaddingbottom = function(padding) {
+      return getPartAtIdx(padding, 2);
+    }
+    this.getpaddingleft = function(padding) {
+      return getPartAtIdx(padding, 3);
+    }
+    this.getpaddingright = function(padding) {
+      return getPartAtIdx(padding, 1);
+    }
+
+    this.getmargintop = this.getpaddingtop;
+    this.getmarginbottom = this.getpaddingbottom;
+    this.getmarginleft = this.getpaddingleft;
+    this.getmarginright = this.getpaddingright;
+  })()`
+}
\ No newline at end of file