Allow theming getting started page progress bars

closes #114303

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css

@@ -50,9 +50,15 @@
 	font-size: 12px;
 }
 
-.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories progress {
-	font-size: 12pt;
-	width: 100%;
+.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .progress-bar-outer {
+	height: 8px;
+	border-radius: 4px;
+	margin-top: 4px;
+}
+
+.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .progress-bar-inner {
+	height: 100%;
+	border-radius: 4px;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories #getting-started-categories-container {

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts

@@ -19,7 +19,7 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IProductService } from 'vs/platform/product/common/productService';
 import { IGettingStartedCategoryWithProgress, IGettingStartedService } from 'vs/workbench/services/gettingStarted/common/gettingStartedService';
 import { registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
-import { buttonBackground as welcomeButtonBackground, buttonHoverBackground as welcomeButtonHoverBackground, welcomePageBackground } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
+import { welcomeButtonBackground, welcomeButtonHoverBackground, welcomePageBackground, welcomePageProgressBackground, welcomePageProgressForeground } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
 import { activeContrastBorder, buttonBackground, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, contrastBorder, descriptionForeground, focusBorder, foreground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
 import { getExtraColor } from 'vs/workbench/contrib/welcome/walkThrough/common/walkThroughUtils';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -204,7 +204,11 @@ export class GettingStartedPage extends Disposable {
 						$('.category-description-container', {},
 							$('h3.category-title', {}, category.title),
 							$('.category-description.description', {}, category.description),
-							$('.category-progress', { 'x-data-category-id': category.id, }, $('.message'), $('progress'))) :
+							$('.category-progress', { 'x-data-category-id': category.id, },
+								$('.message'),
+								$('.progress-bar-outer', {},
+									$('.progress-bar-inner'))))
+						:
 						$('.category-description-container', {},
 							$('h3.category-title', {}, category.title),
 							$('.category-description.description', {}, category.description));
@@ -277,9 +281,9 @@ export class GettingStartedPage extends Disposable {
 			const numTotal = category.content.items.length;
 
 			const message = assertIsDefined(element.firstChild);
-			const bar = assertIsDefined(element.lastChild) as HTMLProgressElement;
-			bar.value = numDone;
-			bar.max = numTotal;
+			const bar = assertIsDefined(element.querySelector('.progress-bar-inner')) as HTMLDivElement;
+			bar.style.width = `${(numDone / numTotal) * 100}%`;
+
 			if (numTotal === numDone) {
 				message.textContent = `All items complete!`;
 			}
@@ -471,4 +475,13 @@ registerThemingParticipant((theme, collector) => {
 	if (activeBorder) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer button:hover { outline-color: ${activeBorder}; }`);
 	}
+
+	const progressBackground = theme.getColor(welcomePageProgressBackground);
+	if (progressBackground) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .progress-bar-outer { background-color: ${progressBackground}; }`);
+	}
+	const progressForeground = theme.getColor(welcomePageProgressForeground);
+	if (progressForeground) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .progress-bar-inner { background-color: ${progressForeground}; }`);
+	}
 });

src/vs/workbench/contrib/welcome/page/browser/welcomePage.ts

@@ -47,7 +47,7 @@ import { IEditorOptions } from 'vs/platform/editor/common/editor';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
 import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
 import { gettingStartedInputTypeId, GettingStartedPage } from 'vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted';
-import { buttonBackground, buttonHoverBackground, welcomePageBackground } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
+import { welcomeButtonBackground, welcomeButtonHoverBackground, welcomePageBackground } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
 
 const configurationKey = 'workbench.startupEditor';
 const oldConfigurationKey = 'workbench.welcome.enabled';
@@ -658,11 +658,11 @@ registerThemingParticipant((theme, collector) => {
 	if (descriptionColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`);
 	}
-	const buttonColor = getExtraColor(theme, buttonBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' });
+	const buttonColor = getExtraColor(theme, welcomeButtonBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' });
 	if (buttonColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button { background: ${buttonColor}; }`);
 	}
-	const buttonHoverColor = getExtraColor(theme, buttonHoverBackground, { dark: 'rgba(200, 235, 255, .072)', extra_dark: 'rgba(200, 235, 255, .072)', light: 'rgba(0,0,0,.10)', hc: null });
+	const buttonHoverColor = getExtraColor(theme, welcomeButtonHoverBackground, { dark: 'rgba(200, 235, 255, .072)', extra_dark: 'rgba(200, 235, 255, .072)', light: 'rgba(0,0,0,.10)', hc: null });
 	if (buttonHoverColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button:hover { background: ${buttonHoverColor}; }`);
 	}

src/vs/workbench/contrib/welcome/page/browser/welcomePageColors.ts

@@ -3,10 +3,13 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { activeContrastBorder, buttonBackground, descriptionForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { localize } from 'vs/nls';
 
 // Seprate from main module to break dependency cycles between welcomePage and gettingStarted.
-export const buttonBackground = registerColor('welcomePage.buttonBackground', { dark: null, light: null, hc: null }, localize('welcomePage.buttonBackground', 'Background color for the buttons on the Welcome page.'));
-export const buttonHoverBackground = registerColor('welcomePage.buttonHoverBackground', { dark: null, light: null, hc: null }, localize('welcomePage.buttonHoverBackground', 'Hover background color for the buttons on the Welcome page.'));
+export const welcomeButtonBackground = registerColor('welcomePage.buttonBackground', { dark: null, light: null, hc: null }, localize('welcomePage.buttonBackground', 'Background color for the buttons on the Welcome page.'));
+export const welcomeButtonHoverBackground = registerColor('welcomePage.buttonHoverBackground', { dark: null, light: null, hc: null }, localize('welcomePage.buttonHoverBackground', 'Hover background color for the buttons on the Welcome page.'));
 export const welcomePageBackground = registerColor('welcomePage.background', { light: null, dark: null, hc: null }, localize('welcomePage.background', 'Background color for the Welcome page.'));
+
+export const welcomePageProgressBackground = registerColor('welcomePage.progress.background', { light: descriptionForeground, dark: descriptionForeground, hc: descriptionForeground }, localize('welcomePage.progress.background', 'Foreground color for the Welcome page progress bars.'));
+export const welcomePageProgressForeground = registerColor('welcomePage.progress.foreground', { light: buttonBackground, dark: buttonBackground, hc: activeContrastBorder }, localize('welcomePage.progress.foreground', 'Background color for the Welcome page progress bars.'));