diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index 4f16c1ee51067c..f9c8c461361d8c 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -88,8 +88,8 @@ .interactive-item-container .header .username { margin: 0; - font-size: 13px; - font-weight: 600; + font-size: var(--vscode-fontSize-heading3); + font-weight: var(--vscode-fontWeight-semiBold); } .interactive-item-container .detail-container { @@ -165,8 +165,8 @@ justify-content: center; width: 24px; height: 24px; - border-radius: 50%; - outline: 1px solid var(--vscode-chat-requestBorder); + border-radius: var(--vscode-cornerRadius-circle); + outline: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); } .interactive-item-container .header .avatar.codicon-avatar { @@ -180,13 +180,13 @@ .interactive-item-container .header .avatar .icon { width: 24px; height: 24px; - border-radius: 50%; + border-radius: var(--vscode-cornerRadius-circle); background-color: var(--vscode-chat-list-background); } .interactive-item-container .header .avatar .codicon { color: var(--vscode-chat-avatarForeground) !important; - font-size: 14px; + font-size: var(--vscode-codiconFontSize); } .interactive-item-container:not(:hover):not(:focus-within) .header .monaco-toolbar, @@ -199,8 +199,13 @@ } .interactive-item-container .header .monaco-toolbar .action-label { - border: 1px solid transparent; - padding: 2px; + box-sizing: border-box; + width: 22px; + height: 22px; + border: var(--vscode-strokeThickness) solid transparent; + padding: 0; + align-items: center; + justify-content: center; } .interactive-item-container.interactive-response .header .monaco-toolbar { @@ -542,7 +547,7 @@ } .interactive-item-container > .value .chat-used-context { - margin-bottom: 14px; + margin-bottom: var(--vscode-spacing-size160); } .interactive-item-container > .value .chat-used-context .chat-used-context-list { @@ -564,13 +569,13 @@ padding: 0px 16px 0 10px; border-left-width: 5px; border-left-style: solid; - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); background: var(--vscode-textBlockQuote-background); border-color: var(--vscode-textBlockQuote-border); } .interactive-item-container .value .rendered-markdown strong { - font-weight: 600; + font-weight: var(--vscode-fontWeight-semiBold); } .interactive-item-container .value .rendered-markdown .rendered-markdown-table-scroll-wrapper { @@ -584,12 +589,12 @@ overflow: hidden; border-collapse: separate; border-spacing: 0; - border: 1px solid var(--vscode-chat-requestBorder); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); } .interactive-item-container .value .rendered-markdown table td, .interactive-item-container .value .rendered-markdown table th { - border: 1px solid var(--vscode-chat-requestBorder); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); border-top: none; border-left: none; padding: 4px 6px; @@ -651,7 +656,7 @@ } .chat-list-at-bottom .chat-progress-reservable > .value:has(> .rendered-markdown:last-child) { - padding-bottom: 37px; + padding-bottom: var(--vscode-spacing-size360); } .interactive-item-container .value > :last-child, @@ -661,16 +666,12 @@ } .interactive-item-container .value .rendered-markdown hr { - border-color: rgba(0, 0, 0, 0.18); -} - -.vs-dark .interactive-item-container .value .rendered-markdown hr { - border-color: rgba(255, 255, 255, 0.18); + border-color: color-mix(in srgb, var(--vscode-textSeparator-foreground) 33%, transparent); } .interactive-item-container .value .rendered-markdown h1 { font-size: var(--vscode-chat-font-size-body-xxl); - font-weight: 600; + font-weight: var(--vscode-fontWeight-semiBold); margin: 1.5em 0 0.875em 0; font-family: var(--vscode-chat-font-family, inherit); @@ -678,14 +679,14 @@ .interactive-item-container .value .rendered-markdown h2 { font-size: var(--vscode-chat-font-size-body-xl); - font-weight: 600; + font-weight: var(--vscode-fontWeight-semiBold); margin: 1.5em 0 0.875em 0; font-family: var(--vscode-chat-font-family, inherit); } .interactive-item-container .value .rendered-markdown h3 { font-size: var(--vscode-chat-font-size-body-l); - font-weight: 600; + font-weight: var(--vscode-fontWeight-semiBold); margin: 1.5em 0 0.875em 0; font-family: var(--vscode-chat-font-family, inherit); } @@ -838,7 +839,7 @@ } .tool-output-part { - border: 1px solid var(--vscode-widget-border); + border: var(--vscode-strokeThickness) solid var(--vscode-widget-border); border-radius: var(--vscode-cornerRadius-medium); background: var(--vscode-editor-background); margin: 4px 0; @@ -847,7 +848,7 @@ .output-title { padding: 8px 12px; background: var(--vscode-editorWidget-background); - border-bottom: 1px solid var(--vscode-widget-border); + border-bottom: var(--vscode-strokeThickness) solid var(--vscode-widget-border); font-size: var(--vscode-chat-font-size-body-m); } @@ -873,7 +874,7 @@ .output-error-header { display: flex; align-items: center; - gap: 7px; + gap: var(--vscode-spacing-size80); margin-bottom: 4px; .codicon-error { @@ -889,7 +890,7 @@ } &:not(:last-child) { - margin-bottom: 14px; + margin-bottom: var(--vscode-spacing-size160); } } @@ -962,9 +963,9 @@ have to be updated for changes to the rules above, or to support more deeply nes font-size: var(--vscode-chat-font-size-body-xs); color: var(--vscode-textPreformat-foreground); background-color: var(--vscode-textPreformat-background); - padding: 1px 3px; - border-radius: 4px; - border: 1px solid var(--vscode-textPreformat-border); + padding: var(--vscode-spacing-size20) var(--vscode-spacing-size40); + border-radius: var(--vscode-cornerRadius-small); + border: var(--vscode-strokeThickness) solid var(--vscode-textPreformat-border); white-space: pre-wrap; } } @@ -988,7 +989,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-item-container.interactive-item-compact .header .codicon-avatar .codicon { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } .interactive-item-container.interactive-item-compact .header .avatar + .avatar { @@ -1082,9 +1083,9 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-dnd-overlay .attach-context-overlay-text .codicon { - height: 12px; - font-size: 12px; - margin-right: 3px; + height: var(--vscode-codiconFontSize-compact); + font-size: var(--vscode-codiconFontSize-compact); + margin-right: var(--vscode-spacing-size40); } /* @@ -1117,7 +1118,7 @@ have to be updated for changes to the rules above, or to support more deeply nes box-sizing: border-box; cursor: text; background-color: var(--vscode-input-background); - border: 1px solid var(--vscode-input-border, transparent); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); /* Top corners follow the stack, so a docked widget can square them. The fallback keeps an input rendered outside a chat input part rounded. */ --chat-input-own-radius: var(--chat-input-radius, var(--vscode-cornerRadius-large)); @@ -1188,7 +1189,7 @@ have to be updated for changes to the rules above, or to support more deeply nes /* Inherit so the ring matches whatever corner radius the container is currently using (large by default, small in compact mode). */ border-radius: inherit; - padding: 1px; + padding: var(--vscode-strokeThickness); /* The beam: a tight bright arc (~40deg) with a short fade, on an otherwise transparent ring. As `--chat-input-anim-angle` rotates, the bright spot travels around the perimeter like a comet. Stops are mostly transparent @@ -1365,7 +1366,7 @@ have to be updated for changes to the rules above, or to support more deeply nes /* Focus indicator drawn on the action-item wrapper so it sits cleanly around the button surface with a small offset. */ .interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); outline-offset: 1px; border-radius: var(--vscode-cornerRadius-circle); } @@ -1393,10 +1394,10 @@ have to be updated for changes to the rules above, or to support more deeply nes } .monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { - padding: 4px 3px 4px 3px; + padding: var(--vscode-spacing-size40); box-sizing: border-box; background-color: var(--vscode-editor-background); - border: 1px solid var(--vscode-input-border, transparent); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); border-bottom: none; border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; display: flex; @@ -1406,7 +1407,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-editing-session .monaco-list-row .chat-collapsible-list-action-bar { - padding-left: 5px; + padding-left: var(--vscode-spacing-size60); display: none; } @@ -1417,7 +1418,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-editing-session .chat-editing-session-container.show-file-icons .monaco-scrollable-element .monaco-list-rows .monaco-list-row { - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); } /* Toggled in chatInputPart.ts when the working set overflows. Do not replace @@ -1431,7 +1432,7 @@ have to be updated for changes to the rules above, or to support more deeply nes flex-direction: row; justify-content: space-between; gap: 6px; - padding-right: 3px; + padding-right: var(--vscode-spacing-size20); height: 22px; line-height: 22px; cursor: pointer; @@ -1439,7 +1440,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview > .working-set-title { color: var(--vscode-descriptionForeground); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1455,8 +1456,8 @@ have to be updated for changes to the rules above, or to support more deeply nes display: inline-flex; gap: 4px; margin-left: 6px; - font-size: 11px; - font-weight: 500; + font-size: var(--vscode-fontSize-label2); + font-weight: var(--vscode-fontWeight-semiBold); } .interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview .working-set-line-counts .working-set-lines-added { @@ -1471,7 +1472,7 @@ have to be updated for changes to the rules above, or to support more deeply nes margin: 0 6px; display: inline-flex; gap: 4px; - font-size: 11px; + font-size: var(--vscode-fontSize-label2); } .interactive-session .chat-editing-session .chat-editing-session-list .working-set-line-counts .working-set-lines-added { @@ -1485,8 +1486,8 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editing-session .working-set-title { .monaco-button { - padding: 4px 6px 4px 0px; - border-radius: 2px; + padding: 2px 6px 2px 0px; + border-radius: var(--vscode-cornerRadius-xSmall); border: none; background-color: unset; color: var(--vscode-descriptionForeground); @@ -1512,7 +1513,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions { - margin: 3px 0px; + margin: var(--vscode-spacing-size40) 0; overflow: hidden; } @@ -1537,12 +1538,12 @@ have to be updated for changes to the rules above, or to support more deeply nes display: flex; align-items: center; justify-content: center; - font-size: 16px; + font-size: var(--vscode-codiconFontSize); color: var(--vscode-descriptionForeground); background-color: transparent; border: none; padding: 0; - border-radius: 5px; + border-radius: var(--vscode-cornerRadius-small); cursor: pointer; } @@ -1569,7 +1570,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button.codicon { cursor: pointer; padding: 2px; - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); display: inline-flex; } @@ -1600,19 +1601,19 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button-dropdown.sidebyside-button { align-items: center; - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); } .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button-dropdown.sidebyside-button .monaco-button, .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button-dropdown.sidebyside-button .monaco-button:hover { - border-right: 1px solid transparent; + border-right: var(--vscode-strokeThickness) solid transparent; background-color: unset; padding: 0; } .interactive-session .chat-editing-session .chat-editing-session-toolbar-actions .monaco-button-dropdown.sidebyside-button > .separator { - border-right: 1px solid transparent; - padding: 0 1px; + border-right: var(--vscode-strokeThickness) solid transparent; + padding: 0 var(--vscode-spacing-size20); height: 22px; } @@ -1637,9 +1638,9 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget { - padding: 4px 3px 4px 3px; + padding: var(--vscode-spacing-size40); box-sizing: border-box; - border: 1px solid var(--vscode-input-border, transparent); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); background-color: var(--vscode-editor-background); border-bottom: none; border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; @@ -1671,11 +1672,11 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .todo-list-title-section { - padding-left: 3px; + padding-left: var(--vscode-spacing-size40); display: flex; align-items: center; flex: 1; - font-size: 12px; + font-size: var(--vscode-fontSize-label1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1683,7 +1684,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .todo-list-title-section .codicon { - font-size: 16px; + font-size: var(--vscode-codiconFontSize); line-height: 22px; flex-shrink: 0; } @@ -1692,7 +1693,7 @@ have to be updated for changes to the rules above, or to support more deeply nes padding-right: 2px; display: flex; align-items: center; - height: 18px; + height: 22px; opacity: 1; } @@ -1701,13 +1702,15 @@ have to be updated for changes to the rules above, or to support more deeply nes border-color: transparent; color: var(--vscode-foreground); cursor: pointer; - height: 16px; - padding: 3px; - border-radius: 2px; + box-sizing: border-box; + width: 22px; + height: 22px; + min-width: 22px; + padding: 0; + border-radius: var(--vscode-cornerRadius-xSmall); display: inline-flex; align-items: center; justify-content: center; - min-width: unset; } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover { @@ -1715,24 +1718,24 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button:focus { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); outline-offset: 1px; } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button .codicon { - font-size: 10px; + font-size: var(--vscode-codiconFontSize-compact); color: var(--vscode-foreground); } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .expand-icon { flex-shrink: 0; - margin-right: 3px; + margin-right: var(--vscode-spacing-size40); } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-title { - font-weight: normal; - font-size: 12px; + font-weight: var(--vscode-fontWeight-regular); + font-size: var(--vscode-fontSize-label1); display: flex; align-items: center; overflow: hidden; @@ -1767,14 +1770,14 @@ have to be updated for changes to the rules above, or to support more deeply nes scroll-snap-align: start; min-height: 22px; font-size: var(--vscode-chat-font-size-body-m); - padding: 0px 3px; - border-radius: 2px; + padding: 0 var(--vscode-spacing-size40); + border-radius: var(--vscode-cornerRadius-xSmall); cursor: pointer; } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item:focus { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); outline-offset: -1px; } @@ -1784,7 +1787,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item > .todo-status-icon.codicon { flex-shrink: 0; - font-size: 16px; + font-size: var(--vscode-codiconFontSize); } .interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-content { @@ -1862,7 +1865,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editor-container .monaco-editor .chat-prompt-spinner { transform-origin: 6px 6px; - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor, @@ -1944,7 +1947,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .codicon { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } } @@ -1955,9 +1958,10 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label { - height: 16px; - padding: 3px 8px; - border-radius: 4px; + box-sizing: border-box; + height: 22px; + padding: 0 var(--vscode-spacing-size80); + border-radius: var(--vscode-cornerRadius-small); display: flex; align-items: center; color: var(--vscode-icon-foreground); @@ -1980,7 +1984,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .monaco-workbench .interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label .codicon-chevron-down { - font-size: 10px; + font-size: var(--vscode-codiconFontSize-compact); margin-left: 4px; opacity: 0.75; } @@ -1997,12 +2001,12 @@ have to be updated for changes to the rules above, or to support more deeply nes position: absolute; bottom: 0; right: 0; - font-size: 12px !important; + font-size: var(--vscode-codiconFontSize-compact) !important; color: var(--vscode-problemsWarningIcon-foreground); background: var(--vscode-input-background); width: fit-content; height: fit-content; - border-radius: 100%; + border-radius: var(--vscode-cornerRadius-circle); } .interactive-session .chat-input-toolbars > .chat-input-toolbar { @@ -2035,7 +2039,7 @@ have to be updated for changes to the rules above, or to support more deeply nes align-items: center; margin-left: 4px; flex-shrink: 0; - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); .codicon.codicon-info { color: var(--vscode-problemsInfoIcon-foreground) !important; @@ -2051,7 +2055,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .codicon { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } } @@ -2069,17 +2073,19 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label, .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label { - height: 16px; - padding: 3px 6px; + box-sizing: border-box; + height: 22px; + padding: 0 var(--vscode-spacing-size60); display: flex; align-items: center; color: var(--vscode-icon-foreground); } .interactive-session .chat-secondary-input-toolbar .chat-sessionPicker-item .action-label { - height: 16px; - padding: 3px 8px; - border-radius: 4px; + box-sizing: border-box; + height: 22px; + padding: 0 var(--vscode-spacing-size80); + border-radius: var(--vscode-cornerRadius-small); display: flex; align-items: center; color: var(--vscode-icon-foreground); @@ -2126,7 +2132,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .monaco-workbench .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down, .monaco-workbench .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down, .monaco-workbench .interactive-session .chat-secondary-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down { - font-size: 10px; + font-size: var(--vscode-codiconFontSize-compact); margin-left: 4px; opacity: 0.75; } @@ -2199,7 +2205,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .monaco-editor .chat-editing-last-edit { background-color: var(--vscode-editor-rangeHighlightBackground); box-sizing: border-box; - border: 1px solid var(--vscode-editor-rangeHighlightBorder); + border: var(--vscode-strokeThickness) solid var(--vscode-editor-rangeHighlightBorder); } @property --chat-editing-last-edit-shift { @@ -2253,7 +2259,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-response .interactive-response-error-details .codicon { - margin-top: 1px; + margin-top: var(--vscode-spacing-size20); } .chat-used-context-list .codicon-warning { @@ -2359,10 +2365,10 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-attached-context .chat-attached-context-attachment { display: flex; overflow: hidden; - font-size: 11px; + font-size: var(--vscode-fontSize-label2); padding: 0 4px 0 0; - border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent)); - border-radius: 4px; + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent)); + border-radius: var(--vscode-cornerRadius-small); height: 18px; max-width: 100%; width: fit-content; @@ -2380,11 +2386,11 @@ have to be updated for changes to the rules above, or to support more deeply nes position: absolute; bottom: 0; left: 12px; - font-size: 12px !important; + font-size: var(--vscode-codiconFontSize-compact) !important; background: var(--vscode-input-background); width: fit-content; height: fit-content; - border-radius: 100%; + border-radius: var(--vscode-cornerRadius-circle); pointer-events: none; &.chat-mcp-state-new { @@ -2410,10 +2416,10 @@ have to be updated for changes to the rules above, or to support more deeply nes align-items: center; margin-top: -2px; padding-right: 2px; - padding-left: 3px; + padding-left: var(--vscode-spacing-size40); height: calc(100% + 4px); outline-offset: -4px; - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-add-compact { @@ -2462,7 +2468,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .codicon { - font-size: 14px; + font-size: var(--vscode-codiconFontSize-compact); } .interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-icon-label-iconpath.codicon { @@ -2554,7 +2560,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session-followups .monaco-button .codicon { margin-left: 0; - margin-top: 1px; + margin-top: var(--vscode-spacing-size20); } .interactive-item-container .interactive-response-followups .monaco-button { @@ -2568,7 +2574,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups .monaco-button { display: block; color: var(--vscode-textLink-foreground); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); /* clamp to max 3 lines */ display: -webkit-box; @@ -2580,7 +2586,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups code { font-family: var(--monaco-monospace-font); - font-size: 11px; + font-size: var(--vscode-fontSize-body2); } .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups .monaco-button .codicon-sparkle { @@ -2605,7 +2611,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .quick-input-widget .interactive-session .interactive-input-part { padding: 8px 6px 8px 6px; - margin: 0 3px; + margin: 0 var(--vscode-spacing-size40); } .quick-input-widget .interactive-session .interactive-input-part .chat-input-toolbars .monaco-toolbar, @@ -2614,7 +2620,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .quick-input-widget .interactive-session .interactive-input-part .chat-input-toolbars { - margin-bottom: 1px; + margin-bottom: var(--vscode-spacing-size20); align-items: flex-end; } @@ -2624,8 +2630,8 @@ have to be updated for changes to the rules above, or to support more deeply nes } .quick-input-widget .interactive-list { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-bottom-right-radius: var(--vscode-cornerRadius-medium); + border-bottom-left-radius: var(--vscode-cornerRadius-medium); } .quick-input-widget .interactive-response { @@ -2635,7 +2641,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .quick-input-widget .interactive-session .disclaimer { margin: 8px 12px; color: var(--vscode-descriptionForeground); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); a { color: var(--vscode-textLink-foreground); @@ -2666,7 +2672,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container .value .interactive-response-placeholder-content { color: var(--vscode-editorGhostText-foreground); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); margin-bottom: 16px; } @@ -2682,7 +2688,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-used-context-list .monaco-list { border: none; - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); width: auto; } @@ -2694,8 +2700,8 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container .chat-resource-widget, .interactive-item-container .chat-agent-widget .monaco-button { - border-radius: 4px; - padding: 1px 3px; + border-radius: var(--vscode-cornerRadius-small); + padding: var(--vscode-spacing-size20) var(--vscode-spacing-size40); } .interactive-item-container .chat-agent-command { @@ -2704,8 +2710,8 @@ have to be updated for changes to the rules above, or to support more deeply nes display: inline-flex; align-items: center; margin-right: 0.5ch; - border-radius: 4px; - padding: 0 0 0 3px; + border-radius: var(--vscode-cornerRadius-small); + padding: 0 0 0 var(--vscode-spacing-size40); } .interactive-item-container .chat-agent-command > .monaco-button { @@ -2715,8 +2721,8 @@ have to be updated for changes to the rules above, or to support more deeply nes cursor: pointer; padding: 0 2px; margin-left: 2px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: var(--vscode-cornerRadius-small); + border-bottom-right-radius: var(--vscode-cornerRadius-small); } .interactive-item-container .chat-agent-command > .monaco-button:hover { @@ -2730,9 +2736,9 @@ have to be updated for changes to the rules above, or to support more deeply nes /* Chat artifacts widget — collapsible list of session artifacts */ .chat-artifacts-widget { - padding: 4px 3px 4px 3px; + padding: var(--vscode-spacing-size40); box-sizing: border-box; - border: 1px solid var(--vscode-input-border, transparent); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); background-color: var(--vscode-editor-background); border-bottom: none; border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; @@ -2765,11 +2771,11 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-artifacts-widget .chat-artifacts-expand .chat-artifacts-title-section { - padding-left: 3px; + padding-left: var(--vscode-spacing-size40); display: flex; align-items: center; flex: 1; - font-size: 12px; + font-size: var(--vscode-fontSize-label1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -2777,10 +2783,10 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-artifacts-widget .chat-artifacts-expand .chat-artifacts-title-section .codicon { - font-size: 16px; + font-size: var(--vscode-codiconFontSize); line-height: 22px; flex-shrink: 0; - margin-right: 3px; + margin-right: var(--vscode-spacing-size40); } .chat-artifacts-widget .chat-artifacts-list { @@ -2807,7 +2813,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-artifacts-widget .chat-artifacts-list-icon { - font-size: 14px; + font-size: var(--vscode-codiconFontSize-compact); display: flex; align-items: center; } @@ -2816,7 +2822,7 @@ have to be updated for changes to the rules above, or to support more deeply nes overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 13px; + font-size: var(--vscode-fontSize-body1); flex-shrink: 1; min-width: 0; } @@ -2825,7 +2831,7 @@ have to be updated for changes to the rules above, or to support more deeply nes overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 12px; + font-size: var(--vscode-fontSize-label1); opacity: 0.7; margin-left: 6px; flex-shrink: 0; @@ -2848,7 +2854,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-artifacts-widget .chat-artifacts-list-actions .action-item .action-label { padding: 2px; - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); cursor: pointer; } @@ -2861,30 +2867,38 @@ have to be updated for changes to the rules above, or to support more deeply nes flex-direction: column; flex-wrap: wrap; align-items: center; - border-radius: 4px; - border: 1px solid var(--vscode-chat-requestBorder); + border-radius: var(--vscode-cornerRadius-small); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); .chat-view-changes-icon { - padding: 3px; + box-sizing: border-box; + width: 22px; + height: 22px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; float: right; cursor: pointer; } .chat-view-changes-icon:hover { - border-radius: 5px; + border-radius: var(--vscode-cornerRadius-small); background-color: var(--vscode-toolbar-hoverBackground); } .insertions-and-deletions { display: flex; - margin-right: 5px; - font-size: 12px; + margin-right: var(--vscode-spacing-size60); + font-size: var(--vscode-fontSize-label1); } .checkpoint-file-changes-summary-header { - padding: 3px 3px 3px 3px; + min-height: 22px; + padding: 0 var(--vscode-spacing-size40); width: 100%; display: flex; + align-items: center; box-sizing: border-box; justify-content: space-between; } @@ -2906,7 +2920,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .checkpoint-file-changes-summary-header .chat-file-changes-label .monaco-button .codicon { - font-size: 16px; + font-size: var(--vscode-codiconFontSize); } .chat-summary-list { @@ -2926,19 +2940,19 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-summary-list .monaco-scrollable-element { - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); } .insertions { color: var(--vscode-chat-linesAddedForeground); - font-weight: bold; - padding-left: 5px; - padding-right: 5px; + font-weight: var(--vscode-fontWeight-semiBold); + padding-left: var(--vscode-spacing-size60); + padding-right: var(--vscode-spacing-size60); } .deletions { color: var(--vscode-chat-linesRemovedForeground); - font-weight: bold; + font-weight: var(--vscode-fontWeight-semiBold); } } @@ -3024,7 +3038,7 @@ have to be updated for changes to the rules above, or to support more deeply nes border-radius: var(--vscode-cornerRadius-small); color: var(--vscode-descriptionForeground); font-size: var(--vscode-chat-font-size-body-s); - font-weight: normal; + font-weight: var(--vscode-fontWeight-regular); line-height: 1.5em; cursor: pointer; list-style: none; @@ -3066,7 +3080,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .insertions, .deletions { - font-weight: normal; + font-weight: var(--vscode-fontWeight-regular); padding: var(--vscode-spacing-sizeNone); } @@ -3272,22 +3286,22 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-used-context-list, .chat-quota-error-widget, .chat-rate-limited-widget { - border: 1px solid var(--vscode-chat-requestBorder); - border-radius: 4px; + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + border-radius: var(--vscode-cornerRadius-small); margin-bottom: 8px; } .interactive-response-progress-tree, .interactive-session .chat-summary-list, .interactive-session .chat-used-context-list { - padding: 4px 3px; + padding: var(--vscode-spacing-size40); .monaco-icon-label { - padding: 0px 3px; + padding: 0 var(--vscode-spacing-size40); gap: 2px; &::before { - width: var(--vscode-chat-font-size-body-s); + width: var(--vscode-codiconFontSize); padding-right: 0; } } @@ -3296,7 +3310,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-editing-session-list { .monaco-icon-label { - padding: 0px 3px; + padding: 0 var(--vscode-spacing-size20) 0 var(--vscode-spacing-size40); } .monaco-icon-label.excluded { @@ -3309,7 +3323,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-summary-list .monaco-list .monaco-list-row { - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); } .interactive-session .chat-summary-list .monaco-list .monaco-list-row:hover { @@ -3317,7 +3331,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-used-context-list .monaco-list .monaco-list-row { - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); } .interactive-session .chat-file-changes-label { @@ -3325,7 +3339,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-session .chat-used-context-label { - font-size: 13px; + font-size: var(--vscode-fontSize-body1); font-family: var(--vscode-chat-font-family, inherit); color: var(--vscode-descriptionForeground); user-select: none; @@ -3348,7 +3362,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-used-context-label .monaco-button { width: fit-content; border: none; - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); gap: 0; text-align: initial; justify-content: initial; @@ -3391,12 +3405,12 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session .chat-file-changes-label .monaco-text-button:focus-visible, .interactive-session .chat-used-context-label .monaco-text-button:focus-visible { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); } .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-codiconFontSize-compact); color: var(--vscode-icon-foreground) !important; } @@ -3411,7 +3425,7 @@ have to be updated for changes to the rules above, or to support more deeply nes /* Hover chevron indicator for collapsible parts */ .chat-collapsible-hover-chevron { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); opacity: 0; transform: rotate(0deg); transform-origin: center; @@ -3445,18 +3459,18 @@ have to be updated for changes to the rules above, or to support more deeply nes display: flex; align-items: center; gap: 4px; - margin: 0 0 14px 0; - font-size: 13px; + margin: 0 0 var(--vscode-spacing-size160) 0; + font-size: var(--vscode-fontSize-body1); /* Tool calls transition from a progress to a collapsible list part, which needs to have this top padding. The working progress also can be replaced by a tool progress part. So align this padding so the text doesn't appear to shift. */ padding-top: 2px; > .codicon[class*='codicon-'] { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); &::before { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } } @@ -3556,7 +3570,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container .chat-command-button .monaco-button .codicon { margin-left: 0; - margin-top: 1px; + margin-top: var(--vscode-spacing-size20); } .chat-code-citation-label { @@ -3621,7 +3635,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-attached-context-hover .chat-attached-context-url-separator { - border-top: 1px solid var(--vscode-chat-requestBorder); + border-top: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); left: 0; right: 0; position: absolute; @@ -3650,7 +3664,7 @@ have to be updated for changes to the rules above, or to support more deeply nes max-height: 500px; box-sizing: border-box; padding-right: 10px; - padding-bottom: 15px; + padding-bottom: var(--vscode-spacing-size160); } .chat-element-hover .chat-element-hover-section { @@ -3658,7 +3672,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-element-hover .chat-element-hover-section + .chat-element-hover-section { - border-top: 1px solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.2)); + border-top: var(--vscode-strokeThickness) solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.2)); } .chat-element-hover .chat-element-hover-screenshot .chat-attached-context-hover { @@ -3682,8 +3696,8 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-element-hover .chat-element-hover-header { - font-size: 11px; - font-weight: 600; + font-size: var(--vscode-fontSize-label2); + font-weight: var(--vscode-fontWeight-semiBold); text-transform: uppercase; color: var(--vscode-descriptionForeground); letter-spacing: 0.5px; @@ -3694,9 +3708,9 @@ have to be updated for changes to the rules above, or to support more deeply nes margin: 0; padding: 4px 6px; background: var(--vscode-textCodeBlock-background); - border-radius: 3px; + border-radius: var(--vscode-cornerRadius-medium); font-family: var(--monaco-monospace-font); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); line-height: 1.5; white-space: pre; overflow: hidden; @@ -3724,14 +3738,14 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-element-hover .chat-element-hover-label { font-family: var(--monaco-monospace-font); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); color: var(--vscode-debugTokenExpression-name); white-space: nowrap; } .chat-element-hover .chat-element-hover-value { font-family: var(--monaco-monospace-font); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); color: var(--vscode-editor-foreground); word-break: break-all; display: flex; @@ -3743,14 +3757,14 @@ have to be updated for changes to the rules above, or to support more deeply nes display: inline-block; width: 12px; height: 12px; - border: 1px solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.4)); - border-radius: 2px; + border: var(--vscode-strokeThickness) solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.4)); + border-radius: var(--vscode-cornerRadius-xSmall); flex-shrink: 0; } .chat-element-hover .chat-element-hover-text { font-family: var(--monaco-monospace-font); - font-size: 12px; + font-size: var(--vscode-fontSize-label1); color: var(--vscode-editor-foreground); white-space: pre-wrap; word-break: break-word; @@ -3763,7 +3777,7 @@ have to be updated for changes to the rules above, or to support more deeply nes margin-top: 6px; color: var(--vscode-textLink-foreground); cursor: pointer; - font-size: 12px; + font-size: var(--vscode-fontSize-label1); text-decoration: none; } @@ -3774,19 +3788,19 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-attached-context-attachment .chat-attached-context-pill { - font-size: 12px; + font-size: var(--vscode-fontSize-label1); display: inline-flex; align-items: center; padding: 2px 0 2px 0px; - border-radius: 2px; - margin-right: 1px; + border-radius: var(--vscode-cornerRadius-xSmall); + margin-right: var(--vscode-spacing-size20); user-select: none; outline: none; border: none; .codicon.codicon-file-media, .codicon.codicon-warning { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); margin-right: 2px; } } @@ -3800,9 +3814,9 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-attached-context-attachment .chat-attached-context-pill-image { width: 13px; height: 13px; - border-radius: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); object-fit: cover; - margin-right: 3px; + margin-right: var(--vscode-spacing-size40); } .chat-attached-context-attachment .chat-attached-context-custom-text { @@ -3841,7 +3855,7 @@ have to be updated for changes to the rules above, or to support more deeply nes box-sizing: border-box; width: 88px; height: 88px; - border-radius: 8px; + border-radius: var(--vscode-cornerRadius-large); padding: 0; background-color: var(--vscode-input-background); border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, transparent)); @@ -3859,7 +3873,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-pill-image { width: 100%; height: 100%; - border-radius: 7px; + border-radius: calc(var(--vscode-cornerRadius-large) - var(--vscode-strokeThickness)); margin: 0; object-fit: cover; } @@ -3973,7 +3987,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-session:not(.chat-widget > .interactive-session) { .interactive-item-container { - padding: 5px 16px; + padding: var(--vscode-spacing-size60) var(--vscode-spacing-size160); } .interactive-item-container.interactive-request { @@ -4001,12 +4015,12 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container.interactive-request .value .rendered-markdown { background-color: var(--vscode-chat-requestBubbleBackground); - border-radius: var(--vscode-cornerRadius-xLarge); + border-radius: var(--vscode-cornerRadius-medium); padding: 8px 12px; max-width: 90%; margin-left: auto; width: fit-content; - margin-bottom: 5px; + margin-bottom: var(--vscode-spacing-size60); position: relative; } @@ -4039,7 +4053,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .hc-black .interactive-item-container.interactive-request .value .rendered-markdown, .hc-light .interactive-item-container.interactive-request .value .rendered-markdown { - border: 1px dotted var(--vscode-focusBorder); + border: var(--vscode-strokeThickness) dotted var(--vscode-focusBorder); } .interactive-item-container.interactive-request .value .rendered-markdown > :first-child { @@ -4082,7 +4096,7 @@ have to be updated for changes to the rules above, or to support more deeply nes width: fit-content; justify-content: flex-end; margin-left: auto; - padding-bottom: 5px; + padding-bottom: var(--vscode-spacing-size60); } .interactive-item-container.interactive-request .value > .chat-request-attachment-cards { @@ -4143,7 +4157,7 @@ have to be updated for changes to the rules above, or to support more deeply nes justify-content: center; background: transparent; color: var(--vscode-descriptionForeground); - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-small); z-index: 1; transition: opacity 80ms ease-out; } @@ -4162,7 +4176,7 @@ have to be updated for changes to the rules above, or to support more deeply nes box-sizing: border-box; width: 88px; height: 88px; - border-radius: 8px; + border-radius: var(--vscode-cornerRadius-large); padding: 0; background-color: var(--vscode-input-background); border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, transparent)); @@ -4195,7 +4209,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-pill-image { width: 100%; height: 100%; - border-radius: 7px; + border-radius: calc(var(--vscode-cornerRadius-large) - var(--vscode-strokeThickness)); margin: 0; object-fit: cover; } @@ -4216,11 +4230,11 @@ have to be updated for changes to the rules above, or to support more deeply nes min-width: 28px !important; margin: 0 !important; padding: 0 !important; - border-radius: 50%; + border-radius: var(--vscode-cornerRadius-circle); background-color: var(--vscode-input-background); color: var(--vscode-foreground); - border: 1px solid var(--vscode-input-border, var(--vscode-contrastBorder, transparent)); - box-shadow: 0 1px 4px rgb(0 0 0 / 45%); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, var(--vscode-contrastBorder, transparent)); + box-shadow: 0 1px 4px var(--vscode-widget-shadow); align-items: center; justify-content: center; transition: opacity 80ms ease-out; @@ -4228,7 +4242,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-download-button .codicon { color: var(--vscode-foreground) !important; - font-size: 16px; + font-size: var(--vscode-codiconFontSize); margin: 0 !important; } @@ -4258,9 +4272,9 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-item-container .header .detail .codicon-check { - margin-right: 7px; + margin-right: var(--vscode-spacing-size80); vertical-align: middle; - font-size: 11px; + font-size: var(--vscode-codiconFontSize-compact); display: none; } @@ -4292,10 +4306,10 @@ have to be updated for changes to the rules above, or to support more deeply nes overflow: hidden; z-index: 100; background-color: var(--vscode-interactive-result-editor-background-color, var(--vscode-editor-background)); - border: 1px solid var(--vscode-chat-requestBorder); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); top: -13px; right: 20px; - border-radius: 3px; + border-radius: var(--vscode-cornerRadius-large); height: 26px; } @@ -4316,13 +4330,18 @@ have to be updated for changes to the rules above, or to support more deeply nes } .request-hover.expanded .actions-container { - padding: 0 3px; + padding: 0 var(--vscode-spacing-size40); } .request-hover:not(.expanded) .actions-container { .action-label { + box-sizing: border-box; + width: 22px; + height: 22px; margin: 4px 2px 0; - padding: 3px 3px; + padding: 0; + align-items: center; + justify-content: center; } } @@ -4344,7 +4363,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .checkpoint-line-left, .checkpoint-line-right { flex: 1; - height: 1px; + height: var(--vscode-strokeThickness); background-color: var(--vscode-chat-requestBorder, var(--vscode-input-background)); } @@ -4367,18 +4386,21 @@ have to be updated for changes to the rules above, or to support more deeply nes } .monaco-toolbar .action-label { - font-size: 12px; + box-sizing: border-box; + width: fit-content; + min-width: 22px; + height: 22px; + font-size: var(--vscode-fontSize-label1); line-height: 18px; color: var(--vscode-descriptionForeground); - border: 1px solid transparent; + border: var(--vscode-strokeThickness) solid transparent; background-color: transparent; - padding: 1px 5px; - margin-right: 5px; + padding: 0 var(--vscode-spacing-size60); + margin-right: var(--vscode-spacing-size60); } .monaco-toolbar .action-label.codicon.codicon-repo-forked { - width: fit-content; - padding: 2px 5px; + padding: 0 var(--vscode-spacing-size60); } .monaco-toolbar .actions-container > .action-item:last-child .action-label { @@ -4393,7 +4415,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .monaco-toolbar .actions-container > .action-item:not(:first-child):has(.action-label.codicon.codicon-repo-forked)::before { content: '\00B7'; - font-size: 12px; + font-size: var(--vscode-fontSize-label1); line-height: 18px; color: var(--vscode-descriptionForeground); } @@ -4407,7 +4429,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .monaco-toolbar .action-item.chat-restore-checkpoint-item { display: flex; align-items: stretch; - margin-left: 5px; + margin-left: var(--vscode-spacing-size60); } .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming { @@ -4415,7 +4437,7 @@ have to be updated for changes to the rules above, or to support more deeply nes background-color: var(--vscode-sideBar-background); border-radius: var(--vscode-cornerRadius-medium); overflow: hidden; - margin-right: 5px; + margin-right: var(--vscode-spacing-size60); } .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child, @@ -4429,7 +4451,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child { align-items: center; - padding: 1px 10px; + padding: 0 var(--vscode-spacing-size100); background: linear-gradient(90deg, var(--vscode-foreground) 0%, var(--vscode-foreground) 30%, @@ -4469,7 +4491,7 @@ have to be updated for changes to the rules above, or to support more deeply nes align-self: stretch; margin-right: 0; margin-left: 0; - padding: 0 5px; + padding: 0 var(--vscode-spacing-size60); } .monaco-toolbar .action-label.chat-restore-checkpoint-cancel.hidden { @@ -4486,18 +4508,20 @@ have to be updated for changes to the rules above, or to support more deeply nes margin-top: 10px; .checkpoint-label-text { - font-size: 12px; + box-sizing: border-box; + height: 22px; + font-size: var(--vscode-fontSize-label1); line-height: 18px; color: var(--vscode-descriptionForeground); display: flex; align-items: center; flex-shrink: 0; - padding: 1px 5px; - border: 1px solid transparent; + padding: 0 var(--vscode-spacing-size60); + border: var(--vscode-strokeThickness) solid transparent; } .checkpoint-dot-separator { - font-size: 12px; + font-size: var(--vscode-fontSize-label1); line-height: 18px; color: var(--vscode-descriptionForeground); flex-shrink: 0; @@ -4527,7 +4551,7 @@ have to be updated for changes to the rules above, or to support more deeply nes div[data-index="0"] .monaco-tl-contents { .interactive-item-container.interactive-request:not(.editing) { - padding-top: 19px; + padding-top: var(--vscode-spacing-size200); } .request-hover { @@ -4539,7 +4563,7 @@ have to be updated for changes to the rules above, or to support more deeply nes outline: none !important; .interactive-item-container .value .rendered-markdown { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); } } @@ -4549,7 +4573,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .interactive-request.editing-input .rendered-markdown { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); } .interactive-request.editing { @@ -4579,7 +4603,7 @@ have to be updated for changes to the rules above, or to support more deeply nes margin: 8px 0; & .monaco-button.monaco-dropdown-button { - padding: 0 3px; + padding: 0 var(--vscode-spacing-size40); } } @@ -4664,8 +4688,8 @@ have to be updated for changes to the rules above, or to support more deeply nes padding: 0 4px 0 2px; gap: 4px; cursor: pointer; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: var(--vscode-cornerRadius-small); + border-bottom-right-radius: var(--vscode-cornerRadius-small); box-sizing: border-box; } @@ -4674,13 +4698,13 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown:focus { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); outline-offset: -1px; } /* Chevron icon in dropdown container */ .chat-welcome-view-suggested-prompt .codicon-chevron-down.dropdown-chevron { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); opacity: 0.7; flex-shrink: 0; } @@ -4692,11 +4716,11 @@ have to be updated for changes to the rules above, or to support more deeply nes /* Vertical separator between label and chevron in suggested next actions */ .chat-suggest-next-dropdown > .chat-suggest-next-separator { - width: 1px; + width: var(--vscode-strokeThickness); height: 16px; background-color: currentColor; opacity: 0.5; - border-radius: 1px; + border-radius: var(--vscode-cornerRadius-circle); align-self: center; flex-shrink: 0; } @@ -4713,7 +4737,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } .chat-attachments-show-more-button:focus { - outline: 1px solid var(--vscode-focusBorder); + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); outline-offset: -1px; } @@ -4788,7 +4812,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .interactive-item-container.pending-divider .pending-divider-label { font-size: var(--vscode-chat-font-size-body-xs); - font-weight: 500; + font-weight: var(--vscode-fontWeight-semiBold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--vscode-descriptionForeground);