mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[8.x] [Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921) (#210561)
# Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921)](https://github.com/elastic/kibana/pull/204921) <!--- 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-30T18:03:31Z","message":"[Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921)\n\n## Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"dfeb169258bf96aa589f3f681bf25d631fddf1d9","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:Threat Hunting:Explore","EUI Visual Refresh"],"title":"[Security Solution][threat hunting explore] EUI refresh: Remove color functions","number":204921,"url":"https://github.com/elastic/kibana/pull/204921","mergeCommit":{"message":"[Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921)\n\n## Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"dfeb169258bf96aa589f3f681bf25d631fddf1d9"}},"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/204921","number":204921,"mergeCommit":{"message":"[Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921)\n\n## Summary\r\n\r\nhttps://github.com/elastic/kibana/issues/202505\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"dfeb169258bf96aa589f3f681bf25d631fddf1d9"}}]}] BACKPORT-->
This commit is contained in:
parent
38be2a5ec5
commit
422464cd15
3 changed files with 9 additions and 7 deletions
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useEuiBackgroundColor } from '@elastic/eui';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import type { FC } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
|
@ -29,6 +29,7 @@ export interface PanelContentProps {
|
|||
* Displays the content of investigation and insights tabs (visualize is hidden for 8.9).
|
||||
*/
|
||||
export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const selectedTabContent = useMemo(() => {
|
||||
return tabs.find((tab) => tab.id === selectedTabId)?.content;
|
||||
}, [selectedTabId, tabs]);
|
||||
|
@ -36,7 +37,7 @@ export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) =>
|
|||
return (
|
||||
<FlyoutBody
|
||||
css={css`
|
||||
background-color: ${useEuiBackgroundColor('subdued')};
|
||||
background-color: ${euiTheme.colors.backgroundBaseSubdued};
|
||||
`}
|
||||
>
|
||||
{selectedTabContent}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
|
||||
import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
|
||||
import type { FC } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
|
@ -38,6 +38,7 @@ export interface PanelHeaderProps {
|
|||
*/
|
||||
export const PanelHeader: FC<PanelHeaderProps> = memo(
|
||||
({ selectedTabId, setSelectedTabId, tabs }) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const { getFieldsData } = useDocumentDetailsContext();
|
||||
const isEventKindSignal = getField(getFieldsData('event.kind')) === EventKind.signal;
|
||||
|
||||
|
@ -56,7 +57,7 @@ export const PanelHeader: FC<PanelHeaderProps> = memo(
|
|||
return (
|
||||
<FlyoutHeader
|
||||
css={css`
|
||||
background-color: ${useEuiBackgroundColor('subdued')};
|
||||
background-color: ${euiTheme.colors.backgroundBaseSubdued};
|
||||
padding-bottom: 0 !important;
|
||||
border-block-end: none !important;
|
||||
`}
|
||||
|
|
|
@ -5,14 +5,14 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { COLOR_MODES_STANDARD, useEuiBackgroundColor, useEuiTheme } from '@elastic/eui';
|
||||
import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const HEIGHT_ANIMATION_DURATION = 250;
|
||||
|
||||
export const useCardPanelStyles = () => {
|
||||
const { euiTheme, colorMode } = useEuiTheme();
|
||||
const successBackgroundColor = useEuiBackgroundColor('success');
|
||||
const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess;
|
||||
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
|
||||
const darkModeStyles = useDarkPanelStyles(isDarkMode);
|
||||
|
||||
|
@ -31,7 +31,7 @@ export const useCardPanelStyles = () => {
|
|||
}
|
||||
.onboardingCardHeaderCompleteBadge {
|
||||
background-color: ${successBackgroundColor};
|
||||
color: ${euiTheme.colors.successText};
|
||||
color: ${euiTheme.colors.textSuccess};
|
||||
}
|
||||
.onboardingCardContentWrapper {
|
||||
display: grid;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue