Conversation
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: @TylerLeonhardtMatched files:
@rzhao271Matched files:
|
There was a problem hiding this comment.
Pull request overview
This PR modernizes and standardizes the visual design of buttons and inputs across VS Code by establishing consistent border radius, padding, and sizing conventions. The changes consolidate styling into base components and introduce a new small button variant for compact UI surfaces.
Key Changes
- Unified border radius to 4px for all buttons, inputs, and select boxes (replacing inconsistent 2px/3px/5px values)
- Removed ~30 CSS padding overrides across the codebase, relying on new base button styles (4px 8px padding, 12px font, 16px line-height)
- Added
smallbutton variant (3px 6px padding, 11px font, 14px line-height) primarily used in chat/Copilot surfaces - Polished editor toolbar widgets (Keep/Undo buttons) with refined spacing and visual hierarchy through primary/secondary button states
- Updated dark_modern theme with refined button colors (transparent secondary background, adjusted borders)
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/vs/base/browser/ui/button/button.css |
Established base button styles with 4px border radius, standardized padding/sizing, added small variant |
src/vs/base/browser/ui/button/button.ts |
Added small option to IButtonOptions interface and applied class toggle |
src/vs/base/browser/ui/inputbox/inputBox.css |
Updated border radius from 2px to 4px |
src/vs/base/browser/ui/selectBox/*.css |
Unified border radius to 4px (from 2px/3px/5px) |
src/vs/base/browser/ui/dialog/dialog.css |
Updated border radius, removed padding overrides, standardized dropdown button padding |
src/vs/platform/actions/browser/buttonbar.ts |
Added small option to WorkbenchButtonBar and propagated to button creation |
src/vs/platform/quickinput/browser/media/quickInput.css |
Removed button sizing overrides |
src/vs/workbench/browser/parts/*/media/*.css |
Removed padding/sizing overrides for editor placeholder and notifications |
src/vs/workbench/contrib/bulkEdit/browser/preview/bulkEdit.css |
Removed padding override |
src/vs/workbench/contrib/chat/browser/media/*.css |
Removed multiple padding/sizing overrides, applied small variant |
src/vs/workbench/contrib/chat/browser/chatEditing/*.ts |
Added primary class to Accept action buttons for visual hierarchy |
src/vs/workbench/contrib/chat/browser/chatEditing/media/*.css |
Refined toolbar styling with 6px border radius, gap spacing, primary button states, icon button dimensions |
src/vs/workbench/contrib/chat/browser/chatInputPart.ts |
Applied small variant to chat editing widget toolbar |
src/vs/workbench/contrib/chat/browser/chatContentParts/*.ts |
Applied small variant to confirmation widget buttons |
src/vs/workbench/contrib/chat/browser/chatContentParts/media/*.css |
Removed padding overrides, updated gap spacing |
src/vs/workbench/contrib/chat/browser/chatManagement/media/chatModelsWidget.css |
Added specific padding for add model button |
src/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/*.css |
Updated border radius to 4px |
src/vs/workbench/contrib/comments/browser/media/review.css |
Removed padding overrides |
src/vs/workbench/contrib/comments/browser/commentFormActions.ts |
Applied small variant to comment form buttons |
src/vs/workbench/contrib/issue/browser/media/issueReporter.css |
Removed padding and font-size overrides |
src/vs/workbench/contrib/preferences/browser/media/settingsWidgets.css |
Removed padding override |
src/vs/workbench/contrib/scm/browser/media/scm.css |
Updated border radius to 4px, added overflow-guard border radius fix |
src/vs/workbench/contrib/userDataProfile/browser/media/*.css |
Removed padding override |
src/vs/workbench/contrib/welcomeGettingStarted/browser/media/*.css |
Removed sizing and padding overrides |
src/vs/workbench/contrib/workspace/browser/media/*.css |
Removed padding override, updated dropdown button padding |
src/vs/editor/contrib/rename/browser/renameWidget.css |
Updated border radius to 4px |
extensions/theme-defaults/themes/dark_modern.json |
Updated button theme colors (border, secondary background/hover) |
src/vs/workbench/contrib/chat/browser/media/chatEditorController.css
Outdated
Show resolved
Hide resolved
…er.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…d padding for improved UI consistency
mrleemurray
force-pushed
the
ddossett/polish-inputs
branch
from
98dc44b to
b485ef1
Compare
|
Looking great! @bpasero what do you think? Now that we're in endgame should we wait to merge this in the next iteration? |
|
@mrleemurray as part of this PR or a new PR? Lad and me will do a code review too, as the change is quite large and also touches TS. |
|
@bpasero a different PR - I want to tackle font sizes also |
|
I had considered introducing a var for these. I was hoping that I could strip enough overrides that it wouldn't be quite as necessary and that the hardcoded value at the component's root stylesheet. would be fine. But there are still a fair number of special cases (dropdown buttons, editors-as-text-inputs) that it wasn't that straightforward. Would be greta to have a general purpose radius or set of them to use everywhere though. Sounds like you're already thinking about it @mrleemurray? |
|
@daviddossett yes, I am planning to implement a token system for size related values - font sizes, corner radii, strokes, etc. hopefully in the next iteration - which will be exposed across the workbench, like the color tokens. |
bpasero
left a comment
bpasero
left a comment
There was a problem hiding this comment.
This change is mostly minimal but has substance in areas I would like to defer to others to review.
- @jrieken for
src/vs/workbench/contrib/chat/browser/media/chatEditingEditorOverlay.cssandsrc/vs/workbench/contrib/chat/browser/media/chatEditorController.css
Also fyi @sandy081 for some changes impact your areas.
For me this change is worth a try in insiders, I did not test each and everything, so we need selfhosting.
|
@daviddossett I've pulled in changes that include the new size token registry - see #283800 You can add new corner radii, font size & other typographic tokens. Currently padding & margin tokens are not implemented as unifying them across the entire UI proved to be incredibly complicated... |
|
@mrleemurray should we try to get this in this week? Looks like quite some merge conflicts already by now. |
|
Yes I was planning on doing this after Dec release - will focus on this today |
|
@bpasero I've resolved the conflicts - ready for review |
* Update default styles and add small variant * Strip other instances where default styles should apply * Strip overrides from review/comment UI * Update some buttons in chat * Polish floating keep/undo action bars * One off the add model button for now * Update secondary button styles + common button border for dark modern * Use small variant for "keep | undo" chat button bar * Strip overrides from chat confirmations buttons * Missed one borde radius override * Fix small variant * Align keep/undo editor widgets with small button variant and icon button sizes * Use same border radius for inputs * Update src/vs/workbench/contrib/chat/browser/media/chatEditorController.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/vs/base/browser/ui/dialog/dialog.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update extensionEditor.css to adjust font weight and border radius for action items * Update quickInput.css and titlebarpart.css to adjust border radius and padding for improved UI consistency --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: mrleemurray <lee.murray@microsoft.com> Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com> Co-authored-by: Benjamin Pasero <benjamin.pasero@microsoft.com> Co-authored-by: Lee Murray <mrleemurray@gmail.com>
|
We probably shouldn't be using it for the purpose we are (and will change our CSS, but did you intend to change We were using it for a fill (again, our bad, but just checking). microsoft/qdk#2877 |
|
Yes—they use an outline/border now instead of a background |
7 participants
All of the more recent chat UI in VS Code has already trended towards using a nudge more border radius. This PR normalizes it across the rest of the editor for consistency.
4pxborder radius for buttons and inputssmallbutton variant. Primarily used in Copilot surfaces right nowKeep | Undo | ...toolbar for accepting changes on files/hunkscc @jo-oikawa
Selected examples