Fix Input Component Design Token Issue In Light Theme (#207)

Description of changes

Resolves an issue that was occurring in the text field, text area, and number field components in VS Code light theme where the input border color was the same as the input background color.

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "vscode-webview-ui-toolkit",
-	"version": "0.6.4",
+	"version": "0.6.5",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "vscode-webview-ui-toolkit",
-			"version": "0.6.4",
+			"version": "0.6.5",
 			"license": "MIT",
 			"dependencies": {
 				"@microsoft/fast-element": "^1.2.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-webview-ui-toolkit",
-	"version": "0.6.4",
+	"version": "0.6.5",
 	"description": "A component library for building webview-based extension UIs in Visual Studio Code.",
 	"homepage": "https://github.com/microsoft/vscode-webview-ui-toolkit#readme",
 	"license": "MIT",

src/design-tokens.ts

@@ -186,9 +186,6 @@ export const inputForeground = create<string>('input-foreground').withDefault(
 export const inputPlaceholderForeground = create<string>(
 	'input-placeholder-foreground'
 ).withDefault('#cccccc');
-export const inputBorder = create<string>('input-border').withDefault(
-	'#3c3c3c'
-);
 
 /**
  * Link design tokens.

src/text-area/text-area.styles.ts

@@ -12,10 +12,10 @@ import {
 	cornerRadius,
 	designUnit,
 	disabledOpacity,
+	dropdownBorder,
 	focusBorder,
 	fontFamily,
 	inputBackground,
-	inputBorder,
 	inputForeground,
 	inputMinWidth,
 	inputPlaceholderForeground,
@@ -35,7 +35,7 @@ export const TextAreaStyles = css`
 		color: ${inputForeground};
 		background: ${inputBackground};
 		border-radius: calc(${cornerRadius} * 1px);
-		border: calc(${borderWidth} * 1px) solid ${inputBorder};
+		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		font: inherit;
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};
@@ -46,7 +46,7 @@ export const TextAreaStyles = css`
 	}
 	.control:hover:enabled {
 		background: ${inputBackground};
-		border-color: ${inputBorder};
+		border-color: ${dropdownBorder};
 	}
 	.control:active:enabled {
 		background: ${inputBackground};
@@ -92,6 +92,6 @@ export const TextAreaStyles = css`
 		opacity: ${disabledOpacity};
 	}
 	:host([disabled]) .control {
-		border-color: ${inputBorder};
+		border-color: ${dropdownBorder};
 	}
 `;

src/text-field/text-field.styles.ts

@@ -12,10 +12,10 @@ import {
 	cornerRadius,
 	designUnit,
 	disabledOpacity,
+	dropdownBorder,
 	focusBorder,
 	fontFamily,
 	inputBackground,
-	inputBorder,
 	inputForeground,
 	inputHeight,
 	inputMinWidth,
@@ -38,7 +38,7 @@ export const TextFieldStyles = css`
 		color: ${inputForeground};
 		background: ${inputBackground};
 		border-radius: calc(${cornerRadius} * 1px);
-		border: calc(${borderWidth} * 1px) solid ${inputBorder};
+		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		height: calc(${inputHeight} * 1px);
 		min-width: ${inputMinWidth};
 	}
@@ -94,7 +94,7 @@ export const TextFieldStyles = css`
 	}
 	:host(:hover:not([disabled])) .root {
 		background: ${inputBackground};
-		border-color: ${inputBorder};
+		border-color: ${dropdownBorder};
 	}
 	:host(:active:not([disabled])) .root {
 		background: ${inputBackground};
@@ -113,6 +113,6 @@ export const TextFieldStyles = css`
 		opacity: ${disabledOpacity};
 	}
 	:host([disabled]) .control {
-		border-color: ${inputBorder};
+		border-color: ${dropdownBorder};
 	}
 `;

src/utilities/theme/tokenMappings.ts

@@ -26,7 +26,6 @@ import {
 	fontWeight,
 	foreground,
 	inputBackground,
-	inputBorder,
 	inputForeground,
 	inputPlaceholderForeground,
 	linkActiveForeground,
@@ -99,6 +98,5 @@ export const tokenMappings: {[index: string]: CSSDesignToken<string>} = {
 	// ---- Text Fields & Areas ----
 	'--vscode-input-background': inputBackground,
 	'--vscode-input-foreground': inputForeground,
-	'--vscode-input-border': inputBorder,
 	'--vscode-input-placeholderForeground': inputPlaceholderForeground,
 };