[ML] Borealis theme fixes (success colors) (#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
2025-04-24 01:38:56 -04:00 · 2024-12-10 17:55:13 +01:00 · 2024-12-10 17:55:13 +01:00 · 2fb9ef4ba0
commit 2fb9ef4ba0
parent cc6dc2ac2b
13 changed files with 83 additions and 79 deletions
--- 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'}`}
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/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}
      />

--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/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}
        />
      )}
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/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}
        />
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/number_content.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/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}
        />
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/top_values/top_values.tsx
+++ b/x-pack/platform/plugins/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;
--- a/x-pack/platform/plugins/private/transform/public/app/sections/transform_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx
+++ b/x-pack/platform/plugins/private/transform/public/app/sections/transform_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}
--- a/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx
+++ b/x-pack/platform/plugins/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'
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_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"
            />
          ),
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
+++ b/x-pack/platform/plugins/shared/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',
+        },
      },
-    },
-  ],
-});
+    ],
+  };
+};
--- a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
+++ b/x-pack/platform/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>
--- a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/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}>
--- a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_title.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/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>