Merge pull request #97104 from microsoft/misolori/issue96608

Unify the "pill" design

src/vs/base/browser/ui/countBadge/countBadge.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-count-badge {
-	padding: 3px 5px;
+	padding: 3px 6px;
 	border-radius: 11px;
 	font-size: 11px;
 	min-width: 18px;
@@ -14,4 +14,4 @@
 	text-align: center;
 	display: inline-block;
 	box-sizing: border-box;
-}
\ No newline at end of file
+}

src/vs/base/parts/quickinput/browser/media/quickInput.css

@@ -97,6 +97,8 @@
 	align-self: center;
 	position: absolute;
 	right: 4px;
+	display: flex;
+	align-items: center;
 }
 
 .quick-input-count .monaco-count-badge {
@@ -108,9 +110,8 @@
 }
 
 .quick-input-action .monaco-text-button {
-	font-size: 85%;
+	font-size: 11px;
 	padding: 0 6px;
-	line-height: initial;
 	display: flex;
 	height: 100%;
 	align-items: center;

src/vs/workbench/contrib/debug/browser/breakpointsView.ts

@@ -350,7 +350,7 @@ class BreakpointsRenderer implements IListRenderer<IBreakpoint, IBreakpointTempl
 
 		data.filePath = dom.append(data.breakpoint, $('span.file-path'));
 		const lineNumberContainer = dom.append(data.breakpoint, $('.line-number-container'));
-		data.lineNumber = dom.append(lineNumberContainer, $('span.line-number'));
+		data.lineNumber = dom.append(lineNumberContainer, $('span.line-number.monaco-count-badge'));
 
 		return data;
 	}

src/vs/workbench/contrib/debug/browser/callStackView.ts

@@ -475,7 +475,7 @@ class SessionsRenderer implements ITreeRenderer<IDebugSession, FuzzyScore, ISess
 		dom.append(session, $('.codicon.codicon-bug'));
 		const name = dom.append(session, $('.name'));
 		const state = dom.append(session, $('.state'));
-		const stateLabel = dom.append(state, $('span.label'));
+		const stateLabel = dom.append(state, $('span.label.monaco-count-badge'));
 		const label = new HighlightedLabel(name, false);
 		const actionBar = new ActionBar(session, {
 			actionViewItemProvider: action => {
@@ -584,7 +584,7 @@ class StackFramesRenderer implements ITreeRenderer<IStackFrame, FuzzyScore, ISta
 		const file = dom.append(stackFrame, $('.file'));
 		const fileName = dom.append(file, $('span.file-name'));
 		const wrapper = dom.append(file, $('span.line-number-wrapper'));
-		const lineNumber = dom.append(wrapper, $('span.line-number'));
+		const lineNumber = dom.append(wrapper, $('span.line-number.monaco-count-badge'));
 		const label = new HighlightedLabel(labelDiv, false);
 		const actionBar = new ActionBar(stackFrame);
 

src/vs/workbench/contrib/debug/browser/media/debugViewlet.css

@@ -66,10 +66,8 @@
 /* Debug viewlet trees */
 
 .debug-pane .line-number {
-	border-radius: 2px;
-	font-size: 0.9em;
-	padding: 0 3px;
-	line-height: 20px;
+	padding-left: 4px;
+	padding-right: 4px;
 }
 
 .debug-pane .disabled {
@@ -118,6 +116,8 @@
 
 .debug-pane .debug-call-stack .thread > .state,
 .debug-pane .debug-call-stack .session > .state {
+	display: flex;
+	align-items: center;
 	text-align: right;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -159,9 +159,8 @@
 
 .debug-pane .debug-call-stack .thread > .state > .label,
 .debug-pane .debug-call-stack .session > .state > .label {
-	border-radius: 2px;
 	font-size: 0.8em;
-	padding: 0 3px;
+	min-height: auto;
 }
 
 .debug-pane .debug-call-stack .stack-frame {

src/vs/workbench/contrib/files/browser/media/explorerviewlet.css

@@ -60,10 +60,10 @@
 }
 
 .dirty-count.monaco-count-badge {
-	padding: 1px 6px 2px;
+	padding-top: 2px;
+	padding-bottom: 2px;
 	margin-left: 6px;
 	min-height: auto;
-	border-radius: 0; /* goes better when ellipsis shows up on narrow sidebar */
 }
 
 .explorer-viewlet .explorer-item.nonexistent-root {

src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts

@@ -401,7 +401,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditorP
 	}
 
 	private createRecordingBadge(container: HTMLElement): HTMLElement {
-		const recordingBadge = DOM.append(container, DOM.$('.recording-badge.disabled'));
+		const recordingBadge = DOM.append(container, DOM.$('.recording-badge.monaco-count-badge.disabled'));
 		recordingBadge.textContent = localize('recording', "Recording Keys");
 		this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : '';

src/vs/workbench/contrib/preferences/browser/media/keybindingsEditor.css

@@ -27,8 +27,6 @@
 
 .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .recording-badge {
 	margin-right: 8px;
-	padding: 0px 8px;
-	border-radius: 2px;
 }
 
 .keybindings-editor > .keybindings-header.small > .search-container > .keybindings-search-actions-container > .recording-badge,

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -40,12 +40,9 @@
 }
 
 .settings-editor > .settings-header > .search-container > .settings-count-widget {
-	margin: 6px 0px;
-	padding: 0px 8px;
-	border-radius: 2px;
 	position: absolute;
 	right: 35px;
-	top: 0;
+	top: 6px;
 }
 
 .settings-editor > .settings-header > .search-container > .settings-clear-widget {

src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

@@ -442,7 +442,7 @@ export class SettingsEditor2 extends BaseEditor {
 			inputBorder: settingsTextInputBorder
 		}));
 
-		this.countElement = DOM.append(searchContainer, DOM.$('.settings-count-widget'));
+		this.countElement = DOM.append(searchContainer, DOM.$('.settings-count-widget.monaco-count-badge'));
 		this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : '';
 			const border = colors.contrastBorder ? colors.contrastBorder.toString() : '';