fix(comp:modal): style update and css variable support (#1479)

packages/components/_private/mask/style/themes/default.variable.less

@@ -1 +1 @@
-@mask-background-color: fade(@color-black, 40%);
+@mask-background-color: fade(#000, 45%);

packages/components/desc/docs/Theme.zh.md

@@ -3,7 +3,7 @@
 | `@desc-item-height-sm` | `var(--ix-height-sm)` | - | - |
 | `@desc-item-height-md` | `var(--ix-height-md)` | - | - |
 | `@desc-item-height-lg` | `var(--ix-height-lg)` | - | - |
-| `@desc-item-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@desc-item-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
 | `@desc-item-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@desc-item-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-sm)` | - |
 | `@desc-item-label-color` | `var(--ix-text-color-info)` | - | - |

packages/components/modal/demo/Footer.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import { h, ref } from 'vue'
+import { h, reactive, ref } from 'vue'
 
-import { useModal } from '@idux/components/modal'
+import { ModalButtonProps, useModal } from '@idux/components/modal'
 
 const { confirm } = useModal()
 
@@ -37,6 +37,18 @@ const openModal1 = () => {
 }
 
 const openModal2 = () => {
+  const asyncButton: ModalButtonProps = reactive({
+    text: 'My Ok',
+    loading: false,
+    mode: 'primary',
+    onClick: () => {
+      asyncButton.loading = true
+      setTimeout(() => {
+        asyncButton.loading = false
+        modalRef.ok()
+      }, 1000)
+    },
+  })
   const modalRef = confirm({
     title: 'Customize footer via footer',
     content: h('p', 'Some contents...'),
@@ -45,11 +57,7 @@ const openModal2 = () => {
         text: 'My Cancel',
         onClick: () => modalRef.cancel(),
       },
-      {
-        text: 'My Ok',
-        mode: 'primary',
-        onClick: () => modalRef.ok(),
-      },
+      asyncButton,
     ],
   })
 }

packages/components/modal/docs/Index.zh.md

@@ -3,6 +3,6 @@ category: components
 type: 反馈
 title: Modal
 subtitle: 对话框
-order: 0
+theme: true
 ---
 

packages/components/modal/docs/Theme.zh.md

@@ -1,28 +1,14 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@modal-max-width` | `calc(100vw - 32px)` | - | - |
+| `@modal-border-radius` | `var(--ix-border-radius-md)` | - | - |
 | `@modal-box-shadow` | `@shadow-bottom-md` | - | - |
-| `@modal-border-radius` | `@border-radius-md` | - | - |
-| `@modal-header-padding` | `@spacing-lg @spacing-xl @spacing-sm` | - | - |
-| `@modal-body-padding` | `@spacing-sm @spacing-xl` | `@spacing-sm @spacing-lg` | - |
-| `@modal-footer-padding` | `@spacing-sm @spacing-xl @spacing-lg` | `@spacing-md @spacing-lg` | - |
-| `@modal-footer-button-margin-left` | `@spacing-sm` | - | - |
-| `@modal-footer-min-height` | `64px` | `56px` | - |
-| `@modal-header-title-font-size` | `@font-size-lg` | - | - |
-| `@modal-body-title-font-size` | `@font-size-md` | - | - |
-| `@modal-body-title-font-weight` | `@font-weight-xl` | `@font-weight-md` | - |
-| `@modal-body-title-margin-bottom` | `4px` | - | - |
-| `@modal-body-title-color` | `@text-color` | `@color-graphite-d40` | - |
-| `@modal-body-content-color` | `@text-color` | `@color-graphite-d10` | - |
-| `@modal-body-content-padding` | `0` | `0 @spacing-lg 0 0` | - |
+| `@modal-body-title-font-size` | `var(--ix-font-size-md)` | - | - |
+| `@modal-body-title-font-weight` | `var(--ix-font-weight-lg)` | `var(--ix-font-weight-md)` | - |
+| `@modal-body-title-color` | `var(--ix-text-color-title)` | - | - |
+| `@modal-body-content-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - |
 | `@modal-body-icon-font-size` | `48px` | - | - |
-| `@modal-body-icon-margin` | `0 @spacing-lg` | - | - |
-| `@modal-body-confirm-color` | `@color-warning` | `@color-warning-l10` | - |
-| `@modal-body-info-color` | `@color-info` | `@color-info-l10` | - |
-| `@modal-body-success-color` | `@color-success` | - | - |
-| `@modal-body-warning-color` | `@color-warning` | `@color-warning-l10` | - |
-| `@modal-body-error-color` | `@color-error` | `@color-error-l10` | - |
-| `@modal-body-typed-padding` | `@spacing-sm @spacing-lg` | - | - |
-| `@modal-max-width-screen-sm` | `calc(100vw - 16px)` | - | - |
-| `@modal-margin-screen-sm` | `@spacing-sm auto` | - | - |
-| `@modal-typed-body-padding` | - | `@spacing-sm @spacing-lg` | - |
+| `@modal-body-confirm-color` | `var(--ix-color-brown)` | `var(--ix-color-brown-l10)` | - |
+| `@modal-body-info-color` | `var(--ix-color-primary)` | `var(--ix-color-primary-l10)` | - |
+| `@modal-body-success-color` | `var(--ix-color-turquoise)` | - | - |
+| `@modal-body-warning-color` | `var(--ix-color-brown)` | `var(--ix-color-brown-l10)` | - |
+| `@modal-body-error-color` | `var(--ix-color-red)` | `var(--ix-color-red-l10)` | - |

packages/components/modal/src/ModalWrapper.tsx

@@ -180,6 +180,7 @@ export default defineComponent({
                   closable={closable.value}
                   closeIcon={closeIcon.value}
                   header={props.header}
+                  size={props.type === 'default' ? 'md' : 'sm'}
                   onClose={close}
                 />
                 <ModalBody></ModalBody>

packages/components/modal/style/index.less

@@ -8,7 +8,7 @@
   position: relative;
   pointer-events: none;
   width: auto;
-  max-width: @modal-max-width;
+  max-width: calc(100vw - 32px);
   margin: 0 auto;
 
   &-wrapper {
@@ -40,35 +40,37 @@
     box-shadow: @modal-box-shadow;
 
     > .@{header-prefix} {
-      padding-left: var(--ix-spacing-lg);
-      padding-right: var(--ix-spacing-lg);
+      padding-left: 16px;
+      padding-right: 16px;
     }
   }
 
   &-body {
     flex: 1;
-    padding: var(--ix-spacing-sm) var(--ix-spacing-lg);
+    padding: 8px 16px;
     overflow: auto;
 
     &-title {
       .reset-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;
+      margin-bottom: 4px;
     }
 
     &-content {
       display: flex;
       flex-direction: column;
       justify-content: center;
       width: 100%;
-      padding: @modal-body-content-padding;
+      padding-right: 16px;
       color: @modal-body-content-color;
-      &&-only-title {
+
+      &-only-title {
         align-items: center;
         flex-direction: row;
         justify-content: start;
+
         .@{modal-prefix}-body-title {
           margin-bottom: 0;
         }
@@ -81,13 +83,13 @@
     &-warning,
     &-error {
       display: flex;
-      padding: @modal-body-typed-padding;
+      padding: 0 16px;
     }
 
     &-icon {
-      line-height: 1;
       font-size: @modal-body-icon-font-size;
-      margin: @modal-body-icon-margin;
+      line-height: 1;
+      margin: 0 16px;
     }
 
     &-confirm {
@@ -123,10 +125,10 @@
 
   &-footer {
     text-align: end;
-    padding: var(--ix-spacing-md) var(--ix-spacing-lg);
+    padding: 12px 16px;
 
     .@{button-prefix} + .@{button-prefix} {
-      margin-left: var(--ix-spacing-sm);
+      margin-left: 8px;
     }
   }
 
@@ -151,8 +153,8 @@
 
 @media (max-width: @screen-sm-max) {
   .@{modal-prefix} {
-    max-width: @modal-max-width-screen-sm;
-    margin: @modal-margin-screen-sm;
+    max-width: calc(100vw - 16px);
+    margin: 8px auto;
   }
 
   .@{modal-prefix}-centered {

packages/components/modal/style/themes/default.variable.less

@@ -1,34 +1,16 @@
-@modal-max-width: calc(100vw - 32px);
-
+@modal-border-radius: var(--ix-border-radius-md);
 @modal-box-shadow: @shadow-bottom-md;
-@modal-border-radius: @border-radius-md;
-
-@modal-header-padding: @spacing-lg @spacing-xl @spacing-sm;
-@modal-body-padding: @spacing-sm @spacing-xl;
-@modal-footer-padding: @spacing-sm @spacing-xl @spacing-lg;
-@modal-footer-button-margin-left: @spacing-sm;
-@modal-footer-min-height: 64px;
-
-@modal-header-title-font-size: @font-size-lg;
 
-@modal-body-title-font-size: @font-size-md;
-@modal-body-title-font-weight: @font-weight-xl;
-@modal-body-title-margin-bottom: 4px;
-@modal-body-title-color: @text-color;
+@modal-body-title-font-size: var(--ix-font-size-md);
+@modal-body-title-font-weight: var(--ix-font-weight-lg);
+@modal-body-title-color: var(--ix-text-color-title);
 
-@modal-body-content-color: @text-color;
-@modal-body-content-padding: 0;
+@modal-body-content-color: var(--ix-text-color);
 
 @modal-body-icon-font-size: 48px;
-@modal-body-icon-margin: 0 @spacing-lg;
-
-@modal-body-confirm-color: @color-warning;
-@modal-body-info-color: @color-info;
-@modal-body-success-color: @color-success;
-@modal-body-warning-color: @color-warning;
-@modal-body-error-color: @color-error;
-
-@modal-body-typed-padding: @spacing-sm @spacing-lg;
 
-@modal-max-width-screen-sm: calc(100vw - 16px);
-@modal-margin-screen-sm: @spacing-sm auto;
+@modal-body-confirm-color: var(--ix-color-brown);
+@modal-body-info-color: var(--ix-color-primary);
+@modal-body-success-color: var(--ix-color-turquoise);
+@modal-body-warning-color: var(--ix-color-brown);
+@modal-body-error-color: var(--ix-color-red);

packages/components/modal/style/themes/seer.variable.less

@@ -1,18 +1,10 @@
 @import './default.variable.less';
 
-@modal-body-title-font-weight: @font-weight-md;
-@modal-body-title-color: @color-graphite-d40;
+@modal-body-title-font-weight: var(--ix-font-weight-md);
 
-@modal-body-content-color: @color-graphite-d10;
-@modal-body-content-padding: 0 @spacing-lg 0 0;
+@modal-body-content-color: var(--ix-text-color-info);
 
-@modal-body-padding: @spacing-sm @spacing-lg;
-@modal-typed-body-padding: @spacing-sm @spacing-lg;
-
-@modal-footer-min-height: 56px;
-@modal-footer-padding: @spacing-md @spacing-lg;
-
-@modal-body-confirm-color: @color-warning-l10;
-@modal-body-info-color: @color-info-l10;
-@modal-body-warning-color: @color-warning-l10;
-@modal-body-error-color: @color-error-l10;
+@modal-body-confirm-color: var(--ix-color-brown-l10);
+@modal-body-info-color: var(--ix-color-primary-l10);
+@modal-body-warning-color: var(--ix-color-brown-l10);
+@modal-body-error-color: var(--ix-color-red-l10);

packages/components/style/themes/default.less

@@ -16,12 +16,14 @@
   --ix-color-red-d10: @color-red-d10; // active
 
   // Turquoise
-  --ix-color-turquoise-d10: @color-turquoise-d10;
   --ix-color-turquoise: @color-turquoise;
+  --ix-color-turquoise-l10: @color-turquoise-l10;
+  --ix-color-turquoise-d10: @color-turquoise-d10;
 
   // Brown
-  --ix-color-brown-l10: @color-brown-l10;
   --ix-color-brown: @color-brown;
+  --ix-color-brown-l10: @color-brown-l10;
+  --ix-color-brown-d10: @color-brown-d10;
 
   // Text
   --ix-text-color: @color-grey-d40; // 默认文字颜色

packages/pro/tree/docs/Theme.zh.md

@@ -10,6 +10,8 @@
 | `@pro-tree-header-wrapper-icon-font-size` | `@font-size-lg` | - | - |
 | `@pro-tree-header-wrapper-icon-hover-color` | `@color-primary` | - | - |
 | `@pro-tree-header-wrapper-height` | `38px` | - | - |
+| `@pro-tree-content-horizontal-spacing` | `12px` | - | - |
+| `@pro-tree-content-vertical-spacing` | `0` | - | - |
 | `@pro-tree-divider-horizontal-spacing` | `@pro-tree-header-search-wrapper-horizontal-spacing` | - | - |
 | `@pro-tree-divider-vertical-spacing` | `8px` | - | - |
 | `@pro-tree-node-padding` | `0 0 0 8px` | - | - |