More welcome page colors (#25798)

src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts

@@ -14,13 +14,13 @@ export default () => `
 <div class="welcomePageContainer">
 	<div class="welcomePage">
 		<div class="title">
-			<h1>${escape(localize('welcomePage.vscode', "Visual Studio Code"))}</h1>
-			<p class="subtitle">${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}</p>
+			<h1 class="caption">${escape(localize('welcomePage.vscode', "Visual Studio Code"))}</h1>
+			<p class="subtitle detail">${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}</p>
 		</div>
 		<div class="row">
 			<div class="splash">
 				<div class="section start">
-					<h2>${escape(localize('welcomePage.start', "Start"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.start', "Start"))}</h2>
 					<ul>
 						<li><a href="command:workbench.action.files.newUntitledFile">${escape(localize('welcomePage.newFile', "New file"))}</a></li>
 						<li class="mac-only"><a href="command:workbench.action.files.openFileFolder">${escape(localize('welcomePage.openFolder', "Open folder..."))}</a></li>
@@ -29,15 +29,15 @@ export default () => `
 					</ul>
 				</div>
 				<div class="section recent">
-					<h2>${escape(localize('welcomePage.recent', "Recent"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.recent', "Recent"))}</h2>
 					<ul class="list">
 						<!-- Filled programmatically -->
-						<li class="moreRecent"><a href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "More..."))}</a><span class="path if_shortcut" data-command="workbench.action.openRecent">(<span class="shortcut" data-command="workbench.action.openRecent"></span>)</span></li>
+						<li class="moreRecent"><a href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "More..."))}</a><span class="path detail if_shortcut" data-command="workbench.action.openRecent">(<span class="shortcut" data-command="workbench.action.openRecent"></span>)</span></li>
 					</ul>
-					<p class="none">${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}</p>
+					<p class="none detail">${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}</p>
 				</div>
 				<div class="section help">
-					<h2>${escape(localize('welcomePage.help', "Help"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.help', "Help"))}</h2>
 					<ul>
 						<li class="keybindingsReferenceLink"><a href="command:workbench.action.keybindingsReference">${escape(localize('welcomePage.keybindingsCheatsheet', "Printable keyboard cheatsheet"))}</a></li>
 						<li><a href="command:workbench.action.openIntroductoryVideosUrl">${escape(localize('welcomePage.introductoryVideos', "Introductory videos"))}</a></li>
@@ -46,36 +46,36 @@ export default () => `
 						<li><a href="http://stackoverflow.com/questions/tagged/vscode?sort=votes&pageSize=50">${escape(localize('welcomePage.stackOverflow', "Stack Overflow"))}</a></li>
 					</ul>
 				</div>
-				<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label></p>
+				<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label class="caption" for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label></p>
 			</div>
 			<div class="commands">
 				<div class="section customize">
-					<h2>${escape(localize('welcomePage.customize', "Customize"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.customize', "Customize"))}</h2>
 					<ul>
-						<li class="showLanguageExtensions"><button data-href="command:workbench.extensions.action.showLanguageExtensions"><h3>${escape(localize('welcomePage.installExtensionPacks', "Tools and languages"))}</h3> <span>${escape(localize('welcomePage.installExtensionPacksDescription', "Install support for {0} and {1}"))
+						<li class="showLanguageExtensions"><button data-href="command:workbench.extensions.action.showLanguageExtensions"><h3 class="caption">${escape(localize('welcomePage.installExtensionPacks', "Tools and languages"))}</h3> <span class="detail">${escape(localize('welcomePage.installExtensionPacksDescription', "Install support for {0} and {1}"))
 		.replace('{0}', `<span class="extensionPackList"></span>`)
 		.replace('{1}', `<a href="command:workbench.extensions.action.showLanguageExtensions">${escape(localize('welcomePage.moreExtensions', "more"))}</a>`)}
 						</span></button></li>
-						<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span>${escape(localize('welcomePage.installKeymapExtension', "Install the keyboard shortcuts of {0} and {1}"))
+						<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3 class="caption">${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span class="detail">${escape(localize('welcomePage.installKeymapExtension', "Install the keyboard shortcuts of {0} and {1}"))
 		.replace('{0}', `<span class="keymapList"></span>`)
 		.replace('{1}', `<a href="command:workbench.extensions.action.showRecommendedKeymapExtensions">${escape(localize('welcomePage.others', "others"))}</a>`)}
 						</span></button></li>
-						<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3>${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span>${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
+						<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3 class="caption">${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span class="detail">${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
 					</ul>
 				</div>
 				<div class="section learn">
-					<h2>${escape(localize('welcomePage.learn', "Learn"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.learn', "Learn"))}</h2>
 					<ul>
-						<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3>${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span>${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
-						<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3>${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span>${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
-						<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3>${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span>${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
+						<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3 class="caption">${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span class="detail">${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
+						<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3 class="caption">${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span class="detail">${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
+						<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3 class="caption">${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span class="detail">${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
 					</ul>
 				</div>
 				<div class="section quickLinks">
-					<h2>${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
+					<h2 class="caption">${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
 					<ul>
-						<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3>${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span>${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
-						<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3>${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span>${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
+						<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3 class="caption">${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span class="detail">${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
+						<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3 class="caption">${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span class="detail">${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
 					</ul>
 				</div>
 			</div>

src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css

@@ -16,9 +16,6 @@
 	max-width: 1200px;
 	font-size: 10px;
 }
-.vs .monaco-workbench > .part.editor > .content .welcomePage {
-	color: #6C6C6C;
-}
 
 .monaco-workbench > .part.editor > .content .welcomePage .row {
 	display: flex;
@@ -41,66 +38,36 @@
 }
 
 .monaco-workbench > .part.editor > .content .welcomePage a {
-	color: #2e70c0;
 	text-decoration: none;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage a {
-	color: #4080D0;
-}
-
 .monaco-workbench > .part.editor > .content .welcomePage a:focus {
 	outline: 1px solid -webkit-focus-ring-color;
 	outline-offset: -1px;
 }
 
-.monaco-workbench > .part.editor > .content .welcomePage a:hover {
-	color: #6ea0dc;
-}
-
-.hc-black .monaco-workbench > .part.editor > .content .welcomePage a {
-	color: #0b9eff;
-}
-
-.hc-black .monaco-workbench > .part.editor > .content .welcomePage a:hover {
-	color: #f38518;
-}
-
 .monaco-workbench > .part.editor > .content .welcomePage h1 {
 	padding: 0;
 	margin: 0;
 	border: none;
 	font-weight: normal;
-	color: rgba(0,0,0,.8);
 	font-size: 3.6em;
 	white-space: nowrap;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage h1 {
-	color: rgba(255,255,255,.76);
-}
-
-.hc-black .monaco-workbench > .part.editor > .content .welcomePage h1 {
-	color: white;
-}
-
 .monaco-workbench > .part.editor > .content .welcomePage .title {
 	margin-top: 1em;
 	margin-bottom: 1em;
 	flex: 1 100%;
 }
+
 .monaco-workbench > .part.editor > .content .welcomePage .subtitle {
 	margin-top: .8em;
 	font-size: 2.6em;
-	color: rgba(0,0,0,.53);
 	display: block;
 }
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .subtitle {
-	color: rgba(255,255,255,.46);
-}
 
 .hc-black .monaco-workbench > .part.editor > .content .welcomePage .subtitle {
-	color: white;
 	font-weight: 200;
 }
 
@@ -150,22 +117,6 @@
 }
 .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
 	padding-left: 1em;
-	color: rgba(255,255,255,.46);
-}
-
-.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
-.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
-	color: rgba(0,0,0,.53);
-}
-
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
-	color: rgba(255,255,255,.46);
-}
-
-.hc-black .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
-.hc-black .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
-	color: white;
 }
 
 .monaco-workbench > .part.editor > .content .welcomePage .splash .title,
@@ -207,41 +158,27 @@
 	margin-bottom: .25em;
 }
 
-.vs .monaco-workbench > .part.editor > .content .welcomePage .commands li button h3 {
-	color: #2c2c2c;
-}
-
 .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
-	color: #6c6c6c;
 	border: none;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
-	color: #ccc;
-}
-
 .hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
 	font-weight: bold;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
-	color: #828282;
-}
-
 .monaco-workbench > .part.editor > .content .welcomePage .commands li button:focus {
 	outline-style: solid;
 	outline-width: 1px;
 }
 
 .hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
-	color: white;
-	border-color: #f38518;
 	border-width: 1px;
 	border-style: solid;
 }
 
 .hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover {
-	outline: 1px dashed #f38518;
+	outline-width: 1px;
+	outline-style: dashed;
 	outline-offset: -5px;
 }
 

src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts

@@ -35,7 +35,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { tildify } from 'vs/base/common/labels';
 import { isLinux } from 'vs/base/common/platform';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, textLinkForeground, foreground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { getExtraColor } from 'vs/workbench/parts/welcome/walkThrough/node/walkThroughUtils';
 
 used();
@@ -240,6 +240,7 @@ class WelcomePage {
 
 				const span = document.createElement('span');
 				span.classList.add('path');
+				span.classList.add('detail');
 				span.innerText = tildify(parentFolder, this.environmentService.userHome);
 				span.title = folder;
 				li.appendChild(span);
@@ -446,10 +447,21 @@ class WelcomePage {
 
 // theming
 
+const caption = registerColor('welcomePage.caption', { dark: '#FFFFFFC2', light: '#000000D4', hc: foreground }, localize('welcomePage.caption', 'Caption color on the Welcome page.'));
+const detail = registerColor('welcomePage.detail', { dark: '#FFFFFF76', light: '#00000088', hc: foreground }, localize('welcomePage.detail', 'Detail color on the Welcome page.'));
+
 const quickLinkBackground = registerColor('welcomePage.quickLinkBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkBackground', 'Background color for the quick links on the Welcome page.'));
 const quickLinkHoverBackground = registerColor('welcomePage.quickLinkHoverBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkHoverBackground', 'Hover background color for the quick links on the Welcome page.'));
 
 registerThemingParticipant((theme, collector) => {
+	const captionColor = theme.getColor(caption);
+	if (captionColor) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .caption { color: ${captionColor}; }`);
+	}
+	const detailColor = theme.getColor(detail);
+	if (detailColor) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .detail { color: ${detailColor}; }`);
+	}
 	const color = getExtraColor(theme, quickLinkBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' });
 	if (color) {
 		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button { background: ${color}; }`);
@@ -458,4 +470,16 @@ registerThemingParticipant((theme, collector) => {
 	if (hover) {
 		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover { background: ${hover}; }`);
 	}
+	const link = theme.getColor(textLinkForeground);
+	if (link) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage a { color: ${link}; }`);
+	}
+	const border = theme.getColor(contrastBorder);
+	if (border) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button { border-color: ${border}; }`);
+	}
+	const activeBorder = theme.getColor(activeContrastBorder);
+	if (activeBorder) {
+		collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover { outline-color: ${activeBorder}; }`);
+	}
 });