[8.x] [Security Solution][Entity Analytics] EUI refresh: Remove color functions (#205262) (#210558)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Entity Analytics] EUI refresh: Remove color
functions (#205262)](https://github.com/elastic/kibana/pull/205262)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"6295984+angorayc@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-30T16:14:17Z","message":"[Security
Solution][Entity Analytics] EUI refresh: Remove color functions
(#205262)\n\n##
Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\r\nhttps://github.com/elastic/kibana/pull/204921\r\n\r\n###
Running Kibana with the Borealis theme\r\nIn order to run Kibana with
Borealis, you'll need to do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\nuiSettings.experimental.themeSwitcherEnabled:
true\r\n\r\nRun Kibana with the following environment variable
set:\r\nKBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.\r\n\r\n\r\n\r\n![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)","sha":"f349f61cbc74f3bc7659a997d03fbe28cdc15610","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","v9.0.0","Team:Entity
Analytics","EUI Visual Refresh"],"title":"[Security Solution][Entity
Analytics] EUI refresh: Remove color
functions","number":205262,"url":"https://github.com/elastic/kibana/pull/205262","mergeCommit":{"message":"[Security
Solution][Entity Analytics] EUI refresh: Remove color functions
(#205262)\n\n##
Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\r\nhttps://github.com/elastic/kibana/pull/204921\r\n\r\n###
Running Kibana with the Borealis theme\r\nIn order to run Kibana with
Borealis, you'll need to do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\nuiSettings.experimental.themeSwitcherEnabled:
true\r\n\r\nRun Kibana with the following environment variable
set:\r\nKBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.\r\n\r\n\r\n\r\n![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)","sha":"f349f61cbc74f3bc7659a997d03fbe28cdc15610"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205262","number":205262,"mergeCommit":{"message":"[Security
Solution][Entity Analytics] EUI refresh: Remove color functions
(#205262)\n\n##
Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\r\nhttps://github.com/elastic/kibana/pull/204921\r\n\r\n###
Running Kibana with the Borealis theme\r\nIn order to run Kibana with
Borealis, you'll need to do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\nuiSettings.experimental.themeSwitcherEnabled:
true\r\n\r\nRun Kibana with the following environment variable
set:\r\nKBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.\r\n\r\n\r\n\r\n![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)","sha":"f349f61cbc74f3bc7659a997d03fbe28cdc15610"}}]}]
BACKPORT-->
This commit is contained in:
Angela Chuang 2025-02-12 13:13:18 +00:00 committed by GitHub
parent 94e88d1b84
commit 38be2a5ec5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 4 deletions

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { useEuiBackgroundColor } from '@elastic/eui';
import { useEuiTheme } from '@elastic/eui';
import type { VFC } from 'react';
import React, { useMemo } from 'react';
import { css } from '@emotion/react';
@ -22,6 +22,7 @@ export interface PanelContentProps {
* Appears after the user clicks on the expand details button in the right section.
*/
export const LeftPanelContent: VFC<PanelContentProps> = ({ selectedTabId, tabs }) => {
const { euiTheme } = useEuiTheme();
const selectedTabContent = useMemo(() => {
return tabs.find((tab) => tab.id === selectedTabId)?.content;
}, [selectedTabId, tabs]);
@ -29,7 +30,7 @@ export const LeftPanelContent: VFC<PanelContentProps> = ({ selectedTabId, tabs }
return (
<FlyoutBody
css={css`
background-color: ${useEuiBackgroundColor('subdued')};
background-color: ${euiTheme.colors.backgroundBaseSubdued};
`}
>
{selectedTabContent}

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
import type { ReactElement, VFC } from 'react';
import React, { memo } from 'react';
import { css } from '@emotion/react';
@ -57,6 +57,7 @@ export interface PanelHeaderProps {
*/
export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
({ selectedTabId, setSelectedTabId, tabs }) => {
const { euiTheme } = useEuiTheme();
const onSelectedTabChanged = (id: EntityDetailsLeftPanelTab) => setSelectedTabId(id);
const renderTabs = tabs.map((tab, index) => (
<EuiTab
@ -72,7 +73,7 @@ export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
return (
<FlyoutHeader
css={css`
background-color: ${useEuiBackgroundColor('subdued')};
background-color: ${euiTheme.colors.backgroundBaseSubdued};
padding-bottom: 0 !important;
border-block-end: none !important;
`}