feat(modal): [modal] modify smb theme (#2146)

opentiny · Sep 19, 2024 · f0a1244 · f0a1244
1 parent 6a298bc
commit f0a1244
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue b/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue
@@ -6,6 +6,6 @@
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
+  Modal.alert({ message: '控制显示头部及底部', showHeader: true, showFooter: true })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts b/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts
@@ -6,5 +6,5 @@ test('控制显示头部及底部', async ({ page }) => {
 
   const modal = page.locator('.tiny-modal.active')
   await page.getByRole('button', { name: /控制显示头部及底部/ }).click()
-  await expect(modal.locator('.tiny-modal__header')).not.toBeVisible()
+  await expect(modal.locator('.tiny-modal__header')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer.vue b/examples/sites/demos/pc/app/modal/show-header-footer.vue
@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
+      Modal.alert({ message: '控制显示头部及底部', showHeader: true, showFooter: true })
     }
   }
 }

diff --git a/packages/theme/src/modal/index.less b/packages/theme/src/modal/index.less
@@ -189,6 +189,11 @@
 
         .@{modal-prefix-cls}__content {
           max-width: 800px;
+          .@{modal-prefix-cls}__text {
+            font-size: var(--ti-modal-body-font-size);
+            color: var(--ti-modal-body-message-font-color);
+            line-height: var(--ti-modal-body-line-height);
+          }
         }
       }
 

diff --git a/packages/theme/src/modal/vars.less b/packages/theme/src/modal/vars.less
@@ -49,6 +49,8 @@
   --ti-modal-body-font-size: var(--ti-common-font-size-base, 12px);
   // 内容文本色
   --ti-modal-body-text-color: var(--ti-common-color-text-secondary);
+  // 消息弹窗内容文本色
+  --ti-modal-body-message-font-color: var(--ti-common-color-info-normal);
   // 内容行高
   --ti-modal-body-line-height: var(--ti-common-line-height-number, 1.5);
 
@@ -75,9 +77,9 @@
   // message左内边距
   --ti-modal-message-padding-left: var(--ti-common-space-4x);
   // message右内边距
-  --ti-modal-message-padding-right: var(--ti-common-space-3x);
+  --ti-modal-message-padding-right: var(--ti-common-space-4x);
   // message垂直内边距
-  --ti-modal-message-padding-vertical: calc(var(--ti-common-space-10) - 0.5px);
+  --ti-modal-message-padding-vertical: var(--ti-common-space-3x);
   // message内容水平内边距(hide)
   --ti-modal-message-body-padding-horizontal: var(--ti-common-space-0);
   // message状态图标尺寸
@@ -123,5 +125,5 @@
   // 头部底线边框设置(hide)
   --ti-modal-header-border-bottom: none;
   // 关闭按钮颜色
-  --ti-modal-btn-close-color: var(--ti-modal-close-btn-icon-color);
+  --ti-modal-btn-close-color: var(--ti-common-color-icon-normal);
 }