[8.x][Security Solution][threat hunting explore] EUI refresh: Rename …

…color variables (elastic#210850)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][threat hunting explore] EUI refresh: Rename color
variables (elastic#204908)](elastic#204908)

x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx

@@ -106,9 +106,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   const { euiTheme } = useEuiTheme();
   const emptyLabelStyle = useMemo(
     () => ({
-      color: euiTheme.colors.darkShade,
+      color: euiTheme.colors.textSubdued,
     }),
-    [euiTheme.colors.darkShade]
+    [euiTheme.colors.textSubdued]
   );
   const className = isChartEmbeddablesEnabled ? undefined : 'eui-textTruncate';
 

x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx

@@ -5,15 +5,14 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import {
   EuiButton,
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPageHeader,
   useEuiTheme,
-  type EuiThemeComputed,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { OnboardingCardId } from '../../../onboarding/constants';
@@ -32,44 +31,53 @@ const imgUrls = {
   endpoint: endpointSvg,
 };
 
-const headerCardStyles = css`
-  span.euiTitle {
-    font-size: 36px;
-    line-height: 100%;
-  }
-`;
+const useEmptyPromptStyles = () => {
+  const { euiTheme } = useEuiTheme();
 
-const pageHeaderStyles = css`
-  h1 {
-    font-size: 18px;
-  }
-`;
+  const headerCardStyles = css`
+    span.euiTitle {
+      font-size: ${euiTheme.base * 2.25}px;
+      line-height: 100%;
+    }
+  `;
 
-const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css`
-  background: ${euiTheme.colors.lightestShade};
-  padding: 20px;
-`;
+  const pageHeaderStyles = css`
+    h1 {
+      font-size: ${euiTheme.base * 1.125}px;
+    }
+  `;
 
-const cardStyles = css`
-  img {
-    margin-top: 20px;
-    max-width: 400px;
-  }
-`;
+  const flexItemStyles = css`
+    background: ${euiTheme.colors.backgroundBaseSubdued};
+    padding: ${euiTheme.base * 1.25}px;
+  `;
 
-const footerStyles = css`
-  span.euiTitle {
-    font-size: 36px;
-    line-height: 100%;
-  }
-  max-width: 600px;
-  display: block;
-  margin: 20px auto 0;
-`;
+  const cardStyles = css`
+    img {
+      margin-top: ${euiTheme.base * 1.25}px;
+      max-width: ${euiTheme.components.forms.maxWidth};
+    }
+  `;
 
-export const EmptyPromptComponent = memo(() => {
-  const { euiTheme } = useEuiTheme();
+  const footerStyles = css`
+    span.euiTitle {
+      font-size: ${euiTheme.base * 2.25}px;
+      line-height: 100%;
+    }
+    max-width: 600px;
+    display: block;
+    margin: ${euiTheme.base * 1.25}px auto 0;
+  `;
+
+  return useMemo(
+    () => ({ headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles }),
+    [cardStyles, flexItemStyles, footerStyles, headerCardStyles, pageHeaderStyles]
+  );
+};
 
+export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => {
+  const { headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles } =
+    useEmptyPromptStyles();
   const { navigateTo } = useNavigateTo();
 
   const navigateToAddIntegrations = useCallback(() => {
@@ -122,7 +130,7 @@ export const EmptyPromptComponent = memo(() => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiFlexItem css={getFlexItemStyles(euiTheme)}>
+      <EuiFlexItem css={flexItemStyles}>
         <EuiFlexGroup gutterSize="m">
           <EuiFlexItem>
             <EuiCard

x-pack/solutions/security/plugins/security_solution/public/common/components/navigation/nav_item_beta_badge.tsx

@@ -19,7 +19,7 @@ export const NavItemBetaBadge = ({ text, className }: { text?: string; className
       size="s"
       css={css`
         margin-left: ${euiTheme.size.s};
-        color: ${euiTheme.colors.text};
+        color: ${euiTheme.colors.textParagraph};
         vertical-align: middle;
         margin-bottom: ${euiTheme.size.xxs};
       `}

x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx

@@ -32,7 +32,7 @@ export const SplitAccordion = ({
         initialIsOpen={initialIsOpen}
         className={css`
           .euiAccordion__triggerWrapper {
-            background: ${euiTheme.colors.lightestShade};
+            background: ${euiTheme.colors.backgroundBaseSubdued};
             padding: ${euiTheme.size.m};
           }
         `}

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx

@@ -39,7 +39,7 @@ export const OnboardingPage = React.memo(() => {
           restrictWidth={PAGE_CONTENT_WIDTH}
           paddingSize="xl"
           bottomBorder="extended"
-          style={{ backgroundColor: euiTheme.colors.body }}
+          style={{ backgroundColor: euiTheme.colors.backgroundBaseSubdued }}
         >
           <OnboardingRouter />
         </KibanaPageTemplate.Section>

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts

@@ -12,7 +12,7 @@ export const useCardCallOutStyles = () => {
   const { euiTheme } = useEuiTheme();
   return css`
     padding: ${euiTheme.size.s};
-    border: 1px solid ${euiTheme.colors.lightShade};
+    border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.backgroundBaseSubdued};
     border-radius: ${euiTheme.size.s};
   `;
 };

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts

@@ -12,7 +12,7 @@ export const HEIGHT_ANIMATION_DURATION = 250;
 
 export const useCardPanelStyles = () => {
   const { euiTheme, colorMode } = useEuiTheme();
-  const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess;
+  const successBackgroundColor = euiTheme.colors.backgroundLightSuccess;
   const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
   const darkModeStyles = useDarkPanelStyles(isDarkMode);
 
@@ -24,7 +24,7 @@ export const useCardPanelStyles = () => {
     .onboardingCardIcon {
       padding: ${euiTheme.size.m};
       border-radius: 50%;
-      background-color: ${isDarkMode ? euiTheme.colors.body : euiTheme.colors.lightestShade};
+      background-color: ${euiTheme.colors.backgroundBaseSubdued};
     }
     .onboardingCardHeaderTitle {
       font-weight: ${euiTheme.font.weight.semiBold};
@@ -65,8 +65,8 @@ export const useCardPanelStyles = () => {
 export const useDarkPanelStyles = (isDarkMode: boolean) => {
   const { euiTheme } = useEuiTheme();
   const darkPanelStyles = css`
-    background-color: ${euiTheme.colors.lightestShade};
-    border-color: ${euiTheme.colors.mediumShade};
+    background-color: ${euiTheme.colors.backgroundBasePlain};
+    border-color: ${euiTheme.colors.borderBasePlain};
   `;
   return isDarkMode ? darkPanelStyles : '';
 };

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts

@@ -22,7 +22,7 @@ export const useCardStyles = () => {
       .headerCardLink,
       .headerCardLink * {
         text-decoration: underline;
-        text-decoration-color: ${euiTheme.colors.primaryText};
+        text-decoration-color: ${euiTheme.colors.textPrimary};
       }
     }
 
@@ -32,9 +32,9 @@ export const useCardStyles = () => {
 
     ${isDarkMode
       ? `
-          background-color: ${euiTheme.colors.lightestShade};
+          background-color: ${euiTheme.colors.backgroundBasePlain};
           box-shadow: none;
-          border: 1px solid ${euiTheme.colors.mediumShade};
+          border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain};
         `
       : ''}
   `;

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts

@@ -16,7 +16,7 @@ export const useOnboardingHeaderStyles = () => {
       width: calc(${PAGE_CONTENT_WIDTH} / 2);
     }
     .onboardingHeaderGreetings {
-      color: ${euiTheme.colors.darkShade};
+      color: ${euiTheme.colors.textSubdued};
     }
     .onboardingHeaderTopicSelector {
       width: calc(${PAGE_CONTENT_WIDTH} / 3);