fix confirm dialog button text color

This commit is contained in:
jxxghp
2026-08-07 17:33:02 +08:00
parent 1dfb51f3c4
commit 7ea14bc919
3 changed files with 18 additions and 1 deletions

View File

@@ -72,7 +72,7 @@ function handleCancel() {
</div>
</div>
</VCardItem>
<VCardActions class="mx-auto">
<VCardActions class="app-confirm-dialog-actions mx-auto">
<VBtn variant="tonal" color="secondary" class="px-5" @click="handleCancel">
{{ cancelText }}
</VBtn>

View File

@@ -86,6 +86,17 @@ describe('glass overlay material styles', () => {
)
})
it('uses the shared theme foreground token for confirm dialog actions', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
const dialog = readFileSync(resolve(cwd(), 'src/@core/components/ConfirmDialog.vue'), 'utf8')
expect(dialog).toContain('app-confirm-dialog-actions')
expect(styles).toContain('--app-confirm-dialog-action-color: rgb(var(--v-theme-on-primary))')
expect(styles).toMatch(
/\.app-confirm-dialog-actions \.v-btn\s*\{[\s\S]*?color:\s*var\(--app-confirm-dialog-action-color\)\s*!important;/,
)
})
it('keeps Chromium frosted fixed shells on the stable wallpaper backplate', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
const backplate = readFileSync(resolve(cwd(), 'src/components/theme/GlassFixedShellBackplate.vue'), 'utf8')

View File

@@ -106,6 +106,7 @@ html[data-theme='glass'] {
--app-card-light-border-opacity: 0.15;
--app-card-light-border: 1px solid var(--glass-border);
--app-overlay-border: 1px solid var(--glass-border);
--app-confirm-dialog-action-color: rgb(var(--v-theme-on-primary));
--app-grouped-list-background: var(--glass-surface);
--app-grouped-list-backdrop-filter: var(--glass-surface-backdrop-filter);
--app-grouped-list-border: 1px solid var(--glass-border);
@@ -808,6 +809,11 @@ html[data-theme='glass'] {
box-shadow var(--glass-motion);
}
// 语义色按钮在半透明玻璃表面上统一使用主题的高对比前景色,避免继承深色 on-color。
.app-confirm-dialog-actions .v-btn {
color: var(--app-confirm-dialog-action-color) !important;
}
.v-btn:not(.v-btn--variant-text, .v-btn--variant-plain) {
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--glass-control-backdrop-filter);