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

${Row}:first-child> & {
    padding-top: 0;
  }

  ${Row}:last-child> & {
    padding-bottom: 0;
  }

  &:first-child {
    width: ${px(units.unit * 12)};
    font-weight: bold;
  }
`;

const EmptyValue = styled.span`
  color: ${theme.euiColorMediumShade};
`;

export function FormattedKey({
  k,
  value
}: {
  k: string;
  value: unknown;
}): JSX.Element {
  if (value == null) {
    return {k};
  }

  return {k};
}

position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 0 ${borderRadius};
  background: ${props =>
    props.isLibraryFrame
      ? theme.euiColorEmptyShade
      : theme.euiColorLightestShade};
`;

const LineNumber = styled.div<{ highlight: boolean }>`
  position: relative;
  min-width: ${px(units.eighth * 21)};
  padding-left: ${px(units.half)};
  padding-right: ${px(units.quarter)};
  color: ${theme.euiColorMediumShade};
  line-height: ${px(unit + units.eighth)};
  text-align: right;
  border-right: 1px solid ${theme.euiColorLightShade};
  background-color: ${props =>
    props.highlight ? tint(0.1, theme.euiColorWarning) : null};

  &:last-of-type {
    border-radius: 0 0 0 ${borderRadius};
  }
`;

const LineContainer = styled.div`
  overflow: auto;
  margin: 0 0 0 ${px(units.eighth * 21)};
  padding: 0;
  background-color: ${theme.euiColorEmptyShade};

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

/*
 * 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 React, { Fragment } from 'react';
import styled from 'styled-components';
import { idx } from '@kbn/elastic-idx';
import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
import { fontFamilyCode, fontSize, px, units } from '../../../style/variables';

const FileDetails = styled.div`
  color: ${theme.euiColorMediumShade};
  padding: ${px(units.half)};
  font-family: ${fontFamilyCode};
  font-size: ${fontSize};
`;
const LibraryFrameFileDetail = styled.span`
  color: ${theme.euiColorDarkShade};
`;
const AppFrameFileDetail = styled.span`
  font-weight: bold;
  color: ${theme.euiColorFullShade};
`;

interface Props {
  stackframe: IStackframe;
  isLibraryFrame: boolean;
}

} from '../../../services/rest/apm/error_groups';
import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
import { FilterBar } from '../../shared/FilterBar';
import { DetailView } from './DetailView';
import { ErrorDistribution } from './Distribution';
import { useLocation } from '../../../hooks/useLocation';
import { useUrlParams } from '../../../hooks/useUrlParams';

const Titles = styled.div`
  margin-bottom: ${px(units.plus)};
`;

const Label = styled.div`
  margin-bottom: ${px(units.quarter)};
  font-size: ${fontSizes.small};
  color: ${theme.euiColorMediumShade};
`;

const Message = styled.div`
  font-family: ${fontFamilyCode};
  font-weight: bold;
  font-size: ${fontSizes.large};
  margin-bottom: ${px(units.half)};
`;

const Culprit = styled.div`
  font-family: ${fontFamilyCode};
`;

function getShortGroupId(errorGroupId?: string) {
  if (!errorGroupId) {
    return NOT_AVAILABLE_LABEL;

const Footer = styled.div`
  color: ${theme.euiColorMediumShade};
  margin: ${px(units.half)};
  font-size: ${fontSizes.small};
`;

const LegendContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${px(units.quarter)};
  justify-content: space-between;
`;

const LegendGray = styled(Legend)`
  color: ${theme.euiColorMediumShade};
  padding-bottom: 0;
`;

const Value = styled.div`
  color: ${theme.euiColorDarkShade};
  font-size: ${fontSize};
`;

export default function Tooltip({
  header,
  footer,
  tooltipPoints,
  x,
  y,
  ...props
}) {

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

import { ApmHeader } from '../../shared/ApmHeader';
import { DetailView } from './DetailView';
import { ErrorDistribution } from './Distribution';
import { useLocation } from '../../../hooks/useLocation';
import { useUrlParams } from '../../../hooks/useUrlParams';
import { useTrackPageview } from '../../../../../infra/public';
import { callApmApi } from '../../../services/rest/callApmApi';

const Titles = styled.div`
  margin-bottom: ${px(units.plus)};
`;

const Label = styled.div`
  margin-bottom: ${px(units.quarter)};
  font-size: ${fontSizes.small};
  color: ${theme.euiColorMediumShade};
`;

const Message = styled.div`
  font-family: ${fontFamilyCode};
  font-weight: bold;
  font-size: ${fontSizes.large};
  margin-bottom: ${px(units.half)};
`;

const Culprit = styled.div`
  font-family: ${fontFamilyCode};
`;

function getShortGroupId(errorGroupId?: string) {
  if (!errorGroupId) {
    return NOT_AVAILABLE_LABEL;

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 Footer = styled.div`
  color: ${theme.euiColorMediumShade};
  margin: ${px(units.half)};
  font-size: ${fontSizes.small};
`;

const LegendContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${px(units.quarter)};
  justify-content: space-between;
`;

const LegendGray = styled(Legend)`
  color: ${theme.euiColorMediumShade};
  padding-bottom: 0;
  padding-right: ${px(units.half)};
`;

const Value = styled.div`
  color: ${theme.euiColorDarkShade};
  font-size: ${fontSize};
`;

export default function Tooltip({
  header,
  footer,
  tooltipPoints,
  x,
  y,
  ...props