diff --git a/x-pack/solutions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts
index 17c4e367f55e8..950742cb2eb91 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts
@@ -15,7 +15,7 @@ interface StylesDeps {
}
export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { size, font } = euiTheme;
@@ -44,10 +44,10 @@ export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
if (isDisplayedAbove) {
container.top = 0;
- container.background = `linear-gradient(180deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
+ container.background = `linear-gradient(180deg, ${euiTheme.colors.lightestShade} 0%, transparent 100%)`;
} else {
container.bottom = 0;
- container.background = `linear-gradient(360deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
+ container.background = `linear-gradient(360deg, ${euiTheme.colors.lightestShade} 0%, transparent 100%)`;
}
return {
@@ -55,7 +55,7 @@ export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
jumpBackBadge,
buttonStyle,
};
- }, [isDisplayedAbove, euiTheme, euiVars]);
+ }, [isDisplayedAbove, euiTheme]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx
index 7f9ed064305ba..5f2eb0468fa60 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx
+++ b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useMemo } from 'react';
-import { EuiTextColor, EuiPanel } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type {
ProcessEventHost,
@@ -16,7 +16,6 @@ import type {
import { DetailPanelAccordion } from '../detail_panel_accordion';
import { DetailPanelCopy } from '../detail_panel_copy';
import { DetailPanelListItem } from '../detail_panel_list_item';
-import { useStyles } from '../detail_panel_process_tab/styles';
import { useStyles as useStylesChild } from './styles';
import { getHostData, getContainerData, getOrchestratorData, getCloudData } from './helpers';
@@ -36,7 +35,6 @@ export const DetailPanelMetadataTab = ({
processOrchestrator,
processCloud,
}: DetailPanelMetadataTabDeps) => {
- const styles = useStyles();
const stylesChild = useStylesChild();
const hostData = useMemo(() => getHostData(processHost), [processHost]);
const containerData = useMemo(() => getContainerData(processContainer), [processContainer]);
@@ -62,9 +60,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.id: "${hostData.id}"`}
tooltipContent={hostData.id}
>
-
- {hostData.id}
-
+ {hostData.id}
),
},
@@ -75,9 +71,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.hostname: "${hostData.hostname}"`}
tooltipContent={hostData.hostname}
>
-
- {hostData.hostname}
-
+ {hostData.hostname}
),
},
@@ -88,9 +82,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.ip: "${hostData.ip}"`}
tooltipContent={hostData.ip}
>
-
- {hostData.ip}
-
+ {hostData.ip}
),
},
@@ -101,9 +93,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.mac: "${hostData.mac}"`}
tooltipContent={hostData.mac}
>
-
- {hostData.mac}
-
+ {hostData.mac}
),
},
@@ -114,9 +104,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.name: "${hostData.name}"`}
tooltipContent={hostData.name}
>
-
- {hostData.name}
-
+ {hostData.name}
),
},
@@ -143,9 +131,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.architecture: "${hostData.architecture}"`}
tooltipContent={hostData.architecture}
>
-
- {hostData.architecture}
-
+ {hostData.architecture}
),
},
@@ -156,9 +142,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.family: "${hostData.os.family}"`}
tooltipContent={hostData.os.family}
>
-
- {hostData.os.family}
-
+ {hostData.os.family}
),
},
@@ -169,9 +153,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.full: "${hostData.os.full}"`}
tooltipContent={hostData.os.full}
>
-
- {hostData.os.full}
-
+ {hostData.os.full}
),
},
@@ -182,9 +164,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.kernel: "${hostData.os.kernel}"`}
tooltipContent={hostData.os.kernel}
>
-
- {hostData.os.kernel}
-
+ {hostData.os.kernel}
),
},
@@ -195,9 +175,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.name: "${hostData.os.name}"`}
tooltipContent={hostData.os.name}
>
-
- {hostData.os.name}
-
+ {hostData.os.name}
),
},
@@ -208,9 +186,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.platform: "${hostData.os.platform}"`}
tooltipContent={hostData.os.platform}
>
-
- {hostData.os.platform}
-
+ {hostData.os.platform}
),
},
@@ -221,9 +197,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`host.os.version: "${hostData.os.version}"`}
tooltipContent={hostData.os.version}
>
-
- {hostData.os.version}
-
+ {hostData.os.version}
),
},
@@ -247,9 +221,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.provider: "${cloudData.instance.name}"`}
tooltipContent={cloudData.instance.name}
>
-
- {cloudData.instance.name}
-
+ {cloudData.instance.name}
),
},
@@ -260,9 +232,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.provider: "${cloudData.provider}"`}
tooltipContent={cloudData.provider}
>
-
- {cloudData.provider}
-
+ {cloudData.provider}
),
},
@@ -273,9 +243,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.region: "${cloudData.region}"`}
tooltipContent={cloudData.region}
>
-
- {cloudData.region}
-
+ {cloudData.region}
),
},
@@ -286,9 +254,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.account.id: "${cloudData.account.id}"`}
tooltipContent={cloudData.account.id}
>
-
- {cloudData.account.id}
-
+ {cloudData.account.id}
),
},
@@ -299,9 +265,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.project.id: "${cloudData.project.id}"`}
tooltipContent={cloudData.project.id}
>
-
- {cloudData.project.id}
-
+ {cloudData.project.id}
),
},
@@ -312,9 +276,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`cloud.project.name: "${cloudData.project.name}"`}
tooltipContent={cloudData.project.name}
>
-
- {cloudData.project.name}
-
+ {cloudData.project.name}
),
},
@@ -337,9 +299,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`container.id: "${containerData.id}"`}
tooltipContent={containerData.id}
>
-
- {containerData.id}
-
+ {containerData.id}
),
},
@@ -350,9 +310,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`container.name: "${containerData.name}"`}
tooltipContent={containerData.name}
>
-
- {containerData.name}
-
+ {containerData.name}
),
},
@@ -363,9 +321,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`container.image.name: "${containerData.image.name}"`}
tooltipContent={containerData.image.name}
>
-
- {containerData.image.name}
-
+ {containerData.image.name}
),
},
@@ -376,9 +332,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`container.image.tag: "${containerData.image.tag}"`}
tooltipContent={containerData.image.tag}
>
-
- {containerData.image.tag}
-
+ {containerData.image.tag}
),
},
@@ -389,9 +343,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`container.image.hash.all: "${containerData.image.hash.all}"`}
tooltipContent={containerData.image.hash.all}
>
-
- {containerData.image.hash.all}
-
+ {containerData.image.hash.all}
),
},
@@ -414,9 +366,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.resource.ip: "${orchestratorData.resource.ip}"`}
tooltipContent={orchestratorData.resource.ip}
>
-
- {orchestratorData.resource.ip}
-
+ {orchestratorData.resource.ip}
),
},
@@ -427,9 +377,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.resource.name: "${orchestratorData.resource.name}"`}
tooltipContent={orchestratorData.resource.name}
>
-
- {orchestratorData.resource.name}
-
+ {orchestratorData.resource.name}
),
},
@@ -440,9 +388,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.resource.type: "${orchestratorData.resource.type}"`}
tooltipContent={orchestratorData.resource.type}
>
-
- {orchestratorData.resource.type}
-
+ {orchestratorData.resource.type}
),
},
@@ -453,9 +399,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.resource.parent.type: "${orchestratorData.resource.parent.type}"`}
tooltipContent={orchestratorData.resource.parent.type}
>
-
- {orchestratorData.resource.parent.type}
-
+ {orchestratorData.resource.parent.type}
),
},
@@ -466,9 +410,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.namespace: "${orchestratorData.namespace}"`}
tooltipContent={orchestratorData.namespace}
>
-
- {orchestratorData.namespace}
-
+ {orchestratorData.namespace}
),
},
@@ -479,9 +421,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.cluster.id: "${orchestratorData.cluster.id}"`}
tooltipContent={orchestratorData.cluster.id}
>
-
- {orchestratorData.cluster.id}
-
+ {orchestratorData.cluster.id}
),
},
@@ -492,9 +432,7 @@ export const DetailPanelMetadataTab = ({
textToCopy={`orchestrator.cluster.name: "${orchestratorData.cluster.name}"`}
tooltipContent={orchestratorData.cluster.name}
>
-
- {orchestratorData.cluster.name}
-
+ {orchestratorData.cluster.name}
),
},
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
index 13157546ccdb8..5a8085f68ec14 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
+++ b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
@@ -84,11 +84,11 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
const [exec, eventAction] = execTuple;
return (
-
+
{exec}
{eventAction && (
-
+
{eventAction}
)}
@@ -131,9 +131,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.entity_id: "${id}"`}
tooltipContent={id}
>
-
- {id}
-
+ {id}
),
},
@@ -166,9 +164,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.interactive: "${interactive}"`}
tooltipContent={interactive}
>
-
- {interactive}
-
+ {interactive}
),
},
@@ -179,9 +175,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.working_directory: "${workingDirectory}"`}
tooltipContent={workingDirectory}
>
-
- {workingDirectory}
-
+ {workingDirectory}
),
},
@@ -192,9 +186,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.pid: "${pid}"`}
tooltipContent={pid}
>
-
- {pid}
-
+ {pid}
),
},
@@ -227,9 +219,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.exit_code: "${exitCode}"`}
tooltipContent={exitCode}
>
-
- {exitCode}
-
+ {exitCode}
),
},
@@ -288,9 +278,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${LEADER_FIELD_PREFIX[idx]}.entry_meta.type: "${entryMetaType}"`}
tooltipContent={entryMetaType}
>
-
- {entryMetaType}
-
+ {entryMetaType}
),
},
@@ -343,9 +331,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${PROCESS_FIELD_PREFIX}.entity_id: "${id}"`}
tooltipContent={id}
>
-
- {id}
-
+ {id}
),
},
@@ -379,9 +365,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${PROCESS_FIELD_PREFIX}.interactive: "${interactive}"`}
tooltipContent={interactive}
>
-
- {interactive}
-
+ {interactive}
),
},
@@ -392,9 +376,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${PROCESS_FIELD_PREFIX}.working_directory: "${workingDirectory}"`}
tooltipContent={workingDirectory}
>
-
- {workingDirectory}
-
+ {workingDirectory}
),
},
@@ -405,9 +387,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${PROCESS_FIELD_PREFIX}.pid: "${pid}"`}
tooltipContent={pid}
>
-
- {pid}
-
+ {pid}
),
},
@@ -440,9 +420,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
textToCopy={`${PROCESS_FIELD_PREFIX}.exit_code: "${exitCode}"`}
tooltipContent={exitCode}
>
-
- {exitCode}
-
+ {exitCode}
),
},
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
index e1bc139ba5d8a..5905e4a4a865f 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
@@ -18,7 +18,7 @@ export const useStyles = () => {
};
const executableAction: CSSObject = {
- fontWeight: euiTheme.font.weight.semiBold,
+ fontWeight: euiTheme.font.weight.bold,
paddingLeft: euiTheme.size.xs,
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts
index a2dac9bbb60ca..bb43acd329876 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts
@@ -10,7 +10,7 @@ import { CSSObject } from '@emotion/react';
import { useEuiTheme } from '../../hooks';
export const useStyles = () => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { font } = euiTheme;
@@ -20,13 +20,13 @@ export const useStyles = () => {
fontFamily: font.familyCode,
overflow: 'auto',
height: '100%',
- backgroundColor: euiVars.euiColorLightestShade,
+ backgroundColor: euiTheme.colors.lightestShade,
};
return {
sessionViewProcessTree,
};
- }, [euiTheme, euiVars]);
+ }, [euiTheme]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts
index 02d49e502bc35..2b2d2385e7755 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts
@@ -16,7 +16,7 @@ interface StylesDeps {
}
export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { size, colors, font, border } = euiTheme;
@@ -56,7 +56,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
flexShrink: 0,
marginRight: size.xs,
'&:hover, &:focus, &:focus-within': {
- backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token
+ backgroundColor: transparentize(euiTheme.colors.backgroundFilledPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token
},
},
'&& .euiFlexItem': {
@@ -100,7 +100,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
processPanel,
processAlertDisplayContainer,
};
- }, [euiTheme, isInvestigated, isSelected, euiVars]);
+ }, [euiTheme, isInvestigated, isSelected]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts
index 56df551b2ffe5..ac629304c8179 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts
@@ -25,7 +25,7 @@ export const useStyles = ({
isSelected,
isSessionLeader,
}: StylesDeps) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { colors, border, size, font } = euiTheme;
@@ -50,7 +50,7 @@ export const useStyles = ({
};
const icon: CSSObject = {
- color: euiVars.euiColorDarkShade,
+ color: euiTheme.colors.darkShade,
};
/**
@@ -142,7 +142,7 @@ export const useStyles = ({
processNode.top = '-' + size.base;
processNode.zIndex = 1;
processNode.borderTop = `${size.base} solid transparent`;
- processNode.backgroundColor = euiVars.euiColorLightestShade;
+ processNode.backgroundColor = euiTheme.colors.lightestShade;
processNode.borderBottom = border.editable;
}
@@ -156,7 +156,7 @@ export const useStyles = ({
paddingLeft: size.s,
position: 'relative',
verticalAlign: 'middle',
- color: euiVars.euiTextSubduedColor,
+ color: euiTheme.colors.textSubdued,
wordBreak: 'break-all',
padding: `${size.xs} 0px`,
button: {
@@ -203,7 +203,7 @@ export const useStyles = ({
sessionLeader,
jumpToTop,
};
- }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, euiVars, isSessionLeader]);
+ }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, isSessionLeader]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
index c5f574eb1befc..7d7835f9cc0af 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
@@ -43,10 +43,12 @@ export const useButtonStyles = () => {
transform: `rotate(180deg)`,
},
'&.isExpanded': {
- color: colors.ghost,
+ color: colors.textInverse,
background: colors.backgroundFilledPrimary,
+ borderColor: colors.borderStrongPrimary,
'&:hover, &:focus': {
background: colors.backgroundFilledPrimary,
+ borderColor: colors.borderStrongPrimary,
},
},
};
@@ -64,10 +66,12 @@ export const useButtonStyles = () => {
textDecoration: 'none',
},
'&.isExpanded': {
- color: colors.ghost,
+ color: colors.textInverse,
background: colors.backgroundFilledDanger,
+ borderColor: colors.borderStrongDanger,
'&:hover, &:focus': {
background: `${colors.backgroundFilledDanger}`,
+ borderColor: colors.borderStrongDanger,
},
},
@@ -82,18 +86,18 @@ export const useButtonStyles = () => {
const outputButton: CSSObject = {
...button,
- color: colors.textAccent,
- background: colors.backgroundBaseAccent,
- border: `${border.width.thin} solid ${colors.borderBaseAccent}`,
+ color: colors.textAccentSecondary,
+ background: colors.backgroundBaseAccentSecondary,
+ border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`,
'&&:hover, &&:focus': {
- background: colors.backgroundLightAccent,
+ background: colors.backgroundLightAccentSecondary,
textDecoration: 'none',
},
'&.isExpanded': {
color: colors.ghost,
- background: colors.backgroundFilledAccent,
+ background: colors.backgroundFilledAccentSecondary,
'&:hover, &:focus': {
- background: `${colors.backgroundFilledAccent}`,
+ background: `${colors.backgroundFilledAccentSecondary}`,
},
},
};
@@ -101,12 +105,12 @@ export const useButtonStyles = () => {
const userChangedButton: CSSObject = {
...button,
cursor: 'default',
- color: colors.textAccentSecondary,
- background: colors.backgroundBaseAccentSecondary,
- border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`,
+ color: colors.textAccent,
+ background: colors.backgroundBaseAccent,
+ border: `${border.width.thin} solid ${colors.borderBaseAccent}`,
'&&:hover, &&:focus': {
- color: colors.textAccentSecondary,
- background: colors.backgroundBaseAccentSecondary,
+ color: colors.textAccent,
+ background: colors.backgroundBaseAccent,
textDecoration: 'none',
transform: 'none',
animation: 'none',
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts
index a6d04bac0293d..c5e76fca88d2e 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts
@@ -15,7 +15,7 @@ interface StylesDeps {
}
export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { border, size } = euiTheme;
@@ -50,13 +50,13 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
border: border.thin,
borderRadius: border.radius.medium,
'> .sessionViewerToolbar': {
- backgroundColor: `${euiVars.euiFormBackgroundDisabledColor}`,
+ backgroundColor: `${euiTheme.components.forms.backgroundDisabled}`,
padding: `${size.m} ${size.base}`,
},
};
const fakeDisabled: CSSObject = {
- color: euiVars.euiButtonColorDisabledText,
+ color: euiTheme.colors.disabled,
};
return {
@@ -67,7 +67,7 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
fakeDisabled,
sessionViewerComponent,
};
- }, [euiTheme, isFullScreen, height, euiVars]);
+ }, [euiTheme, isFullScreen, height]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/session_view_search_bar/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/session_view_search_bar/styles.ts
index 3585c49de75fb..fc001ec1ca657 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/session_view_search_bar/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/session_view_search_bar/styles.ts
@@ -14,7 +14,7 @@ interface StylesDeps {
}
export const useStyles = ({ hasSearchResults }: StylesDeps) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const pagination: CSSObject = {
@@ -38,7 +38,7 @@ export const useStyles = ({ hasSearchResults }: StylesDeps) => {
const searchBar: CSSObject = {
position: 'relative',
- backgroundColor: euiVars.euiFormBackgroundColor,
+ backgroundColor: euiTheme.components.forms.background,
input: {
paddingRight: hasSearchResults ? '200px' : euiTheme.size.xxl,
},
@@ -49,7 +49,7 @@ export const useStyles = ({ hasSearchResults }: StylesDeps) => {
searchBar,
noResults,
};
- }, [euiTheme, euiVars, hasSearchResults]);
+ }, [euiTheme, hasSearchResults]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts
index f7b9ff88a4445..619387904c44a 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts
@@ -12,7 +12,7 @@ import { useEuiTheme } from '../../hooks';
import type { Teletype } from '../../../common';
export const useStyles = (tty?: Teletype, show?: boolean) => {
- const { euiTheme, euiVars } = useEuiTheme();
+ const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { size, font, colors, border } = euiTheme;
@@ -33,7 +33,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
const header: CSSObject = {
visibility: show ? 'visible' : 'hidden',
- backgroundColor: `${euiVars.euiFormBackgroundDisabledColor}`,
+ backgroundColor: `${euiTheme.components.forms.backgroundDisabled}`,
padding: `${size.m} ${size.base}`,
};
@@ -81,7 +81,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
terminal,
scrollPane,
};
- }, [euiTheme, show, euiVars.euiFormBackgroundDisabledColor, tty?.rows, tty?.columns]);
+ }, [euiTheme, show, tty?.rows, tty?.columns]);
return cached;
};
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
index dad8c34b52ffb..8332be8412082 100644
--- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
@@ -41,7 +41,9 @@ export const useStyles = (progress: number) => {
if (selected) {
return euiVars.terminalOutputMarkerAccent;
}
- return isAmsterdam(themeName) ? euiVars.euiColorVis1 : euiVars.euiColorVis2;
+ return isAmsterdam(themeName)
+ ? euiTheme.colors.vis.euiColorVis1
+ : euiTheme.colors.vis.euiColorVis2;
};
const marker = (type: TTYPlayerLineMarkerType, selected: boolean): CSSObject => ({
@@ -89,23 +91,17 @@ export const useStyles = (progress: number) => {
"input[type='range']::-webkit-slider-thumb": customThumb,
"input[type='range']::-moz-range-thumb": customThumb,
'.euiRangeHighlight__progress': {
- backgroundColor: isAmsterdam(themeName)
- ? euiVars.euiColorVis0_behindText
- : euiVars.euiColorVis0,
+ backgroundColor: euiTheme.colors.vis.euiColorVis0,
width: progress + '%!important',
borderBottomRightRadius: 0,
borderTopRightRadius: 0,
},
'.euiRangeSlider:focus ~ .euiRangeHighlight .euiRangeHighlight__progress': {
- backgroundColor: isAmsterdam(themeName)
- ? euiVars.euiColorVis0_behindText
- : euiVars.euiColorVis0,
+ backgroundColor: euiTheme.colors.vis.euiColorVis0,
},
'.euiRangeSlider:focus:not(:focus-visible) ~ .euiRangeHighlight .euiRangeHighlight__progress':
{
- backgroundColor: isAmsterdam(themeName)
- ? euiVars.euiColorVis0_behindText
- : euiVars.euiColorVis0,
+ backgroundColor: euiTheme.colors.vis.euiColorVis0,
},
'.euiRangeTrack::after': {
background: euiVars.terminalOutputSliderBackground,
@@ -132,10 +128,6 @@ export const useStyles = (progress: number) => {
};
}, [
euiTheme,
- euiVars.euiColorVis0_behindText,
- euiVars.euiColorVis0,
- euiVars.euiColorVis1,
- euiVars.euiColorVis2,
euiVars.terminalOutputBackground,
euiVars.terminalOutputMarkerAccent,
euiVars.terminalOutputMarkerWarning,
diff --git a/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts b/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts
index 6c43c4ad1e6b1..1ca6b3351cae6 100644
--- a/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts
+++ b/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts
@@ -5,19 +5,21 @@
* 2.0.
*/
-import { useEuiTheme as useEuiThemeHook } from '@elastic/eui';
-import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; // TODO: Borealis migration - replace to use vars from useEuiTheme?
import { useMemo } from 'react';
+import { useEuiTheme as useEuiThemeHook } from '@elastic/eui';
+
+// TODO: Borealis migration - euiLightVars and euiDarkVars are depricated.
+// Options: lock or use hardcoded colors outside of theme colors
+import { euiLightVars, euiDarkVars } from '@kbn/ui-theme';
type EuiThemeProps = Parameters;
type ExtraEuiVars = {
- buttonsBackgroundNormalDefaultPrimary: string;
terminalOutputBackground: string;
terminalOutputMarkerAccent: string;
terminalOutputMarkerWarning: string;
terminalOutputSliderBackground: string;
};
-type EuiVars = typeof euiLightVars & ExtraEuiVars;
+type EuiVars = ExtraEuiVars;
type EuiThemeReturn = ReturnType & { euiVars: EuiVars };
// Not all Eui Tokens were fully migrated to @elastic/eui/useEuiTheme yet, so
@@ -27,10 +29,7 @@ export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => {
const euiThemeHook = useEuiThemeHook(...props);
const euiVars = useMemo(() => {
- const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars; // TODO: Borealis migration - check if euiLightVars and euiDarkVars are still available in Borialis
-
const extraEuiVars: ExtraEuiVars = {
- buttonsBackgroundNormalDefaultPrimary: '#006DE4', // TODO: Borealis migration - replace with proper color token
// Terminal Output Colors don't change with the theme
terminalOutputBackground: '#1d1e23', // TODO: Borealis migration - replace with proper color token
terminalOutputMarkerAccent: euiLightVars.euiColorAccent,
@@ -39,10 +38,9 @@ export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => {
};
return {
- ...themeVars,
...extraEuiVars,
};
- }, [euiThemeHook.colorMode]);
+ }, []);
return {
...euiThemeHook,