diff --git a/.changeset/fuzzy-dryers-join.md b/.changeset/fuzzy-dryers-join.md new file mode 100644 index 0000000000..593d1bcf46 --- /dev/null +++ b/.changeset/fuzzy-dryers-join.md @@ -0,0 +1,10 @@ +--- +'@leafygreen-ui/tokens': patch +--- +Updates icon color tokens in both light and dark modes to improve visual consistency and accessibility. + +Dark Mode (darkModeColors.ts) +Updated the InversePrimary variant's default icon color from white to black to match the hover state, ensuring visual consistency across interaction states. + +Light Mode (lightModeColors.ts) +Updated the Disabled variant icon colors from gray.base to gray.light1 across all interaction states (Default, Hover, Focus). This provides a lighter disabled appearance that better distinguishes disabled icons from active ones. diff --git a/packages/tokens/src/color/darkModeColors.ts b/packages/tokens/src/color/darkModeColors.ts index 138f1147db..b4655b9be7 100644 --- a/packages/tokens/src/color/darkModeColors.ts +++ b/packages/tokens/src/color/darkModeColors.ts @@ -107,7 +107,7 @@ const darkModeIconColors = { [InteractionState.Focus]: blue.light3, }, [Variant.InversePrimary]: { - [InteractionState.Default]: white, + [InteractionState.Default]: black, [InteractionState.Hover]: black, [InteractionState.Focus]: blue.dark2, }, diff --git a/packages/tokens/src/color/lightModeColors.ts b/packages/tokens/src/color/lightModeColors.ts index 566deccc84..7594e4b27d 100644 --- a/packages/tokens/src/color/lightModeColors.ts +++ b/packages/tokens/src/color/lightModeColors.ts @@ -132,9 +132,9 @@ const lightModeIconColors = { [InteractionState.Focus]: red.base, }, [Variant.Disabled]: { - [InteractionState.Default]: gray.base, - [InteractionState.Hover]: gray.base, - [InteractionState.Focus]: gray.base, + [InteractionState.Default]: gray.light1, + [InteractionState.Hover]: gray.light1, + [InteractionState.Focus]: gray.light1, }, } as const satisfies VariantColorRecord;