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

const CommitId = styled.span`
  display: inline-block;
  padding: 0 ${theme.paddingSizes.xs};
  border: ${theme.euiBorderThin};
`;

const Addition = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
  border-radius: ${theme.euiSizeXS};
  color: white;
  margin-right: ${theme.euiSizeS};
  background-color: ${theme.euiColorDanger};
`;

const Deletion = styled(Addition)`
  background-color: ${theme.euiColorVis0};
`;

const Container = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.m};
`;

const TopBarContainer = styled.div`
  height: calc(48rem / 14);
  border-bottom: ${theme.euiBorderThin};
  padding: 0 ${theme.paddingSizes.m};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

// @types/styled-components@3.0.1 does not yet support `defaultProps`, which EuiAccordion uses

function getIconColor(type) {
  switch (type) {
    case 'field':
      return theme.euiColorVis7;
    case 'value':
      return theme.euiColorVis0;
    case 'operator':
      return theme.euiColorVis1;
    case 'conjunction':
      return theme.euiColorVis3;
    case 'recentSearch':
      return theme.euiColorMediumShade;
  }
}

function getIconColor(type) {
  switch (type) {
    case 'field':
      return theme.euiColorVis7;
    case 'value':
      return theme.euiColorVis0;
    case 'operator':
      return theme.euiColorVis1;
    case 'conjunction':
      return theme.euiColorVis3;
    case 'recentSearch':
      return theme.euiColorMediumShade;
  }
}

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;
}

function getIconColor(type) {
  switch (type) {
    case 'field':
      return theme.euiColorVis7;
    case 'value':
      return theme.euiColorVis0;
    case 'operator':
      return theme.euiColorVis1;
    case 'conjunction':
      return theme.euiColorVis3;
    case 'recentSearch':
      return theme.euiColorMediumShade;
  }
}

const CommitId = styled.span`
  display: inline-block;
  padding: 0 ${theme.paddingSizes.xs};
  border: ${theme.euiBorderThin};
`;

const Addition = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
  border-radius: ${theme.euiSizeXS};
  color: white;
  margin-right: ${theme.euiSizeS};
  background-color: ${theme.euiColorDanger};
`;

const Deletion = styled(Addition)`
  background-color: ${theme.euiColorVis0};
`;

const Container = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.m};
`;

const TopBarContainer = styled.div`
  height: calc(48rem / 14);
  border-bottom: ${theme.euiBorderThin};
  padding: 0 ${theme.paddingSizes.m};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const Accordion = styled(EuiAccordion)`

import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import {
  METRIC_JAVA_THREAD_COUNT,
  SERVICE_AGENT_NAME
} from '../../../../../../common/elasticsearch_fieldnames';
import { Setup } from '../../../../helpers/setup_request';
import { ChartBase } from '../../../types';
import { fetchAndTransformMetrics } from '../../../fetch_and_transform_metrics';

const series = {
  threadCount: {
    title: i18n.translate('xpack.apm.agentMetrics.java.threadCount', {
      defaultMessage: 'Avg. count'
    }),
    color: theme.euiColorVis0
  },
  threadCountMax: {
    title: i18n.translate('xpack.apm.agentMetrics.java.threadCountMax', {
      defaultMessage: 'Max count'
    }),
    color: theme.euiColorVis1
  }
};

const chartBase: ChartBase = {
  title: i18n.translate('xpack.apm.agentMetrics.java.threadCountChartTitle', {
    defaultMessage: 'Thread Count'
  }),
  key: 'thread_count_line_chart',
  type: 'linemark',
  yUnit: 'number',

import {
  METRIC_JAVA_HEAP_MEMORY_MAX,
  METRIC_JAVA_HEAP_MEMORY_COMMITTED,
  METRIC_JAVA_HEAP_MEMORY_USED,
  SERVICE_AGENT_NAME
} from '../../../../../../common/elasticsearch_fieldnames';
import { Setup } from '../../../../helpers/setup_request';
import { fetchAndTransformMetrics } from '../../../fetch_and_transform_metrics';
import { ChartBase } from '../../../types';

const series = {
  heapMemoryUsed: {
    title: i18n.translate('xpack.apm.agentMetrics.java.heapMemorySeriesUsed', {
      defaultMessage: 'Avg. used'
    }),
    color: theme.euiColorVis0
  },
  heapMemoryCommitted: {
    title: i18n.translate(
      'xpack.apm.agentMetrics.java.heapMemorySeriesCommitted',
      {
        defaultMessage: 'Avg. committed'
      }
    ),
    color: theme.euiColorVis1
  },
  heapMemoryMax: {
    title: i18n.translate('xpack.apm.agentMetrics.java.heapMemorySeriesMax', {
      defaultMessage: 'Avg. limit'
    }),
    color: theme.euiColorVis2
  }

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