From ba5f0d17b1f42d1735ce034a5dca8907f2bb32f8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 21 Oct 2019 17:24:19 +0800
Subject: [PATCH] feat: add some basic less vars (#2180)

---
 packages/button/index.less     |  4 +--
 packages/common/style/var.less | 60 +++++++++++++++++++---------------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/packages/button/index.less b/packages/button/index.less
index a247f70c..23afcb95 100644
--- a/packages/button/index.less
+++ b/packages/button/index.less
@@ -115,10 +115,10 @@
     line-height: @button-small-line-height;
   }
 
-  /* mini图标默认宽度50px，文字不能超过4个 */
+  // mini图标默认宽度50px，文字不能超过4个
   &--mini {
     display: inline-block;
-    width: @button-mini-min-width;
+    min-width: @button-mini-min-width;
     height: @button-mini-height;
     font-size: @button-mini-font-size;
     line-height: @button-mini-line-height;
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 0421beb9..54bb985a 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -1,4 +1,4 @@
-// Color variables
+// Basic Colors
 @black: #000;
 @white: #fff;
 @red: #ee0a24;
@@ -7,15 +7,20 @@
 @orange-dark: #ed6a0c;
 @orange-light: #fffbe8;
 @green: #07c160;
-@gray: #c9c9c9;
+@gray: #c8c9cc;
 @gray-light: #e5e5e5;
 @gray-darker: #7d7e80;
-@gray-dark: #999;
+@gray-dark: #969799;
 
-// Default colors
-@text-color: #333;
-@border-color: #eee;
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+@text-color: #323233;
 @active-color: #f2f3f5;
+@active-opacity: .7;
+@disabled-opacity: .5;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
 
@@ -27,7 +32,7 @@
 @padding-lg: @padding-base * 6;
 @padding-xl: @padding-base * 8;
 
-// Font Size
+// Font
 @font-size-xs: 10px;
 @font-size-sm: 12px;
 @font-size-md: 14px;
@@ -38,6 +43,13 @@
 @animation-duration-base: .3s;
 @animation-duration-fast: .2s;
 
+// Border
+@border-color: #ebedf0;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-max: 999px;
+
 //ActionSheet
 @action-sheet-max-height: 90%;
 @action-sheet-header-height: 44px;
@@ -59,27 +71,26 @@
 @action-sheet-cancel-padding-color: @background-color;
 
 // Button
+@button-mini-height: 22px;
+@button-mini-min-width: 50px;
+@button-mini-font-size: @font-size-xs;
+@button-mini-line-height: 20px;
+@button-small-height: 30px;
+@button-small-font-size: @font-size-sm;
+@button-small-min-width: 60px;
+@button-small-line-height: 28px;
+@button-normal-font-size: @font-size-md;
+@button-large-height: 50px;
+@button-large-line-height: 48px;
 @button-default-color: @text-color;
 @button-default-height: 44px;
 @button-default-line-height: 42px;
 @button-default-font-size: @font-size-lg;
 @button-default-background-color: @white;
 @button-default-border-color: @border-color;
-@button-large-height: 50px;
-@button-large-line-height: 48px;
-@button-small-height: 30px;
-@button-small-font-size: @font-size-sm;
-@button-small-min-width: 60px;
-@button-small-line-height: 28px;
-@button-mini-height: 22px;
-@button-mini-min-width: 50px;
-@button-mini-font-size: @font-size-xs;
-@button-mini-line-height: 20px;
-@button-normal-font-size: @font-size-md;
 @button-primary-color: @white;
 @button-primary-background-color: @green;
 @button-primary-border-color: @green;
-@button-plain-background-color: @white;
 @button-info-color: @white;
 @button-info-background-color: @blue;
 @button-info-border-color: @blue;
@@ -89,13 +100,10 @@
 @button-warning-color: @white;
 @button-warning-background-color: @orange;
 @button-warning-border-color: @orange;
-@button-bottom-action-default-color: @white;
-@button-bottom-action-default-background-color: @orange;
-@button-bottom-action-primary-color: @white;
-@button-bottom-action-primary-background-color: @red;
-@button-border-radius: 2px;
-@button-round-border-radius: 10em;
-@button-disabled-opacity: .5;
+@button-border-radius: @border-radius-sm;
+@button-round-border-radius: @border-radius-max;
+@button-plain-background-color: @white;
+@button-disabled-opacity: @disabled-opacity;
 
 // Card
 @card-padding: @padding-xs @padding-md;