[Session View] fix CSS and Dark Mode issues (#131020)

* fix Session View timestamps format

* updating back to investigated alert button

* updating session view background

* removing max width for alert and status interaction

* updating buttons strategy

* updatin toolbar

* updating search bar

* refining use_eui_theme hook

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* fixing alert flex content disposition

* updating snapshot

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/session_view/public/components/back_to_investigated_alert/index.tsx

@@ -29,7 +29,7 @@ export const BackToInvestigatedAlert = ({
   return (
     <div css={styles.container}>
       <EuiBadge
-        color={styles.buttonBackgroundColor}
+        style={styles.buttonStyle}
         css={styles.jumpBackBadge}
         iconType={isDisplayedAbove ? 'arrowUp' : 'arrowDown'}
         iconSide="right"

x-pack/plugins/session_view/public/components/back_to_investigated_alert/styles.ts

@@ -6,21 +6,24 @@
  */
 
 import { useMemo } from 'react';
-import { useEuiTheme } from '@elastic/eui';
-import { euiLightVars as theme } from '@kbn/ui-theme';
 import { CSSObject } from '@emotion/react';
+import { euiLightVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '../../hooks';
 
 interface StylesDeps {
   isDisplayedAbove: boolean;
 }
 
 export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
-    const { size, colors, font } = euiTheme;
+    const { size, font } = euiTheme;
 
-    const buttonBackgroundColor = colors.primary;
+    const buttonStyle = {
+      color: euiLightVars.euiColorEmptyShade,
+      backgroundColor: euiLightVars.euiColorPrimaryText,
+    };
 
     const container: CSSObject = {
       position: 'absolute',
@@ -41,18 +44,18 @@ export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
 
     if (isDisplayedAbove) {
       container.top = 0;
-      container.background = `linear-gradient(180deg, ${theme.euiColorLightestShade} 0%, transparent 100%)`;
+      container.background = `linear-gradient(180deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
     } else {
       container.bottom = 0;
-      container.background = `linear-gradient(360deg, ${theme.euiColorLightestShade} 0%, transparent 100%)`;
+      container.background = `linear-gradient(360deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
     }
 
     return {
       container,
       jumpBackBadge,
-      buttonBackgroundColor,
+      buttonStyle,
     };
-  }, [isDisplayedAbove, euiTheme]);
+  }, [isDisplayedAbove, euiTheme, euiVars]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/process_tree/index.tsx

@@ -160,7 +160,7 @@ export const ProcessTree = ({
     <>
       <div
         ref={scrollerRef}
-        css={styles.scroller}
+        css={styles.sessionViewProcessTree}
         data-test-subj="sessionView:sessionViewProcessTree"
       >
         {sessionLeader && (

x-pack/plugins/session_view/public/components/process_tree/styles.ts

@@ -6,23 +6,23 @@
  */
 
 import { useMemo } from 'react';
-import { transparentize, useEuiTheme } from '@elastic/eui';
+import { transparentize } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
-import { euiLightVars } from '@kbn/ui-theme'; // using this temporarily until the euiTheme hook is updated to include proper hex values
+import { useEuiTheme } from '../../hooks';
 
 export const useStyles = () => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { colors, font, size } = euiTheme;
     const defaultSelectionColor = colors.primary;
 
-    const scroller: CSSObject = {
+    const sessionViewProcessTree: CSSObject = {
       position: 'relative',
       fontFamily: font.familyCode,
       overflow: 'auto',
       height: '100%',
-      backgroundColor: euiLightVars.euiColorLightestShade,
+      backgroundColor: euiVars.euiColorLightestShade,
       paddingTop: size.base,
       paddingLeft: size.s,
     };
@@ -43,12 +43,12 @@ export const useStyles = () => {
     const alertSelected = transparentize(colors.danger, 0.008);
 
     return {
-      scroller,
+      sessionViewProcessTree,
       selectionArea,
       defaultSelected,
       alertSelected,
     };
-  }, [euiTheme]);
+  }, [euiTheme, euiVars]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/process_tree_alert/__snapshots__/index.test.tsx.snap

@@ -6,13 +6,13 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="euiText euiText--small css-37sku6-EuiText"
+        class="euiText euiText--small css-5gcfa6-EuiText"
         data-id="6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
         data-test-subj="sessionView:sessionViewAlertDetail-6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
       >
         <button
           aria-label="expand"
-          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall css-aikc70-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
           data-test-subj="sessionView:sessionViewAlertDetailExpand-6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
           type="button"
         >
@@ -24,17 +24,16 @@ Object {
           />
         </button>
         <span
-          class="css-1m18djg-EuiIcon"
           color="danger"
           data-euiicon-type="alert"
         />
         <div
-          class="euiText euiText--small css-1by8n1o-EuiText"
+          class="euiText euiText--small"
         >
           cmd test alert
         </div>
         <span
-          class="euiBadge euiBadge--iconLeft css-1mjg6jf-EuiInnerText"
+          class="euiBadge euiBadge--iconLeft css-1r0v2j9-EuiInnerText"
           style="background-color: rgb(121, 170, 217); color: rgb(0, 0, 0);"
           title="open"
         >
@@ -53,13 +52,13 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="euiText euiText--small css-37sku6-EuiText"
+      class="euiText euiText--small css-5gcfa6-EuiText"
       data-id="6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
       data-test-subj="sessionView:sessionViewAlertDetail-6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
     >
       <button
         aria-label="expand"
-        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall css-aikc70-EuiButtonIcon"
+        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="sessionView:sessionViewAlertDetailExpand-6bb22512e0e588d1a2449b61f164b216e366fba2de39e65d002ae734d71a6c38"
         type="button"
       >
@@ -71,17 +70,16 @@ Object {
         />
       </button>
       <span
-        class="css-1m18djg-EuiIcon"
         color="danger"
         data-euiicon-type="alert"
       />
       <div
-        class="euiText euiText--small css-1by8n1o-EuiText"
+        class="euiText euiText--small"
       >
         cmd test alert
       </div>
       <span
-        class="euiBadge euiBadge--iconLeft css-1mjg6jf-EuiInnerText"
+        class="euiBadge euiBadge--iconLeft css-1r0v2j9-EuiInnerText"
         style="background-color: rgb(121, 170, 217); color: rgb(0, 0, 0);"
         title="open"
       >

x-pack/plugins/session_view/public/components/process_tree_alert/index.tsx

@@ -69,14 +69,11 @@ export const ProcessTreeAlert = ({
       <EuiButtonIcon
         iconType="expand"
         aria-label="expand"
-        css={styles.alertRowItem}
         data-test-subj={`sessionView:sessionViewAlertDetailExpand-${uuid}`}
         onClick={handleExpandClick}
       />
-      <EuiIcon type="alert" color="danger" css={styles.alertRowItem} />
-      <EuiText size="s" css={styles.alertRuleName}>
-        {dataOrDash(name)}
-      </EuiText>
+      <EuiIcon type="alert" color="danger" />
+      <EuiText size="s">{dataOrDash(name)}</EuiText>
       <EuiBadge color={getBadgeColorFromAlertStatus(status)} css={styles.alertStatus}>
         {dataOrDash(status)}
       </EuiBadge>

x-pack/plugins/session_view/public/components/process_tree_alert/styles.ts

@@ -43,6 +43,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
     const alert: CSSObject = {
       fontFamily: font.family,
       display: 'flex',
+      gap: size.s,
       alignItems: 'center',
       minHeight: '20px',
       padding: `${size.xs} ${size.base}`,
@@ -55,34 +56,18 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
       '&:hover': {
         background: hoverBgColor,
       },
-    };
-
-    const alertRowItem: CSSObject = {
-      '&:first-of-type': {
-        marginRight: size.m,
-      },
-      '&:not(:first-of-type)': {
+      button: {
+        flexShrink: 0,
         marginRight: size.s,
       },
     };
 
-    const alertRuleName: CSSObject = {
-      ...alertRowItem,
-      maxWidth: '70%',
-    };
-
     const alertStatus: CSSObject = {
-      ...alertRowItem,
       textTransform: 'capitalize',
-      '&, span': {
-        cursor: 'pointer !important',
-      },
     };
 
     return {
       alert,
-      alertRowItem,
-      alertRuleName,
       alertStatus,
     };
   }, [euiTheme, isInvestigated, isSelected]);

x-pack/plugins/session_view/public/components/process_tree_node/buttons.tsx

@@ -9,6 +9,8 @@ import { EuiButton, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useButtonStyles } from './use_button_styles';
 
+const MAX_ALERT_COUNT = 99;
+
 export const ChildrenProcessesButton = ({
   onToggle,
   isExpanded,
@@ -16,17 +18,18 @@ export const ChildrenProcessesButton = ({
   onToggle: () => void;
   isExpanded: boolean;
 }) => {
-  const { button, buttonArrow, expandedIcon } = useButtonStyles({ isExpanded });
+  const { button, buttonArrow } = useButtonStyles();
 
   return (
     <EuiButton
+      className={isExpanded ? 'isExpanded' : ''}
       key="child-processes-button"
       css={button}
       onClick={onToggle}
       data-test-subj="sessionView:processTreeNodeChildProcessesButton"
     >
       <FormattedMessage id="xpack.sessionView.childProcesses" defaultMessage="Child processes" />
-      <EuiIcon css={buttonArrow} size="s" type={expandedIcon} />
+      <EuiIcon css={buttonArrow} size="s" type="arrowDown" />
     </EuiButton>
   );
 };
@@ -40,12 +43,11 @@ export const AlertButton = ({
   onToggle: () => void;
   alertsCount: number;
 }) => {
-  const { alertButton, alertsCountNumber, buttonArrow, expandedIcon } = useButtonStyles({
-    isExpanded,
-  });
+  const { alertButton, buttonArrow } = useButtonStyles();
 
   return (
     <EuiButton
+      className={isExpanded ? 'isExpanded' : ''}
       key="alert-button"
       css={alertButton}
       onClick={onToggle}
@@ -56,10 +58,9 @@ export const AlertButton = ({
       ) : (
         <FormattedMessage id="xpack.sessionView.alert" defaultMessage="Alert" />
       )}
-      {alertsCount > 1 && (
-        <span css={alertsCountNumber}>({alertsCount > 99 ? '99+' : alertsCount})</span>
-      )}
-      <EuiIcon css={buttonArrow} size="s" type={expandedIcon} />
+      {alertsCount > 1 &&
+        (alertsCount > MAX_ALERT_COUNT ? ` (${MAX_ALERT_COUNT}+)` : ` (${alertsCount})`)}
+      <EuiIcon css={buttonArrow} size="s" type="arrowDown" />
     </EuiButton>
   );
 };

x-pack/plugins/session_view/public/components/process_tree_node/index.test.tsx

@@ -216,7 +216,7 @@ describe('ProcessTreeNode component', () => {
 
         expect(renderResult.queryByTestId('processTreeNodeAlertButton')).toBeTruthy();
         expect(renderResult.queryByTestId('processTreeNodeAlertButton')?.textContent).toBe(
-          `Alerts(${sessionViewAlertProcessMock.getAlerts().length})`
+          `Alerts (${sessionViewAlertProcessMock.getAlerts().length})`
         );
       });
       it('renders Alerts button with 99+ when process has more than 99 alerts', async () => {
@@ -234,7 +234,7 @@ describe('ProcessTreeNode component', () => {
 
         expect(renderResult.queryByTestId('processTreeNodeAlertButton')).toBeTruthy();
         expect(renderResult.queryByTestId('processTreeNodeAlertButton')?.textContent).toBe(
-          'Alerts(99+)'
+          'Alerts (99+)'
         );
       });
       it('toggle Alert Details button when Alert button is clicked', async () => {

x-pack/plugins/session_view/public/components/process_tree_node/index.tsx

@@ -105,7 +105,7 @@ export function ProcessTreeNode({
   );
   const isSelected = selectedProcess?.id === process.id;
   const styles = useStyles({ depth, hasAlerts, hasInvestigatedAlert, isSelected });
-  const buttonStyles = useButtonStyles({});
+  const buttonStyles = useButtonStyles();
 
   const nodeRef = useVisible({
     viewPortEl: scrollerRef.current,
@@ -256,7 +256,7 @@ export function ProcessTreeNode({
         >
           {isSessionLeader ? (
             <>
-              <EuiIcon type={sessionIcon} />{' '}
+              <EuiIcon type={sessionIcon} css={styles.icon} />{' '}
               <b css={styles.darkText}>{dataOrDash(name || args?.[0])}</b>{' '}
               <FormattedMessage id="xpack.sessionView.startedBy" defaultMessage="started by" />{' '}
               <EuiIcon type="user" /> <b css={styles.darkText}>{dataOrDash(user?.name)}</b>
@@ -269,7 +269,7 @@ export function ProcessTreeNode({
                 </span>
               )}
               <EuiToolTip position="top" content={iconTooltip}>
-                <EuiIcon data-test-subj={iconTestSubj} type={processIcon} />
+                <EuiIcon data-test-subj={iconTestSubj} type={processIcon} css={styles.icon} />
               </EuiToolTip>{' '}
               <span ref={textRef}>
                 <span css={styles.workingDir}>{dataOrDash(workingDirectory)}</span>&nbsp;
@@ -308,7 +308,7 @@ export function ProcessTreeNode({
         <ProcessTreeAlerts
           alerts={alerts}
           investigatedAlertId={investigatedAlertId}
-          isProcessSelected={selectedProcess?.id === process.id}
+          isProcessSelected={isSelected}
           onAlertSelected={onProcessClicked}
           onShowAlertDetails={onShowAlertDetails}
         />

x-pack/plugins/session_view/public/components/process_tree_node/styles.ts

@@ -6,8 +6,9 @@
  */
 
 import { useMemo } from 'react';
-import { useEuiTheme, transparentize } from '@elastic/eui';
+import { transparentize } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
+import { useEuiTheme } from '../../hooks';
 
 interface StylesDeps {
   depth: number;
@@ -17,7 +18,7 @@ interface StylesDeps {
 }
 
 export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }: StylesDeps) => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { colors, border, size, font } = euiTheme;
@@ -40,12 +41,16 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
       borderLeft: border.editable,
     };
 
+    const icon: CSSObject = {
+      color: euiVars.euiColorDarkShade,
+    };
+
     /**
      * gets border, bg and hover colors for a process
      */
     const getHighlightColors = () => {
       let bgColor = 'none';
-      const hoverColor = transparentize(colors.primary, 0.04);
+      let hoverColor = transparentize(colors.primary, 0.04);
       let borderColor = 'transparent';
       let searchResColor = transparentize(colors.warning, 0.32);
 
@@ -55,11 +60,16 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
 
       if (isSelected) {
         searchResColor = colors.warning;
-        bgColor = `${transparentize(colors.primary, 0.1)}!important`;
+        bgColor = transparentize(colors.primary, 0.08);
+        hoverColor = transparentize(colors.primary, 0.12);
       }
 
       if (hasInvestigatedAlert) {
-        bgColor = `${transparentize(colors.danger, 0.04)}!important`;
+        bgColor = transparentize(colors.danger, 0.04);
+        hoverColor = transparentize(colors.danger, 0.12);
+        if (isSelected) {
+          bgColor = transparentize(colors.danger, 0.08);
+        }
       }
 
       return { bgColor, borderColor, hoverColor, searchResColor };
@@ -99,7 +109,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
       paddingLeft: size.s,
       position: 'relative',
       verticalAlign: 'middle',
-      color: colors.mediumShade,
+      color: euiVars.euiTextSubduedColor,
       wordBreak: 'break-all',
       minHeight: `calc(${size.l} - ${size.xxs})`,
       lineHeight: `calc(${size.l} - ${size.xxs})`,
@@ -138,8 +148,9 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
       workingDir,
       timeStamp,
       alertDetails,
+      icon,
     };
-  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected]);
+  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, euiVars]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts

@@ -6,36 +6,48 @@
  */
 
 import { useMemo } from 'react';
-import { useEuiTheme, transparentize, shade } from '@elastic/eui';
-import { euiLightVars as theme } from '@kbn/ui-theme';
+import { transparentize } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
+import { useEuiTheme } from '../../hooks';
 
-interface ButtonStylesDeps {
-  isExpanded?: boolean;
-}
-
-export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => {
-  const { euiTheme } = useEuiTheme();
+export const useButtonStyles = () => {
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
-    const { colors, border, size, font } = euiTheme;
+    const { border, colors, size, font } = euiTheme;
 
     const button: CSSObject = {
-      background: transparentize(theme.euiColorVis6, 0.04),
-      border: `${border.width.thin} solid ${transparentize(theme.euiColorVis6, 0.48)}`,
       lineHeight: '18px',
       height: '20px',
       fontSize: size.m,
       fontFamily: font.family,
       fontWeight: font.weight.medium,
       borderRadius: border.radius.small,
-      color: shade(theme.euiColorVis6, 0.25),
       marginLeft: size.xs,
       marginRight: size.xs,
       minWidth: 0,
       padding: `${size.s} ${size.xxs}`,
-      span: {
-        padding: `0px ${size.xxs} !important`,
+      color: euiVars.euiColorVis6_asText,
+      background: transparentize(euiVars.euiColorVis6, 0.04),
+      border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis6, 0.48)}`,
+      '&& > span': {
+        padding: `0px ${size.xxs}`,
+        svg: {
+          transition: `transform ${euiTheme.animation.extraFast}`,
+        },
+      },
+      '&&:hover, &&:focus': {
+        background: transparentize(euiVars.euiColorVis6, 0.04),
+      },
+      '&.isExpanded > span svg': {
+        transform: `rotate(180deg)`,
+      },
+      '&.isExpanded': {
+        color: colors.ghost,
+        background: euiVars.euiColorVis6,
+        '&:hover, &:focus': {
+          background: euiVars.euiColorVis6,
+        },
       },
     };
 
@@ -45,52 +57,48 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => {
 
     const alertButton: CSSObject = {
       ...button,
-      color: colors.dangerText,
-      background: transparentize(colors.dangerText, 0.04),
-      border: `${border.width.thin} solid ${transparentize(colors.dangerText, 0.48)}`,
+      color: euiVars.euiColorDanger,
+      background: transparentize(euiVars.euiColorDanger, 0.04),
+      border: `${border.width.thin} solid ${transparentize(euiVars.euiColorDanger, 0.48)}`,
+      '&&:hover, &&:focus': {
+        background: transparentize(euiVars.euiColorDanger, 0.04),
+      },
+      '&.isExpanded': {
+        color: colors.ghost,
+        background: euiVars.euiColorDanger,
+        '&:hover, &:focus': {
+          background: `${euiVars.euiColorDanger}`,
+        },
+      },
     };
 
-    const alertsCountNumber: CSSObject = {
-      paddingLeft: size.xs,
-    };
-
-    if (isExpanded) {
-      button.color = colors.ghost;
-      button.background = theme.euiColorVis6;
-      button['&:hover, &:focus'] = {
-        backgroundColor: `${theme.euiColorVis6} !important`,
-      };
-
-      alertButton.color = colors.ghost;
-      alertButton.background = colors.dangerText;
-      alertButton['&:hover, &:focus'] = {
-        backgroundColor: `${colors.dangerText} !important`,
-      };
-    }
-
     const userChangedButton: CSSObject = {
       ...button,
-      color: theme.euiColorVis3,
-      background: transparentize(theme.euiColorVis3, 0.04),
-      border: `${border.width.thin} solid ${transparentize(theme.euiColorVis3, 0.48)}`,
+      cursor: 'default',
+      color: euiVars.euiColorGhost,
+      background: euiVars.euiColorVis3,
+      border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis3, 0.48)}`,
+      '&&:hover, &&:focus': {
+        color: euiVars.euiColorGhost,
+        background: euiVars.euiColorVis3,
+        textDecoration: 'none',
+        transform: 'none',
+        animation: 'none',
+      },
     };
 
     const buttonSize: CSSObject = {
       padding: `0px ${euiTheme.size.xs}`,
     };
 
-    const expandedIcon = isExpanded ? 'arrowUp' : 'arrowDown';
-
     return {
       buttonArrow,
       button,
       alertButton,
-      alertsCountNumber,
       userChangedButton,
       buttonSize,
-      expandedIcon,
     };
-  }, [euiTheme, isExpanded]);
+  }, [euiTheme, euiVars]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/session_view/index.tsx

@@ -200,15 +200,12 @@ export const SessionView = ({
   return (
     <>
       <div css={styles.sessionViewerComponent}>
-        <EuiPanel css={styles.toolBar} hasShadow={false} borderRadius="none">
+        <EuiPanel hasShadow={false} borderRadius="none" className="sessionViewerToolbar">
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
               <EuiBetaBadge label={BETA} size="s" css={styles.betaBadge} />
             </EuiFlexItem>
-            <EuiFlexItem
-              data-test-subj="sessionView:sessionViewProcessEventsSearch"
-              css={styles.searchBar}
-            >
+            <EuiFlexItem data-test-subj="sessionView:sessionViewProcessEventsSearch">
               <SessionViewSearchBar
                 searchQuery={searchQuery}
                 setSearchQuery={setSearchQuery}

x-pack/plugins/session_view/public/components/session_view/styles.ts

@@ -6,9 +6,8 @@
  */
 
 import { useMemo } from 'react';
-import { useEuiTheme } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
-import { euiLightVars } from '@kbn/ui-theme'; // using this temporarily until the euiTheme hook is updated to include proper hex values
+import { useEuiTheme } from '../../hooks';
 
 interface StylesDeps {
   height?: number;
@@ -16,7 +15,7 @@ interface StylesDeps {
 }
 
 export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { border, colors, size } = euiTheme;
@@ -45,21 +44,14 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
       flexGrow: 0,
       alignItems: 'stretch',
     };
-    const searchBar: CSSObject = {
-      position: 'relative',
-      input: {
-        backgroundColor: colors.emptyShade,
-      },
-    };
 
     const sessionViewerComponent: CSSObject = {
       border: border.thin,
       borderRadius: border.radius.medium,
-    };
-
-    const toolBar: CSSObject = {
-      backgroundColor: `${euiLightVars.euiFormBackgroundDisabledColor} !important`, // important used since euipanel overrides this
-      padding: `${size.m} ${size.base}`,
+      '.sessionViewerToolbar': {
+        backgroundColor: `${euiVars.euiFormBackgroundDisabledColor}`,
+        padding: `${size.m} ${size.base}`,
+      },
     };
 
     const betaBadge: CSSObject = {
@@ -71,12 +63,10 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
       detailPanel,
       nonGrowGroup,
       resizeHandle,
-      searchBar,
       sessionViewerComponent,
-      toolBar,
       betaBadge,
     };
-  }, [euiTheme, isFullScreen, height]);
+  }, [euiTheme, isFullScreen, height, euiVars]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/session_view_search_bar/index.test.tsx

@@ -34,7 +34,7 @@ describe('SessionViewSearchBar component', () => {
       />
     );
 
-    const searchInput = renderResult.getByTestId('sessionView:searchInput').querySelector('input');
+    const searchInput = renderResult.getByTestId('sessionView:searchBar').querySelector('input');
 
     expect(searchInput?.value).toEqual('ls');
 
@@ -73,7 +73,7 @@ describe('SessionViewSearchBar component', () => {
     userEvent.click(renderResult.getByTestId('pagination-button-next'));
     expect(searchPagination.querySelector(paginationTextClass)?.textContent).toEqual('2 of 3');
 
-    const searchInput = renderResult.getByTestId('sessionView:searchInput').querySelector('input');
+    const searchInput = renderResult.getByTestId('sessionView:searchBar').querySelector('input');
 
     if (searchInput) {
       userEvent.type(searchInput, ' -la');

x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx

@@ -65,7 +65,7 @@ export const SessionViewSearchBar = ({
   }, [searchResults, onProcessSelected, selectedResult]);
 
   return (
-    <div data-test-subj="sessionView:searchInput" css={styles.searchBarWithResult}>
+    <div data-test-subj="sessionView:searchBar" css={styles.searchBar}>
       <EuiSearchBar query={searchQuery} onChange={onSearch} box={translatePlaceholder} />
       {noResults && <span css={styles.noResults}>{NO_RESULTS}</span>}
       {showPagination && (

x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts

@@ -6,15 +6,15 @@
  */
 
 import { useMemo } from 'react';
-import { useEuiTheme } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
+import { useEuiTheme } from '../../hooks';
 
 interface StylesDeps {
   hasSearchResults: boolean;
 }
 
 export const useStyles = ({ hasSearchResults }: StylesDeps) => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
     const pagination: CSSObject = {
@@ -36,19 +36,20 @@ export const useStyles = ({ hasSearchResults }: StylesDeps) => {
       right: euiTheme.size.xxl,
     };
 
-    const searchBarWithResult: CSSObject = {
+    const searchBar: CSSObject = {
       position: 'relative',
-      'input.euiFieldSearch.euiFieldSearch-isClearable': {
+      backgroundColor: euiVars.euiFormBackgroundColor,
+      input: {
         paddingRight: hasSearchResults ? '200px' : euiTheme.size.xxl,
       },
     };
 
     return {
       pagination,
-      searchBarWithResult,
+      searchBar,
       noResults,
     };
-  }, [euiTheme, hasSearchResults]);
+  }, [euiTheme, euiVars, hasSearchResults]);
 
   return cached;
 };

x-pack/plugins/session_view/public/hooks/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { useEuiTheme } from './use_eui_theme';

x-pack/plugins/session_view/public/hooks/use_eui_theme.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { shade, useEuiTheme as useEuiThemeHook } from '@elastic/eui';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-theme';
+import { useMemo } from 'react';
+
+type EuiThemeProps = Parameters<typeof useEuiThemeHook>;
+type ExtraEuiVars = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  euiColorVis6_asText: string;
+};
+type EuiVars = typeof euiLightVars & ExtraEuiVars;
+type EuiThemeReturn = ReturnType<typeof useEuiThemeHook> & { euiVars: EuiVars };
+
+// Not all Eui Tokens were fully migrated to @elastic/eui/useEuiTheme yet, so
+// this hook overrides the default useEuiTheme hook to provide a custom hook that
+// allows the use the euiVars tokens from the euiLightVars and euiDarkVars
+export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => {
+  const euiThemeHook = useEuiThemeHook(...props);
+
+  const euiVars = useMemo(() => {
+    const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars;
+
+    const extraEuiVars: ExtraEuiVars = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      euiColorVis6_asText: shade(themeVars.euiColorVis6, 0.335),
+    };
+
+    return {
+      ...themeVars,
+      ...extraEuiVars,
+    };
+  }, [euiThemeHook.colorMode]);
+
+  return {
+    ...euiThemeHook,
+    euiVars,
+  };
+};