use default btn styles only on opt-in (microsoft#185313)

Author: jrieken

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

@@ -25,25 +25,6 @@
 	text-decoration: none !important;
 }
 
-.monaco-button {
-	color: var(--vscode-button-foreground);
-	background-color: var(--vscode-button-background);
-}
-
-.monaco-button:hover {
-	background-color: var(--vscode-button-hoverBackground);
-}
-
-.monaco-button.secondary {
-	color: var(--vscode-button-secondaryForeground);
-	background-color: var(--vscode-button-secondaryBackground);
-}
-
-.monaco-button.secondary:hover {
-	background-color: var(--vscode-button-secondaryHoverBackground);
-}
-
-
 .monaco-button.disabled:focus,
 .monaco-button.disabled {
 	opacity: 0.4 !important;
@@ -109,19 +90,11 @@
 .monaco-button-dropdown .monaco-button-dropdown-separator {
 	padding: 4px 0;
 	cursor: default;
-	background-color: var(--vscode-button-background);
-	border-top: 1px solid var(--vscode-button-border);
-	border-bottom: 1px solid var(--vscode-button-border);
-}
-
-.monaco-button.secondary + .monaco-button-dropdown-separator {
-	background-color: var(--vscode-button-secondaryBackground);
 }
 
 .monaco-button-dropdown .monaco-button-dropdown-separator > div {
 	height: 100%;
 	width: 1px;
-	background-color: var(--vscode-button-separator);
 }
 
 .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
@@ -159,3 +132,41 @@
 	margin: 0 0.2em;
 	color: inherit !important;
 }
+
+/* default color styles - based on CSS variables */
+
+.monaco-button.default-colors,
+.monaco-button-dropdown.default-colors > .monaco-button{
+	color: var(--vscode-button-foreground);
+	background-color: var(--vscode-button-background);
+}
+
+.monaco-button.default-colors:hover,
+.monaco-button-dropdown.default-colors > .monaco-button:hover {
+	background-color: var(--vscode-button-hoverBackground);
+}
+
+.monaco-button.default-colors.secondary,
+.monaco-button-dropdown.default-colors > .monaco-button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background-color: var(--vscode-button-secondaryBackground);
+}
+
+.monaco-button.default-colors.secondary:hover,
+.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
+	background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
+	background-color: var(--vscode-button-background);
+	border-top: 1px solid var(--vscode-button-border);
+	border-bottom: 1px solid var(--vscode-button-border);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
+	background-color: var(--vscode-button-secondaryBackground);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
+	background-color: var(--vscode-button-separator);
+}

src/vs/platform/actions/browser/buttonbar.ts

@@ -88,6 +88,7 @@ export class MenuWorkbenchButtonBar extends ButtonBar {
 				}
 
 				btn.enabled = action.enabled;
+				btn.element.classList.add('default-colors');
 				if (conifgProvider(action)?.showLabel ?? true) {
 					btn.label = action.label;
 				} else {