How to use the @elastic/eui/dist/eui_theme_light.json.euiColorVis5 function in @elastic/eui

function getServiceColors(services: string[]) {
  const assignedColors = [
    theme.euiColorVis1,
    theme.euiColorVis0,
    theme.euiColorVis3,
    theme.euiColorVis2,
    theme.euiColorVis6,
    theme.euiColorVis7,
    theme.euiColorVis5
  ];

  return zipObject(services, assignedColors) as IServiceColors;
}

import { mergeProjection } from '../../../../../../common/projections/util/merge_projection';
import {
  SERVICE_AGENT_NAME,
  LABEL_NAME,
  METRIC_JAVA_GC_COUNT,
  METRIC_JAVA_GC_TIME
} from '../../../../../../common/elasticsearch_fieldnames';
import { getBucketSize } from '../../../../helpers/get_bucket_size';

const colors = [
  theme.euiColorVis0,
  theme.euiColorVis1,
  theme.euiColorVis2,
  theme.euiColorVis3,
  theme.euiColorVis4,
  theme.euiColorVis5,
  theme.euiColorVis6
];

export async function fetchAndTransformGcMetrics({
  setup,
  serviceName,
  serviceNodeName,
  chartBase,
  fieldName
}: {
  setup: Setup;
  serviceName: string;
  serviceNodeName?: string;
  chartBase: ChartBase;
  fieldName: typeof METRIC_JAVA_GC_COUNT | typeof METRIC_JAVA_GC_TIME;
}) {

function getServiceColors(services: string[]) {
  const assignedColors = [
    theme.euiColorVis1,
    theme.euiColorVis0,
    theme.euiColorVis3,
    theme.euiColorVis2,
    theme.euiColorVis6,
    theme.euiColorVis7,
    theme.euiColorVis5
  ];

  return zipObject(services, assignedColors) as IServiceColors;
}

render: (value: TableData['severity']) => (
      
        {value}
      
    ),
    truncateText: true,

function getColorByKey(keys: string[]) {
  const assignedColors: StringMap = {
    'HTTP 2xx': theme.euiColorVis0,
    'HTTP 3xx': theme.euiColorVis5,
    'HTTP 4xx': theme.euiColorVis7,
    'HTTP 5xx': theme.euiColorVis2
  };

  const unknownKeys = difference(keys, Object.keys(assignedColors));
  const unassignedColors: StringMap = zipObject(unknownKeys, [
    theme.euiColorVis1,
    theme.euiColorVis3,
    theme.euiColorVis4,
    theme.euiColorVis6,
    theme.euiColorVis2,
    theme.euiColorVis8
  ]);

  return (key: string) => assignedColors[key] || unassignedColors[key];
}

function getColorByKey(keys: string[]) {
  const assignedColors: StringMap = {
    'HTTP 2xx': theme.euiColorVis0,
    'HTTP 3xx': theme.euiColorVis5,
    'HTTP 4xx': theme.euiColorVis7,
    'HTTP 5xx': theme.euiColorVis2
  };

  const unknownKeys = difference(keys, Object.keys(assignedColors));
  const unassignedColors: StringMap = zipObject(unknownKeys, [
    theme.euiColorVis1,
    theme.euiColorVis3,
    theme.euiColorVis4,
    theme.euiColorVis6,
    theme.euiColorVis2,
    theme.euiColorVis8
  ]);

  return (key: string) => assignedColors[key] || unassignedColors[key];
}

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { AggregationSearchResponse, AggregatedValue } from 'elasticsearch';
import { ChartBase } from './types';

const colors = [
  theme.euiColorVis0,
  theme.euiColorVis1,
  theme.euiColorVis2,
  theme.euiColorVis3,
  theme.euiColorVis4,
  theme.euiColorVis5,
  theme.euiColorVis6
];

export type GenericMetricsChart = ReturnType<
  typeof transformDataToMetricsChart
>;

interface AggregatedParams {
  body: {
    aggs: {
      timeseriesData: {
        date_histogram: any;
        aggs: {
          min?: any;
          max?: any;
          sum?: any;

title: i18n.translate('xpack.apm.chart.cpuSeries.systemAverageLabel', {
      defaultMessage: 'System average'
    }),
    color: theme.euiColorVis0
  },
  processCPUMax: {
    title: i18n.translate('xpack.apm.chart.cpuSeries.processMaxLabel', {
      defaultMessage: 'Process max'
    }),
    color: theme.euiColorVis7
  },
  processCPUAverage: {
    title: i18n.translate('xpack.apm.chart.cpuSeries.processAverageLabel', {
      defaultMessage: 'Process average'
    }),
    color: theme.euiColorVis5
  }
};

const chartBase: ChartBase = {
  title: i18n.translate('xpack.apm.serviceDetails.metrics.cpuUsageChartTitle', {
    defaultMessage: 'CPU usage'
  }),
  key: 'cpu_usage_chart',
  type: 'linemark',
  yUnit: 'percent',
  series
};

export async function getCPUChartData(
  setup: Setup,
  serviceName: string,

function getColorByKey(keys: string[]) {
  const assignedColors: StringMap = {
    'HTTP 2xx': theme.euiColorVis0,
    'HTTP 3xx': theme.euiColorVis5,
    'HTTP 4xx': theme.euiColorVis7,
    'HTTP 5xx': theme.euiColorVis2
  };

  const unknownKeys = difference(keys, Object.keys(assignedColors));
  const unassignedColors: StringMap = zipObject(unknownKeys, [
    theme.euiColorVis1,
    theme.euiColorVis3,
    theme.euiColorVis4,
    theme.euiColorVis6,
    theme.euiColorVis2,
    theme.euiColorVis8
  ]);

  return (key: string) => assignedColors[key] || unassignedColors[key];
}

title: i18n.translate('xpack.apm.chart.cpuSeries.systemAverageLabel', {
      defaultMessage: 'System average'
    }),
    color: theme.euiColorVis0
  },
  processCPUMax: {
    title: i18n.translate('xpack.apm.chart.cpuSeries.processMaxLabel', {
      defaultMessage: 'Process max'
    }),
    color: theme.euiColorVis7
  },
  processCPUAverage: {
    title: i18n.translate('xpack.apm.chart.cpuSeries.processAverageLabel', {
      defaultMessage: 'Process average'
    }),
    color: theme.euiColorVis5
  }
};

const chartBase: ChartBase = {
  title: i18n.translate('xpack.apm.serviceDetails.metrics.cpuUsageChartTitle', {
    defaultMessage: 'CPU usage'
  }),
  key: 'cpu_usage_chart',
  type: 'linemark',
  yUnit: 'percent',
  series
};

export async function getCPUChartData(setup: Setup, serviceName: string) {
  const metricsChart = await fetchAndTransformMetrics({
    setup,