Chore: Remove usage of deprecated getColorForTheme function (#49519)

packages/grafana-data/src/field/scale.test.ts

@@ -1,6 +1,5 @@
 import { createTheme } from '../themes';
 import { ThresholdsMode, Field, FieldType, FieldColorModeId } from '../types';
-import { getColorForTheme } from '../utils';
 import { ArrayVector } from '../vector/ArrayVector';
 
 import { getScaleCalculator } from './scale';
@@ -41,12 +40,12 @@ describe('getScaleCalculator', () => {
     const calc = getScaleCalculator(field, theme);
     expect(calc(true as any)).toEqual({
       percent: 1,
-      color: getColorForTheme('green', theme.v1),
+      color: theme.v1.visualization.getColorByName('green'),
       threshold: undefined,
     });
     expect(calc(false as any)).toEqual({
       percent: 0,
-      color: getColorForTheme('red', theme.v1),
+      color: theme.v1.visualization.getColorByName('red'),
       threshold: undefined,
     });
   });

packages/grafana-data/src/utils/namedColorsPalette.test.ts

@@ -1,17 +1,15 @@
 import { createTheme } from '../themes';
 
-import { getColorForTheme } from './namedColorsPalette';
-
 describe('colors', () => {
   const theme = createTheme();
 
   describe('getColorFromHexRgbOrName', () => {
     it('returns black for unknown color', () => {
-      expect(getColorForTheme('aruba-sunshine', theme.v1)).toBe('aruba-sunshine');
+      expect(theme.v1.visualization.getColorByName('aruba-sunshine')).toBe('aruba-sunshine');
     });
 
     it('returns dark hex variant for known color if theme not specified', () => {
-      expect(getColorForTheme('semi-dark-blue', theme.v1)).toBe('#3274D9');
+      expect(theme.v1.visualization.getColorByName('semi-dark-blue')).toBe('#3274D9');
     });
   });
 });

packages/grafana-data/src/utils/namedColorsPalette.ts

@@ -1,19 +1,3 @@
-import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
-
-/**
- * @deprecated use theme.visualization.getColorByName
- */
-export function getColorForTheme(color: string, theme: GrafanaTheme): string {
-  return theme.visualization.getColorByName(color);
-}
-
-/**
- * @deprecated use getColorForTheme
- */
-export function getColorFromHexRgbOrName(color: string, type?: GrafanaThemeType): string {
-  return 'gray';
-}
-
 export const classicColors = [
   '#7EB26D', // 0: pale green
   '#EAB839', // 1: mustard

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { HTMLAttributes } from 'react';
 import tinycolor from 'tinycolor2';
 
-import { getColorForTheme, GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme } from '@grafana/data';
 
 import { useTheme } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
@@ -44,7 +44,7 @@ export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip, class
 Badge.displayName = 'Badge';
 
 const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
-  let sourceColor = getColorForTheme(color, theme);
+  let sourceColor = theme.visualization.getColorByName(color);
   let borderColor = '';
   let bgColor = '';
   let textColor = '';

packages/grafana-ui/src/components/Gauge/utils.ts

@@ -6,7 +6,6 @@ import {
   GAUGE_DEFAULT_MAXIMUM,
   GAUGE_DEFAULT_MINIMUM,
   getActiveThreshold,
-  getColorForTheme,
   GrafanaTheme,
   Threshold,
   ThresholdsConfig,
@@ -65,7 +64,9 @@ export function getFormattedThresholds(
 
   const first = getActiveThreshold(min, steps);
   const last = getActiveThreshold(max, steps);
-  const formatted: Threshold[] = [{ value: +min.toFixed(decimals), color: getColorForTheme(first.color, theme) }];
+  const formatted: Threshold[] = [
+    { value: +min.toFixed(decimals), color: theme.visualization.getColorByName(first.color) },
+  ];
   let skip = true;
   for (let i = 0; i < steps.length; i++) {
     const step = steps[i];
@@ -76,11 +77,11 @@ export function getFormattedThresholds(
       continue;
     }
     const prev = steps[i - 1];
-    formatted.push({ value: step.value, color: getColorForTheme(prev!.color, theme) });
+    formatted.push({ value: step.value, color: theme.visualization.getColorByName(prev.color) });
     if (step === last) {
       break;
     }
   }
-  formatted.push({ value: +max.toFixed(decimals), color: getColorForTheme(last.color, theme) });
+  formatted.push({ value: +max.toFixed(decimals), color: theme.visualization.getColorByName(last.color) });
   return formatted;
 }

packages/grafana-ui/src/components/Graph/utils.test.ts

@@ -4,7 +4,6 @@ import {
   FieldCache,
   FieldColorModeId,
   Field,
-  getColorForTheme,
   applyFieldOverrides,
   createTheme,
   DataFrame,
@@ -88,7 +87,7 @@ const cSeries = passThroughFieldOverrides(
 )[0];
 
 function getFixedThemedColor(field: Field): string {
-  return getColorForTheme(field.config.color!.fixedColor!, getTheme());
+  return getTheme().visualization.getColorByName(field.config.color!.fixedColor!);
 }
 
 describe('Graph utils', () => {

packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx

@@ -1,7 +1,7 @@
 import { Story, Meta } from '@storybook/react';
 import React, { FC, useEffect, useState } from 'react';
 
-import { DisplayValue, getColorForTheme, GrafanaTheme } from '@grafana/data';
+import { DisplayValue, GrafanaTheme } from '@grafana/data';
 import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
 import { useTheme, VizLegend } from '@grafana/ui';
 
@@ -154,7 +154,7 @@ function generateLegendItems(
 ): VizLegendItem[] {
   const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
   const colors = ['green', 'blue', 'red', 'purple', 'orange', 'dark-green', 'yellow', 'light-blue'].map((c) =>
-    getColorForTheme(c, theme)
+    theme.visualization.getColorByName(c)
   );
 
   return [...new Array(numberOfSeries)].map((item, i) => {

public/app/plugins/panel/graph/data_processor.ts

@@ -1,15 +1,6 @@
 import { find } from 'lodash';
 
-import {
-  DataFrame,
-  dateTime,
-  Field,
-  FieldType,
-  getColorForTheme,
-  getFieldDisplayName,
-  getTimeField,
-  TimeRange,
-} from '@grafana/data';
+import { DataFrame, dateTime, Field, FieldType, getFieldDisplayName, getTimeField, TimeRange } from '@grafana/data';
 import { colors } from '@grafana/ui';
 import { applyNullInsertThreshold } from '@grafana/ui/src/components/GraphNG/nullInsertThreshold';
 import config from 'app/core/config';
@@ -89,7 +80,7 @@ export class DataProcessor {
     const series = new TimeSeries({
       datapoints: datapoints || [],
       alias: alias,
-      color: getColorForTheme(color, config.theme),
+      color: config.theme.visualization.getColorByName(color),
       unit: field.config ? field.config.unit : undefined,
       dataFrameIndex,
       fieldIndex,

public/app/plugins/panel/graph/module.ts

@@ -8,7 +8,7 @@ import './event_editor';
 import { auto } from 'angular';
 import { defaults, find, without } from 'lodash';
 
-import { DataFrame, FieldConfigProperty, getColorForTheme, PanelEvents, PanelPlugin } from '@grafana/data';
+import { DataFrame, FieldConfigProperty, PanelEvents, PanelPlugin } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { MetricsPanelCtrl } from 'app/angular/panel/metrics_panel_ctrl';
 import config from 'app/core/config';
@@ -297,7 +297,7 @@ export class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onColorChange = (series: any, color: string) => {
-    series.setColor(getColorForTheme(color, config.theme));
+    series.setColor(config.theme.visualization.getColorByName(color));
     this.panel.aliasColors[series.alias] = color;
     this.render();
   };

public/app/plugins/panel/graph/threshold_manager.ts

@@ -2,7 +2,6 @@ import 'vendor/flot/jquery.flot';
 import $ from 'jquery';
 import { isNumber } from 'lodash';
 
-import { getColorForTheme } from '@grafana/data';
 import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
 import { config } from 'app/core/config';
 import { CoreEvents } from 'app/types';
@@ -235,12 +234,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: limit },
-            color: getColorForTheme(fillColor, config.theme),
+            color: config.theme.visualization.getColorByName(fillColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: limit },
-            color: getColorForTheme(fillColor, config.theme),
+            color: config.theme.visualization.getColorByName(fillColor),
           });
         }
       }
@@ -248,12 +247,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: threshold.value },
-            color: getColorForTheme(lineColor, config.theme),
+            color: config.theme.visualization.getColorByName(lineColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: threshold.value },
-            color: getColorForTheme(lineColor, config.theme),
+            color: config.theme.visualization.getColorByName(lineColor),
           });
         }
       }

public/app/plugins/panel/graph/time_region_manager.ts

@@ -1,7 +1,7 @@
 import 'vendor/flot/jquery.flot';
 import { map } from 'lodash';
 
-import { getColorForTheme, dateTime, DateTime, AbsoluteTimeRange, GrafanaTheme } from '@grafana/data';
+import { dateTime, DateTime, AbsoluteTimeRange, GrafanaTheme } from '@grafana/data';
 import { config } from 'app/core/config';
 
 type TimeRegionColorDefinition = {
@@ -51,8 +51,8 @@ function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefiniti
 
   if (timeRegion.colorMode === 'custom') {
     return {
-      fill: timeRegion.fill && timeRegion.fillColor ? getColorForTheme(timeRegion.fillColor, theme) : null,
-      line: timeRegion.line && timeRegion.lineColor ? getColorForTheme(timeRegion.lineColor, theme) : null,
+      fill: timeRegion.fill && timeRegion.fillColor ? theme.visualization.getColorByName(timeRegion.fillColor) : null,
+      line: timeRegion.line && timeRegion.lineColor ? theme.visualization.getColorByName(timeRegion.lineColor) : null,
     };
   }
 
@@ -63,8 +63,8 @@ function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefiniti
   }
 
   return {
-    fill: timeRegion.fill ? getColorForTheme(colorMode.color.fill, theme) : null,
-    line: timeRegion.fill ? getColorForTheme(colorMode.color.line, theme) : null,
+    fill: timeRegion.fill ? theme.visualization.getColorByName(colorMode.color.fill) : null,
+    line: timeRegion.fill ? theme.visualization.getColorByName(colorMode.color.line) : null,
   };
 }
 

public/app/plugins/panel/heatmap/color_legend.ts

@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import $ from 'jquery';
 import { find, isEmpty, isNil, sortBy, uniq } from 'lodash';
 
-import { PanelEvents, getColorForTheme } from '@grafana/data';
+import { PanelEvents } from '@grafana/data';
 import coreModule from 'app/angular/core_module';
 import { config } from 'app/core/config';
 import { contextSrv } from 'app/core/core';
@@ -273,7 +273,7 @@ function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; ex
         .attr('width', rangeStep)
         .attr('height', legendHeight)
         .attr('stroke-width', 0)
-        .attr('fill', getColorForTheme(options.cardColor, config.theme))
+        .attr('fill', config.theme.visualization.getColorByName(options.cardColor))
         .style('opacity', (d) => legendOpacityScale(d));
     }
   }

public/app/plugins/panel/heatmap/rendering.ts

@@ -5,7 +5,6 @@ import { find, isEmpty, isNaN, isNil, isString, map, max, min, toNumber } from '
 import {
   dateTimeFormat,
   formattedValueToString,
-  getColorForTheme,
   getValueFormat,
   LegacyGraphHoverClearEvent,
   LegacyGraphHoverEvent,
@@ -660,7 +659,7 @@ export class HeatmapRenderer {
 
   getCardColor(d: { count: any }) {
     if (this.panel.color.mode === 'opacity') {
-      return getColorForTheme(this.panel.color.cardColor, config.theme);
+      return config.theme.visualization.getColorByName(this.panel.color.cardColor);
     } else {
       return this.colorScale(d.count);
     }

public/app/plugins/panel/nodeGraph/Legend.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { identity } from 'lodash';
 import React, { useCallback } from 'react';
 
-import { Field, FieldColorModeId, getColorForTheme, GrafanaTheme } from '@grafana/data';
+import { Field, FieldColorModeId, GrafanaTheme } from '@grafana/data';
 import { LegendDisplayMode } from '@grafana/schema';
 import { Icon, useStyles, useTheme, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui';
 
@@ -97,14 +97,14 @@ function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<Viz
       data: { field: f },
     };
     if (f.config.color?.mode === FieldColorModeId.Fixed && f.config.color?.fixedColor) {
-      item.color = getColorForTheme(f.config.color?.fixedColor || '', theme);
+      item.color = theme.visualization.getColorByName(f.config.color?.fixedColor || '');
     } else if (f.config.color?.mode) {
       item.gradient = f.config.color?.mode;
     }
 
     if (!(item.color || item.gradient)) {
       // Defaults to gray color
-      item.color = getColorForTheme('', theme);
+      item.color = theme.visualization.getColorByName('');
     }
 
     return item;

public/app/plugins/panel/table-old/renderer.ts

@@ -12,7 +12,6 @@ import {
   TimeZone,
   dateTimeFormatISO,
   dateTimeFormat,
-  getColorForTheme,
   GrafanaTheme,
 } from '@grafana/data';
 import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
@@ -77,10 +76,10 @@ export class TableRenderer {
     }
     for (let i = style.thresholds.length; i > 0; i--) {
       if (value >= style.thresholds[i - 1]) {
-        return getColorForTheme(style.colors[i], this.theme);
+        return this.theme.visualization.getColorByName(style.colors[i]);
       }
     }
-    return getColorForTheme(first(style.colors), this.theme);
+    return this.theme.visualization.getColorByName(first(style.colors));
   }
 
   defaultCellFormatter(v: any, style: ColumnStyle) {