[Security Solution] EUI Refresh Followup Pt. 1 (elastic#205990)

## Summary

This is the first batch of work involving
elastic#202052. It includes the
following tasks:

- [x] (Important) Review usage of "success" colors for positive,
semantic
intent.([details](elastic#202052 (comment))).
- [x] (Important) Review and update color palette usage.
([details](#color-palettes))
- [x] (Important) Replace vis colors used outside of visualizations with
color tokens .
([details](elastic#202052 (comment)))
- [x] (Important) Replace custom colors with semantic tokens
([details](elastic#202052 (comment)))
- [x] (Important) Replace color calculation functions with semantic
tokens.
([details](elastic#202052 (comment)))
- [x] Update tokens to use the new naming scheme.
([details](elastic#202052 (comment)))

### What changed?
Broadly, these changes involve two main areas: Exception Lists and the
Rule Creation form (specifically: the EQL query bar and the "time"
inputs (Suppression Duration, Interval, Lookback)).

I also found an unused component, and fixed a minor UI bug with
Exception Comments.

Screenshots (before and after, and with both themes) are included below.

Also: as a majority of these components' usage of theme variables is
done with `@styled-components`, and we are transitioning away from that
toward `@emotion`, I also opted to remove usages of `@styled-components`
wherever possible, as that change was negligible in comparison with the
theming changes. If a file being changed included references to static
eui theme variables, e.g. `euiThemeVars`, those were removed as well
(but many are still outstanding).


### Screenshots

__NOTE__: Most of the "Before" screenshots were taken from a cluster
using the Borealis theme.

<details>
  <summary>
    <h3>Rule Exceptions Tab</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Rule Exceptions - Before"
src="https://github.com/user-attachments/assets/56feb5e8-b5ec-4bdc-9372-968056e6bca3"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Rule Exceptions - After (Amsterdam)"
src="https://github.com/user-attachments/assets/a6ab3d47-acc7-4eb6-8a0c-bd9ccafc2021"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Rule Exceptions - After (Borealis)"
src="https://github.com/user-attachments/assets/9fbd8a17-0afb-4ccc-95ea-5bab4da5b254"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception Lists</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Shared Exception Lists - Before"
src="https://github.com/user-attachments/assets/b2a69f9c-4892-4732-a2e1-e167461680d1"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Shared Exception Lists - After (Amsterdam)"
src="https://github.com/user-attachments/assets/1aea0dff-97ee-4482-9a66-38c4be2baea8"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Shared Exception Lists - After (Borealis)"
src="https://github.com/user-attachments/assets/76be9446-17fb-451d-b15a-99166cb1f588"
/>
  </kbd>
</details>

<details>


  <summary>
    <h3>Shared List Details</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Shared List Details - Before"
src="https://github.com/user-attachments/assets/5eeec91d-ea96-4e3c-8c7d-b5e6bb8bf35a"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Shared List Details - After (Amsterdam)"
src="https://github.com/user-attachments/assets/5229b850-356c-40e7-80f1-d32156f97a56"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Shared List Details - After (Borealis)"
src="https://github.com/user-attachments/assets/81219613-c329-48f8-8fd3-857207d0ada0"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>EQL Query Input</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="EQL Bar - Before"
src="https://github.com/user-attachments/assets/b19cf18b-a5d2-4001-bebc-9154af8e9b43"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="EQL Bar - After (Amsterdam)"
src="https://github.com/user-attachments/assets/70911ad2-9e52-4b65-b305-cd90a6be1fd2"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="EQL Bar - After (Borealis)"
src="https://github.com/user-attachments/assets/92a789d0-fffa-483c-bcb2-fc02b5e8ce10"
/>

  </kbd>
</details>


<details>
  <summary>
    <h3>Suppression Fields</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="Suppression Fields - Before"
src="https://github.com/user-attachments/assets/458c3464-0eba-47d4-abbe-8de0b333b8ec"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="Suppression Fields - After (Amsterdam)"
src="https://github.com/user-attachments/assets/b6fb67b0-7908-4fe8-9e02-d9e14c8f97c5"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="Suppression Fields - After (Borealis)"
src="https://github.com/user-attachments/assets/f48c24a5-50ea-41fd-af45-b3d32f20921b"
/>

  </kbd>

</details>

<details>
  <summary>
    <h3>Suppression Fields (Disabled)</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="Suppression Fields (Disabled) - Before"
src="https://github.com/user-attachments/assets/e60aa561-d8ce-4b23-8694-e6443ad37c16"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="Suppression Fields (Disabled) - After
(Amsterdam)"
src="https://github.com/user-attachments/assets/45277962-482d-484c-b8bd-3a587b7c16d1"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="Suppression Fields (Disabled) - After (Borealis)"
src="https://github.com/user-attachments/assets/69f6217b-a2c2-4c6a-be9e-80dfd0a4e5f1"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Exception Comments UI Bug</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="805" alt="Comments UI Bug - Before"
src="https://github.com/user-attachments/assets/652d35fa-8ff2-4850-a9a4-79cec3b4b698"
/>

  </kbd>
  <kbd>
    <h3>After</h3>
<img width="805" alt="Comments UI Bug - After"
src="https://github.com/user-attachments/assets/a8cc1cd6-b25f-4694-a479-c35f45eae6aa"
/>

  </kbd>
</details>

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

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

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>