Polish walkthrough steps (microsoft#166644)

* Remove til shadows and fix fonts

* More polish

Author: daviddossett

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

@@ -1340,7 +1340,7 @@ export class GettingStartedPage extends EditorPane {
 			$('.done-next-container', {},
 				$('button.button-link.all-done', { 'x-dispatch': 'allDone' }, $('span.codicon.codicon-check-all'), localize('allDone', "Mark Done")),
 				...(showNextCategory
-					? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-small-right'))]
+					? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-right'))]
 					: []),
 			)
 		);

src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts

@@ -3,15 +3,14 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground } 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 welcomePageBackground = registerColor('welcomePage.background', { light: null, dark: null, hcDark: null, hcLight: null }, localize('welcomePage.background', 'Background color for the Welcome page.'));
 
 export const welcomePageTileBackground = registerColor('welcomePage.tileBackground', { dark: editorWidgetBackground, light: editorWidgetBackground, hcDark: '#000', hcLight: editorWidgetBackground }, localize('welcomePage.tileBackground', 'Background color for the tiles on the Get Started page.'));
 export const welcomePageTileHoverBackground = registerColor('welcomePage.tileHoverBackground', { dark: lighten(editorWidgetBackground, .2), light: darken(editorWidgetBackground, .1), hcDark: null, hcLight: null }, localize('welcomePage.tileHoverBackground', 'Hover background color for the tiles on the Get Started.'));
-export const welcomePageTileShadow = registerColor('welcomePage.tileShadow', { light: widgetShadow, dark: widgetShadow, hcDark: null, hcLight: null }, localize('welcomePage.tileShadow', 'Shadow color for the Welcome page walkthrough category buttons.'));
 
 export const welcomePageProgressBackground = registerColor('welcomePage.progress.background', { light: inputBackground, dark: inputBackground, hcDark: inputBackground, hcLight: inputBackground }, localize('welcomePage.progress.background', 'Foreground color for the Welcome page progress bars.'));
 export const welcomePageProgressForeground = registerColor('welcomePage.progress.foreground', { light: textLinkForeground, dark: textLinkForeground, hcDark: textLinkForeground, hcLight: textLinkForeground }, localize('welcomePage.progress.foreground', 'Background color for the Welcome page progress bars.'));

src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css

@@ -399,6 +399,7 @@
 	width: 100%;
 	margin: 4px 0;
 	overflow: hidden;
+	border-radius: 3px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .button-container:not(:last-of-type) {
@@ -407,6 +408,7 @@
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded {
 	cursor: default !important;
+	border: 1px solid var(--vscode-editorWidget-border);
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded>.codicon {
@@ -455,12 +457,12 @@
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .shortcut-message {
-	opacity: 0.8;
-	font-size: 8pt;
+	color: var(--vscode-descriptionForeground);
+	font-size: 12px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .shortcut-message .keybinding {
-	font-weight: bold;
+	font-weight: 600;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-next {
@@ -626,9 +628,14 @@
 	cursor: pointer;
 }
 
+/* Don't show focus outline on mouse click. Instead only show outline on keyboard focus. */
 .monaco-workbench .part.editor>.content .gettingStartedContainer button:focus {
-	outline-style: solid;
-	outline-width: 1px;
+	outline: none;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer button:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .prev-button.button-link {
@@ -668,12 +675,12 @@
 	left: -4px;
 }
 
-.monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-arrow-small-right {
-	padding-left: 8px;
+.monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-arrow-right {
+	padding-left: 4px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-check-all {
-	padding-right: 8px;
+	padding-right: 4px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .skip {
@@ -684,9 +691,9 @@
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h2 {
+	font-size: 26px;
 	font-weight: normal;
-	line-height: 26px;
-	margin: 0 0 4px 0;
+	margin: 0 0 8px 0;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h2 .codicon {
@@ -695,7 +702,7 @@
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h3 {
 	font-size: 13px;
-	font-weight: 700;
+	font-weight: 600;
 	margin: 0;
 }
 
@@ -800,6 +807,10 @@
 	visibility: visible;
 }
 
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container span {
+	line-height: 1.3em;
+}
+
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container .monaco-button, .monaco-workbench .part.editor>.content .gettingStartedContainer .max-lines-3 {
 	/* Supported everywhere: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp#browser_compatibility */
 	-webkit-line-clamp: 3;
@@ -808,6 +819,13 @@
 	overflow: hidden;
 }
 
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container .monaco-button {
+	height: 26px;
+	display: flex;
+	margin-bottom: 8px;
+	align-items: center;
+}
+
 .monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button {
 	padding: 3px;
 	border-radius: 5px;
@@ -828,6 +846,7 @@
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .description {
 	color: var(--vscode-descriptionForeground);
+	line-height: 1.4em;
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message {
@@ -854,10 +873,6 @@
 	background: var(--vscode-welcomePage-tileBackground);
 }
 
-.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category {
-	filter: drop-shadow(2px 2px 2px var(--vscode-welcomePage-tileShadow));
-}
-
 .monaco-workbench .part.editor > .content .gettingStartedContainer button:hover {
 	background: var(--vscode-welcomePage-tileHoverBackground);
 	outline-color: var(--vscode-contrastActiveBorder, var(--vscode-focusBorder));