[ResponseOps][UI] EUI Visual Refresh integration and QA - replaced de…

…precated color variables (#203120) Closes #202550 ## Summary - All references to renamed tokens have been updated to use the new token name # previous color token -> new color token primaryText -> textPrimary accentText -> textAccent between this and textSuccess. warningText -> textWarning dangerText -> textDanger text -> textParagraph title -> textHeading subduedText -> textSubdued disabledText -> textDisabled successText -> textSuccess - replaced the color utility functions with EUI color tokens as they will be deprecated
elastic · Dec 16, 2024 · 5ea1c45 · 5ea1c45
1 parent 44c8e2e
commit 5ea1c45
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 18 deletions.
diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx
@@ -16,7 +16,6 @@ import {
   EuiPanel,
   EuiButtonIcon,
   useEuiTheme,
-  useEuiBackgroundColor,
   EuiIcon,
   EuiText,
   EuiTabs,
@@ -110,9 +109,9 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
   } = useRuleFormState();
 
   const [tab, setTab] = useState<string>(MESSAGES_TAB);
-  const subdued = useEuiBackgroundColor('subdued');
-  const plain = useEuiBackgroundColor('plain');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
+  const plain = euiTheme.colors.backgroundBasePlain;
 
   const [availableActionVariables, setAvailableActionVariables] = useState<ActionVariable[]>(() => {
     if (!selectedRuleType.actionVariables) {
@@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
       }
       buttonContentClassName="eui-fullWidth"
       buttonContent={
-        <EuiPanel color="subdued" paddingSize="m">
+        <EuiPanel color={subdued} paddingSize="m">
           <EuiFlexGroup alignItems="center" responsive={false}>
             {accordionIcon}
             {connectorTitle}

diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx
@@ -126,8 +126,8 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
   >({});
   const [warning, setWarning] = useState<string | null>(null);
 
-  const subdued = useEuiBackgroundColor('subdued');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
 
   const dispatch = useRuleFormDispatch();
   const actionTypeModel = actionTypeRegistry.get(action.actionTypeId);
@@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
       buttonContent={
         <EuiPanel
           data-test-subj="ruleActionsSystemActionsItemAccordionButton"
-          color="subdued"
+          color={subdued}
           paddingSize="m"
         >
           <EuiFlexGroup alignItems="center">

diff --git a/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx b/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { useEuiBackgroundColorCSS, EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 
 interface RuleFormErrorPromptWrapperProps {
   hasBorder?: boolean;
@@ -18,7 +18,9 @@ interface RuleFormErrorPromptWrapperProps {
 export const RuleFormErrorPromptWrapper: React.FC<
   React.PropsWithChildren<RuleFormErrorPromptWrapperProps>
 > = ({ children, hasBorder, hasShadow }) => {
-  const styles = useEuiBackgroundColorCSS().transparent;
+  const styles = {
+    backgroundColor: 'transparent',
+  };
   return (
     <EuiPageTemplate offset={0} css={styles}>
       <EuiPageTemplate.EmptyPrompt paddingSize="none" hasBorder={hasBorder} hasShadow={hasShadow}>

diff --git a/packages/response-ops/rule_form/src/rule_page/rule_page.tsx b/packages/response-ops/rule_form/src/rule_page/rule_page.tsx
@@ -18,7 +18,6 @@ import {
   EuiSpacer,
   EuiSteps,
   EuiStepsProps,
-  useEuiBackgroundColorCSS,
 } from '@elastic/eui';
 import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -70,7 +69,9 @@ export const RulePage = (props: RulePageProps) => {
 
   const canReadConnectors = !!application.capabilities.actions?.show;
 
-  const styles = useEuiBackgroundColorCSS().transparent;
+  const styles = {
+    backgroundColor: 'transparent',
+  };
 
   const onSaveInternal = useCallback(() => {
     onSave({

diff --git a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx
@@ -150,13 +150,13 @@ export const StreamingResponse = ({
         id={`streamingResponse`}
         css={css`
           .euiButtonIcon {
-            color: ${euiTheme.colors.primaryText};
+            color: ${euiTheme.colors.textPrimary};
           }
         `}
         buttonContent={
           <EuiFlexGroup direction="row" alignItems="center">
             <EuiFlexItem grow>
-              <EuiText size="m" color={euiTheme.colors.primaryText}>
+              <EuiText size="m" color={euiTheme.colors.textPrimary}>
                 <strong>
                   {i18n.translate(
                     'genAiStreamingResponseExample.app.component.streamingResponseTitle',

diff --git a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx
@@ -28,7 +28,7 @@ import { useCasesContext } from '../cases_context/use_cases_context';
 const getMarkdownContainerCss = (euiTheme: EuiThemeComputed<{}>) => css`
   max-height: 150px;
   overflow-y: auto;
-  color: ${euiTheme.colors.subduedText};
+  color: ${euiTheme.colors.textSubdued};
 `;
 
 const getTruncateCompCss = css`

diff --git a/...s/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx b/...s/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx
@@ -17,7 +17,6 @@ import {
   EuiHighlight,
   EuiOutsideClickDetector,
   useEuiTheme,
-  useEuiBackgroundColor,
 } from '@elastic/eui';
 import { ActionVariable } from '@kbn/alerting-plugin/common';
 import { AddMessageVariables } from '@kbn/alerts-ui-shared';
@@ -48,7 +47,7 @@ export const TextAreaWithAutocomplete: React.FunctionComponent<TextAreaWithAutoc
   paramsProperty,
 }) => {
   const { euiTheme } = useEuiTheme();
-  const backgroundColor = useEuiBackgroundColor('plain');
+  const backgroundColor = euiTheme.colors.backgroundBasePlain;
 
   const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
   const selectableRef = React.useRef<EuiSelectable | null>(null);

diff --git a/...s_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx b/...s_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx
@@ -41,7 +41,7 @@ export const AlertCounts = ({ activeAlertCount, recoveredAlertCount, handleClick
       <AlertItem
         label={ACTIVE_NOW_LABEL}
         count={activeAlertCount}
-        color={activeAlertCount > 0 ? euiTheme.colors.dangerText : euiTheme.colors.textSuccess}
+        color={activeAlertCount > 0 ? euiTheme.colors.textDanger : euiTheme.colors.textSuccess}
         alertType={ALERT_STATUS_ACTIVE}
         handleClick={handleClick}
         showWarningIcon={true}

diff --git a/.../public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/.../public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx
@@ -192,7 +192,7 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={false} data-test-subj="ruleEventLogListAvgDuration">
-              <EuiText size="m" color={euiTheme.colors.text}>
+              <EuiText size="m" color={euiTheme.colors.textParagraph}>
                 <strong>
                   {formatMillisForDisplay(computedRuleSummary.executionDuration.average)}
                 </strong>

diff --git a/...public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/...public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx
@@ -223,7 +223,9 @@ export const BaseSnoozePanel: React.FunctionComponent<BaseSnoozePanelProps> = ({
                           height: '36px',
                           // Replicate euiPanel--accent vs euiPanel--subdued
                           // Applying these classNames by themselves doesn't work due to a CSS-in-JS issue with EuiPanel
-                          color: isActive ? '#a8376a' : euiTheme.colors.subduedText,
+                          color: isActive
+                            ? euiTheme.colors.textAccent
+                            : euiTheme.colors.textSubdued,
                           backgroundColor: isActive ? 'rgba(240,78,152,0.2)' : euiTheme.colors.body,
                         }}
                         className="euiButton euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--noBorder"