Skip to content

feat: add global font size adjustment #6909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jinmao88 merged 9 commits into from
Nov 24, 2025
+112 −13
Merged

feat: add global font size adjustment #6909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
24b6e7a
feat: add global font size adjustment
Nov 12, 2025
0bc7169
feat: add global font size adjustment
Nov 12, 2025
c3a7562
Merge branch 'main' into milletpeak-fontsize
jinmao88 Nov 13, 2025
fb8f36e
Merge branch 'main' into milletpeak-fontsize
milletpeak Nov 19, 2025
cd7c11c
fix: run 'pnpm format' update various components and improve layout s…
Nov 19, 2025
c142af4
fix: update snapshot for defaultPreferences immutability test to refl…
Nov 19, 2025
aaf0274
feat: add menu font size variable and update related components
Nov 19, 2025
f7d9d1b
chore: update package.json and app.vue imports, and ensure global sty…
Nov 19, 2025
1f1ba16
Merge branch 'main' into milletpeak-fontsize
milletpeak Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web-tdesign/src/bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { registerLoadingDirective } from '@vben/common-ui/es/loading';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
// import '@vben/styles/antd';
// 引入组件库的少量全局样式变量

import { useTitle } from '@vueuse/core';

Expand All @@ -15,8 +17,6 @@ import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { router } from './router';

// import '@vben/styles/antd';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

async function bootstrap(namespace: string) {
Expand Down
3 changes: 2 additions & 1 deletion packages/@core/base/design/src/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@
}

html {
@apply text-foreground bg-background font-sans text-[100%];
@apply text-foreground bg-background font-sans;

font-size: var(--font-size-base, 16px);
font-variation-settings: normal;
line-height: 1.15;
text-size-adjust: 100%;
Expand Down
1 change: 1 addition & 0 deletions packages/@core/base/design/src/design-tokens/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@

/* 基本文字大小 */
--font-size-base: 16px;
--menu-font-size: calc(var(--font-size-base) * 0.875);

/* =============component & UI============= */

Expand Down
1 change: 1 addition & 0 deletions packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"colorPrimary": "hsl(212 100% 45%)",
"colorSuccess": "hsl(144 57% 58%)",
"colorWarning": "hsl(42 84% 61%)",
"fontSize": 16,
"mode": "dark",
"radius": "0.5",
"semiDarkHeader": false,
Expand Down
1 change: 1 addition & 0 deletions packages/@core/preferences/src/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ const defaultPreferences: Preferences = {
colorWarning: 'hsl(42 84% 61%)',
mode: 'dark',
radius: '0.5',
fontSize: 16,
semiDarkHeader: false,
semiDarkSidebar: false,
},
Expand Down
5 changes: 4 additions & 1 deletion packages/@core/preferences/src/preferences.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,10 @@ class PreferenceManager {
private handleUpdates(updates: DeepPartial<Preferences>) {
const themeUpdates = updates.theme || {};
const appUpdates = updates.app || {};
if (themeUpdates && Object.keys(themeUpdates).length > 0) {
if (
(themeUpdates && Object.keys(themeUpdates).length > 0) ||
Reflect.has(themeUpdates, 'fontSize')
) {
updateCSSVariables(this.state);
}

Expand Down
2 changes: 2 additions & 0 deletions packages/@core/preferences/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,8 @@ interface ThemePreferences {
colorSuccess: string;
/** 警告色 */
colorWarning: string;
/** 字体大小（单位：px） */
fontSize: number;
/** 当前主题 */
mode: ThemeModeType;
/** 圆角 */
Expand Down
13 changes: 13 additions & 0 deletions packages/@core/preferences/src/update-css-variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,19 @@ function updateCSSVariables(preferences: Preferences) {
if (Reflect.has(theme, 'radius')) {
document.documentElement.style.setProperty('--radius', `${radius}rem`);
}

// 更新字体大小
if (Reflect.has(theme, 'fontSize')) {
const fontSize = theme.fontSize;
document.documentElement.style.setProperty(
'--font-size-base',
`${fontSize}px`,
);
document.documentElement.style.setProperty(
'--menu-font-size',
`calc(${fontSize}px * 0.875)`,
);
}
}

/**
Expand Down
17 changes: 11 additions & 6 deletions packages/@core/ui-kit/menu-ui/src/components/menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ $namespace: vben;
padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
var(--menu-item-margin-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
color: var(--menu-item-color);
white-space: nowrap;
text-decoration: none;
Expand Down Expand Up @@ -433,6 +433,7 @@ $namespace: vben;
max-width: var(--menu-title-width);
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--menu-font-size) !important;
white-space: nowrap;
opacity: 1;
}
Expand All @@ -444,7 +445,7 @@ $namespace: vben;
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {
--menu-title-width: 140px;
--menu-item-icon-size: 16px;
--menu-item-icon-size: var(--font-size-base, 16px);
--menu-item-height: 38px;
--menu-item-padding-y: 21px;
--menu-item-padding-x: 12px;
Expand All @@ -458,7 +459,6 @@ $namespace: vben;
--menu-item-collapse-margin-x: 0px;
--menu-item-radius: 0px;
--menu-item-indent: 16px;
--menu-font-size: 14px;

&.is-dark {
--menu-background-color: hsl(var(--menu));
Expand Down Expand Up @@ -752,15 +752,15 @@ $namespace: vben;
}
.#{$namespace}-menu__icon {
display: block;
font-size: 20px !important;
font-size: calc(var(--font-size-base, 16px) * 1.25) !important;
transition: all 0.25s ease;
}

.#{$namespace}-menu__name {
display: inline-flex;
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
line-height: normal;
transition: all 0.25s ease;
Expand All @@ -785,7 +785,7 @@ $namespace: vben;
width: 100%;
height: 100%;
padding: 0 var(--menu-item-padding-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
line-height: var(--menu-item-height);
}
}
Expand All @@ -812,9 +812,14 @@ $namespace: vben;

.#{$namespace}-sub-menu-content {
height: var(--menu-item-height);
font-size: var(--menu-font-size) !important;

@include menu-item;

* {
font-size: inherit !important;
}
Comment on lines +819 to +821
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Universal selector with !important poses significant risk.

The rule * { font-size: inherit !important; } is extremely aggressive and will forcibly override font sizes in all descendant elements, including:

  • Third-party components
  • Nested UI elements that require different sizing
  • Icon libraries that set their own sizes

This could cause unexpected layout issues or break functionality in nested components.

Consider removing this rule or applying font-size inheritance more selectively:

-  * {
-    font-size: inherit !important;
-  }

If inheritance is truly needed, apply it only to specific elements or use a more targeted approach without !important.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
* {
font-size: inherit !important;
}
🤖 Prompt for AI Agents 
In packages/@core/ui-kit/menu-ui/src/components/menu.vue around lines 819 to
821, there is an overly broad CSS rule `* { font-size: inherit !important; }`
that force-overrides all descendant font sizes; remove this universal selector
and either delete the rule entirely or replace it with a targeted approach
(apply font-size inheritance only to specific menu elements or a single root
container selector for the component), avoid using `!important`, and prefer
using a scoped class or CSS variable (e.g., set font-size on the component root
and let descendants inherit normally) so third-party and nested elements keep
their intended sizing.


&__icon-arrow {
position: absolute;
top: 50%;
Expand Down
6 changes: 3 additions & 3 deletions packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ $namespace: vben;
}

.#{$namespace}-normal-menu__icon {
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
}
}

Expand Down Expand Up @@ -146,14 +146,14 @@ $namespace: vben;

&__icon {
max-height: 20px;
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
transition: all 0.25s ease;
}

&__name {
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
transition: all 0.25s ease;
}
Expand Down
1 change: 1 addition & 0 deletions packages/effects/layouts/src/widgets/preferences/blocks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@ export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
export { default as SwitchItem } from './switch-item.vue';
export { default as BuiltinTheme } from './theme/builtin.vue';
export { default as ColorMode } from './theme/color-mode.vue';
export { default as FontSize } from './theme/font-size.vue';
export { default as Radius } from './theme/radius.vue';
export { default as Theme } from './theme/theme.vue';
62 changes: 62 additions & 0 deletions packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<script setup lang="ts">
import { watch } from 'vue';

import { $t } from '@vben/locales';

import {
NumberField,
NumberFieldContent,
NumberFieldDecrement,
NumberFieldIncrement,
NumberFieldInput,
} from '@vben-core/shadcn-ui';

defineOptions({
name: 'PreferenceFontSize',
});

const modelValue = defineModel<number>({
default: 16,
});

const min = 15;
const max = 22;
const step = 1;

// 限制输入值在 min 和 max 之间
watch(
modelValue,
(newValue) => {
if (newValue < min) {
modelValue.value = min;
} else if (newValue > max) {
modelValue.value = max;
}
},
{ immediate: true },
);
</script>

<template>
<div class="flex w-full flex-col gap-4">
<div class="flex items-center gap-2">
<NumberField
v-model="modelValue"
:max="max"
:min="min"
:step="step"
class="w-full"
>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
<span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
</div>
<div class="text-muted-foreground text-xs">
{{ $t('preferences.theme.fontSizeTip') }}
</div>
</div>
</template>
5 changes: 5 additions & 0 deletions packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
ColorMode,
Content,
Copyright,
FontSize,
Footer,
General,
GlobalShortcutKeys,
Expand Down Expand Up @@ -85,6 +86,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
const themeMode = defineModel<ThemeModeType>('themeMode');
const themeRadius = defineModel<string>('themeRadius');
const themeFontSize = defineModel<number>('themeFontSize');
const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');

Expand Down Expand Up @@ -328,6 +330,9 @@ async function handleReset() {
<Block :title="$t('preferences.theme.radius')">
<Radius v-model="themeRadius" />
</Block>
<Block :title="$t('preferences.theme.fontSize')">
<FontSize v-model="themeFontSize" />
</Block>
<Block :title="$t('preferences.other')">
<ColorMode
v-model:app-color-gray-mode="appColorGrayMode"
Expand Down
2 changes: 2 additions & 0 deletions packages/locales/src/langs/en-US/preferences.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@
"theme": {
"title": "Theme",
"radius": "Radius",
"fontSize": "Font Size",
"fontSizeTip": "Adjust global font size with real-time preview",
"light": "Light",
"dark": "Dark",
"darkSidebar": "Semi Dark Sidebar",
Expand Down
2 changes: 2 additions & 0 deletions packages/locales/src/langs/zh-CN/preferences.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@
"theme": {
"title": "主题",
"radius": "圆角",
"fontSize": "字体大小",
"fontSizeTip": "调整全局字体大小，实时预览效果",
"light": "浅色",
"dark": "深色",
"darkSidebar": "深色侧边栏",
Expand Down
Loading