feat(dialog): 新增按钮变量 (#3173)

Author: xiaoyatong

src/packages/dialog/dialog.scss

@@ -127,6 +127,7 @@
 
     &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
+      background: $dialog-footer-cancel-bg;
     }
 
     &-ok {

src/packages/dialog/doc.en-US.md

@@ -159,6 +159,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-dialog-footer-justify-content | dialog footer justify content | `space-around` |
 | \--nutui-dialog-footer-button-min-width | dialog footer button min width | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | dialog footer cancel button's margin right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | dialog footer cancel button's bg | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | dialog footer confirm button's max width | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | dialog vertical footer confirm button margin top | `5px` |
 | \--nutui-dialog-close-width | dialog close the width of the button | `18px` |

src/packages/dialog/doc.md

@@ -159,6 +159,7 @@ export default function App() {
 | \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按钮的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
 | \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |

src/packages/dialog/doc.taro.md

@@ -139,6 +139,7 @@ DialogOptions 是 DialogProps 的子集，包含如下属性：title, content, f
 | \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按钮的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
 | \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |

src/packages/dialog/doc.zh-TW.md

@@ -159,6 +159,7 @@ export default function App() {
 | \--nutui-dialog-footer-justify-content | 對話框底部按鈕排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 對話框底部按鈕最小寬度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 對話框取消按鈕的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按鈕的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 對話框確認按鈕的最大寬度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 對話框底部按鈕縱向排布時的margin值 | `5px` |
 | \--nutui-dialog-close-width | 對話框關閉按鈕的寬度 | `18px` |

src/styles/variables-jmapp.scss

@@ -1316,6 +1316,7 @@ $dialog-footer-cancel-margin-right: var(
   --nutui-dialog-footer-cancel-margin-right,
   12px
 ) !default;
+$dialog-footer-cancel-bg: var(--nutui-dialog-footer-cancel-bg, transparent);
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
   128px

src/styles/variables.scss

@@ -1264,6 +1264,10 @@ $dialog-footer-cancel-margin-right: var(
   --nutui-dialog-footer-cancel-margin-right,
   12px
 ) !default;
+$dialog-footer-cancel-bg: var(
+  --nutui-dialog-footer-cancel-bg,
+  $button-default-background-color
+);
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
   128px