diff --git a/.changeset/fix-web-font-size-setting.md b/.changeset/fix-web-font-size-setting.md new file mode 100644 index 000000000..935067246 --- /dev/null +++ b/.changeset/fix-web-font-size-setting.md @@ -0,0 +1,5 @@ +--- +"@moonshot-ai/kimi-code": patch +--- + +web: Fix the font size setting so chat text, composer text, and sidebar text follow the selected size. diff --git a/apps/kimi-web/src/components/SessionRow.vue b/apps/kimi-web/src/components/SessionRow.vue index f51e80653..5d1b8a6c3 100644 --- a/apps/kimi-web/src/components/SessionRow.vue +++ b/apps/kimi-web/src/components/SessionRow.vue @@ -341,7 +341,7 @@ defineExpose({ closeMenu }); .t { color: inherit; - font-size: 15px; + font-size: var(--ui-font-size); font-weight: var(--weight-regular); flex: 1; min-width: 0; diff --git a/apps/kimi-web/src/components/Sidebar.vue b/apps/kimi-web/src/components/Sidebar.vue index bbc06a94a..920eb2492 100644 --- a/apps/kimi-web/src/components/Sidebar.vue +++ b/apps/kimi-web/src/components/Sidebar.vue @@ -784,10 +784,9 @@ onBeforeUnmount(() => { --sb-pad-x: var(--space-4); /* row horizontal padding */ --sb-gutter: 20px; /* leading icon slot (14px folder icon + 6px margin) */ --sb-gap: var(--space-2); /* gap between the icon slot and the text */ - /* Sidebar reads at 16px, matching the chat content size. Override the global - 14px UI font on this subtree so the brand / action buttons / search (which - derive from --ui-font-size) all scale up together. */ - --ui-font-size: 15px; + /* Sidebar stays one step above compact UI chrome, but still follows the + user-controlled font-size preference. */ + --ui-font-size: var(--sidebar-ui-font-size); } /* Session column. Width is set inline from the App resize handle. */ @@ -858,7 +857,7 @@ onBeforeUnmount(() => { touch-action: none; } .ch-name { - font-size: 15px; + font-size: var(--ui-font-size); font-weight: 500; line-height: 22px; color: var(--color-text); diff --git a/apps/kimi-web/src/components/WorkspaceGroup.vue b/apps/kimi-web/src/components/WorkspaceGroup.vue index d29e7356b..729707b8e 100644 --- a/apps/kimi-web/src/components/WorkspaceGroup.vue +++ b/apps/kimi-web/src/components/WorkspaceGroup.vue @@ -264,7 +264,7 @@ function onHeaderDragStart(event: DragEvent): void { } .gh-name { - font-size: var(--text-lg); + font-size: var(--ui-font-size-lg); font-weight: var(--weight-medium); color: var(--color-text); flex: 1; @@ -280,7 +280,7 @@ function onHeaderDragStart(event: DragEvent): void { text-overflow: ellipsis; white-space: nowrap; padding-left: calc(var(--sb-gutter) + var(--sb-gap)); - font-size: var(--text-xs); + font-size: var(--ui-font-size-xs); max-height: 0; opacity: 0; transition: max-height var(--duration-base) var(--ease-out), diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue index ffd96bc44..cae2b4feb 100644 --- a/apps/kimi-web/src/components/chat/Composer.vue +++ b/apps/kimi-web/src/components/chat/Composer.vue @@ -1294,7 +1294,7 @@ function selectModel(modelId: string): void { outline: none; resize: none; font-family: var(--font-ui); - font-size: 15px; + font-size: var(--content-font-size); background: transparent; min-height: 36px; max-height: calc(100vh / 4); diff --git a/apps/kimi-web/src/components/chat/Markdown.vue b/apps/kimi-web/src/components/chat/Markdown.vue index 65397f4e1..b8bd302ef 100644 --- a/apps/kimi-web/src/components/chat/Markdown.vue +++ b/apps/kimi-web/src/components/chat/Markdown.vue @@ -520,7 +520,7 @@ function copyDiff(code: string, idx: number) { .md :deep(.markdown-renderer blockquote), .md :deep(.markdown-renderer td), .md :deep(.markdown-renderer th) { - font-size: 15px; + font-size: var(--content-font-size); } /* Emphasis — bold steps up from the body (medium/500) to semibold (700). */ @@ -538,10 +538,10 @@ function copyDiff(code: string, idx: number) { margin: 0.85em 0 0.35em; line-height: var(--leading-tight); } -.md :deep(h1) { font-size: var(--text-xl); border-bottom: 1px solid var(--color-line); padding-bottom: 4px; } -.md :deep(h2) { font-size: var(--text-lg); } -.md :deep(h3) { font-size: var(--text-lg); } -.md :deep(h4) { font-size: var(--text-base); color: var(--color-text-muted); } +.md :deep(h1) { font-size: max(var(--text-xl), calc(var(--content-font-size) + 3px)); border-bottom: 1px solid var(--color-line); padding-bottom: 4px; } +.md :deep(h2) { font-size: max(var(--text-lg), calc(var(--content-font-size) + 2px)); } +.md :deep(h3) { font-size: max(var(--text-lg), calc(var(--content-font-size) + 1px)); } +.md :deep(h4) { font-size: max(var(--text-base), calc(var(--content-font-size) + 1px)); color: var(--color-text-muted); } /* Paragraphs */ .md :deep(p) { diff --git a/apps/kimi-web/src/composables/client/useAppearance.ts b/apps/kimi-web/src/composables/client/useAppearance.ts index 7b8ec36f0..d897da3ef 100644 --- a/apps/kimi-web/src/composables/client/useAppearance.ts +++ b/apps/kimi-web/src/composables/client/useAppearance.ts @@ -63,7 +63,7 @@ function loadUiFontSize(): number { function applyUiFontSize(value: number): void { if (typeof document === 'undefined' || !document.documentElement) return; - document.documentElement.style.setProperty('--ui-font-size', `${clampUiFontSize(value)}px`); + document.documentElement.style.setProperty('--base-ui-font-size', `${clampUiFontSize(value)}px`); } const colorScheme = ref(loadColorScheme()); diff --git a/apps/kimi-web/src/style.css b/apps/kimi-web/src/style.css index 140eeb357..13c1f3485 100644 --- a/apps/kimi-web/src/style.css +++ b/apps/kimi-web/src/style.css @@ -197,12 +197,14 @@ summary { --r-sm: var(--radius-md); --r-md: var(--radius-lg); --r-lg: var(--radius-xl); - --ui-font-size: 14px; + --base-ui-font-size: 14px; + --ui-font-size: var(--base-ui-font-size); --ui-font-size-sm: calc(var(--ui-font-size) - 1px); --ui-font-size-xs: calc(var(--ui-font-size) - 2px); --ui-font-size-lg: calc(var(--ui-font-size) + 1px); --ui-font-size-xl: calc(var(--ui-font-size) + 2px); - --content-font-size: 15px; + --content-font-size: calc(var(--base-ui-font-size) + 1px); + --sidebar-ui-font-size: calc(var(--base-ui-font-size) + 1px); --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Body/UI font follows the design-system canonical token (system UI font first; Inter intentionally NOT in the body chain — it stays reserved for diff --git a/apps/kimi-web/src/views/DesignSystemView.vue b/apps/kimi-web/src/views/DesignSystemView.vue index df7067dfe..5c8012137 100644 --- a/apps/kimi-web/src/views/DesignSystemView.vue +++ b/apps/kimi-web/src/views/DesignSystemView.vue @@ -265,7 +265,8 @@ onUnmounted(() => {

Type scale & weight

-

The type scale keeps and formalizes the existing --ui-font-size (UI, default 14px) / --content-font-size (body, 16px) dual tracks: UI controls / buttons / forms use --text-base (14px); reading body — including chat Markdown, message bubbles, etc. uses --text-lg (16px, relaxed line-height) for readability; the sidebar session list uses calc(var(--ui-font-size) - 1px) (15px, one step below the sidebar's 16px base) for density. +

The user font-size preference writes --base-ui-font-size. Compact UI chrome follows it through --ui-font-size, while chat reading surfaces and the sidebar derive one readable step above it through --content-font-size and --sidebar-ui-font-size.

+

The fixed product type tokens still define component defaults: UI controls / buttons / forms use --text-base (14px); reading body — including chat Markdown, message bubbles, etc. stays one step larger than compact chrome for readability; the sidebar session list follows that same readable step while keeping list density. Drop stray font-weight: 650 / 750; converge on two weights, 400 / 500 (regular / emphasis).

Page Title
--text-2xl · 22 / 500
@@ -280,6 +281,9 @@ onUnmounted(() => { --font-ui-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC"…UI & body (system fonts first) --font-monoJetBrains Mono…code, tool names, line numbers, diffs + --base-ui-font-size14px user preferenceroot setting that drives UI, reading body, and sidebar font sizes + --content-font-sizecalc(base + 1px)chat Markdown, message bubbles, composer + --sidebar-ui-font-sizecalc(base + 1px)sidebar brand, search, workspace and session rows --leading-tight/normal/relaxed1.25 / 1.5 / 1.7headings / UI / long text --weight-regular/medium400 / 500body / emphasis