Update AssetCriticalityBadge color map to EUI Borealis by albertoblaz · Pull Request #222024 · elastic/kibana

albertoblaz · 2025-05-30T09:48:40Z

Summary

Map asset criticality status in <AssetCriticalityBadge> component to the new color tokens in EUI Borealis (see new pattern).

These new color tokens were introduced through this PR:

[Visual Refresh] Update severity colors eui#8601

Screenshots

	Before	After
Light mode
Dark mode

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

This is a low-risk change that only presents different colors where badges are used.

elasticmachine · 2025-05-30T14:14:40Z

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

hop-dev

Thanks for this! 🚀

PhilippeOberti

LGTM for the @elastic/security-threat-hunting-investigations team!

gvnmagni · 2025-06-03T09:45:22Z

Good morning @albertoblaz , @JasonStoltz made me aware of your concern about color contrast and I wanted to be help giving a bit of context.

When dealing with datavis colors we always get to the same dilemma where we have to choose, if we want to provide enough contrast we have to pick darker shades of colors losing a bit the possibility to tell them apart and also a more appealing look & feel.

Datavis-Severity tokens have been chosen with the intentional idea of having the red shades more prominent so that they would stand out from an interface, said that, you are absolutely right raising your concern and I would love to propose the same solution we put together for general Datavis colors.

The provided tokes are fully accessible on dark mode (all of them have a contrast with background higher than 3:1), in case of light mode we will provide a high-contrast set of alternative tokens that, in case of setting applied, will be darker.

This feature will be an EUI setting that is currently only a POC but it is the solution that we are trying to follow in this cases, this way users will have a nice and clean UI but with the possibility, in case they need, to turn on a settings and to have everything more contrasted.

I hope this can help your context

albertoblaz · 2025-06-03T10:34:38Z

Context: the previous comment is addressing my concern about low controls in "unknown" and "low" against a white background, expressed in this Slack comment)

@gvnmagni Thanks a lot for your detailed comment. Makes sense and is great to know you folks are on top of everything :) Just wanted to make sure there was awareness.

…t --include-path /api/status --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/dashboards --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --update'

kibanamachine · 2025-06-03T15:17:55Z

Starting backport for target branches: 9.0

https://github.com/elastic/kibana/actions/runs/15421245770

elasticmachine · 2025-06-03T15:18:42Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 11318a5

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	9.2MB	9.2MB	+212.0B

History

💛 Build #303642 was flaky b1388b3

cc @albertoblaz

kibanamachine · 2025-06-03T15:24:16Z

💔 All backports failed

Status	Branch	Result
❌	9.0	Backport failed because of merge conflicts You might need to backport the following PRs to 9.0: - [Fleet] When removing a inputs type package policy, clean up assets (#218582) - Criticality badge medium impact bug / typo fixed (#213456)

Manual backport

To create the backport manually run:

node scripts/backport --pr 222024

Questions ?

Please refer to the Backport tool documentation

## Summary Map asset criticality status in `<AssetCriticalityBadge>` component to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Screenshots | | Before | After | |--------|--------|--------| | Light mode | <img width="203" alt="_before_light" src="https://github.com/user-attachments/assets/ca09f950-8cd3-42d6-b82c-2dc4c775cdab" /> | <img width="188" alt="_after_light" src="https://github.com/user-attachments/assets/168b78c7-5a0f-42d1-918d-448d8ce242ac" /> | | Dark mode | <img width="163" alt="_before_dark" src="https://github.com/user-attachments/assets/b2f89d25-578a-4e77-8033-9e3df5d7f9a6" /> | <img width="176" alt="_after_dark" src="https://github.com/user-attachments/assets/e915b0e8-8b81-4cd7-9edd-5de58f8b7d90" /> | ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where badges are used.

albertoblaz · 2025-06-05T09:02:21Z

I've decided not to backport to v9.0 since these new color palette does not 100% map with existing color tokens in 9.0

kibanamachine · 2025-06-05T15:50:25Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 222024 locally
cc: @albertoblaz

## Summary Map asset criticality status in `<AssetCriticalityBadge>` component to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Screenshots | | Before | After | |--------|--------|--------| | Light mode | <img width="203" alt="_before_light" src="https://github.com/user-attachments/assets/ca09f950-8cd3-42d6-b82c-2dc4c775cdab" /> | <img width="188" alt="_after_light" src="https://github.com/user-attachments/assets/168b78c7-5a0f-42d1-918d-448d8ce242ac" /> | | Dark mode | <img width="163" alt="_before_dark" src="https://github.com/user-attachments/assets/b2f89d25-578a-4e77-8033-9e3df5d7f9a6" /> | <img width="176" alt="_after_dark" src="https://github.com/user-attachments/assets/e915b0e8-8b81-4cd7-9edd-5de58f8b7d90" /> | ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where badges are used.

albertoblaz self-assigned this May 30, 2025

albertoblaz added release_note:enhancement Team:Cloud Security Cloud Security team related backport:prev-minor v9.1.0 labels May 30, 2025

albertoblaz marked this pull request as ready for review May 30, 2025 14:14

albertoblaz requested review from a team as code owners May 30, 2025 14:14

albertoblaz requested a review from hop-dev May 30, 2025 14:14

hop-dev approved these changes May 30, 2025

View reviewed changes

PhilippeOberti approved these changes Jun 2, 2025

View reviewed changes

albertoblaz added 3 commits June 3, 2025 14:48

Update AssetCriticalityBadge colors to EUIBorealis

277cf8a

Style AssetCriticalityBadge through 'css' prop vs 'style'

3145e6b

Replace exposed CRITICALITY_LEVEL_COLOR with fn

ee94a4a

albertoblaz force-pushed the asset-inv-criticality-colors branch from b1388b3 to ee94a4a Compare June 3, 2025 12:50

albertoblaz enabled auto-merge (squash) June 3, 2025 12:50

kibanamachine added 2 commits June 3, 2025 13:09

[CI] Auto-commit changed files from 'make api-docs'

11318a5

albertoblaz merged commit bb4c89c into elastic:main Jun 3, 2025
10 checks passed

albertoblaz deleted the asset-inv-criticality-colors branch June 3, 2025 15:18

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jun 5, 2025

albertoblaz added backport:skip This PR does not require backporting and removed backport missing Added to PRs automatically when the are determined to be missing a backport. backport:prev-minor labels Jun 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update AssetCriticalityBadge color map to EUI Borealis#222024

Update AssetCriticalityBadge color map to EUI Borealis#222024
albertoblaz merged 5 commits intoelastic:mainfrom
albertoblaz:asset-inv-criticality-colors

albertoblaz commented May 30, 2025 •

edited by kibanamachine

Loading

Uh oh!

elasticmachine commented May 30, 2025

Uh oh!

hop-dev left a comment

Uh oh!

PhilippeOberti left a comment

Uh oh!

gvnmagni commented Jun 3, 2025

Uh oh!

albertoblaz commented Jun 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

kibanamachine commented Jun 3, 2025

Uh oh!

elasticmachine commented Jun 3, 2025

Uh oh!

kibanamachine commented Jun 3, 2025

Uh oh!

albertoblaz commented Jun 5, 2025

Uh oh!

kibanamachine commented Jun 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

albertoblaz commented May 30, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Checklist

Identify risks

Uh oh!

elasticmachine commented May 30, 2025

Uh oh!

hop-dev left a comment

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti left a comment

Choose a reason for hiding this comment

Uh oh!

gvnmagni commented Jun 3, 2025

Uh oh!

albertoblaz commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jun 3, 2025

Uh oh!

elasticmachine commented Jun 3, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

History

Uh oh!

kibanamachine commented Jun 3, 2025

💔 All backports failed

Manual backport

Questions ?

Uh oh!

albertoblaz commented Jun 5, 2025

Uh oh!

kibanamachine commented Jun 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

albertoblaz commented May 30, 2025 •

edited by kibanamachine

Loading

albertoblaz commented Jun 3, 2025 •

edited

Loading