github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921)

Browse source 
## Summary

https://github.com/elastic/kibana/issues/202505

### 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: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.



![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Angela Chuang 2024-12-30 18:03:31 +00:00 • committed by GitHub
parent 6556346d73
commit dfeb169258
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx
View file

@ -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
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx
View file

@ -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;
`}

6
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
View file

@ -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;