diff --git a/.changeset/slimy-mice-visit.md b/.changeset/slimy-mice-visit.md new file mode 100644 index 0000000000..349b0ee53f --- /dev/null +++ b/.changeset/slimy-mice-visit.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/tokens': minor +--- + +Updated placeholder color tokens to increase color contrast and improve accessibility diff --git a/packages/tokens/src/color/darkModeColors.ts b/packages/tokens/src/color/darkModeColors.ts index 6934c3cdfb..138f1147db 100644 --- a/packages/tokens/src/color/darkModeColors.ts +++ b/packages/tokens/src/color/darkModeColors.ts @@ -145,9 +145,9 @@ const darkModeTextColors = { [InteractionState.Focus]: blue.light3, }, [Variant.Placeholder]: { - [InteractionState.Default]: gray.dark1, - [InteractionState.Hover]: gray.dark1, - [InteractionState.Focus]: gray.dark1, + [InteractionState.Default]: gray.light1, + [InteractionState.Hover]: gray.light1, + [InteractionState.Focus]: gray.light1, }, [Variant.Secondary]: { [InteractionState.Default]: gray.light1, diff --git a/packages/tokens/src/color/lightModeColors.ts b/packages/tokens/src/color/lightModeColors.ts index 3167f4d2ff..566deccc84 100644 --- a/packages/tokens/src/color/lightModeColors.ts +++ b/packages/tokens/src/color/lightModeColors.ts @@ -175,9 +175,9 @@ const lightModeTextColors = { [InteractionState.Focus]: red.base, }, [Variant.Placeholder]: { - [InteractionState.Default]: gray.base, - [InteractionState.Hover]: gray.base, - [InteractionState.Focus]: gray.base, + [InteractionState.Default]: gray.dark1, + [InteractionState.Hover]: gray.dark1, + [InteractionState.Focus]: gray.dark1, }, [Variant.OnSuccess]: { [InteractionState.Default]: green.dark2,