Add border to walkthrough tiles (microsoft#166661)

* Add border to walkthrough tiles

* Update border color for tile and getting started step

Author: daviddossett

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

@@ -3,14 +3,16 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground, contrastBorder } 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 welcomePageTileBorder = registerColor('welcomePage.tileBorder', { dark: '#ffffff1a', light: '#0000001a', hcDark: contrastBorder, hcLight: contrastBorder }, localize('welcomePage.tileBorder', 'Border color for the tiles on the Get Started page.'));
+
 
 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

@@ -271,7 +271,7 @@
 	font-size: 13px;
 	box-sizing: border-box;
 	line-height: normal;
-	margin: 8px 8px 12px 0;
+	margin: 8px 8px 8px 0;
 	padding: 3px 6px 6px;
 	left: -3px;
 	text-align: left;
@@ -280,6 +280,7 @@
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category {
 	position: relative;
 	border-radius: 6px;
+	border: 1px solid var(--vscode-welcomePage-tileBorder);
 	overflow: hidden;
 }
 
@@ -322,7 +323,7 @@
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured {
-	border-top: 30px solid red;
+	border-top: 30px solid var(--vscode-activityBarBadge-background);
 	width: 30px;
 	box-sizing: border-box;
 	height: 20px;
@@ -408,7 +409,7 @@
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded {
 	cursor: default !important;
-	border: 1px solid var(--vscode-editorWidget-border);
+	border: 1px solid var(--vscode-welcomePage-tileBorder);
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded h3 {
@@ -966,10 +967,6 @@
 	background-color: var(--vscode-activityBarBadge-background);
 }
 
-.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured {
-	border-top-color: var(--vscode-activityBarBadge-background);
-}
-
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
 	background-color: var(--vscode-checkbox-background) !important;
 }