[Lens] Improve badge style for metrics trends #251614
Description
EUI is implementing a style update for Badge component. Since our badge is resizable we couldn't originally rely on the EUI component and I believe we created our own version. We need to be consistent with the new style which is more elegant and clean.
border radius: half of the badge height
padding top: 2px
padding bottom: 2px
additional padding on left and right: 2px
Palettes color details
As you might have noticed, EUI Badge component is now using lighter tones of color fort the background and colored text color for the numbers. We should follow that but in terms of Color Palettes I suggest to keep the current color as they are, they are a more clear representation of what is going to happen.
The point would be that for palettes that we offer, we control both the color of background and the value, following this
Palette: TREND
red color: colors.backgroundLightText / colors.textParagraph
| TREND palette | Background color | Text color |
|---|---|---|
| Red color | colors.backgroundLightDanger | colors.textDanger |
| Grey color | colors.backgroundLightText | colors.textParagraph |
| Green color | colors.backgroundLightSuccess | colors.textSuccess |
| TREND REVERSED palette | Background color | Text color |
|---|---|---|
| Green color | colors.backgroundLightSuccess | colors.textSuccess |
| Grey color | colors.backgroundLightText | colors.textParagraph |
| Red color | colors.backgroundLightDanger | colors.textDanger |
| COMPLEMENTARY palette | Background color | Text color |
|---|---|---|
| Green color | colors.backgroundLightPrimary | colors.textPrimary |
| Grey color | colors.backgroundLightText | colors.textParagraph |
| Yellow color | colors.backgroundLightWarning | colors.textWarning |
| TEMPERATURE palette | Background color | Text color |
|---|---|---|
| Green color | colors.backgroundLightPrimary | colors.textPrimary |
| Grey color | colors.backgroundLightText | colors.textParagraph |
| Red color | colors.backgroundLightDanger | colors.textDanger |
Custom color details
For custom colors instead, when these are picked manually by user, we should keep applying that color as background (even if it is dark, this is a user choice) and keep the text color as it works right now. Using token colors.textParagraph and using its light or dark version according to color contrast with badge color
Result
How it currently look and where to find it
The badge is shown when clicking in "Dynamic" option when adding a secondary metric to the chart:
