Update pills style to use mix (ref #96608)

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

@@ -15,3 +15,8 @@
 	display: inline-block;
 	box-sizing: border-box;
 }
+
+.monaco-count-badge.long {
+	padding: 2px 3px;
+	border-radius: 2px;
+}

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

@@ -103,6 +103,8 @@
 
 .quick-input-count .monaco-count-badge {
 	vertical-align: middle;
+	padding: 2px 4px;
+	border-radius: 2px;
 }
 
 .quick-input-action {

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.monaco-count-badge'));
+		const stateLabel = dom.append(state, $('span.label.monaco-count-badge.long'));
 		const label = new HighlightedLabel(name, false);
 		const actionBar = new ActionBar(session, {
 			actionViewItemProvider: action => {

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

@@ -60,8 +60,7 @@
 }
 
 .dirty-count.monaco-count-badge {
-	padding-top: 2px;
-	padding-bottom: 2px;
+	padding: 2px 4px;
 	margin-left: 6px;
 	min-height: auto;
 }

src/vs/workbench/contrib/files/browser/views/openEditorsView.ts

@@ -184,7 +184,7 @@ export class OpenEditorsView extends ViewPane {
 		super.renderHeaderTitle(container, this.title);
 
 		const count = dom.append(container, $('.count'));
-		this.dirtyCountElement = dom.append(count, $('.dirty-count.monaco-count-badge'));
+		this.dirtyCountElement = dom.append(count, $('.dirty-count.monaco-count-badge.long'));
 
 		this._register((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : '';

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.monaco-count-badge.disabled'));
+		const recordingBadge = DOM.append(container, DOM.$('.recording-badge.monaco-count-badge.long.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/settingsEditor2.ts

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