Summary

As part of the EuiBadge design update, we need to add support for light color variants activated via the new fill prop.

The fill prop should be optional, accept boolean values, and default to true since the existing badge colors are considered the filled variant. The light color variants can be found in the Figma file. The prop is named fill to match the EuiButton API.

Technical details

The light badge colors should be added to euiBadgeStyles and the euiBadgeColors function it uses to get the color values. Whenever fill = false the light colors should be used.

Color map

Acceptance criteria

• The fill?: boolean defaulting to true should be added to EuiBadgeProps
• Styles should be updated to use light badge colors when fill = false
• Tests and stories should be updated to fully cover the new functionality and the fill prop
• A VRT test should be added to test all badge colors (fill = true and fill = false variants)
• There should be no regressions in the high contrast mode
• Both light and dark color schemes should be supported