[Security Solution][threat hunting explore] EUI refresh: Remove custom color hex #204631
Conversation
angorayc
added
the
release_note:skip
There was a problem hiding this comment.
The change in getSeverityColor logic will change the color palette in Borealis quite drastically (medium severity will become pink for example). I don't think that's how we should handle the migration. We should rely on the new severity palette elastic/eui#8247 and decide what to do about the missing green color in this palette. Either continue using euiColorVis0 or accept our low severity alerts/vulnerabilities to be in blue, as "info" severity signals
| export const SEVERITY_COLOR = { | ||
| critical: '#E7664C', | ||
| high: '#DA8B45', | ||
| medium: '#D6BF57', | ||
| low: '#54B399', | ||
| } as const; | ||
|
|
||
| export const getSeverityColor = (euiTheme: EuiThemeComputed) => | ||
| ({ | ||
| critical: euiTheme.colors.vis.euiColorVis9, |
There was a problem hiding this comment.
The Borealis data viz color palette changed, see https://docs.google.com/document/d/1IAKbasq1nDfqd2IU3KdP8cwD3uCCAwkIekKRq7zgyWg/edit?tab=t.0#heading=h.lgyarxm75dlu , so that vis9 is not red but yellow and vis5 is not yellow but pink. These colors don't work for severity
There is Severity Palette introduced by the EUI team #203387 , but it is missing green color, which is currently how our low severity alerts/vulnerabilities are being show. There is a discussion with Security solution on how to go about it, see https://elastic.slack.com/archives/C060SDYTZ96/p1734636026436679
There was a problem hiding this comment.
Thanks @maxcold , I could find that we are adding more euiColorSeverity color for different severity levels. This PR might have to wait until those colors becomes available. Have we got a clear idea of which euiColorSeverity token should be used for critical, high, medium and low?
I thought this (Security/Vulnerability) was the mapping, but they were not in the list of euiColorSeverity
There was a problem hiding this comment.
@angorayc the team is moving from the variety of colors illustrated by your screenshot to a unified palette available here elastic/eui#8247 , but I haven't seen exact colors defined for Security severity levels from this palette. If I understand correctly, it's what @codearos is doing currently with the design team
| export const SEVERITY_COLOR = { | ||
| critical: '#E7664C', | ||
| high: '#DA8B45', | ||
| medium: '#D6BF57', | ||
| low: '#54B399', | ||
| } as const; | ||
|
|
||
| export const getSeverityColor = (euiTheme: EuiThemeComputed) => |
There was a problem hiding this comment.
I see that @CAWilson94 is doing a similar work here, so I wonder if there would be a value in extracting this logic into a more generic function/hook that could be moved into our common folder.
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
History
|
Summary
#202498
#202503
Running Kibana with the Borealis theme
In order to run Kibana with
Borealis, you'll need to do the following:Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: trueRun Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn startThis will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.
Explore
Dashboards
Alerts
Rules preview