[ML] Borealis theme fixes (success colors) (elastic#202430)

## Summary All usages of "success" colors have been updated to "accentSecondary" and "textAccentSecondary" as needed. Recommend to review with white-space changes skipped: https://github.com/elastic/kibana/pull/202430/files?w=1 ### 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 - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. ### Identify risks - Risk of some visual glitches because of oversights
tsullivan · Dec 10, 2024 · 2fb9ef4 · 2fb9ef4
1 parent cc6dc2a
commit 2fb9ef4
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 79 deletions.
diff --git a/x-pack/platform/packages/private/ml/date_picker/src/components/date_picker_wrapper.tsx b/x-pack/platform/packages/private/ml/date_picker/src/components/date_picker_wrapper.tsx
@@ -338,7 +338,7 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
           <EuiToolTip content={tooltipMessage}>
             <EuiButton
               fill={false}
-              color={needsUpdate ? 'success' : 'primary'}
+              color={needsUpdate ? 'accentSecondary' : 'primary'}
               iconType={needsUpdate ? 'kqlFunction' : 'refresh'}
               onClick={handleRefresh}
               data-test-subj={`mlDatePickerRefreshPageButton${isLoading ? ' loading' : ' loaded'}`}

diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
@@ -54,7 +54,7 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =
       <TopValues
         stats={config.stats}
         fieldFormat={fieldFormat}
-        barColor="success"
+        barColor="accentSecondary"
         onAddFilter={onAddFilter}
       />
 

diff --git a/...plication/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx b/...plication/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx
@@ -26,7 +26,7 @@ export const IpContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) => {
         <TopValues
           stats={stats}
           fieldFormat={fieldFormat}
-          barColor="success"
+          barColor="accentSecondary"
           onAddFilter={onAddFilter}
         />
       )}

diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx
@@ -62,14 +62,14 @@ export const KeywordContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =
       <TopValues
         stats={stats}
         fieldFormat={fieldFormat}
-        barColor="success"
+        barColor="accentSecondary"
         onAddFilter={onAddFilter}
       />
       {config.stats?.sampledValues && fieldName !== undefined ? (
         <TopValues
           stats={stats}
           fieldFormat={fieldFormat}
-          barColor="success"
+          barColor="accentSecondary"
           onAddFilter={onAddFilter}
           showSampledValues={true}
         />

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx
@@ -119,7 +119,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =>
         <TopValues
           stats={stats}
           fieldFormat={fieldFormat}
-          barColor="success"
+          barColor="accentSecondary"
           compressed={true}
           onAddFilter={onAddFilter}
         />

diff --git a/...ns/private/data_visualizer/public/application/common/components/top_values/top_values.tsx b/...ns/private/data_visualizer/public/application/common/components/top_values/top_values.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiProgress,
+  type EuiProgressProps,
   EuiText,
   EuiButtonIcon,
   EuiSpacer,
@@ -36,7 +37,7 @@ import { EMPTY_EXAMPLE } from '../examples_list/examples_list';
 interface Props {
   stats: FieldVisStats | undefined;
   fieldFormat?: any;
-  barColor?: 'primary' | 'success' | 'danger' | 'subdued' | 'accent';
+  barColor?: EuiProgressProps['color'];
   compressed?: boolean;
   onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void;
   showSampledValues?: boolean;

diff --git a/...orm_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx b/...orm_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx
@@ -19,7 +19,7 @@ export const RefreshTransformListButton: FC<RefreshTransformListButton> = ({
   isLoading,
 }) => (
   <EuiButton
-    color="success"
+    color="accentSecondary"
     iconType="refresh"
     data-test-subj={`transformRefreshTransformListButton${isLoading ? ' loading' : ' loaded'}`}
     onClick={onClick}

diff --git a/...ugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx b/...ugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx
@@ -23,7 +23,7 @@ export const LogRateAnalysisInfoPopoverButton: FC<{
     <EuiBadge
       iconType="help"
       iconSide="right"
-      color="success"
+      color="hollow"
       // Defining both iconOnClick and onClick so the mouse cursor changes for cases.
       iconOnClick={onClick}
       iconOnClickAriaLabel='Click to open "Log rate analysis info" popover'

diff --git a/...ata_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/...ata_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -140,7 +140,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
               valueText={true}
               value={s.progress_percent}
               max={100}
-              color="success"
+              color="primary"
               size="s"
             />
           ),

diff --git a/...ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx b/...ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
@@ -12,8 +12,6 @@ import classificationJobIcon from './icons/ml_classification_job.svg';
 import outlierDetectionJobIcon from './icons/ml_outlier_detection_job.svg';
 import regressionJobIcon from './icons/ml_regression_job.svg';
 
-const lineColor = '#C5CCD7';
-
 const MAP_SHAPES = {
   ELLIPSE: 'ellipse',
   RECTANGLE: 'rectangle',
@@ -23,7 +21,7 @@ const MAP_SHAPES = {
 } as const;
 type MapShapes = (typeof MAP_SHAPES)[keyof typeof MAP_SHAPES];
 
-function shapeForNode(el: cytoscape.NodeSingular, theme: EuiThemeType): MapShapes {
+function shapeForNode(el: cytoscape.NodeSingular): MapShapes {
   const type = el.data('type');
   switch (type) {
     case JOB_MAP_NODE_TYPES.ANALYTICS:
@@ -70,7 +68,7 @@ function borderColorForNode(el: cytoscape.NodeSingular, theme: EuiThemeType) {
     case JOB_MAP_NODE_TYPES.ANALYTICS_JOB_MISSING:
       return theme.euiColorFullShade;
     case JOB_MAP_NODE_TYPES.ANALYTICS:
-      return theme.euiColorSuccess;
+      return theme.euiColorVis0;
     case JOB_MAP_NODE_TYPES.TRANSFORM:
       return theme.euiColorVis1;
     case JOB_MAP_NODE_TYPES.INDEX:
@@ -85,55 +83,59 @@ function borderColorForNode(el: cytoscape.NodeSingular, theme: EuiThemeType) {
   }
 }
 
-export const getCytoscapeOptions = (theme: EuiThemeType): cytoscape.CytoscapeOptions => ({
-  autoungrabify: true,
-  boxSelectionEnabled: false,
-  maxZoom: 3,
-  minZoom: 0.2,
-  style: [
-    {
-      selector: 'node',
-      style: {
-        'background-color': (el: cytoscape.NodeSingular) =>
-          el.data('isRoot') ? theme.euiColorWarning : theme.euiColorGhost,
-        'background-height': '60%',
-        'background-width': '60%',
-        'border-color': (el: cytoscape.NodeSingular) => borderColorForNode(el, theme),
-        'border-style': 'solid',
-        // @ts-ignore
-        'background-image': (el: cytoscape.NodeSingular) => iconForNode(el),
-        'border-width': (el: cytoscape.NodeSingular) => (el.selected() ? 4 : 3),
-        color: theme.euiTextColor,
-        'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
-        'font-size': theme.euiFontSizeXS,
-        'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
-        label: 'data(label)',
-        shape: (el: cytoscape.NodeSingular) => shapeForNode(el, theme),
-        'text-background-color': theme.euiColorLightestShade,
-        'text-background-opacity': 0,
-        'text-background-padding': theme.euiSizeXS,
-        'text-background-shape': 'roundrectangle',
-        'text-margin-y': parseInt(theme.euiSizeS, 10),
-        'text-max-width': '200px',
-        'text-valign': 'bottom',
-        'text-wrap': 'wrap',
+export const getCytoscapeOptions = (theme: EuiThemeType): cytoscape.CytoscapeOptions => {
+  const lineColor = theme.euiColorLightShade;
+
+  return {
+    autoungrabify: true,
+    boxSelectionEnabled: false,
+    maxZoom: 3,
+    minZoom: 0.2,
+    style: [
+      {
+        selector: 'node',
+        style: {
+          'background-color': (el: cytoscape.NodeSingular) =>
+            el.data('isRoot') ? theme.euiColorWarning : theme.euiColorGhost,
+          'background-height': '60%',
+          'background-width': '60%',
+          'border-color': (el: cytoscape.NodeSingular) => borderColorForNode(el, theme),
+          'border-style': 'solid',
+          // @ts-ignore
+          'background-image': (el: cytoscape.NodeSingular) => iconForNode(el),
+          'border-width': (el: cytoscape.NodeSingular) => (el.selected() ? 4 : 3),
+          color: theme.euiTextColor,
+          'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
+          'font-size': theme.euiFontSizeXS,
+          'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
+          label: 'data(label)',
+          shape: (el: cytoscape.NodeSingular) => shapeForNode(el),
+          'text-background-color': theme.euiColorLightestShade,
+          'text-background-opacity': 0,
+          'text-background-padding': theme.euiSizeXS,
+          'text-background-shape': 'roundrectangle',
+          'text-margin-y': parseInt(theme.euiSizeS, 10),
+          'text-max-width': '200px',
+          'text-valign': 'bottom',
+          'text-wrap': 'wrap',
+        },
       },
-    },
-    {
-      selector: 'edge',
-      style: {
-        'curve-style': 'taxi',
-        // @ts-ignore
-        'taxi-direction': 'rightward',
-        'line-color': lineColor,
-        'overlay-opacity': 0,
-        'target-arrow-color': lineColor,
-        'target-arrow-shape': 'triangle',
-        // @ts-ignore
-        'target-distance-from-node': theme.euiSizeXS,
-        width: 1,
-        'source-arrow-shape': 'none',
+      {
+        selector: 'edge',
+        style: {
+          'curve-style': 'taxi',
+          // @ts-ignore
+          'taxi-direction': 'rightward',
+          'line-color': lineColor,
+          'overlay-opacity': 0,
+          'target-arrow-color': lineColor,
+          'target-arrow-shape': 'triangle',
+          // @ts-ignore
+          'target-distance-from-node': theme.euiSizeXS,
+          width: 1,
+          'source-arrow-shape': 'none',
+        },
       },
-    },
-  ],
-});
+    ],
+  };
+};
diff --git a/...tform/plugins/shared/ml/public/application/jobs/new_job/recognize/components/job_item.tsx b/...tform/plugins/shared/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
@@ -54,7 +54,7 @@ export const JobItem: FC<JobItemProps> = memo(
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s">
             <EuiFlexItem grow={false}>
-              <EuiText size="s" color="success">
+              <EuiText size="s" color="accentSecondary">
                 {jobPrefix}
                 {id}
               </EuiText>

diff --git a/...ck/platform/plugins/shared/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/...ck/platform/plugins/shared/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -1130,19 +1130,20 @@ export class TimeSeriesExplorer extends React.Component {
                         )}
                       </span>
                       &nbsp;
-                      {chartDetails.entityData.count === 1 && (
-                        <EuiTextColor color={'success'} size={'s'} component={'span'}>
-                          {chartDetails.entityData.entities.length > 0 && '('}
-                          {chartDetails.entityData.entities
-                            .map((entity) => {
-                              return `${entity.fieldName}: ${entity.fieldValue}`;
-                            })
-                            .join(', ')}
-                          {chartDetails.entityData.entities.length > 0 && ')'}
-                        </EuiTextColor>
-                      )}
-                      {chartDetails.entityData.count !== 1 && (
-                        <EuiTextColor color={'success'} size={'s'} component={'span'}>
+                      {chartDetails.entityData.count === 1 &&
+                        chartDetails.entityData.entities.length > 0 && (
+                          <EuiTextColor color="accentSecondary" size="s" component="span">
+                            (
+                            {chartDetails.entityData.entities
+                              .map((entity) => {
+                                return `${entity.fieldName}: ${entity.fieldValue}`;
+                              })
+                              .join(', ')}
+                            )
+                          </EuiTextColor>
+                        )}
+                      {chartDetails.entityData.count > 1 && (
+                        <EuiTextColor color="accentSecondary" size="s" component="span">
                           {chartDetails.entityData.entities.map((countData, i) => {
                             return (
                               <Fragment key={countData.fieldName}>

diff --git a/...ation/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_title.tsx b/...ation/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_title.tsx
@@ -122,7 +122,7 @@ export const SingleMetricViewerTitle: FC<SingleMetricViewerTitleProps> = ({
               <EuiFlexItem grow={false} key={`${entity.fieldName}.${entity.fieldValue}`}>
                 <EuiFlexGroup gutterSize="none" alignItems="center">
                   <EuiFlexItem grow={false}>
-                    <EuiTextColor color={'success'} component={'span'}>
+                    <EuiTextColor color="accentSecondary" component="span">
                       {`${entity.fieldName}: ${entity.fieldValue}`}
                     </EuiTextColor>
                   </EuiFlexItem>