diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css index e373f00fc..63520ac7e 100644 --- a/packages/components/dark.full.css +++ b/packages/components/dark.full.css @@ -679,6 +679,7 @@ --ix-modal-title-font-size: 14px; --ix-modal-title-font-weight: 400; --ix-modal-title-color: #f4f8ff; + --ix-modal-title-word-break: break-word; --ix-modal-content-color: #808999; --ix-modal-icon-size: 40px; } diff --git a/packages/components/default.full.css b/packages/components/default.full.css index fa41bbbe1..a322173e0 100644 --- a/packages/components/default.full.css +++ b/packages/components/default.full.css @@ -679,6 +679,7 @@ --ix-modal-title-font-size: 14px; --ix-modal-title-font-weight: 400; --ix-modal-title-color: #2f3540; + --ix-modal-title-word-break: break-word; --ix-modal-content-color: #6f7785; --ix-modal-icon-size: 40px; } diff --git a/packages/components/modal/docs/Theme.zh.md b/packages/components/modal/docs/Theme.zh.md index a54de9361..670ef56a2 100644 --- a/packages/components/modal/docs/Theme.zh.md +++ b/packages/components/modal/docs/Theme.zh.md @@ -1,7 +1,8 @@ | 名称 | 描述 | 类型 | default | dark | |---|---|---|---|---| -| `contentColor` | | `string` | `#6f7785` | `#808999` | -| `iconSize` | | `number` | `40` | `40` | -| `titleColor` | | `string` | `#2f3540` | `#F4F8FF` | -| `titleFontSize` | | `number` | `14` | `14` | -| `titleFontWeight` | | `number` | `400` | `400` | +| `contentColor` | 内容字体颜色 | `string` | `#6f7785` | `#808999` | +| `iconSize` | 图标尺寸 | `number` | `40` | `40` | +| `titleColor` | 标题的字体颜色 | `string` | `#2f3540` | `#F4F8FF` | +| `titleFontSize` | 标题的字体大小 | `number` | `14` | `14` | +| `titleFontWeight` | 标题的字重 | `number` | `400` | `400` | +| `titleWordBreak` | 标题word-break | `string` | `break-word` | `break-word` | diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less index 702cf32cc..42ed69fc0 100644 --- a/packages/components/modal/style/index.less +++ b/packages/components/modal/style/index.less @@ -9,7 +9,7 @@ position: relative; pointer-events: none; width: auto; - max-width: calc(100vw - 32px); + max-width: calc(100vw - var(--ix-margin-size-2xl)); margin: 0 auto; &-wrapper { @@ -41,14 +41,14 @@ box-shadow: var(--ix-box-shadow-lg); > .@{header-prefix} { - padding-left: 16px; - padding-right: 16px; + padding-left: var(--ix-padding-size-lg); + padding-right: var(--ix-padding-size-lg); } } &-body { flex: 1; - padding: 8px 16px; + padding: var(--ix-padding-size-sm) var(--ix-padding-size-lg); overflow: auto; &-title { @@ -56,7 +56,8 @@ font-weight: var(--ix-modal-title-font-weight); color: var(--ix-modal-title-color); - margin-bottom: 4px; + margin-bottom: var(--ix-margin-size-xs); + word-break: var(--ix-modal-title-word-break); } &-content { @@ -64,7 +65,7 @@ flex-direction: column; justify-content: center; width: 100%; - padding-right: 16px; + padding-right: var(--ix-padding-size-lg); color: var(--ix-modal-content-color); &-only-title { @@ -84,14 +85,14 @@ &-warning, &-error { display: flex; - padding: 0 16px; + padding: 0 var(--ix-padding-size-lg); } &-icon { font-size: var(--ix-modal-icon-size); height: calc(var(--ix-modal-icon-size) + var(--ix-line-height-gutter)); line-height: calc(var(--ix-modal-icon-size) + var(--ix-line-height-gutter)); - margin: 0 16px; + margin: 0 var(--ix-padding-size-lg); } &-confirm { @@ -128,10 +129,10 @@ &-footer { display: flex; justify-content: flex-end; - padding: 12px 16px; + padding: var(--ix-padding-size-md) var(--ix-padding-size-lg); .@{button-prefix} + .@{button-prefix} { - margin-left: 8px; + margin-left: var(--ix-margin-size-sm); } } @@ -156,8 +157,8 @@ @media (max-width: @screen-sm-max) { .@{modal-prefix} { - max-width: calc(100vw - 16px); - margin: 8px auto; + max-width: calc(100vw - var(--ix-padding-size-lg)); + margin: var(--ix-margin-size-sm) auto; } .@{modal-prefix}-centered { diff --git a/packages/components/modal/theme/dark.css b/packages/components/modal/theme/dark.css index e5192b736..af2faafae 100644 --- a/packages/components/modal/theme/dark.css +++ b/packages/components/modal/theme/dark.css @@ -3,6 +3,7 @@ --ix-modal-title-font-size: 14px; --ix-modal-title-font-weight: 400; --ix-modal-title-color: #f4f8ff; + --ix-modal-title-word-break: break-word; --ix-modal-content-color: #808999; --ix-modal-icon-size: 40px; } diff --git a/packages/components/modal/theme/default.css b/packages/components/modal/theme/default.css index 6aa4f1d06..e4483ab07 100644 --- a/packages/components/modal/theme/default.css +++ b/packages/components/modal/theme/default.css @@ -3,6 +3,7 @@ --ix-modal-title-font-size: 14px; --ix-modal-title-font-weight: 400; --ix-modal-title-color: #2f3540; + --ix-modal-title-word-break: break-word; --ix-modal-content-color: #6f7785; --ix-modal-icon-size: 40px; } diff --git a/packages/components/modal/theme/default.ts b/packages/components/modal/theme/default.ts index 06a1877fc..bd89bb757 100644 --- a/packages/components/modal/theme/default.ts +++ b/packages/components/modal/theme/default.ts @@ -13,6 +13,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo titleFontSize: fontSizeMd, titleFontWeight: fontWeightMd, titleColor: colorTextTitle, + titleWordBreak: 'break-word', contentColor: colorTextInfo, iconSize: 40, diff --git a/packages/components/modal/theme/tokens.ts b/packages/components/modal/theme/tokens.ts index e65bf47ff..e4c63078f 100644 --- a/packages/components/modal/theme/tokens.ts +++ b/packages/components/modal/theme/tokens.ts @@ -6,10 +6,29 @@ */ export interface ModalThemeTokens { + /** + * @desc 标题的字体大小 + */ titleFontSize: number + /** + * @desc 标题的字重 + */ titleFontWeight: number + /** + * @desc 标题的字体颜色 + */ titleColor: string + /** + * @desc 标题word-break + */ + titleWordBreak: string + /** + * @desc 内容字体颜色 + */ contentColor: string + /** + * @desc 图标尺寸 + */ iconSize: number }