Fix Light Theme Design Token Bugs

src/dropdown/dropdown.styles.ts

@@ -15,10 +15,10 @@ import {
 	disabledOpacity,
 	dropdownBackground,
 	dropdownBorder,
-	dropdownForeground,
 	dropdownListMaxHeight,
 	focusBorder,
 	fontFamily,
+	foreground,
 	inputHeight,
 	inputMinWidth,
 	listActiveSelectionBackground,
@@ -35,7 +35,7 @@ export const dropdownStyles = (
 	${display('inline-flex')} :host {
 		background: ${dropdownBackground};
 		box-sizing: border-box;
-		color: ${dropdownForeground};
+		color: ${foreground};
 		contain: contents;
 		font-family: ${fontFamily};
 		height: calc(${inputHeight} * 1px);
@@ -99,7 +99,7 @@ export const dropdownStyles = (
 	}
 	:host([disabled]:hover) {
 		background: ${dropdownBackground};
-		color: ${dropdownForeground};
+		color: ${foreground};
 		fill: currentcolor;
 	}
 	:host(:not([disabled])) .control:active {

src/radio-group/radio-group.styles.ts

@@ -7,11 +7,7 @@ import {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import {
-	checkboxForeground,
-	designUnit,
-	typeRampBaseFontSize,
-} from '../design-tokens';
+import {designUnit, foreground, typeRampBaseFontSize} from '../design-tokens';
 
 export const radioGroupStyles = (
 	context: ElementDefinitionContext,
@@ -33,7 +29,7 @@ export const radioGroupStyles = (
 		flex-direction: row;
 	}
 	::slotted([slot='label']) {
-		color: ${checkboxForeground};
+		color: ${foreground};
 		font-size: ${typeRampBaseFontSize};
 		margin: calc(${designUnit} * 1px) 0;
 	}

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

@@ -17,10 +17,10 @@ import {
 	dropdownBorder,
 	focusBorder,
 	fontFamily,
+	foreground,
 	inputBackground,
 	inputForeground,
 	inputMinWidth,
-	inputPlaceholderForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
 } from '../design-tokens';
@@ -77,7 +77,7 @@ export const textAreaStyles = (
 	}
 	.label {
 		display: block;
-		color: ${inputPlaceholderForeground};
+		color: ${foreground};
 		cursor: pointer;
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};

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

@@ -17,11 +17,11 @@ import {
 	dropdownBorder,
 	focusBorder,
 	fontFamily,
+	foreground,
 	inputBackground,
 	inputForeground,
 	inputHeight,
 	inputMinWidth,
-	inputPlaceholderForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
 } from '../design-tokens';
@@ -70,7 +70,7 @@ export const textFieldStyles = (
 	}
 	.label {
 		display: block;
-		color: ${inputPlaceholderForeground};
+		color: ${foreground};
 		cursor: pointer;
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};