Chat - adopt fontSize setting for UI elements (#263455)

This commit is contained in:
Ladislau Szomoru
2025-08-26 19:00:48 +00:00
committed by GitHub
parent e7ae2cc2e1
commit 69faf86588
3 changed files with 33 additions and 20 deletions
@@ -55,7 +55,13 @@
"--vscode-chat-checkpointSeparator",
"--vscode-chat-editedFileForeground",
"--vscode-chat-font-family",
"--vscode-chat-font-size",
"--vscode-chat-font-size-body-l",
"--vscode-chat-font-size-body-m",
"--vscode-chat-font-size-body-s",
"--vscode-chat-font-size-body-xs",
"--vscode-chat-font-size-title-l",
"--vscode-chat-font-size-title-m",
"--vscode-chat-font-size-title-s",
"--vscode-chat-linesAddedForeground",
"--vscode-chat-linesRemovedForeground",
"--vscode-chat-requestBackground",
@@ -616,7 +616,14 @@ export class ChatWidget extends Disposable implements IChatWidget {
const fontFamily = chatFontFamily.read(r);
this.container.style.setProperty('--vscode-chat-font-family', fontFamily === 'default' ? null : fontFamily);
this.container.style.setProperty('--vscode-chat-font-size', `${fontSize}px`);
this.container.style.setProperty('--vscode-chat-font-size-body-xs', `${Math.round(fontSize * (11 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-body-s', `${Math.round(fontSize * (12 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-body-m', `${Math.round(fontSize * (13 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-body-l', `${Math.round(fontSize * (14 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-title-s', `${Math.round(fontSize * (14 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-title-m', `${Math.round(fontSize * (16 / 13))}px`);
this.container.style.setProperty('--vscode-chat-font-size-title-l', `${Math.round(fontSize * (20 / 13))}px`);
}));
this._register(this.editorOptions.onDidChange(() => this.onDidStyleChange()));
@@ -225,7 +225,7 @@
.interactive-item-container .chat-footer-details {
display: none;
padding: 0;
font-size: 11px;
font-size: var(--vscode-chat-font-size-body-xs);
opacity: 0.7;
color: var(--vscode-descriptionForeground);
line-height: 16px;
@@ -334,7 +334,7 @@
}
.interactive-item-container .value .rendered-markdown h1 {
font-size: calc(var(--vscode-chat-font-size, 13px) * 1.54); /* 20px when base is 13px */
font-size: var(--vscode-chat-font-size-title-l);
font-weight: 600;
margin: 16px 0 8px 0;
font-family: var(--vscode-chat-font-family, inherit);
@@ -342,14 +342,14 @@
}
.interactive-item-container .value .rendered-markdown h2 {
font-size: calc(var(--vscode-chat-font-size, 13px) * 1.23); /* 16px when base is 13px */
font-size: var(--vscode-chat-font-size-title-m);
font-weight: 600;
margin: 16px 0 8px 0;
font-family: var(--vscode-chat-font-family, inherit);
}
.interactive-item-container .value .rendered-markdown h3 {
font-size: calc(var(--vscode-chat-font-size, 13px) * 1.08); /* 14px when base is 13px */
font-size: var(--vscode-chat-font-size-title-s);
font-weight: 600;
margin: 16px 0 8px 0;
font-family: var(--vscode-chat-font-family, inherit);
@@ -360,7 +360,7 @@
}
.interactive-item-container.editing-session .value .rendered-markdown h3 {
font-size: var(--vscode-chat-font-size, 13px);
font-size: var(--vscode-chat-font-size-body-m);
margin: 0 0 8px 0;
font-weight: unset;
}
@@ -419,7 +419,7 @@
.interactive-item-container .value .rendered-markdown {
letter-spacing: 0.01em;
line-height: 1.5em;
font-size: var(--vscode-chat-font-size, 13px);
font-size: var(--vscode-chat-font-size-body-m);
font-family: var(--vscode-chat-font-family, inherit);
}
@@ -512,10 +512,10 @@
overflow: hidden;
.output-title {
font-size: 13px;
padding: 8px 12px;
background: var(--vscode-editorWidget-background);
border-bottom: 1px solid var(--vscode-widget-border);
font-size: var(--vscode-chat-font-size-body-m);
}
.output-error {
@@ -535,7 +535,7 @@
.output-error-details {
font-family: var(--monaco-monospace-font);
font-size: 11px;
font-size: var(--vscode-chat-font-size-body-xs);
}
}
}
@@ -595,7 +595,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
.monaco-tokenized-source,
code {
font-family: var(--monaco-monospace-font);
font-size: calc(var(--vscode-chat-font-size, 13px) * 0.92); /* 12px when base is 13px */
font-size: var(--vscode-chat-font-size-body-s);
color: var(--vscode-textPreformat-foreground);
background-color: var(--vscode-textPreformat-background);
padding: 1px 3px;
@@ -1848,12 +1848,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
}
.interactive-session .chat-used-context-label {
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
color: var(--vscode-descriptionForeground);
user-select: none;
code {
font-size: 11px;
font-size: var(--vscode-chat-font-size-body-xs);
}
}
@@ -1907,7 +1907,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
.interactive-session .chat-file-changes-label .monaco-button .codicon,
.interactive-session .chat-used-context-label .monaco-button .codicon {
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
}
.interactive-item-container .progress-container {
@@ -1922,10 +1922,10 @@ have to be updated for changes to the rules above, or to support more deeply nes
> .codicon[class*='codicon-'] {
height: 12px;
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
&::before {
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
}
}
@@ -1943,11 +1943,11 @@ have to be updated for changes to the rules above, or to support more deeply nes
& > p {
color: var(--vscode-descriptionForeground);
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
margin: 0;
code {
font-size: 11px;
font-size: var(--vscode-chat-font-size-body-xs);
}
}
@@ -2541,7 +2541,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
.chat-todo-list-widget .todo-list-title {
font-weight: normal;
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
color: var(--vscode-descriptionForeground);
}
@@ -2627,7 +2627,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
}
.chat-thinking-text {
font-size: 12px;
font-size: var(--vscode-chat-font-size-body-s);
padding: 3px 10px;
line-height: inherit;
display: flex;