[Security Solution] color="ghost" button cleanup (#169304)

## Summary

👋 Hey y'all - EUI will shortly be deprecating the `ghost` color in all
button components (see
https://eui.elastic.co/v89.0.0/#/navigation/button#ghost-vs-dark-mode).

I'm opening this PR ahead of time for your team so you can test this
migration and ensure no regressions have occurred as a result.

### Screenshots

<img width="142" alt="non-fullscreen mode"
src="8b9a5cb8-5936-4f5a-8279-199404df50d7">
<img width="156" alt="fullscreen mode"
src="101f675d-253d-4c5d-92e9-e1ab0a178464">
<img width="163" alt="dark mode"
src="7401cd61-b38a-406d-92db-b6bfbeef64b9">

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/security_solution/common/constants.ts

@@ -60,7 +60,6 @@ export const DEFAULT_INTERVAL_TYPE = 'manual' as const;
 export const DEFAULT_INTERVAL_VALUE = 300000 as const; // ms
 export const DEFAULT_TIMEPICKER_QUICK_RANGES = 'timepicker:quickRanges' as const;
 export const SCROLLING_DISABLED_CLASS_NAME = 'scrolling-disabled' as const;
-export const FULL_SCREEN_TOGGLED_CLASS_NAME = 'fullScreenToggled' as const;
 export const NO_ALERT_INDEX = 'no-alert-index-049FC71A-4C2C-446F-9901-37XMC5024C51' as const;
 export const ENDPOINT_METADATA_INDEX = 'metrics-endpoint.metadata-*' as const;
 export const ENDPOINT_METRICS_INDEX = '.ds-metrics-endpoint.metrics-*' as const;

x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx

@@ -24,7 +24,6 @@ import { DEFAULT_ACTION_BUTTON_WIDTH } from '.';
 import { EventsTh, EventsThContent } from '../../../timelines/components/timeline/styles';
 import { StatefulRowRenderersBrowser } from '../../../timelines/components/row_renderers_browser';
 import { EXIT_FULL_SCREEN } from '../exit_full_screen/translations';
-import { FULL_SCREEN_TOGGLED_CLASS_NAME } from '../../../../common/constants';
 import { EventsSelect } from '../../../timelines/components/timeline/body/column_headers/events_select';
 import * as i18n from './translations';
 
@@ -243,8 +242,8 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
                   ? EXIT_FULL_SCREEN
                   : i18n.FULL_SCREEN
               }
-              className={fullScreen ? FULL_SCREEN_TOGGLED_CLASS_NAME : ''}
-              color={fullScreen ? 'ghost' : 'primary'}
+              display={fullScreen ? 'fill' : 'empty'}
+              color="primary"
               data-test-subj={
                 // a full screen button gets created for timeline and for the host page
                 // this sets the data-test-subj for each case so that tests can differentiate between them

x-pack/plugins/security_solution/public/common/components/page/index.tsx

@@ -8,8 +8,6 @@
 import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiIcon } from '@elastic/eui';
 import styled, { createGlobalStyle, css } from 'styled-components';
 
-import { FULL_SCREEN_TOGGLED_CLASS_NAME } from '../../../../common/constants';
-
 export const SecuritySolutionAppWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -89,11 +87,6 @@ export const AppGlobalStyle = createGlobalStyle<{
     }
   }
 
-  /* applies a "toggled" button style to the Full Screen button */
-  .${FULL_SCREEN_TOGGLED_CLASS_NAME} {
-    ${({ theme }) => `background-color: ${theme.eui.euiColorPrimary} !important`};
-  }
-
   /*
      EuiScreenReaderOnly has a default 1px height and width. These extra pixels
      were adding additional height to every table row in the alerts table on the

x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.tsx

@@ -24,10 +24,7 @@ import { TimelineTabs } from '../../../../../common/types/timeline';
 import { useDetailPanel } from '../../side_panel/hooks/use_detail_panel';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 import { isFullScreen } from '../body/column_headers';
-import {
-  SCROLLING_DISABLED_CLASS_NAME,
-  FULL_SCREEN_TOGGLED_CLASS_NAME,
-} from '../../../../../common/constants';
+import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../../common/constants';
 import { FULL_SCREEN } from '../body/column_headers/translations';
 import { EXIT_FULL_SCREEN } from '../../../../common/components/exit_full_screen/translations';
 import {
@@ -97,8 +94,8 @@ const NavigationComponent: React.FC<NavigationProps> = ({
                   ? EXIT_FULL_SCREEN
                   : FULL_SCREEN
               }
-              className={fullScreen ? FULL_SCREEN_TOGGLED_CLASS_NAME : ''}
-              color={fullScreen ? 'ghost' : 'primary'}
+              display={fullScreen ? 'fill' : 'empty'}
+              color="primary"
               data-test-subj="full-screen"
               iconType="fullScreen"
               onClick={toggleFullScreen}