[Security Solution] EUI Refresh Followup Pt. 1

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/index.tsx

@@ -8,14 +8,8 @@
 import React, { memo } from 'react';
 import type { EuiCommentProps } from '@elastic/eui';
 import { EuiAccordion, EuiCommentList, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
-import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import * as i18n from '../translations';
 
-const accordionCss = css`
-  color: ${euiThemeVars.euiColorPrimary};
-`;
-
 export interface ExceptionItemCardCommentsProps {
   comments: EuiCommentProps[];
   dataTestSubj?: string;
@@ -29,14 +23,14 @@ export const ExceptionItemCardComments = memo<ExceptionItemCardCommentsProps>(
         <EuiAccordion
           id="exceptionItemCardComments"
           buttonContent={
-            <EuiText size="s" css={accordionCss} data-test-subj={`${dataTestSubj || ''}TextButton`}>
+            <EuiText size="s" data-test-subj={`${dataTestSubj || ''}TextButton`}>
               {i18n.exceptionItemCardCommentsAccordion(comments.length)}
             </EuiText>
           }
           arrowDisplay="none"
           data-test-subj="exceptionItemCardComments"
         >
-          <EuiPanel data-test-subj="accordionContentPanel" hasBorder hasShadow paddingSize="m">
+          <EuiPanel data-test-subj="accordionContentPanel" paddingSize="m">
             <EuiCommentList data-test-subj="accordionCommentList" comments={comments} />
           </EuiPanel>
         </EuiAccordion>

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/conditions.styles.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { cx } from '@emotion/css';
 import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 
@@ -16,15 +15,6 @@ export const nestedGroupSpaceCss = css`
   padding-top: ${euiThemeVars.euiSizeXS};
 `;
 
-export const borderCss = cx(
-  'eui-xScroll',
-  `
-  border: 1px;
-  border-color: #d3dae6;
-  border-style: solid;
-`
-);
-
 export const valueContainerCss = css`
   display: flex;
   align-items: center;

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/index.tsx

@@ -6,22 +6,28 @@
  */
 
 import React, { memo } from 'react';
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-import { borderCss } from './conditions.styles';
 import { EntryContent } from './entry_content';
 import { OsCondition } from './os_conditions';
 import type { CriteriaConditionsProps, Entry } from './types';
 
 export const ExceptionItemCardConditions = memo<CriteriaConditionsProps>(
   ({ os, entries, dataTestSubj, showValueListModal }) => {
+    const { euiTheme } = useEuiTheme();
+    const borderStyles = css`
+      border: ${euiTheme.border.thin};
+    `;
+
     return (
       <EuiPanel
         color="subdued"
         hasBorder={true}
         hasShadow={false}
         data-test-subj={dataTestSubj}
-        className={borderCss}
+        css={borderStyles}
+        className="eui-xScroll"
       >
         {os?.length ? <OsCondition os={os} dataTestSubj={dataTestSubj} /> : null}
         {entries.map((entry: Entry, index: number) => {

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/index.tsx

@@ -6,22 +6,16 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import type { ExceptionListItemSchema } from '@kbn/securitysolution-io-ts-list-types';
 
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import * as i18n from '../translations';
 import type { Rule } from '../../types';
 import { MetaInfoDetails } from './details_info';
 import { HeaderMenu } from '../../header_menu';
 import { generateLinkedRulesMenuItems } from '../../generate_linked_rules_menu_item';
 
-const itemCss = css`
-  border-right: 1px solid #d3dae6;
-  padding: ${euiThemeVars.euiSizeS} ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeS} 0;
-`;
-
 export interface ExceptionItemCardMetaInfoProps {
   item: ExceptionListItemSchema;
   rules: Rule[];
@@ -32,6 +26,11 @@ export interface ExceptionItemCardMetaInfoProps {
 
 export const ExceptionItemCardMetaInfo = memo<ExceptionItemCardMetaInfoProps>(
   ({ item, rules, dataTestSubj, securityLinkAnchorComponent, formattedDateComponent }) => {
+    const { euiTheme } = useEuiTheme();
+    const itemCss = css`
+      border-right: ${euiTheme.border.thin};
+      padding: ${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} 0;
+    `;
     const FormattedDateComponent = formattedDateComponent;
 
     const referencedLinks = useMemo(

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/index.tsx

@@ -8,10 +8,10 @@
 /* eslint-disable react/jsx-no-literals */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import type { FC } from 'react';
-import { EuiIcon, EuiPageHeader, EuiText } from '@elastic/eui';
+import { EuiIcon, EuiPageHeader, EuiText, useEuiFontSize, useEuiTheme } from '@elastic/eui';
 import * as i18n from '../translations';
-import { textCss, descriptionContainerCss, backTextCss } from './list_header.styles';
 import { MenuItems } from './menu_items';
 import { TextWithEdit } from '../text_with_edit';
 import { EditModal } from './edit_modal';
@@ -42,6 +42,7 @@ export interface BackOptions {
   dataTestSubj?: string;
   onNavigate: (path: string) => void;
 }
+
 const ExceptionListHeaderComponent: FC<ExceptionListHeaderComponentProps> = ({
   name,
   description,
@@ -63,10 +64,25 @@ const ExceptionListHeaderComponent: FC<ExceptionListHeaderComponentProps> = ({
     description,
     onEditListDetails,
   });
+
+  const { euiTheme } = useEuiTheme();
+  const subduedTextStyles = css`
+    font-size: ${useEuiFontSize('s').fontSize};
+    color: ${euiTheme.colors.textSubdued};
+    margin-left: ${euiTheme.size.xs};
+  `;
+  const breadCrumbTextStyles = css`
+    font-size: ${useEuiFontSize('xs').fontSize};
+  `;
+  const descriptionContainerStyles = css`
+    // negates the static EuiSpacer when using Title + Description in PageHeader
+    margin-top: -${euiTheme.size.l};
+  `;
+
   return (
     <div>
       <EuiPageHeader
-        bottomBorder
+        bottomBorder="extended"
         paddingSize="none"
         pageTitle={
           <TextWithEdit
@@ -79,17 +95,17 @@ const ExceptionListHeaderComponent: FC<ExceptionListHeaderComponentProps> = ({
         responsive
         data-test-subj={`${dataTestSubj || ''}PageHeader`}
         description={
-          <div css={descriptionContainerCss}>
+          <div css={descriptionContainerStyles}>
             <TextWithEdit
               dataTestSubj={`${dataTestSubj || ''}Description`}
-              textCss={textCss}
+              textCss={subduedTextStyles}
               isReadonly={isReadonly || !canUserEditList}
               text={listDetails.description || i18n.EXCEPTION_LIST_HEADER_DESCRIPTION}
               onEdit={onEdit}
             />
             <div css={textWithEditContainerCss} data-test-subj={`${dataTestSubj || ''}ListID`}>
-              <EuiText css={textCss}>{i18n.EXCEPTION_LIST_HEADER_LIST_ID}:</EuiText>
-              <EuiText css={textCss}>{listId}</EuiText>
+              <EuiText css={subduedTextStyles}>{i18n.EXCEPTION_LIST_HEADER_LIST_ID}:</EuiText>
+              <EuiText css={subduedTextStyles}>{listId}</EuiText>
             </div>
           </div>
         }
@@ -109,7 +125,7 @@ const ExceptionListHeaderComponent: FC<ExceptionListHeaderComponentProps> = ({
         breadcrumbs={[
           {
             text: (
-              <div data-test-subj={`${dataTestSubj || ''}Breadcrumb`} css={backTextCss}>
+              <div data-test-subj={`${dataTestSubj || ''}Breadcrumb`} css={breadCrumbTextStyles}>
                 <EuiIcon size="s" type="arrowLeft" />
                 {i18n.EXCEPTION_LIST_HEADER_BREADCRUMB}
               </div>