x-button: support styles variable for button #2748

airyland · May 19, 2018 · bdee17e · bdee17e
1 parent 8cc8299
commit bdee17e
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 18 deletions.
diff --git a/src/components/x-button/metas.yml b/src/components/x-button/metas.yml
@@ -70,6 +70,11 @@ slots:
     en: button text
     zh-CN: 按钮文字
 changes:
+  next:
+    en:
+      - '[feature] support styles variable for button #2748'
+    zh-CN:
+      - '[feature] button支持样式变量 #2748'
   v2.9.0:
     en:
       - '[feature] support plain for warn-button #2478'

diff --git a/src/styles/variable.less b/src/styles/variable.less
@@ -136,33 +136,179 @@
 /**
 * Button
 */
+/**
+* en: border radius
+* zh-CN: 圆角边框
+*/
 @button-global-border-radius: 5px;
+/**
+* en: font color
+* zh-CN: 字体颜色
+*/
 @button-global-font-color: #FFFFFF;
 /**
 * en: margin-top value between previous button, not works when there is only one button
 * zh-CN: 与相邻按钮的 margin-top 间隙，只有一个按钮时不生效
 */
 @button-global-margin-top: 15px;
+/**
+* en: button height
+* zh-CN: 按钮高度
+*/
 @button-global-height: 42px;
+/**
+* en: the font color in disabled
+* zh-CN: disabled状态下的字体颜色
+*/
 @button-global-disabled-font-color: rgba(255,255,255,.6);
+/**
+* en: the font color in disabled
+* zh-CN: disabled状态下的字体颜色
+*/
 @button-global-active-font-color: rgba(255,255,255,.6);
+/**
+* en: font size
+* zh-CN: 字体大小
+*/
 @button-global-font-size: 18px;
 
+/**
+* en: the font size of the mini type
+* zh-CN: mini类型的字体大小
+*/
+@button-mini-font-size: 13px;
+/**
+* en: the line height of the mini type
+* zh-CN: mini类型的行高
+*/
+@button-mini-line-height: 2.3;
+
+/**
+* en: the background color of the warn type
+* zh-CN: warn类型的背景颜色
+*/
 @button-warn-bg-color: #E64340;
+/**
+* en: the background color of the warn type in active
+* zh-CN: active状态下，warn类型的背景颜色
+*/
 @button-warn-active-color: #CE3C39;
+/**
+* en: the background color of the warn type in disabled
+* zh-CN: disabled状态下，warn类型的背景颜色
+*/
 @button-warn-disabled-bg-color: #EC8B89;
 
+/**
+* en: the background color of the default type
+* zh-CN: default类型的背景颜色
+*/
 @button-default-bg-color: #F8F8F8;
+/**
+* en: the font color of the default type
+* zh-CN: default类型的字体颜色
+*/
 @button-default-font-color: #000000;
+/**
+* en: the background color of the default type in active
+* zh-CN: active状态下，default类型的背景颜色
+*/
 @button-default-active-bg-color: #DEDEDE;
+/**
+* en: the font color of the default type in disabled
+* zh-CN: disabled状态下，default类型的字体颜色
+*/
 @button-default-disabled-font-color: rgba(0,0,0,.3);
+/**
+* en: the background color of the default type in disabled
+* zh-CN: disabled状态下，default类型的背景颜色
+*/
 @button-default-disabled-bg-color: #F7F7F7;
+/**
+* en: the font color of the default type in active
+* zh-CN: active状态下，default类型的字体颜色
+*/
 @button-default-active-font-color: rgba(0,0,0,.6);
 
+/**
+* en: the background color of the primary type
+* zh-CN: primary类型的背景颜色
+*/
 @button-primary-bg-color: #1AAD19;
+/**
+* en: the background color of the primary type in active
+* zh-CN: active状态下，primary类型的背景颜色
+*/
 @button-primary-active-bg-color: #179B16;
+/**
+* en: the background color of the primary type in disabled
+* zh-CN: disabled状态下，primary类型的背景颜色
+*/
 @button-primary-disabled-bg-color: #9ED99D;
 
+/**
+* en: the font color of the plain primary type
+* zh-CN: plain的primary类型的字体颜色
+*/
+@button-plain-primary-color: rgba(26,173,25,1);
+/**
+* en: the border color of the plain primary type
+* zh-CN: plain的primary类型的边框颜色
+*/
+@button-plain-primary-border-color: rgba(26,173,25,1);
+/**
+* en: the font color of the plain primary type in active
+* zh-CN: active状态下，plain的primary类型的字体颜色
+*/
+@button-plain-primary-active-color: rgba(26,173,25,.6);
+/**
+* en: the border color of the plain primary type in active
+* zh-CN: active状态下，plain的primary类型的边框颜色
+*/
+@button-plain-primary-active-border-color: rgba(26,173,25,.6);
+
+/**
+* en: the font color of the plain default type
+* zh-CN: plain的default类型的字体颜色
+*/
+@button-plain-default-color: rgba(53,53,53,1);
+/**
+* en: the border color of the plain default type
+* zh-CN: plain的default类型的边框颜色
+*/
+@button-plain-default-border-color: rgba(53,53,53,1);
+/**
+* en: the font color of the plain default type in active
+* zh-CN: active状态下，plain的default类型的字体颜色
+*/
+@button-plain-default-active-color: rgba(53,53,53,.6);
+/**
+* en: the border color of the plain default type in active
+* zh-CN: active状态下，plain的default类型的边框颜色
+*/
+@button-plain-default-active-border-color: rgba(53,53,53,.6);
+
+/**
+* en: the font color of the plain warn type
+* zh-CN: plain的warn类型的字体颜色
+*/
+@button-plain-warn-color: rgba(206,60,57,1);
+/**
+* en: the border color of the plain warn type
+* zh-CN: plain的warn类型的边框颜色
+*/
+@button-plain-warn-border-color: rgba(206,60,57,1);
+/**
+* en: the font color of the plain warn type in active
+* zh-CN: active状态下，plain的warn类型的字体颜色
+*/
+@button-plain-warn-active-color: rgba(206,60,57,.6);
+/**
+* en: the border color of the plain warn type in active
+* zh-CN: active状态下，plain的warn类型的边框颜色
+*/
+@button-plain-warn-active-border-color: rgba(206,60,57,.6);
+
 /**
 * swipeout
 */
@@ -473,4 +619,3 @@
 * zh-CN: z-index
 */
 @loading-z-index: 5001;
-
diff --git a/src/styles/weui/base/variable/weui_button.less b/src/styles/weui/base/variable/weui_button.less
@@ -7,11 +7,10 @@
 @weuiBtnBorderRadius:@button-global-border-radius;
 @weuiBtnDefaultGap:@button-global-margin-top;
 
-@weuiBtnMiniFontSize:13px;
-@weuiBtnMiniHeight:2.3;
+@weuiBtnMiniFontSize:@button-mini-font-size;
+@weuiBtnMiniLineHeight:@button-mini-line-height;
 
 @weuiBtnDefaultFontColor:@button-default-font-color;
-@weuiBtnDefaultActiveFontColor:rgba(0,0,0,.6);
 @weuiBtnDefaultActiveFontColor:@button-default-active-font-color;
 @weuiBtnDefaultDisabledFontColor:@button-default-disabled-font-color;
 
@@ -27,17 +26,17 @@
 @weuiBtnWarnActiveBg:@button-warn-active-color;
 @weuiBtnwarnDisabledBg:@button-warn-disabled-bg-color;
 
-@weuiBtnPlainPrimaryColor:rgba(26,173,25,1);
-@weuiBtnPlainPrimaryBorderColor:rgba(26,173,25,1);
-@weuiBtnPlainPrimaryActiveColor:rgba(26,173,25,.6);
-@weuiBtnPlainPrimaryActiveBorderColor:rgba(26,173,25,.6);
+@weuiBtnPlainPrimaryColor:@button-plain-primary-color;
+@weuiBtnPlainPrimaryBorderColor:@button-plain-primary-border-color;
+@weuiBtnPlainPrimaryActiveColor:@button-plain-primary-active-color;
+@weuiBtnPlainPrimaryActiveBorderColor:@button-plain-primary-active-border-color;
 
-@weuiBtnPlainDefaultColor:rgba(53,53,53,1);
-@weuiBtnPlainDefaultBorderColor:rgba(53,53,53,1);
-@weuiBtnPlainDefaultActiveColor:rgba(53,53,53,.6);
-@weuiBtnPlainDefaultActiveBorderColor:rgba(53,53,53,.6);
+@weuiBtnPlainDefaultColor:@button-plain-default-color;
+@weuiBtnPlainDefaultBorderColor:@button-plain-default-border-color;
+@weuiBtnPlainDefaultActiveColor:@button-plain-default-active-color;
+@weuiBtnPlainDefaultActiveBorderColor:@button-plain-default-active-border-color;
 
-@weuiBtnPlainWarnColor:rgba(206,60,57,1);
-@weuiBtnPlainWarnBorderColor:rgba(206,60,57,1);
-@weuiBtnPlainWarnActiveColor:rgba(206,60,57,.6);
-@weuiBtnPlainWarnActiveBorderColor:rgba(206,60,57,.6);
+@weuiBtnPlainWarnColor:@button-plain-warn-color;
+@weuiBtnPlainWarnBorderColor:@button-plain-warn-border-color;
+@weuiBtnPlainWarnActiveColor:@button-plain-warn-active-color;
+@weuiBtnPlainWarnActiveBorderColor:@button-plain-warn-active-border-color;
diff --git a/src/styles/weui/widget/weui-button/weui-btn_plain.less b/src/styles/weui/widget/weui-button/weui-btn_plain.less
@@ -35,7 +35,7 @@ button.weui-btn.weui-btn_plain-warn, input.weui-btn.weui-btn_plain-warn {
 
 .weui-btn_plain-warn {
     color: @weuiBtnPlainWarnColor;
-    border-color: @weuiBtnPlainWarnBorderColor;
+    border: 1px solid @weuiBtnPlainWarnBorderColor;
     background: transparent;
     &:not(.weui-btn_plain-disabled):active {
         color:@weuiBtnPlainWarnActiveColor;

diff --git a/src/styles/weui/widget/weui-button/weui-button.less b/src/styles/weui/widget/weui-button/weui-button.less
@@ -29,7 +29,7 @@ button, input {
 .weui-btn_mini {
     display: inline-block;
     padding: 0 1.32em;
-    line-height: @weuiBtnMiniHeight;
+    line-height: @weuiBtnMiniLineHeight;
     font-size: @weuiBtnMiniFontSize;
 }